Add PageFind beta V2 (Full Text Search across Site)

[MoshiMoshiMochi]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Overview of changes:

Initial version of pagefind (based on #2771)

Original Search Issue is #205

No test cases yet.

Anything you'd like to highlight/discuss:

1. Created a new Search.vue component <search /> that renders the pagefind search modal.
   • The CSS of which definitely isn't a finish product.
   • Additionally we could consider updating how we present the data.

Heres how the modal currently looks vs Algolia's (CS2103 site)

Current implementation of pagefind.

Algolia's styling on CS2103 website

From the 2 images above, I believe that Algolia's styling is notably more structured in how it represents the search results and subresults, notably on how they group the search results.

The blog we used as reference for the styling formats the pagefindresults by processing the search results. More information on how to access the specific search results information can be found here.

2. Added pagefind configuration options within site.json to enable more flexible filtering options. Users can declare
   • exclude_selectors option to exclude specific elements from being searchable.
   • glob option to limit which pages are indexed by Pagefind.

{
  "pagefind": {
    "exclude_selectors": [".algolia-no-index", "[class*='algolia-no-index']"]
    "glob": ["**/devGuide/**", "**/userGuide/**"]
  }
}

• from the example above,
  • exclude_selectors: tells Pagefind to exclude any element with the algolia-no-index class from the searchable results. It works the same way as declaring data-pagefind-ignore.
  • glob: Pagefind will only index pages that are found inside devGuide and userGuide directories (including subdirectories).

All in all, theres still a lot more things we can do to improve this pagefind feature (like page weighting, ranking, sorting etc). But this is all I've managed to conjure up thus far.

Let me know what yall think of these updates to the pagefind feature (there might be better ways to filter pages, this is just from my interpretation when reading through the pagefind docs). Let me know if I missed out on anything in particular or should be focusing my efforts more towards.

• Definitely going to spend more time working on the styling. But I think if we're gonna process and present our data differently from the base Pagefind UI, then we should probably work on those at the same time since they are intrinsically linked.
• Also needa write testcases 😔. Not looking forward to that 😢

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)

Add base Pagefind with updated UI & extra filtering functionalities

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

---

Reviewer checklist:

Indicate the SEMVER impact of the PR:

• Major (when you make incompatible API changes)
• Minor (when you add functionality in a backward compatible manner)
• Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

• To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

• what was the old feature that was made obsolete
• any replacement feature (if any), and
• how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

[codecov]

Codecov Report

❌ Patch coverage is 96.18321% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.88%. Comparing base (64c1dca) to head (0b71c41).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
packages/core/src/Site/SiteGenerationManager.ts	96.00%	3 Missing ⚠️
packages/core/test/unit/utils/data.ts	83.33%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2857      +/-   ##
==========================================
+ Coverage   70.41%   70.88%   +0.47%     
==========================================
  Files         129      131       +2     
  Lines        6952     7083     +131     
  Branches     1578     1660      +82     
==========================================
+ Hits         4895     5021     +126     
- Misses       1957     1962       +5     
  Partials      100      100              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[MoshiMoshiMochi]

Hi guys, sorry for the wait, marking this as ready to review!

As mentioned in the PR description, while I believe there are still plenty of things that we can work on to enhancing the Pagefind feature in the future.

Namely, we could take a look at

