butterflyvu/src/components/Search.astro

---
export interface Props {
  readonly id?: string;
  readonly className?: string;
  readonly query?: string;
  readonly uiOptions?: Record<string, any>;
}

const { id, className, query, uiOptions = {} } = Astro.props;
const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
---

<div
  id={id}
  class:list={[className, "pagefind-init"]}
  data-pagefind-ui
  data-bundle-path={bundlePath}
  data-query={query}
  data-ui-options={JSON.stringify(uiOptions)}
>
</div>
<script>
  // @ts-ignore
  import { PagefindUI } from "@pagefind/default-ui";

  function initPageFind() {
    const allSelector = "[data-pagefind-ui]";
    for (const el of document.querySelectorAll(
      `${allSelector}.pagefind-init`,
    )) {
      const elSelector = [
        ...(el.id ? [`#${el.id}`] : []),
        ...[...el.classList.values()].map((c) => `.${c}`),
        allSelector,
      ].join("");
      const bundlePath = el.getAttribute("data-bundle-path");
      const opts = JSON.parse(el.getAttribute("data-ui-options") ?? "{}");
      new PagefindUI({
        ...opts,
        element: elSelector,
        bundlePath,
      });
      el.classList.remove("pagefind-init");
      var query = el.getAttribute("data-query");

      // Check if the current URL has any query params
      const url = new URL(window.location.href);
      const params = new URLSearchParams(url.search);
      if (params.has("q")) {
        query = params.get("q");
      }

      const input = el.querySelector<HTMLInputElement>(`input[type="text"]`);

      input?.focus();

      if (input) {
        input.value = query;
        input.dispatchEvent(new Event("input", { bubbles: true }));

        // Add Listener to update the URL when the input changes
        input.addEventListener("input", (e) => {
          const input = e.target as HTMLInputElement;
          const url = new URL(window.location.href);
          const params = new URLSearchParams(url.search);
          params.set("q", input.value);
          window.history.replaceState({}, "", `${url.pathname}?${params}`);
        });
      }
    }
  }

  document.addEventListener("astro:page-load", initPageFind);
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initPageFind);
  } else {
    initPageFind();
  }
</script>