feat: build website

static/js/search.js

@@ -0,0 +1,138 @@
+async function searchOnChange(evt) {
+  let searchQuery = evt.target.value;
+  var inputEle = document.querySelectorAll("input#search");
+  inputEle.forEach((element) => {
+    element.value = searchQuery;
+  });
+
+  if (searchQuery !== "") {
+    if (!window.searchJson) {
+      window.searchJson = await fetch("/index.json").then((res) => res.json());
+    }
+
+    let searchResults = searchJson.filter((item) => {
+      let res = false;
+      if (item.title && item.description && item.content) {
+        res =
+          item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          item.content.toLowerCase().includes(searchQuery.toLowerCase());
+      } else if (item.title && item.description) {
+        res =
+          item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          item.description.toLowerCase().includes(searchQuery.toLowerCase());
+      } else if (item.title && item.content) {
+        res =
+          item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          item.content.toLowerCase().includes(searchQuery.toLowerCase());
+      } else if (item.description && item.content) {
+        res =
+          item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          item.content.toLowerCase().includes(searchQuery.toLowerCase());
+      } else if (item.title) {
+        res = item.title.toLowerCase().includes(searchQuery.toLowerCase());
+      } else if (item.description) {
+        res = item.description
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase());
+      } else if (item.content) {
+        res = item.content.toLowerCase().includes(searchQuery.toLowerCase());
+      }
+      return res;
+    });
+    if (searchResults.length > 0) {
+      let searchResultsHtml = "";
+      searchResults.map((item) => {
+        searchResultsHtml += `<div class="card">
+                        <a href="${item.permalink}">
+                            <div class="p-3">
+                                <h5>${item.title}</h5>
+                                <div>${item.description}</div>
+                            </div>
+                       </a>
+                    </div>`;
+      });
+      document.getElementById("search-results").innerHTML = searchResultsHtml;
+    } else {
+      let searchResultsHtml = `<p class="text-center py-3">No results found for "${searchQuery}"</p>`;
+      document.getElementById("search-results").innerHTML = searchResultsHtml;
+    }
+    alignSearchContent();
+    document.getElementById("search-content").style.display = "block";
+  } else {
+    document.getElementById("search-content").style.display = "none";
+    document.getElementById("search-results").innerHTML = "";
+  }
+}
+
+function alignSearchContent() {
+  const searchButtonEle = document.querySelectorAll("#search");
+  // check if search value is not empty
+  for (let i = 0; i < searchButtonEle.length; i++) {
+    if (searchButtonEle[i].value !== "") {
+      let searchButtonPosition;
+      if (window.innerWidth > 768) {
+        searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
+        document.getElementById("search-content").style.width = "500px";
+      } else {
+        var navbarCollapse = document.querySelector("#navbarContent");
+        navbarCollapse.classList.add("show");
+        searchButtonPosition = searchButtonEle[1].getBoundingClientRect();
+        document.getElementById("search-content").style.width = "300px";
+      }
+
+      document.getElementById("search-content").style.top =
+        searchButtonPosition.top + 50 + "px";
+      document.getElementById("search-content").style.left =
+        searchButtonPosition.left + "px";
+    }
+  }
+}
+
+function resetSearch(e) {
+  if (
+    e.keyCode === 27 ||
+    (e.target.id !== "search" &&
+      e.target.closest("section#search-content") === null)
+  ) {
+    if (document.getElementById("search-results").innerHTML !== "") {
+      document.getElementById("search-content").style.display = "none";
+      document.getElementById("search-results").innerHTML = "";
+      var inputEle = document.querySelectorAll("input#search");
+      inputEle.forEach((element) => {
+        element.value = "";
+        element.blur();
+      });
+    }
+  }
+}
+
+document.onkeyup = function () {
+  switch (event.keyCode) {
+    // ESC
+    case 27:
+      resetSearch(event);
+      break;
+
+    // ctrl + k
+    case 75:
+      if (event.ctrlKey) {
+        document.getElementById("search").focus();
+      }
+      break;
+  }
+};
+
+window.addEventListener("keydown", function (e) {
+  if (e.keyCode === 75 && e.ctrlKey) {
+    e.preventDefault();
+  }
+});
+
+// Close search on click outside and on resize
+document.addEventListener("click", function (e) {
+  resetSearch(e);
+});
+window.addEventListener("resize", function (e) {
+  alignSearchContent();
+});