Astro Starlightでトップページに検索バーを表示する

トップページに検索バーを表示する。

Starlightの検索機能

StarlightはデフォルトでPagefindを使用している。そのため、PagefindのUIを設置することで簡単に検索バーを設定できる。

• Site Search
• Pagefind

カスタムトップページの作成

まずはカスタムのトップページを作成する。 src/pages/index.astro を作成し、ドキュメントを参考に構築する。

• Using Starlight’s design in custom pages

src/pages/index.astro ¹:

---
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
---

<StarlightPage frontmatter={{ title: "Welcome to Study Astro", template: "doc" }}>
</StarlightPage>

検索バーを追加し色を指定する

ベースができたのでPagefindのドキュメントを参考に検索バーを追加する。また、Starlightのソースから配色を流用する。Starlightの配色をそのまま利用することで違和感なく表示でき、ライトモード/ダークモードの切り替えにも対応できる。

• starlight__search

---
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
---

<StarlightPage frontmatter={{ title: "Welcome to Study Astro", template: "doc" }}>
  <!-- search box -->
  <div id="toppage-search" class="search"></div>
</StarlightPage>


<link href="/study-astro/pagefind/pagefind-ui.css" rel="stylesheet">
<script is:inline src="/study-astro/pagefind/pagefind-ui.js"></script>
<script is:inline>
  if (window.PagefindUI) {
    window.addEventListener('DOMContentLoaded', (event) => {
      new PagefindUI({ element: "#toppage-search", showSubResults: true });
    });
  }
</script>

<style>
#toppage-search {
  --pagefind-ui-primary: var(--sl-color-text);
  --pagefind-ui-text: var(--sl-color-gray-2);
  --pagefind-ui-font: var(--__sl-font);
  --pagefind-ui-background: var(--sl-color-black);
  --pagefind-ui-border: var(--sl-color-gray-5);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-tag: var(--sl-color-gray-5);
  --sl-search-cancel-space: 5rem;
}
</style>

GitHub

実際のコードは以下にある。

• Study Astro

1. シンタックスハイライトは jsx としたが、実際は .astro ファイルである。 ↩︎