Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds Pagefind-powered documentation search to the DocuBase template and CLI package by indexing the built site and exposing a new header search modal.
Changes:
- Add
pagefindas a dev dependency (root + template) and update build scripts to generate the Pagefind index afterastro build. - Replace the placeholder/disabled header search input with a new
Searchcomponent. - Introduce a new
Search.astromodal component that loads Pagefind at runtime and renders results.
Reviewed changes
Copilot reviewed 5 out of 7 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
template/src/components/Search.astro |
Implements the search trigger + modal UI and client-side Pagefind integration. |
template/src/components/Header.astro |
Integrates the new Search component into the header UI. |
package.json |
Adds pagefind devDependency and runs Pagefind indexing during build. |
pnpm-lock.yaml |
Locks new pagefind dependency and platform-specific binaries. |
template/package.json |
Adds template pagefind devDependency and runs indexing during template build. |
template/pnpm-lock.yaml |
Adds a template lockfile including Pagefind and related dependencies. |
.changeset/twenty-rules-laugh.md |
Declares a patch release for the CLI/template change. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| await pagefind.init(); | ||
| return pagefind; | ||
| } catch (e) { | ||
| console.warn('Pagefind not available. Run "pnpm build" to generate the search index.'); |
There was a problem hiding this comment.
This console warning hard-codes pnpm build, but the README/CLI supports npm/yarn as well. Consider changing the message to something package-manager agnostic (e.g., "Run the build script to generate the search index").
| console.warn('Pagefind not available. Run "pnpm build" to generate the search index.'); | |
| console.warn('Pagefind not available. Run the build script to generate the search index.'); |
| "create-docubase": patch | ||
| --- | ||
|
|
||
| Search fuctionality |
There was a problem hiding this comment.
Typo in changeset summary: “fuctionality” should be “functionality”.
| Search fuctionality | |
| Search functionality |
| </div> | ||
|
|
||
| <script is:inline> | ||
| (function() { |
There was a problem hiding this comment.
This inline script doesn’t include the global “already initialized” guard used by other template components (e.g., Header/Collapsible). If Astro client-side navigation re-executes this script, multiple closures will register duplicate astro:page-load and keydown handlers, and the AbortController in one instance won’t clean up listeners created by another. Add a window.__searchInitialized (or similar) guard at the start of the IIFE, or move listeners to shared delegated handlers like the other components.
| (function() { | |
| (function() { | |
| if (window.__searchInitialized) return; | |
| window.__searchInitialized = true; |
| const excerpt = document.createElement('p'); | ||
| excerpt.className = 'mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2'; | ||
| excerpt.innerHTML = result.excerpt || ''; | ||
|
|
There was a problem hiding this comment.
result.excerpt is assigned via innerHTML. If excerpts can contain unsanitized HTML (e.g., from MDX/markdown content), this can become an XSS vector in the search modal. Prefer rendering excerpts as plain text (textContent) or sanitize/whitelist tags (e.g., only allow mark spans) before using innerHTML.
| if ((e.metaKey || e.ctrlKey) && e.key === 'k') { | ||
| e.preventDefault(); | ||
| if (modal && modal.classList.contains('hidden')) { | ||
| openModal(); | ||
| } else { | ||
| closeModal(); | ||
| } | ||
| } |
There was a problem hiding this comment.
The Cmd/Ctrl+K handler only matches e.key === 'k'. On some layouts or when Shift is held, the key may be reported as 'K', so the shortcut won’t work. Consider normalizing (e.key.toLowerCase() === 'k') before comparison.
| function openModal() { | ||
| const modal = document.getElementById('search-modal'); | ||
| const input = document.getElementById('search-input'); | ||
| if (!modal || !input) return; | ||
|
|
||
| modal.classList.remove('hidden'); | ||
| document.body.style.overflow = 'hidden'; | ||
| input.focus(); | ||
| initPagefind(); | ||
| } | ||
|
|
||
| function closeModal() { | ||
| const modal = document.getElementById('search-modal'); | ||
| const input = document.getElementById('search-input'); | ||
| const resultsList = document.getElementById('search-results-list'); | ||
|
|
||
| if (!modal) return; | ||
|
|
||
| if (searchTimeout) clearTimeout(searchTimeout); | ||
|
|
||
| modal.classList.add('hidden'); | ||
| document.body.style.overflow = ''; | ||
|
|
||
| if (input) input.value = ''; | ||
| if (resultsList) resultsList.innerHTML = ''; |
There was a problem hiding this comment.
When the modal closes, focus isn’t restored to the element that opened it (typically the search trigger). This is an accessibility issue for keyboard/screen-reader users. Store document.activeElement before opening and restore focus on close (and ideally add a basic focus trap while the dialog is open).
This pull request adds a fully functional documentation search feature powered by Pagefind. It introduces the
pagefinddependency, updates the build process to generate a search index, and implements a new interactive search modal in the site header. The changes affect both the main project and the template, ensuring that search is available out-of-the-box for new documentation sites.Search functionality integration:
pagefindas a development dependency in bothpackage.jsonandtemplate/package.json, along with the necessary platform-specific binaries inpnpm-lock.yaml. [1] [2] [3] [4] [5] [6] [7]buildscript in bothpackage.jsonandtemplate/package.jsonto runpagefind --site distafter building with Astro, ensuring the search index is generated. [1] [2]UI enhancements:
Header.astrowith a newSearchcomponent, providing a search trigger and modal. [1] [2]Search.astrocomponent, which includes a modal dialog, keyboard shortcuts (Cmd/Ctrl+K, ESC), search input, loading states, and result rendering powered by Pagefind.These changes collectively provide a user-friendly, accessible, and performant search experience for documentation sites.