Skip to content

perf(search): load Pagefind lazily on first open; build the index in dev and build #3340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vidminas wants to merge 2 commits into
base: main
Choose a base branch
from
Open

perf(search): load Pagefind lazily on first open; build the index in dev and build #3340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
42579e9
perf(search): load Pagefind lazily on first open; build index in dev
Vidminas Jul 9, 2026
d04d53a
perf(search): build the Pagefind index in dev and build for all starters
Vidminas Jul 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 27 additions & 15 deletions modules/blox/layouts/_partials/components/search-modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@ <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">No results
allFilters: [],
trendingSearches: {{ site.Params.hugoblox.search.suggestions | default (slice "Search term 1" "Search term 2") | jsonify }},
pagefind: null,
pagefindLoading: false,
pagefindModulePath: window.hbb?.assetPaths?.pagefind ?? '/pagefind/pagefind.js',

// i18n translations for content types
Expand All @@ -279,22 +280,13 @@ <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">No results
'docs': {{ i18n "docs" | default "Documentation" | jsonify }}
},

async init() {
// Initialize Pagefind
try {
this.pagefind = await import(this.pagefindModulePath);
await this.pagefind.init();
console.log('✓ Pagefind initialized');

// Load available filters
await this.loadFilters();
} catch (error) {
console.error('Failed to initialize Pagefind:', error);
}

init() {
// Keyboard navigation
this.$watch('$store.search.open', (open) => {
if (open) {
// Load Pagefind lazily the first time the modal opens, so the search
// index isn't fetched on every page view.
this.ensurePagefind();
this.$nextTick(() => this.$refs.searchInput?.focus());
document.body.style.overflow = 'hidden';
} else {
Expand Down Expand Up @@ -394,16 +386,36 @@ <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">No results
});
},

// Load + initialise Pagefind once, on first use (first modal open, or a
// search if the user types before that load finishes).
async ensurePagefind() {
if (this.pagefind || this.pagefindLoading) return;
this.pagefindLoading = true;
try {
this.pagefind = await import(this.pagefindModulePath);
await this.pagefind.init();
await this.loadFilters();
} catch (error) {
console.error('Failed to initialize Pagefind:', error);
} finally {
this.pagefindLoading = false;
}
},

async search() {
if (!this.query.trim()) {
this.results = [];
this.hasSearched = false;
return;
}

this.loading = true;
this.hasSearched = false; // Reset until search completes


// Ensure the index is loaded (the user may type before the open-load finishes).
await this.ensurePagefind();
if (!this.pagefind) { this.loading = false; return; }

try {
const options = {};

Expand Down
4 changes: 2 additions & 2 deletions templates/academic-cv/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"packageManager": "pnpm@10.14.0",
"description": "Academic CV starter template for Hugo Blox with Tailwind CSS v4",
"scripts": {
"dev": "hugo server --disableFastRender",
"build": "hugo --minify && pnpm run pagefind",
"dev": "hugo && pagefind --site public --output-subdir ../static/pagefind && hugo server --disableFastRender",
"build": "hugo --minify && pagefind --site public",
"pagefind": "pagefind --site public"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions templates/data-science-blog/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"packageManager": "pnpm@10.14.0",
"description": "Blog starter template for Hugo Blox with Tailwind CSS v4",
"scripts": {
"dev": "hugo server --disableFastRender",
"build": "hugo --minify && pnpm run pagefind",
"dev": "hugo && pagefind --site public --output-subdir ../static/pagefind && hugo server --disableFastRender",
"build": "hugo --minify && pagefind --site public",
"pagefind": "pagefind --site public"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions templates/dev-portfolio/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"packageManager": "pnpm@10.14.0",
"description": "Modern developer portfolio template for Hugo Blox with Tailwind CSS v4 - Free version",
"scripts": {
"dev": "hugo server --disableFastRender",
"build": "hugo --minify && pnpm run pagefind",
"dev": "hugo && pagefind --site public --output-subdir ../static/pagefind && hugo server --disableFastRender",
"build": "hugo --minify && pagefind --site public",
"pagefind": "pagefind --site public"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions templates/documentation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"packageManager": "pnpm@10.14.0",
"description": "Documentation starter template for Hugo Blox with Tailwind CSS v4",
"scripts": {
"dev": "hugo server --disableFastRender",
"build": "hugo --minify && pnpm run pagefind",
"dev": "hugo && pagefind --site public --output-subdir ../static/pagefind && hugo server --disableFastRender",
"build": "hugo --minify && pagefind --site public",
"pagefind": "pagefind --site public"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions templates/link-in-bio/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"packageManager": "pnpm@10.14.0",
"description": "Link-in-bio starter template for Hugo Blox with Tailwind CSS v4",
"scripts": {
"dev": "hugo server --disableFastRender",
"build": "hugo --minify && pnpm run pagefind",
"dev": "hugo && pagefind --site public --output-subdir ../static/pagefind && hugo server --disableFastRender",
"build": "hugo --minify && pagefind --site public",
"pagefind": "pagefind --site public"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions templates/markdown-slides/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"packageManager": "pnpm@10.14.0",
"description": "Markdown Slides template - host and share slide decks built with Hugo Blox",
"scripts": {
"dev": "hugo server --disableFastRender",
"build": "hugo --minify && pnpm run pagefind",
"dev": "hugo && pagefind --site public --output-subdir ../static/pagefind && hugo server --disableFastRender",
"build": "hugo --minify && pagefind --site public",
"pagefind": "pagefind --site public"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions templates/resume/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"packageManager": "pnpm@10.14.0",
"description": "Resume starter template for Hugo Blox with Tailwind CSS v4",
"scripts": {
"dev": "hugo server --disableFastRender",
"build": "hugo --minify && pnpm run pagefind",
"dev": "hugo && pagefind --site public --output-subdir ../static/pagefind && hugo server --disableFastRender",
"build": "hugo --minify && pagefind --site public",
"pagefind": "pagefind --site public"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions templates/saas-landing-page/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"packageManager": "pnpm@10.14.0",
"description": "Landing page starter template for Hugo Blox with Tailwind CSS v4",
"scripts": {
"dev": "hugo server --disableFastRender",
"build": "hugo --minify && pnpm run pagefind",
"dev": "hugo && pagefind --site public --output-subdir ../static/pagefind && hugo server --disableFastRender",
"build": "hugo --minify && pagefind --site public",
"pagefind": "pagefind --site public"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions templates/starter/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"packageManager": "pnpm@10.14.0",
"description": "Starter template for Hugo Blox with Tailwind CSS v4",
"scripts": {
"dev": "hugo server --disableFastRender",
"build": "hugo --minify && pnpm run pagefind",
"dev": "hugo && (pagefind --site public --output-subdir ../static/pagefind 2>/dev/null || true) && hugo server --disableFastRender",
"build": "hugo --minify && (pagefind --site public 2>/dev/null || true)",
"pagefind": "pagefind --site public 2>/dev/null || true"
},
"dependencies": {
Expand Down