MDX search bar 기능 구현

.github/workflows/node-js.yml

@@ -10,7 +10,7 @@ jobs:
         runs-on: ubuntu-latest
         strategy:
             matrix:
-                node-version: [14.x, 16.x]
+                node-version: [16.x, 21.x]
 
         steps:
             - name: Checkout

.github/workflows/pr-deploy-preview.yml

@@ -0,0 +1,40 @@
+name: Netlify PR Preview
+
+on:
+  pull_request:
+    branches:
+      - "develop/**"
+      - "feature/**"
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+jobs:
+  deploy-draft:
+    name: Deploy draft to Netlify
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v1
+
+      - name: Set up Node.js
+        uses: actions/setup-node@master
+        with:
+          node-version: 16.x
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build page
+        run: yarn build
+
+      - name: Deploy draft to Netlify
+        uses: evnex/netlify-deploy@v1.0.4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}
+          build-dir: "./build"
+          draft: true
+          comment-on-pull-request: true

src/components/mdx-searchbar/searchbar.js

@@ -6,12 +6,79 @@ export default function SearchBar() {
 
     function handleKeyPress(event) {
         // event.preventDefault();
-        if(event.key === 'Enter'){
-            console.log(document.getElementById('search-input').value);
-            // Working on here..
+        if (event.key === 'Enter') {
+            // console.log(document.getElementById('search-input').value);
+            handleSearch();
         }
     }
 
+    function handleSearch() {
+        if (!searchString || searchString.trim().length < 2) {
+            alert("2글자 이상 입력해주십쇼 ㅡㅅㅡ\nPlz type more than 2 characters.");
+            return;
+        }
+        // convert to lowercase & whitespace to dash
+        const normalizedSearch = searchString.trim().toLowerCase().replace(/\s+/g, '-');
+
+        // query all anchor ids in the page
+        const anchors = Array.from(document.querySelectorAll('[id]'));
+
+        // search anchor id with normalized keyword
+        const matchedAnchor = anchors.find(anchor => {
+            const anchorId = anchor.id.toLowerCase();
+            return anchorId.includes(normalizedSearch);
+        });
+
+        if (matchedAnchor) {
+            /* Allow navigation to the same hash URL even if already at that position */
+            // Remove existing hash then re-set
+            // Synchronously changing the hash twice may cause browsers to ignore the first or override with the second
+            // -> no navigation
+            // -> so we have to cheat the browser
+            const tempHash = '#_temp';
+            // set fake hash: reload x scroll x -> only change URL
+            // -> to cheat the browser to think it's in a different state
+            history.replaceState(null, null, tempHash);
+
+            // set real hash in the next event loop tick
+            setTimeout(() => {
+                // Type A. move directly
+                // location.hash = '#' + matchedAnchor.id;
+
+                // Type B. scroll animation
+                matchedAnchor.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+
+                // update browser url state
+                history.replaceState(null, null, '#' + matchedAnchor.id);
+
+                // highlight target anchor
+                highlightElement(matchedAnchor);
+            }, 0);
+        } else {
+            alert('그런 단어는 없는뎁쇼 ㅇㅅㅇ\nSowwy~ no such word here!');
+        }
+    }
+
+    function highlightElement(el) {
+        // reset
+        el.classList.remove('highlight-active', 'highlight-fade-out');
+        void el.offsetWidth; // reflow
+
+        // highlight for 1.5s then fadeout for .5s
+        el.classList.add('highlight-active');
+
+        setTimeout(() => {
+            el.classList.add('highlight-fade-out');
+        }, 1500);
+
+        setTimeout(() => { // 1.5s + .5s -> 2s
+            el.classList.remove('highlight-active', 'highlight-fade-out');
+        }, 2000);
+    }
+
     return (
         <div className={styles.SearchbarBackground}>
             <div className={styles.titleContainer}>
@@ -20,9 +87,9 @@ export default function SearchBar() {
             </div>
 
             <fieldset className={styles.fieldContainer} onKeyPress={handleKeyPress}>
-                <input type="text" defaultValue={searchString} placeholder="Search..." id="search-input" className={styles.field} 
-                onChange={event => setSearchString(event.target.value)} />
-                <div className={styles.iconsContainer}>
+                <input type="text" defaultValue={searchString} placeholder="Search..." id="search-input" className={styles.field}
+                    onChange={event => setSearchString(event.target.value)} />
+                <div className={styles.iconsContainer} onClick={handleSearch}>
                     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 56.966 56.966">
                         <path fill="#009BFF" d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23
                                 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92

src/components/mdx-searchbar/searchbar.module.scss

@@ -50,6 +50,7 @@ $snappy:  cubic-bezier(0.694,  0.048, 0.335, 1.000);
     border: 0;
     width: 100%;
     height: 50px;
+    font-family: "SUIT-Regular", "Sans-serif";
     padding: 10px 20px;
     background: white;
     border-radius: 3px;
@@ -64,6 +65,10 @@ $snappy:  cubic-bezier(0.694,  0.048, 0.335, 1.000);
     }
 }
 
+html[data-theme=dark] .field {
+    background-color: var(--ifm-code-background);
+}
+
 .iconsContainer {
     position: absolute;
     top: 60%;
@@ -74,6 +79,7 @@ $snappy:  cubic-bezier(0.694,  0.048, 0.335, 1.000);
     opacity: 0.5;
     transform: translateY(50%);
     transition: opacity 0.25s ease, transform 0.43s $snappy;
+    cursor: pointer;
 }
 
 .iconSearch {

src/css/custom.scss

@@ -188,6 +188,16 @@ article {
   font-family: "SUIT-Regular", "Sans-serif";
 }
 
+/* article anchor highlight */
+.highlight-active {
+  background-color: rgba(255, 255, 0, 0.5);
+  transition: background-color 0s;
+}
+.highlight-fade-out {
+  transition: background-color 0.5s ease;
+  background-color: transparent;
+}
+
 code {
   background-color: var(--ifm-code-background);
   border: 2px solid rgba(0, 0, 0, 0.05);