Astro-Pagefind の Pre-filled Search Query をSSGで行う

当ブログでは Astro-Pagefind を用いてサイト内検索を実装しています。

Google Search Console にはサイトリンク検索ボックスという項目があり、そのためにクエリパラメータを用いて検索可能にしたのですが、公式の例に則ると SSR が必須になります。

そのため、静的サイトとしてホストすることができず、ホスティング業者が限られてしまいます。

そこで、Stack Overflow の回答を参考に SSG によるサイト内検索を実装しました。

<script is:inline>
  const urlSearchParams = new URLSearchParams(window.location.search);
  const query = urlSearchParams.get("q");
  if (!!query) {
    document.querySelector("#search")?.setAttribute("data-query", query);
  }
</script>

意外とシンプルに実装できましたね。

query 属性ではなく data-query 属性をセットしている理由は、Astro-Pagefind の実装が以下であるからです。

query プロパティを data-query 属性に代入して、それを元に処理しています。

これで全体をSSGにすることができたので、Bunny CDN にてホストしました。