1. Creating a subsection for our results (similar to how algolia does it, as discussed in last week's meeting). I kinda have an idea of how to extract and process the results information so definitely will work on this as soon as this PR is merged.

2. Get it to work on hot reloading

We can probably make separate issues for these things.

The current implementation is far from perfect (e.g. a lot of css can be improved, clearly still an issue when using at different browser sizes, also a lot of z level issues with the navbar & nav components).

So let me know of what yall think of the current implementation, anything to improve, anything pressing to fix, etc.

@MarkBind/active-3281-members

[Copilot]

Pull request overview

Adds Pagefind-based full-text search to MarkBind as a beta feature, including build-time indexing, asset injection into generated pages, a new Vue <search /> modal UI, and supporting configuration/docs/test updates.

Changes:

• Introduce a new Vue Search component (Pagefind UI modal) and styling assets.
• Generate and inject Pagefind search assets during site generation, with site.json support for pagefind.exclude_selectors and pagefind.glob.
• Update unit/functional tests, expected HTML outputs, and tooling ignores to accommodate generated Pagefind artifacts.

Reviewed changes

Copilot reviewed 128 out of 130 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
packages/vue-components/src/pagefindSearchBar/assets/search.css	Adds global CSS for the Pagefind search modal styling.
packages/vue-components/src/pagefindSearchBar/Search.vue	New Pagefind-backed search modal component + keyboard handling and UI overrides.
packages/vue-components/src/pagefindSearchBar/LogoPagefind.vue	Adds Pagefind logo SVG for the modal footer.
packages/vue-components/src/index.js	Registers the new Search component for <search /> usage.
packages/vue-components/src/tests/Search.spec.js	Adds unit tests for the new Search component behavior.
packages/core/test/unit/utils/data.ts	Adds factories/helpers for mocking Pagefind and generating site.json with Pagefind config.
packages/core/test/unit/Site/SiteGenerationManager.test.ts	Adds unit tests for Pagefind glob normalization/validation and indexing behavior.
packages/core/src/Site/SitePagesManager.ts	Injects Pagefind UI CSS/JS asset paths into page rendering assets when search is enabled.
packages/core/src/Site/SiteGenerationManager.ts	Adds Pagefind indexing during site generation and glob filtering support.
packages/core/src/Site/SiteConfig.ts	Extends site config to include optional pagefind configuration.
packages/core/src/Page/page.njk	Injects Pagefind UI stylesheet/script into generated pages when available.
packages/core/src/Page/PageConfig.ts	Adds pagefindCss/pagefindJs to PageAssets type.
packages/core/package.json	Adds pagefind dependency for build-time indexing.
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/UserGuide.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/QuickStart.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/Features.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/FAQ.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/team/johndoe.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/team/AboutUs.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/TracingCode.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Testing.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/SettingUp.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Requirements.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Implementation.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Documentation.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/DeveloperGuide.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/DevOps.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Design.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Configuration.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_portfolio/expected/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_minimal/expected/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_default/expected/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic3b.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic3a.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic2.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic1.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_templates/test_default/expected/404.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_table_plugin/expected/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_special_tags/expected/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/test_folder/extra_3.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/test_folder/extra_2.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/test_folder/extra_1.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic3b.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic3a.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic2.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic1.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/about.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/README.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/Page-1.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/Home.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/404.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic3b.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic3a.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic2.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic1.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/about.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/_Sidebar.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/_Footer.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/Page-1.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/Home.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/404.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site_algolia_plugin/expected/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/test_md_fragment.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testWeb3FormPlugin.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testVariableContainsInclude.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testTree.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testTooltipSpacing.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testThumbnails.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testSourceContainScript.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testSingleAltFrontMatter.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPopovers.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPopoverTrigger.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPlantUML.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPanelsClosingTransition.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPanels.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPanelMarkdownParsing.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPageNavWithoutTitleAndNavHeadings.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPageNavWithOnlyTitle.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPageNavTarget.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPageNavPrint.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testPageNav.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testOcticonInPage.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testNunjucksPathResolving.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testModals.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testMermaid.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testMath.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testMaterialIconsInPage.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testList.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testLinks.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testLayoutsWithAltFrontMatter.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testLayoutsOverrideWithAltFrontmatter.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testLayoutsOverride.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testLayouts.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testIncludePluginsRendered.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testIncludeMultipleModals.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testIncludeBoilerplate.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testImages.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testIconsInSiteLayout.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testHr.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testGlyphiconInPage.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testFontAwesomeInPage.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testExternalScripts.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testEmptyFrontmatter.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testEmptyAltFrontMatter.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testDates.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testCodeBlocks.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testCenterText.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testBootstrapIconInPage.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testAnnotate.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testAnchorGeneration.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testAltFrontMatterParsing.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/testAltFrontMatterInvalidKeyValue.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/sub_site/testNunjucksPathResolving.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/sub_site/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/test_site/expected/bugs/index.html	Updates expected HTML to include Pagefind UI assets.
packages/cli/test/functional/testUtil/compare.ts	Adds ignore support for generated Pagefind outputs in functional comparisons.
packages/cli/test/functional/test.ts	Uses new compare() signature to ignore generated pagefind/ directories.
package-lock.json	Locks Pagefind and platform-specific optional dependencies.
docs/userGuide/makingTheSiteSearchable.md	Documents Pagefind beta usage and new site.json options.
.stylelintrc.js	Adds stylelint override for Pagefind UI class naming patterns.
.gitignore	Ignores generated Pagefind directories and fragments.
.eslintrc.js	Adds ESLint ignore patterns for generated/build output directories.
.eslintignore	Ignores generated Pagefind JS under functional test outputs.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Harjun751]

