chore: search cleanup

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "1.5.17",
+  "version": "1.5.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.5.17",
+      "version": "1.5.18",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "1.5.17",
+  "version": "1.5.18",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {

src/assets/scripts/index.js

@@ -1,96 +1,4 @@
 window.addEventListener("load", () => {
-  // menu keyboard controls
-  (() => {
-    const menuInput = document.getElementById("menu-toggle");
-    const menuButtonContainer = document.querySelector(
-      ".menu-button-container"
-    );
-    const menuItems = document.querySelectorAll(".menu-primary li");
-
-    menuButtonContainer.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        menuInput.checked = !menuInput.checked;
-      }
-    });
-
-    menuItems.forEach((item) => {
-      item.addEventListener("keydown", (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          item.querySelector("a").click();
-        }
-      });
-    });
-
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape" && menuInput.checked) menuInput.checked = false;
-    });
-  })();
-
-  // modal keyboard controls and scroll management
-  (() => {
-    const modalInputs = document.querySelectorAll(".modal-input");
-    if (!modalInputs) return;
-
-    const toggleBodyScroll = (disableScroll) => {
-      if (disableScroll) {
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.overflow = "";
-      }
-    };
-
-    const checkModals = () => {
-      let isAnyModalOpen = false;
-      modalInputs.forEach((modalInput) => {
-        if (modalInput.checked) isAnyModalOpen = true;
-      });
-      toggleBodyScroll(isAnyModalOpen);
-    };
-
-    modalInputs.forEach((modalInput) => {
-      modalInput.addEventListener("change", checkModals);
-    });
-
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") {
-        modalInputs.forEach((modalInput) => {
-          if (modalInput.checked) modalInput.checked = false;
-        });
-        toggleBodyScroll(false);
-      }
-    });
-
-    checkModals();
-  })();
-
-  // text toggle for media pages
-  (() => {
-    const button = document.querySelector("[data-toggle-button]");
-    const content = document.querySelector("[data-toggle-content]");
-    const text = document.querySelectorAll("[data-toggle-content] p");
-    const minHeight = 500; // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css
-    const interiorHeight = Array.from(text).reduce(
-      (acc, node) => acc + node.scrollHeight,
-      0
-    );
-
-    if (!button || !content || !text) return;
-
-    if (interiorHeight < minHeight) {
-      content.classList.remove("text-toggle-hidden");
-      button.style.display = "none";
-      return;
-    }
-
-    button.addEventListener("click", () => {
-      const isHidden = content.classList.toggle("text-toggle-hidden");
-      button.textContent = isHidden ? "Show more" : "Show less";
-    });
-  })();
-
-  // search logic
   (() => {
     if (typeof MiniSearch === "undefined") return;
 
@@ -113,14 +21,14 @@ window.addEventListener("load", () => {
         boost: { title: 5, tags: 2, description: 1 },
       },
     });
+
     const $form = document.querySelector(".search__form");
     const $input = document.querySelector(".search__form--input");
-    const $fallback = document.querySelector(".search__form--fallback");
+    const $results = document.querySelector(".search__results");
+    const $loadMoreButton = document.querySelector(".search__load-more");
     const $typeCheckboxes = document.querySelectorAll(
       '.search__form--type input[type="checkbox"]'
     );
-    const $results = document.querySelector(".search__results");
-    const $loadMoreButton = document.querySelector(".search__load-more");
 
     $form.removeAttribute("action");
     $form.removeAttribute("method");
@@ -130,24 +38,21 @@ window.addEventListener("load", () => {
     let currentPage = 1;
     let currentResults = [];
     let total = 0;
-    let resultsById = {};
-    let debounceTimeout;
 
-    const parseMarkdown = (markdown) => {
+    const parseMarkdown = (markdown) =>
-      if (!markdown) return "";
+      markdown
-      return markdown
+        ? markdown
-        .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+            .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
-        .replace(/\*(.*?)\*/g, "<em>$1</em>")
+            .replace(/\*(.*?)\*/g, "<em>$1</em>")
-        .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
+            .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
-        .replace(/\n/g, "<br>")
+            .replace(/\n/g, "<br>")
-        .replace(/[#*_~`]/g, "");
+            .replace(/[#*_~`]/g, "")
-    };
+        : "";
 
     const truncateDescription = (markdown, maxLength = 150) => {
-      const htmlDescription = parseMarkdown(markdown);
+      const plainText =
-      const tempDiv = document.createElement("div");
+        new DOMParser().parseFromString(parseMarkdown(markdown), "text/html")
-      tempDiv.innerHTML = htmlDescription;
+          .body.textContent || "";
-      const plainText = tempDiv.textContent || tempDiv.innerText || "";
       return plainText.length > maxLength
         ? `${plainText.substring(0, maxLength)}...`
         : plainText;
@@ -159,80 +64,44 @@ window.addEventListener("load", () => {
         : title;
 
     const renderSearchResults = (results) => {
-      if (results.length > 0) {
+      const resultHTML = results
-        const resultHTML = results
+        .map(
-          .map(({ title, url, description, type, total_plays }) => {
+          ({ title, url, description, type, total_plays }) => `
-            const truncatedDesc = truncateDescription(description);
+        <li class="search__results--result">
-            const formattedTitle =
+          <a href="${url}">
-              type === "artist" && total_plays !== undefined
+            <h3>${
+              type === "artist" && total_plays
                 ? formatArtistTitle(title, total_plays)
-                : title;
+                : title
-
+            }</h3>
-            return `
+          </a>
-                    <li class="search__results--result">
+          <p>${truncateDescription(description)}</p>
-                        <a href="${url}">
+        </li>
-                            <h3>${formattedTitle}</h3>
+      `
-                        </a>
+        )
-                        <p>${truncatedDesc}</p>
-                    </li>
-                `;
-          })
-          .join("");
-
-        $results.innerHTML = resultHTML;
-        $results.style.display = "block";
-      } else {
-        $results.innerHTML =
-          '<li class="search__results--no-results">No results found.</li>';
-        $results.style.display = "block";
-      }
-    };
-
-    const appendSearchResults = (results) => {
-      const newResults = results
-        .map(({ title, url, description, type, total_plays }) => {
-          const truncatedDesc = truncateDescription(description);
-          const formattedTitle =
-            type === "artist" && total_plays !== undefined
-              ? formatArtistTitle(title, total_plays)
-              : title;
-
-          return `
-                <li class="search__results--result">
-                    <a href="${url}"><h3>${formattedTitle}</h3></a>
-                    <p>${truncatedDesc}</p>
-                </li>
-            `;
-        })
         .join("");
-      $results.insertAdjacentHTML("beforeend", newResults);
+
+      $results.innerHTML =
+        resultHTML ||
+        '<li class="search__results--no-results">No results found.</li>';
+      $results.style.display = "block";
     };
 
-    const loadSearchIndex = async (query = "", types = [], page = 1) => {
+    const loadSearchIndex = async (query, types, page) => {
-      const typeQuery = types.join(",");
-
       try {
+        const typeQuery = types.join(",");
         const response = await fetch(
           `https://coryd.dev/api/search?q=${query}&type=${typeQuery}&page=${page}&pageSize=${PAGE_SIZE}`
         );
-        const index = await response.json();
+        const { results, total: newTotal } = await response.json();
-        const results = index.results || [];
+        total = newTotal;
-
-        total = index.total || results.length;
 
         const formattedResults = results.map((item) => ({
           ...item,
           id: item.result_id,
         }));
-
-        resultsById = formattedResults.reduce((acc, item) => {
-          acc[item.id] = item;
-          return acc;
-        }, {});
-
         miniSearch.removeAll();
         miniSearch.addAll(formattedResults);
-
         return formattedResults;
       } catch (error) {
         console.error("Error fetching search data:", error);
@@ -242,8 +111,8 @@ window.addEventListener("load", () => {
 
     const getSelectedTypes = () =>
       Array.from($typeCheckboxes)
-        .filter((checkbox) => checkbox.checked)
+        .filter((cb) => cb.checked)
-        .map((checkbox) => checkbox.value);
+        .map((cb) => cb.value);
 
     const updateSearchResults = (results) => {
       if (currentPage === 1) {
@@ -251,43 +120,52 @@ window.addEventListener("load", () => {
       } else {
         appendSearchResults(results);
       }
-
+      $loadMoreButton.style.display =
-      const moreResultsToShow = currentPage * PAGE_SIZE < total;
+        currentPage * PAGE_SIZE < total ? "block" : "none";
-      $loadMoreButton.style.display = moreResultsToShow ? "block" : "none";
     };
 
-    $input.addEventListener("input", () => {
+    const appendSearchResults = (results) => {
-      const query = $input.value.trim();
+      const newResultsHTML = results
-      clearTimeout(debounceTimeout);
+        .map(
+          ({ title, url, description, type, total_plays }) => `
+        <li class="search__results--result">
+          <a href="${url}">
+            <h3>${
+              type === "artist" && total_plays
+                ? formatArtistTitle(title, total_plays)
+                : title
+            }</h3>
+          </a>
+          <p>${truncateDescription(description)}</p>
+        </li>
+      `
+        )
+        .join("");
+      $results.insertAdjacentHTML("beforeend", newResultsHTML);
+    };
 
+    const handleSearch = async () => {
+      const query = $input.value.trim();
       if (!query) {
         renderSearchResults([]);
         $loadMoreButton.style.display = "none";
         return;
       }
 
-      debounceTimeout = setTimeout(async () => {
+      const results = await loadSearchIndex(query, getSelectedTypes(), 1);
-        const results = await loadSearchIndex(query, getSelectedTypes(), 1);
+      currentResults = results;
-        currentResults = results;
+      currentPage = 1;
-        currentPage = 1;
+      updateSearchResults(results);
+    };
 
-        updateSearchResults(currentResults);
+    $input.addEventListener("input", () => {
-      }, 300);
+      clearTimeout(debounceTimeout);
+      debounceTimeout = setTimeout(handleSearch, 300);
     });
 
-    $typeCheckboxes.forEach((checkbox) => {
+    $typeCheckboxes.forEach((cb) =>
-      checkbox.addEventListener("change", async () => {
+      cb.addEventListener("change", handleSearch)
-        const results = await loadSearchIndex(
+    );
-          $input.value.trim(),
-          getSelectedTypes(),
-          1
-        );
-        currentResults = results;
-        currentPage = 1;
-
-        updateSearchResults(currentResults);
-      });
-    });
 
     $loadMoreButton.addEventListener("click", async () => {
       currentPage++;
@@ -297,7 +175,6 @@ window.addEventListener("load", () => {
         currentPage
       );
       currentResults = [...currentResults, ...nextResults];
-
       updateSearchResults(nextResults);
     });
   })();