Skip to content

v6: Add Pagefind with custom components#42369

Open
mdo wants to merge 9 commits intov6-devfrom
v6-mdo-pagefind
Open

v6: Add Pagefind with custom components#42369
mdo wants to merge 9 commits intov6-devfrom
v6-mdo-pagefind

Conversation

@mdo
Copy link
Copy Markdown
Member

@mdo mdo commented Apr 28, 2026

Picks up from @julien-deramond in #42226 to finish some todos there and then rebuild the Pagefind integration with their custom components, meaning we're using Bootstrap's dialog, list group, buttons, and more to build this. Yay!


Note

Medium Risk
Replaces the docs search stack and modifies Dialog/DialogBase hide/close timing and dialog-swapping behavior, which could affect modal transitions and focus/backdrop handling across the docs UI.

Overview
Switches documentation search from Algolia DocSearch to Pagefind, including adding pagefind indexing to astro-build, introducing pagefind.yml, and wiring dev builds to serve an existing /pagefind/ index.

Rebuilds the search UI as Bootstrap-native components: new SearchTrigger + SearchDialog (using Dialog, list groups, and custom elements) and a new site/src/assets/search.js Pagefind integration with keyboard navigation, global shortcuts, loading skeletons, and auto-close-on-result-click.

Updates indexing/styling hooks by marking the main docs content with data-pagefind-body, excluding code/example snippets with data-pagefind-ignore, removing Algolia config/plugin/meta, and replacing DocSearch CSS with custom _search.scss styling; also adjusts dialog internals to optionally defer close() until transitions complete and to support seamless dialog swapping without backdrop flashes.

Reviewed by Cursor Bugbot for commit 6905dd0. Bugbot is set up for automated code reviews on this repo. Configure here.

@mdo mdo added the docs label Apr 28, 2026
@mdo mdo requested review from a team as code owners April 28, 2026 17:43
@mdo mdo added the v6 label Apr 28, 2026
@mdo mdo added this to v6.0.0 Apr 28, 2026
@github-project-automation github-project-automation Bot moved this to Inbox in v6.0.0 Apr 28, 2026
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 6905dd0. Configure here.

Comment thread site/src/assets/search.js
event.preventDefault()
firstLink.click()
}
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Enter key causes page reload when no results

High Severity

The _onKeydown handler only calls event.preventDefault() when a .bd-search-result-link exists. When there are no results (empty state, loading, error, or "no results"), the Enter keypress propagates unchecked. Because the <input type="search"> sits inside a <form> with no submit button and only one text field, the browser triggers implicit form submission, reloading the current page.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 6905dd0. Configure here.

<li class="nav-item nav-link px-1" id="docsearch" data-bd-docs-version={getConfig().docs_version}></li>
<div class="bd-search">
<SearchTrigger placeholder="Search docs…" />
</div>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Search trigger broken on non-docs pages

Medium Severity

The SearchTrigger button (with data-bs-toggle="dialog" targeting #bdSearchDialog) renders on every page, but SearchDialog is only rendered when layout === 'docs'. On non-docs pages (Home, Examples), clicking the trigger invokes the Dialog data API on a non-existent target. SelectorEngine.getElementFromSelector returns null, causing BaseComponent to construct an incomplete instance, and the subsequent toggle() call throws a TypeError accessing .open on undefined.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 6905dd0. Configure here.

placeholder?: string
}

const { id = 'bdSearchDialog', placeholder = 'Search docs...' } = Astro.props
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Placeholder text inconsistent between trigger and dialog

Low Severity

SearchTrigger.astro defaults its placeholder to 'Search docs…' (Unicode ellipsis U+2026), while SearchDialog.astro defaults to 'Search docs...' (three ASCII periods). The same mismatch is propagated via the explicit props in Navigation.astro. The trigger button and dialog input display visually different text.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 6905dd0. Configure here.

@cursor
Copy link
Copy Markdown

cursor Bot commented Apr 28, 2026

You have used all of your free Bugbot PR reviews.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

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

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

2 participants