coryd.dev/src/pages/static/search.html

---
title: Search
permalink: /search/index.html
description: Search through posts and other content on my site.
---
<h2 class="page-title">Search</h2>
<p>You can find <a href="/posts">posts</a>, <a href="/links">links</a>, <a href="/music/#artists">artists</a>, genres, <a href="/watching#movies">movies</a>, <a href="/watching#tv">shows</a> and <a href="/reading">books</a> via the field below (though it only surfaces movies and shows I've watched and books I've written something about). <a href="/tags">You can also browse my tags list</a>.</p>
{% render "blocks/top-tags.liquid"
  label:"Top tags"
  tags:topTags.tags
%}
<noscript>
  <p><mark>If you're seeing this it means that you've (quite likely) disabled JavaScript (that's a totally valid choice!).</mark> You can search for anything on my site using the form below, but your query will be routed through <a href="https://duckduckgo.com">DuckDuckGo</a>.</p>
  <p><mark>Type something in and hit enter.</mark></p>
</noscript>
<form class="search__form" action="https://duckduckgo.com" method="get">
  <input
    class="search__form--input"
    placeholder="Search"
    type="search"
    name="q"
    autocomplete="off"
    autofocus
    onkeydown="return event.key !== 'Enter'"
  />
  <details>
    <summary>Filter by type</summary>
    <fieldset class="search__form--type">
      <label>
        <input type="checkbox" name="type" value="post" checked />
        post
      </label>
      <label>
        <input type="checkbox" name="type" value="artist" checked />
        artist
      </label>
      <label>
        <input type="checkbox" name="type" value="genre" checked />
        genre
      </label>
      <label>
        <input type="checkbox" name="type" value="book" checked />
        book
      </label>
      <label>
        <input type="checkbox" name="type" value="movie" checked />
        movie
      </label>
      <label>
        <input type="checkbox" name="type" value="show" checked />
        show
      </label>
    </fieldset>
  </details>
  <input
    class="search__form--fallback"
    type="hidden"
    name="sites"
    value="coryd.dev"
  />
</form>
<ul class="search__results client-side"></ul>
<button class="search__load-more client-side" style="display: none">
  Load More
</button>
<script src="/assets/scripts/components/minisearch.js"></script>
<script>
  window.addEventListener("load", () => {
    (() => {
      if (typeof MiniSearch === "undefined") return;

      const miniSearch = new MiniSearch({
        fields: ["title", "description", "tags", "type"],
        idField: "id",
        storeFields: [
          "id",
          "title",
          "url",
          "description",
          "type",
          "tags",
          "total_plays",
        ],
        searchOptions: {
          fields: ["title", "tags"],
          prefix: true,
          fuzzy: 0.1,
          boost: { title: 5, tags: 2, description: 1 },
        },
      });

      const $form = document.querySelector(".search__form");
      const $fallback = document.querySelector(".search__form--fallback");
      const $input = document.querySelector(".search__form--input");
      const $results = document.querySelector(".search__results");
      const $loadMoreButton = document.querySelector(".search__load-more");
      const $typeCheckboxes = document.querySelectorAll(
        '.search__form--type input[type="checkbox"]',
      );

      $form.removeAttribute("action");
      $form.removeAttribute("method");
      if ($fallback) $fallback.remove();

      const PAGE_SIZE = 10;
      let currentPage = 1;
      let currentResults = [];
      let total = 0;
      let debounceTimeout;

      const parseMarkdown = (markdown) =>
        markdown
          ? markdown
              .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
              .replace(/\*(.*?)\*/g, "<em>$1</em>")
              .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
              .replace(/\n/g, "<br>")
              .replace(/[#*_~`]/g, "")
          : "";

      const truncateDescription = (markdown, maxLength = 225) => {
        const plainText =
          new DOMParser().parseFromString(parseMarkdown(markdown), "text/html")
            .body.textContent || "";
        return plainText.length > maxLength
          ? `${plainText.substring(0, maxLength)}...`
          : plainText;
      };

      const renderSearchResults = (results) => {
        const resultHTML = results
          .map(
            ({ title, url, description, type, total_plays }) => `
            <li class="search__results--result">
                <h3>
                  <a href="${url}">${title}</a>
                  ${
                    type === "artist" && total_plays > 0
                      ? ` <mark>${total_plays} plays</mark>`
                      : ""
                  }
                </h3>
              <p>${truncateDescription(description)}</p>
            </li>
          `,
          )
          .join("");

        $results.innerHTML =
          resultHTML ||
          '<li class="search__results--no-results">No results found.</li>';
        $results.style.display = "block";
      };

      const loadSearchIndex = async (query, types, page) => {
        try {
          const typeQuery = types.join(",");
          const response = await fetch(
            `https://www.coryd.dev/api/search.php?q=${query}&type=${typeQuery}&page=${page}&pageSize=${PAGE_SIZE}`,
          );
          const data = await response.json();
          total = data.total || 0;

          const formattedResults = (data.results || []).map((item) => ({
            ...item,
            id: item.result_id,
          }));
          miniSearch.removeAll();
          miniSearch.addAll(formattedResults);
          return formattedResults;
        } catch (error) {
          console.error("Error fetching search data:", error);
          return [];
        }
      };

      const getSelectedTypes = () =>
        Array.from($typeCheckboxes)
          .filter((cb) => cb.checked)
          .map((cb) => cb.value);

      const updateSearchResults = (results) => {
        if (currentPage === 1) {
          renderSearchResults(results);
        } else {
          appendSearchResults(results);
        }
        $loadMoreButton.style.display =
          currentPage * PAGE_SIZE < total ? "block" : "none";
      };

      const appendSearchResults = (results) => {
        const newResultsHTML = results
          .map(
            ({ title, url, description, type, total_plays }) => `
            <li class="search__results--result">
              <h3>
                <a href="${url}">${title}</a>
                ${
                  type === "artist" && total_plays > 0
                    ? ` <mark>${total_plays} plays</mark>`
                    : ""
                }
              </h3>
              <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;
        }

        const results = await loadSearchIndex(query, getSelectedTypes(), 1);
        currentResults = results;
        currentPage = 1;
        updateSearchResults(results);
      };

      $input.addEventListener("input", () => {
        clearTimeout(debounceTimeout);
        debounceTimeout = setTimeout(handleSearch, 150);
      });

      $typeCheckboxes.forEach((cb) =>
        cb.addEventListener("change", handleSearch),
      );

      $loadMoreButton.addEventListener("click", async () => {
        currentPage++;
        const nextResults = await loadSearchIndex(
          $input.value.trim(),
          getSelectedTypes(),
          currentPage,
        );
        currentResults = [...currentResults, ...nextResults];
        updateSearchResults(nextResults);
      });
    })();
  });
</script>