【Astro】またまたAstrojsで作ったサイトをカスタマイズした

---
import SearchIcons from "./icons/Search.astro";
import AlgoliaLogo from "./icons/Algolia_logo.astro";

const ALGOLIA_APPLICATION_ID = "○○○○○○○○";
const ALGOLIA_SEARCH_ONLY_KEY = "○○○○○○○○○○○○○○";

if (!ALGOLIA_APPLICATION_ID || !ALGOLIA_SEARCH_ONLY_KEY) {
  throw new Error(
    "ALGOLIA_APPLICATION_ID and ALGOLIA_SEARCH_ONLY_KEY are reuired"
  );
}
---

<button id="search-button" class="search-button" aria-label="Search articles">
  <svg
    class="h-5 w-5 hover:!text-blue-300 text-gray-800 dark:text-gray-200"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    stroke-width="1.5"
    stroke="currentColor"
    fill="none"
  >
    <SearchIcons />
  </svg>
</button>
<dialog id="search-dialog" class="search-dialog bg-slate-200 dark:bg-slate-800">
  <div id="search-box" class="search-box">
    <div class="search-input-box">
      <svg
        class="h-5 w-5 hover:text-blue-300 text-gray-300"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        fill="none"
      >
        <SearchIcons />
      </svg>
      <input
        id="search-input"
        class="search-input text-gray-800 dark:text-gray-200 font-normal"
        autofocus
        placeholder="記事を検索する"
        aria-label="Search"
      />
    </div>
    <AlgoliaLogo />
    <ul id="search-result" class="search-result"></ul>
  </div>
</dialog>

<script define:vars={{ ALGOLIA_APPLICATION_ID, ALGOLIA_SEARCH_ONLY_KEY }}>
  window.algolia = {
    applicationId: ALGOLIA_APPLICATION_ID,
    searchOnlyKey: ALGOLIA_SEARCH_ONLY_KEY,
  };
</script>

<script>
  import algoliasearch from "algoliasearch/lite";
  import instantsearch from "instantsearch.js/es";
  import { connectAutocomplete } from "instantsearch.js/es/connectors";
  import type { AutocompleteRenderState } from "instantsearch.js/es/connectors/autocomplete/connectAutocomplete";

  const button = document.querySelector<HTMLButtonElement>("#search-button");
  const dialog = document.querySelector<HTMLDialogElement>("#search-dialog");
  const container = document.querySelector<HTMLDivElement>("#search-box");
  const input = document.querySelector<HTMLInputElement>("#search-input");
  const ul = document.querySelector<HTMLUListElement>("#search-result");

  const searchClient = algoliasearch(
    window.algolia.applicationId,
    window.algolia.searchOnlyKey
  );
  const search = instantsearch({
    indexName: "yuki-meguro.com",
    searchClient,
    searchFunction(helper) {
      if (helper.state.query) {
        helper.search();
      } else if (ul) {
        ul.textContent = "";
      }
    },
  });
  const customAutocomplete = connectAutocomplete(renderAutocomplete);

  search.addWidgets([
    customAutocomplete({
      // https://www.algolia.com/doc/api-reference/widgets/autocomplete/js/
      // @ts-expect-error type mismatch
      container,
    }),
  ]);

  button?.addEventListener("click", () => {
    if (!search.started) {
      search.start();
    }
    dialog?.showModal();
  });

  dialog?.addEventListener("click", (event) => {
    if (event.target === dialog) {
      dialog?.close();
    }
  });

  function renderAutocomplete(
    renderOptions: AutocompleteRenderState,
    isFirstRender: Boolean
  ) {
    const { indices, refine } = renderOptions;
    const [blog] = indices;

    if (isFirstRender && input) {
      input.addEventListener("input", ({ currentTarget }) => {
        if (currentTarget instanceof HTMLInputElement) {
          refine(currentTarget.value);
        }
      });
      refine(input.value);
    }

    if (blog) {
      const fragment = document.createDocumentFragment();

      blog.hits.forEach((item) => {
        const li = document.createElement("li");
        const a = document.createElement("a");

        a.setAttribute("href", new URL(item.slug, location.origin).href);
        a.textContent = item.title;
        li.classList.add("search-result-item");
        li.appendChild(a);
        fragment.appendChild(li);
      });

      ul?.replaceChildren();
      ul?.appendChild(fragment);
    }
  }
</script>

<style>
  .search-dialog {
    @apply m-auto h-4/5 w-4/5 md:w-3/4 lg:w-2/4 rounded-lg backdrop:bg-gray-900 backdrop:bg-opacity-60;
  }
  .search-dialog::-webkit-scrollbar{
    display:none;
  }

  .search-box {
    @apply text-gray-700 h-full;
  }
  .search-input-box {
    @apply border border-blue-300 rounded-md w-full p-1 flex items-center gap-1;
  }
  .search-input {
    @apply bg-transparent flex-1 outline-0 max-sm:text-lg;
  }
  .search-result {
    @apply my-4 overflow-y-auto h-[calc(100%-44px)];
  }
</style>

<style is:global>
  html:has(dialog[open]) {
    overflow: hidden;
  }
  
  .search-result-item {
    @apply py-2 text-gray-800 dark:!text-gray-200 hover:text-blue-300;
  }

  .search-result-item > a {
    @apply block;
  }
</style>