Skip to content

shishkin/astro-pagefind

Repository files navigation

Astro-Pagefind

CI npm

Astro integration for Pagefind static site search.

Features

  • Build pagefind index upon static build
  • Serve previously prebuilt search index in astro dev mode
  • Search Astro component
  • Supports customized base URL path
  • Supports multiple instances of the component on a page
  • Supports pre-filled search query
  • Supports Astro view transitions

Usage

Install:

npm i astro-pagefind

Add integration to the Astro config:

//astro.config.ts

import { defineConfig } from "astro/config";
import pagefind from "astro-pagefind";

export default defineConfig({
  build: {
    format: "file",
  },
  integrations: [pagefind()],
});

Add search component on a page:

---
import Search from "astro-pagefind/components/Search";
---

<Search id="search" className="pagefind-ui" uiOptions={{ showImages: false }} />

See Main.layout for a usage example.

Pre-filled Search Query

In SSR mode Astro provides access to URL query parameters which can be used to pre-fill search query via a prop:

---
import Search from "astro-pagefind/components/Search";

export const prerender = false;

const q = Astro.url.searchParams.get("q") ?? undefined;
---

<Search query={q} />

See prefilled.astro for a full example.