Search dialog

Pagefind-backed site-wide search, auto-wired by docsShell().

Publier ships a site-wide search dialog backed by Pagefind — a static, WASM-indexed search that runs client-side. It’s auto-wired by docsShell() and requires zero configuration. No component import, no index producer, no API endpoint.

Usage

Install @publier/shell and enable docsShell() in astro.config.ts:

import { docsShell } from '@publier/shell/integration';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [docsShell()],
});

That’s it. The search dialog mounts on every page, listens for the nav search button and Cmd/Ctrl + K, and follows the active theme automatically.

Opting out

docsShell({ search: false })

With search: false, shell skips the astro-pagefind integration and the dialog injection entirely. The nav SearchButton (if rendered by your navConfig) stays visible but becomes a no-op unless you wire your own handler to the publier:search-toggle custom event on document.

How it works

At build time, Pagefind crawls dist/**/*.html and emits dist/pagefind/* — WASM index + default UI chunks.
At run time, clicking the nav button (or pressing Cmd/Ctrl + K) fires publier:search-toggle on document. A small injected script (~3 KB, no dependencies) opens a <dialog class="modal"> and lazy-loads /pagefind/pagefind-ui.js on first open.
Pagefind’s default UI renders inside the dialog; its CSS variables (--pagefind-ui-primary, --pagefind-ui-background, …) are mapped onto your theme tokens so the styling tracks your active theme.

Keyboard shortcuts

Shortcut	Action
`Cmd + K` / `Ctrl + K`	Open or close the dialog
`Esc`	Close the dialog

Triggering from your own UI

Anywhere on the page, dispatch the toggle event:

document.dispatchEvent(new CustomEvent('publier:search-toggle'));

The nav SearchButton uses exactly this contract, so any custom button, command menu, or keyboard shortcut you wire to this event becomes a search trigger.

Excluding content from the index

Pagefind indexes any element inside <body> by default. To exclude a block, add data-pagefind-ignore to the element. See the Pagefind docs for the full configuration surface (custom index selectors, per-region weighting, metadata extraction, etc.).