Skip to content

Conversation

@brodienguyen
Copy link

This pull request introduces Pagefind-powered full-text search to the documentation site, integrating it into the command dialog for a seamless search experience. The implementation includes lazy-loading the Pagefind library, updating the build process, and enhancing accessibility and search metadata. Additional CSS and markup changes ensure the search dialog is visually integrated and results are clearly presented.

Pagefind Search Integration

  • Added a new assets/pagefind-search.js script to lazy-load Pagefind and render search results in the command dialog, including debounced input handling and error states.
  • Updated the command dialog initialization in _includes/partials/docs/header.njk to support Pagefind search by passing a data-pagefind-search attribute.
  • Injected the new search script into the base layout (_includes/layouts/base.njk).
  • Updated the build and development scripts in package.json to run Pagefind indexing, and added pagefind as a dev dependency. [1] [2]

Search Metadata and Accessibility

  • Marked main content, headers, and asides with data-pagefind-body, data-pagefind-meta, and data-pagefind-ignore to optimize search indexing and results. [1] [2] [3]

Styling for Search Dialog and Results

  • Added and updated CSS in both assets/styles.css and src/css/custom.css to style the search dialog, results, highlights, and various states (empty, loading, error), including new color variables and container sizes. [1] [2] [3] [4] [5] [6]

Full text search dialog
BrodieMFL 2025-12-27 at 14 41 34

How it works
BrodieMFL 2025-12-27 at 14 40 32

Integrates Pagefind for full-text documentation search via the command dialog. Adds search result rendering, highlights, and error/empty states in styles and templates. Updates build/dev scripts to index with Pagefind and marks searchable content in layouts.
"build": "npm run clean && npm run basecoat && npx tailwindcss -i ./src/css/styles.css -o ./assets/styles.css --minify && npx @11ty/eleventy",
"dev": "npm run basecoat && concurrently \"npx @11ty/eleventy --serve\" \"npx tailwindcss -i ./src/css/styles.css -o ./assets/styles.css --watch\""
"build": "npm run clean && npm run basecoat && npx tailwindcss -i ./src/css/styles.css -o ./assets/styles.css --minify && npx @11ty/eleventy && npx pagefind --site _site",
"dev": "npm run basecoat && npx @11ty/eleventy && npx pagefind --site _site && concurrently \"npx @11ty/eleventy --serve\" \"npx tailwindcss -i ./src/css/styles.css -o ./assets/styles.css --watch\""
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ensures Pagefind has content to index on first run. Slight delay at startup but search works immediately. It would be great that pagefind can be run in the watch mode but I am not yet figure out how to solve it neatly. Any suggestions are more than welcome

@hunvreus
Copy link
Owner

I'll have a look, but I need the Command and Combobox components in Basecoat to properly support async items.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants