feat: add search

assets/js/index.js

@@ -2,3 +2,4 @@ import './lib/dark-mode';
 import './lib/fitvids';
 import './lib/infinite-scroll';
 import './lib/nav-collapse';
+import './lib/search';

assets/js/lib/nav-collapse.js

@@ -5,9 +5,10 @@ function toggleMenu() {
 }
 
 document.querySelector("#menushow").addEventListener("click", toggleMenu);
-document.querySelectorAll(".menu__item").forEach(menu =>
+document.querySelectorAll(".menu__nav-item").forEach(menu =>
     menu.addEventListener("click", toggleMenu)
 );
+document.getElementById("darkMode").addEventListener("click", toggleMenu);
 
 var nav = document.querySelector('.site-header');
 var feed = document.querySelector('main');

assets/js/lib/search.js

@@ -0,0 +1,37 @@
+async function searchPosts(query) {
+    const apiEndpoint = window.yurikoSearchEndpoint + "/api/article/search?"
+    const queryString = "q="
+    const pageString = "&page="
+    let page = 1
+
+    var data = await fetch(apiEndpoint + queryString + query + pageString + page)
+    var search = await data.json();
+    var result = search.result.map(x => {
+        return `
+        <div class="menu__search-result">
+            <a href="${x.url}"><h2 class="menu__search-title">${x.title}</h2></a>
+            <p class="menu__search-desc">${x.excerpt}</p>
+        </div>
+        `;
+    }).join("");
+
+    document.getElementById("search-results").innerHTML = result;
+}
+
+let searchTimeout;
+
+if (window.yurikoSearchEndpoint != undefined) {
+    var el = document.getElementById("search-query");
+    el.addEventListener("input", function (e) {
+        if (searchTimeout) window.clearTimeout(searchTimeout);
+        var val = el.value;
+        if (val !== "") {
+            document.getElementById("nav-menu").classList.add("menu__item--hidden")
+            searchTimeout = window.setTimeout(() => searchPosts(val), 2000);
+        } else {
+            document.getElementById("nav-menu").classList.remove("menu__item--hidden")
+
+            document.getElementById("search-results").innerHTML = ``;
+        }
+    });
+}

partials/navigation.hbs

@@ -1,14 +1,22 @@
 <div class="menu">
-    {{#foreach navigation}}
-    <div class="menu__item">
-        <a href={{url absolute="true" }}>
-            <p class="menu__text">{{label}}</p>
-        </a>
+    <div id="nav-menu">
+        {{#foreach navigation}}
+        <div class="menu__item menu__nav-item">
+            <a href={{url absolute="true" }}>
+                <p class="menu__text">{{label}}</p>
+            </a>
+        </div>
+        {{/foreach}}
+        <div class="menu__item" id="darkMode">
+            <i class="menu__icon material-icons md-24">brightness_low</i>
+            <p class="menu__text">Dark Mode</p>
+        </div>
     </div>
-    {{/foreach}}
+    <div class="menu__item" id="search">
+        <i class="menu__icon material-icons md-24">search</i>
+        <input type="text" id="search-query" class="menu__search-input"></input>
+    </div>
+    <div id="search-results" class="menu__search-results">
 
-    <div class="menu__item" id="darkMode">
-        <i class="menu__icon material-icons md-24">brightness_low</i>
-        <p class="menu__text">Dark Mode</p>
     </div>
 </div>