From 52897f58e695c2b5fea29f35035b8b8ca46f6e3e Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Sat, 19 Oct 2024 20:20:46 -0700 Subject: [PATCH] chore: search cleanup --- package-lock.json | 4 +- package.json | 2 +- src/assets/scripts/index.js | 163 +++++++++++++----------------------- 3 files changed, 60 insertions(+), 109 deletions(-) diff --git a/package-lock.json b/package-lock.json index 772be5d3..d8b01818 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "1.5.13", + "version": "1.5.14", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "1.5.13", + "version": "1.5.14", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.5.0", diff --git a/package.json b/package.json index 0c2fc6d1..dec2a137 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "1.5.13", + "version": "1.5.14", "description": "The source for my personal site. Built using 11ty (and other tools).", "type": "module", "engines": { diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js index fa5e1886..b778f512 100644 --- a/src/assets/scripts/index.js +++ b/src/assets/scripts/index.js @@ -106,57 +106,40 @@ window.addEventListener("load", () => { "tags", "total_plays", ], - searchOptions: { - fields: ["title", "tags"], - prefix: true, - fuzzy: 0.1, - boost: { title: 3, tags: 1.5 }, - }, }); - const $form = document.querySelector(".search__form"); + const $input = document.querySelector(".search__form--input"); - const $fallback = document.querySelector(".search__form--fallback"); 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"); - if ($fallback) $fallback.remove(); - const PAGE_SIZE = 10; let currentPage = 1; let currentResults = []; let total = 0; - let resultsById = {}; let debounceTimeout; - const parseMarkdown = (markdown) => { - if (!markdown) return ""; - return markdown - .replace(/\*\*(.*?)\*\*/g, "$1") - .replace(/\*(.*?)\*/g, "$1") - .replace(/\[(.*?)\]\((.*?)\)/g, '$1') - .replace(/\n/g, "
") - .replace(/[#*_~`]/g, ""); + const getSearchResults = (query) => { + return miniSearch.search(query, { + fields: ["title", "tags"], + prefix: true, + fuzzy: 0.1, + boost: { title: 4, tags: 2 }, + }); }; - const truncateDescription = (markdown, maxLength = 150) => { - const htmlDescription = parseMarkdown(markdown); - const tempDiv = document.createElement("div"); - tempDiv.innerHTML = htmlDescription; - const plainText = tempDiv.textContent || tempDiv.innerText || ""; - return plainText.length > maxLength - ? `${plainText.substring(0, maxLength)}...` - : plainText; - }; + const updateSearchResults = (results) => { + if (currentPage === 1) { + renderSearchResults(results); + } else { + appendSearchResults(results); + } - const formatArtistTitle = (title, totalPlays) => - totalPlays > 0 - ? `${title} ${totalPlays} plays` - : title; + const moreResultsToShow = currentPage * PAGE_SIZE < total; + $loadMoreButton.style.display = moreResultsToShow ? "block" : "none"; + }; const renderSearchResults = (results) => { if (results.length > 0) { @@ -165,17 +148,14 @@ window.addEventListener("load", () => { const truncatedDesc = truncateDescription(description); const formattedTitle = type === "artist" && total_plays !== undefined - ? formatArtistTitle(title, total_plays) + ? `${title} ${total_plays} plays` : title; return ` -
  • - -

    ${formattedTitle}

    -     -

    ${truncatedDesc}

    -
    • - `; +
  • +

    ${formattedTitle}

     +

    ${truncatedDesc}

    +
    • `; }) .join(""); @@ -194,63 +174,20 @@ window.addEventListener("load", () => { const truncatedDesc = truncateDescription(description); const formattedTitle = type === "artist" && total_plays !== undefined - ? formatArtistTitle(title, total_plays) + ? `${title} ${total_plays} plays` : title; return ` -
  • -

    ${formattedTitle}

     -

    ${truncatedDesc}

    -
    • - `; +
  • +

    ${formattedTitle}

     +

    ${truncatedDesc}

    +
    • `; }) .join(""); + $results.insertAdjacentHTML("beforeend", newResults); }; - const loadSearchIndex = async (query = "", types = [], page = 1) => { - const typeQuery = types.join(","); - - try { - 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 = index.results || []; - - total = index.total || results.length; - - resultsById = results.reduce((acc, item) => { - acc[item.id] = item; - return acc; - }, {}); - - miniSearch.removeAll(); - miniSearch.addAll(results); - - return results; - } catch (error) { - console.error("Error fetching search data:", error); - return []; - } - }; - - const getSelectedTypes = () => - Array.from($typeCheckboxes) - .filter((checkbox) => checkbox.checked) - .map((checkbox) => checkbox.value); - - const updateSearchResults = (results) => { - if (currentPage === 1) { - renderSearchResults(results); - } else { - appendSearchResults(results); - } - - const moreResultsToShow = currentPage * PAGE_SIZE < total; - $loadMoreButton.style.display = moreResultsToShow ? "block" : "none"; - }; - $input.addEventListener("input", () => { const query = $input.value.trim(); clearTimeout(debounceTimeout); @@ -261,8 +198,8 @@ window.addEventListener("load", () => { return; } - debounceTimeout = setTimeout(async () => { - const results = await loadSearchIndex(query, getSelectedTypes(), 1); + debounceTimeout = setTimeout(() => { + const results = getSearchResults(query); currentResults = results; currentPage = 1; @@ -271,12 +208,8 @@ window.addEventListener("load", () => { }); $typeCheckboxes.forEach((checkbox) => { - checkbox.addEventListener("change", async () => { - const results = await loadSearchIndex( - $input.value.trim(), - getSelectedTypes(), - 1 - ); + checkbox.addEventListener("change", () => { + const results = getSearchResults($input.value.trim()); currentResults = results; currentPage = 1; @@ -284,16 +217,34 @@ window.addEventListener("load", () => { }); }); - $loadMoreButton.addEventListener("click", async () => { + $loadMoreButton.addEventListener("click", () => { currentPage++; - const nextResults = await loadSearchIndex( - $input.value.trim(), - getSelectedTypes(), - currentPage + const nextResults = getSearchResults($input.value.trim()).slice( + (currentPage - 1) * PAGE_SIZE, + currentPage * PAGE_SIZE ); - currentResults = [...currentResults, ...nextResults]; - updateSearchResults(nextResults); + appendSearchResults(nextResults); + + const moreResultsToShow = currentPage * PAGE_SIZE < total; + $loadMoreButton.style.display = moreResultsToShow ? "block" : "none"; }); + + const truncateDescription = (markdown, maxLength = 150) => { + const htmlDescription = markdown + .replace(/\*\*(.*?)\*\*/g, "$1") + .replace(/\*(.*?)\*/g, "$1") + .replace(/\[(.*?)\]\((.*?)\)/g, '$1') + .replace(/\n/g, "
    ") + .replace(/[#*_~`]/g, ""); + + const tempDiv = document.createElement("div"); + tempDiv.innerHTML = htmlDescription; + const plainText = tempDiv.textContent || tempDiv.innerText || ""; + + return plainText.length > maxLength + ? `${plainText.substring(0, maxLength)}...` + : plainText; + }; })(); });