feat: add Pagefind client-side search

Add Pagefind indexing after each Eleventy build with a search page at
/search/. Indexes main content only (sidebars excluded), supports dark
mode theming and URL query parameters (?q=).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-02-05 10:49:05 +01:00
parent a8b44329d8
commit d9c84cad80
8 changed files with 114 additions and 5 deletions

View File

@@ -450,6 +450,45 @@
}
}
/* Pagefind UI theme overrides */
@layer components {
.pagefind-ui-container {
--pagefind-ui-scale: 1;
--pagefind-ui-primary: #2563eb;
--pagefind-ui-text: #18181b;
--pagefind-ui-background: #ffffff;
--pagefind-ui-border: #e4e4e7;
--pagefind-ui-tag: #f4f4f5;
--pagefind-ui-border-width: 1px;
--pagefind-ui-border-radius: 8px;
--pagefind-ui-font: inherit;
}
.dark .pagefind-ui-container {
--pagefind-ui-primary: #60a5fa;
--pagefind-ui-text: #f4f4f5;
--pagefind-ui-background: #09090b;
--pagefind-ui-border: #3f3f46;
--pagefind-ui-tag: #27272a;
}
.pagefind-ui-container .pagefind-ui__search-input {
@apply bg-white dark:bg-surface-900 text-surface-900 dark:text-surface-100;
}
.pagefind-ui-container .pagefind-ui__result-link {
@apply text-primary-600 dark:text-primary-400 hover:underline;
}
.pagefind-ui-container .pagefind-ui__result-excerpt {
@apply text-surface-600 dark:text-surface-400;
}
.pagefind-ui-container .pagefind-ui__message {
@apply text-surface-600 dark:text-surface-400;
}
}
/* Mobile-specific improvements */
@layer utilities {
/* Ensure proper touch scrolling on overflow containers */