Huge effort, and it definitely paid off!

Requesting some changes/clarifications for the

• debug.log file
• empty glob parsing
• windows directory safety check
• spawned watcher

issues, but other than that it's all minor nits. After the above I think we'll be in a good state.

[gerteck]

I tried dropping the default pagefind-ui.css and realized the search component is depending on it quite heavily

[gerteck]

Good first step introducing pagefind into MarkBind @MoshiMoshiMochi . The build-time integration (Node API, createIndex/addDirectory/writeFiles, glob support, exclude_selectors config) is solid and the right approach.

The main concern is in Search.vue. The current implementation wraps window.PagefindUI — a pre-built UI component that injects its own DOM, inside a custom modal shell, then works against PagefindUI's behaviour to get the desired result:

• ~70 lines of :deep(.pagefind-ui__*) CSS overrides to fight PagefindUI's default styles
• A MutationObserver to detect when PagefindUI renders results (needed because Search.vue has no direct control over PagefindUI's rendering
  lifecycle)
• Custom keyboard navigation running alongside PagefindUI's own keyboard handling
• container.innerHTML = '' on modal close as a teardown workaround (PagefindUI has no destroy API)
• Silent failure if window.PagefindUI is undefined (script load error goes unnoticed)

This is workable for a first cut, but the cause-and-effect is opaque, where future contributors would need to understand both the PagefindUI internals and overrides to make changes safely. It also loads pagefind-ui.js (84.6KB) + pagefind-ui.css (14.5KB) on every page, when we only need pagefind.js (33.8KB).

The long-term direction should be:

• Replace window.PagefindUI with the lower-level pagefind.js API, which lets you query the index directly and returns plain data objects
• Ideally, Search.vue owns all the DOM natively as Vue reactive state — no CSS overrides, no MutationObserver, no innerHTML teardown, no global window dependency.

Suggest tracking this as follow-up issues:

1. Replace window.PagefindUI with pagefind.js lower-level API — remove the <script src="pagefind-ui.js"> global, dynamically import pagefind.js inside the component instead
2. In-house result rendering — render results natively in the Vue template (title, excerpt, sub-results, active highlight) instead of delegating to PagefindUI's DOM
3. In-house CSS — replace :deep() overrides with first-party styles scoped to our own markup

I think it is okay to approve as a foundation if these follow-ups are tracked, since the build-time indexing is correct and the search does work end-to-end, just wanted to clarify on your architectural direction for the component moving forward! @MoshiMoshiMochi

[Harjun751]

Changes I requested are addressed 👍

[github-actions]

@MoshiMoshiMochi Each PR must have a SEMVER impact label, please remember to label the PR properly.