Configuring Search

Space madness comes with search built in via Pagefind

Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure.

.

When you build your site using turbo build the astro site will also execute a Pagefind build. This creates a _pagefind folder in site-astro/dist/ that can be used for a hosted site.

When doing local development, you will need a copy of this folder in your site-astro/public/ folder. To handle this automatically, you can run the following:

turbo build:search

When you want to test search results from recently created content, you will need to run this command again.

Pagefind's search engine is queried from SiteSearchDialog.tsx, which makes use of Radix-UI

An open-source React component library for building high-quality, accessible design systems and web apps.

dialog and the cmdk

A command menu React component that can also be used as an accessible combobox. You render items, it filters and sorts them automatically.

library.

The cmdk component is styled with Shadcn Command

A combobox search and command component that leverages the cmdk library

styles.

Configuring Search

Pagefind will automatically scan the generated HTML files that Astro creates on build. It will index all text within the page body and will ignore any elements that have a data-pagefind-ignore attribute.

You can update your configuration in pagefind.yml.

See the Pagefind configuration options

You can control how your site is indexed by using various attributes and filters

to learn more.

Opening Search

The site header has a search bar and a hint to use the / keyboard shortcut.

You can change the keyboard shortcut in SiteSearch.astro.

To open search from another component, you can use the globally available openSearch event handler.

function openSearch() {
  const event = new Event("openSearch");
  document.dispatchEvent(event);
}

const search = document.getElementById("my-button");
search?.addEventListener("click", openSearch);