Configuring Search

Space madness comes with search built in via .

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 dialog and the library.

The cmdk component is styled with 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 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");

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