https://github.com/shishkin/astro-pagefind

Astro integration for Pagefind static site search.
https://github.com/shishkin/astro-pagefind

astro pagefind search withastro

Last synced: 22 days ago
JSON representation

Astro integration for Pagefind static site search.

• Host: GitHub
• URL: https://github.com/shishkin/astro-pagefind
• Owner: shishkin
• License: mit
• Created: 2023-02-17T14:02:10.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-21T04:48:07.000Z (about 1 month ago)
• Last Synced: 2024-09-30T17:05:44.642Z (about 1 month ago)
• Topics: astro, pagefind, search, withastro
• Language: Astro
• Homepage:
• Size: 1.19 MB
• Stars: 229
• Watchers: 5
• Forks: 14
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Astro-Pagefind

[![CI](https://github.com/shishkin/astro-pagefind/actions/workflows/ci.yaml/badge.svg)](https://github.com/shishkin/astro-pagefind/actions/workflows/ci.yaml)

[![npm](https://img.shields.io/npm/v/astro-pagefind)](https://www.npmjs.com/package/astro-pagefind)

[Astro](https://astro.build) integration for [Pagefind](https://pagefind.app/) 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](https://docs.astro.build/en/guides/view-transitions)

## Usage

Install:

```bash

npm i astro-pagefind

```

Add integration to the Astro config:

```typescript

//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:

```astro

---

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

---

```

See [Main.layout](packages/example/src/layouts/Main.astro) 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:

```astro

---

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

export const prerender = false;

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

---

```

See [prefilled.astro](packages/example/src/pages/prefilled.astro) for a full example.