diff --git a/package-lock.json b/package-lock.json index 09232b79..e6ccf0d6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 11a35ccf..b0bdbdc8 100644 --- a/package.json +++ b/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": { diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js index 25c7ad4f..b357cbd6 100644 --- a/src/assets/scripts/index.js +++ b/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) => { - if (!markdown) return ""; - return markdown - .replace(/\*\*(.*?)\*\*/g, "$1") - .replace(/\*(.*?)\*/g, "$1") - .replace(/\[(.*?)\]\((.*?)\)/g, '$1') - .replace(/\n/g, "
") - .replace(/[#*_~`]/g, ""); - }; + const parseMarkdown = (markdown) => + markdown + ? markdown + .replace(/\*\*(.*?)\*\*/g, "$1") + .replace(/\*(.*?)\*/g, "$1") + .replace(/\[(.*?)\]\((.*?)\)/g, '$1') + .replace(/\n/g, "
") + .replace(/[#*_~`]/g, "") + : ""; const truncateDescription = (markdown, maxLength = 150) => { - const htmlDescription = parseMarkdown(markdown); - const tempDiv = document.createElement("div"); - tempDiv.innerHTML = htmlDescription; - const plainText = tempDiv.textContent || tempDiv.innerText || ""; + const plainText = + new DOMParser().parseFromString(parseMarkdown(markdown), "text/html") + .body.textContent || ""; 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 - .map(({ title, url, description, type, total_plays }) => { - const truncatedDesc = truncateDescription(description); - const formattedTitle = - type === "artist" && total_plays !== undefined + const resultHTML = results + .map( + ({ title, url, description, type, total_plays }) => ` +
  • + +

    ${ + type === "artist" && total_plays ? formatArtistTitle(title, total_plays) - : title; - - return ` -
  • - -

    ${formattedTitle}

    -     -

    ${truncatedDesc}

    -
    • - `; - }) - .join(""); - - $results.innerHTML = resultHTML; - $results.style.display = "block"; - } else { - $results.innerHTML = - '
  • No results found.
    • '; - $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 ` -
  • -

    ${formattedTitle}

     -

    ${truncatedDesc}

    -
    • - `; - }) + : title + }

    + +

    ${truncateDescription(description)}

    +
    • + ` + ) .join(""); - $results.insertAdjacentHTML("beforeend", newResults); + + $results.innerHTML = + resultHTML || + '
  • No results found.
    • '; + $results.style.display = "block"; }; - const loadSearchIndex = async (query = "", types = [], page = 1) => { - const typeQuery = types.join(","); - + const loadSearchIndex = async (query, types, page) => { 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 = index.results || []; - - total = index.total || results.length; + const { results, total: newTotal } = await response.json(); + total = newTotal; 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) - .map((checkbox) => checkbox.value); + .filter((cb) => cb.checked) + .map((cb) => cb.value); const updateSearchResults = (results) => { if (currentPage === 1) { @@ -251,43 +120,52 @@ window.addEventListener("load", () => { } else { appendSearchResults(results); } - - const moreResultsToShow = currentPage * PAGE_SIZE < total; - $loadMoreButton.style.display = moreResultsToShow ? "block" : "none"; + $loadMoreButton.style.display = + currentPage * PAGE_SIZE < total ? "block" : "none"; }; - $input.addEventListener("input", () => { - const query = $input.value.trim(); - clearTimeout(debounceTimeout); + const appendSearchResults = (results) => { + const newResultsHTML = results + .map( + ({ title, url, description, type, total_plays }) => ` +
  • + +

    ${ + type === "artist" && total_plays + ? formatArtistTitle(title, total_plays) + : title + }

    +     +

    ${truncateDescription(description)}

    +
    • + ` + ) + .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); - currentResults = results; - currentPage = 1; + const results = await loadSearchIndex(query, getSelectedTypes(), 1); + currentResults = results; + currentPage = 1; + updateSearchResults(results); + }; - updateSearchResults(currentResults); - }, 300); + $input.addEventListener("input", () => { + clearTimeout(debounceTimeout); + debounceTimeout = setTimeout(handleSearch, 300); }); - $typeCheckboxes.forEach((checkbox) => { - checkbox.addEventListener("change", async () => { - const results = await loadSearchIndex( - $input.value.trim(), - getSelectedTypes(), - 1 - ); - currentResults = results; - currentPage = 1; - - updateSearchResults(currentResults); - }); - }); + $typeCheckboxes.forEach((cb) => + cb.addEventListener("change", handleSearch) + ); $loadMoreButton.addEventListener("click", async () => { currentPage++; @@ -297,7 +175,6 @@ window.addEventListener("load", () => { currentPage ); currentResults = [...currentResults, ...nextResults]; - updateSearchResults(nextResults); }); })();