The previous approach using an API route to serve Pagefind files
doesn't work on Vercel's serverless environment because fs.readFile
can't reliably access files in the deployed output.
Solution: Serve Pagefind files directly from public/_pagefind as
static assets, which is the standard Next.js approach and works
reliably on all deployment platforms.
Changes:
- Update search modal to load from /_pagefind/ instead of /pagefind/
- Remove app/pagefind/[...path]/route.ts API route (no longer needed)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use React Portal to render modal at document body level to avoid stacking context issues
- Increase z-index to z-[9999] to ensure modal appears on top of all content
- Add cleanup function to prevent duplicate Pagefind initializations
- Replace CSS class overrides with CSS variables for better maintainability
- Enhance search result text colors for improved readability in both light and dark modes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added autofocus configuration and manual focus call to ensure search input is immediately focusable when modal opens.
Changes:
- Added autofocus: true to PagefindUI config
- Added setTimeout to manually focus input after UI loads
- Ensures users can type immediately after opening search modal
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Integrated Pagefind for static site search with built-in Chinese word segmentation support.
Changes:
1. **Installed Pagefind** (v1.4.0) as dev dependency
2. **Updated build script** to run Pagefind indexing after Next.js build
- Indexes all 69 pages with 5,711 words
- Automatic Chinese (zh-tw) language detection
3. **Created search modal component** (components/search-modal.tsx)
- Dynamic Pagefind UI loading (lazy-loaded on demand)
- Keyboard shortcuts (Cmd+K / Ctrl+K)
- Chinese translations for UI elements
- Dark mode compatible styling
4. **Added search button to header** (components/site-header.tsx)
- Integrated SearchButton with keyboard shortcut display
- Modal state management
5. **Custom Pagefind styles** (styles/globals.css)
- Tailwind-based styling to match site design
- Dark mode support
- Highlight styling for search results
Features:
- ✅ Full-text search across all blog posts and pages
- ✅ Built-in Chinese word segmentation (Unicode-based)
- ✅ Mixed Chinese/English query support
- ✅ Zero bundle impact (20KB lazy-loaded on search activation)
- ✅ Keyboard shortcuts (⌘K / Ctrl+K)
- ✅ Search result highlighting with excerpts
- ✅ Dark mode compatible
Technical Details:
- Pagefind runs post-build to index .next directory
- Search index stored in .next/pagefind/
- Chinese segmentation works automatically via Unicode boundaries
- No third-party services or API keys required
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
