Skip to content

Refactor/pagefind search#2879

Merged
MoshiMoshiMochi merged 25 commits intoMarkBind:masterfrom
MoshiMoshiMochi:refactor/pagefind-search
Mar 31, 2026
Merged

Refactor/pagefind search#2879
MoshiMoshiMochi merged 25 commits intoMarkBind:masterfrom
MoshiMoshiMochi:refactor/pagefind-search

Conversation

@MoshiMoshiMochi
Copy link
Copy Markdown
Contributor

@MoshiMoshiMochi MoshiMoshiMochi commented Mar 29, 2026 •
edited
Loading

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:
closes #2870
sorted address a bit of #2871

Replaced window.PagefindUI with pagefind.js -> lazy loading it each time the search is open.
Added utility files to help processing of pagefind results.
Created and use in house UI & styling to render the results natively in Vue template.

Anything you'd like to highlight/discuss:

Currently still missing the updated testcases for Search.vue and new testcases for the utility files added for pagefind, but I wanted to push this ASAP so that others can work on the updated pagefind.

Added dynamic imports for pagefind by lazy loading it each time the search opens, and since we are using our own in house UI and styles, there is no longer a need for pagefind-ui.css & pagefind-ui.js as we will be referencing our own custom CSS and rendering instead.

Alright here comes the big changes on how the processing of results occurs. Some important terms to take note of for the following explanation.

  1. weight_location: index of the searched text that occurred within the page (i.e. user searches for "re" then the weighted_location would correspond to words that fits the search term e.g. "refactoring", "revision", "recover" etc).
  2. weight: The ranking of the result based on their element weightage.
  3. balanced_score: The ranking score of each search result calculated by pagefind.
  4. PagefindSearchFragment: The search result object that contains info of all occurrences and all its sub results
  5. PagefindSubResult: Contains more focused information from the PagefindSearchFragment.

After we query pagefind search for its results, pagefind returns us the results already sorted by balanced_score. We can then load EACH search results item by accessing each result's .data(). This returns us a PagefindSearchFragment. After which, we will process each results with the following steps to format them and their subresult for rendering.

Here's an example of the weighted_locations of a PagefindSearchFragment/PagefindSubResultwhen the user searches the term "Re".

weighted_locations: [
  {location: 18, weight: 7, balanced_score: 25095},  // "Refactoring" <- Corresponding located word
  {location: 200, weight: 3, balanced_score: 1500},   // "Revision"
  {location: 350, weight: 2, balanced_score: 800},     // "React"
  {location: 400, weight: 7, balanced_score: 25095},  // "Refactoring" <- It can appear again
  // ... more occurrences
]

Things to note from the example above: weighted_locations store the individual unique occurrences for all terms matched by pagefind, hence it is possible for the same word to appear multiple times!

Here are the steps to how the results are processed and formatted for rendering!

  1. Sort the weight_locations by balance_score > weight > location. This ensures that we rank each occurrences of the queried term in order of their importance.

  2. Iterate through the sorted weighted_locations to find the corresponding sub result that contains it the most. i.e. we are finding the the subresult that contains the most occurrences of the marked term.

  3. Sort the sub results by their page location so that they are in order for the user to view.

  4. Remove duplicate entries (cases where they may share the same title)

  5. Finally, we return this list along with the main result information for rendering in Search.vue

Lets talk about the rendered results!
Here are some pictures of the current rendered pagefind results which uses our own in house UI and css.

Markbind Documentation
image

CS2103 Site
image

A lot of the styling was used from the original blog's post, and yes, I updated it and bascially copied most of Algolia's design, except for displaying the excerpt (i think its useful to show it) & the way I highlight the terms. Unlike Algolia who seems to only mark the queried term, pagefind will mark the word that matches with the queried term, hence if we want to achieve the way Algolia performs it, we would need to do additionally processing, either when we are formatting the results, or after the results have been formatted.

Additionally, here are some interesting problems I faced and how I fixed them, optional to read them but just thought I would include them here in case you were wondering why parts of the code had additional checks/processing

Problem 1: First sub result == Main Result This is because our page names and their first heading are usually the same contributing to this error. For example, Sub Result: `makingTheSiteSearchable.html#making-the-site-searchable.` essentially points us to the same location as Main Result: `makingTheSiteSearchable.html`

The fix was, to check if the sub result's title is the same as the main result's title, and if they are don't include the sub result.

Though technically, Algolia's removes the latter, treating that specific subresult as the main result.

Problem 2: Mark terms not being shown Some of the marked terms were not appearing as they were being cut off within the ellipsis due to the length of the excerpt displayed. This was mainly because I was just displaying the entire excerpt instead on focusing on displaying the part of the excerpt with the marked queried term.

The fix for this was processing the excerpt length to display a maximum of 15 characters before the marked term to ensure that it is always included within the excerpt. i.e. the reason why truncateExcerptToShowMark method exists

Problem 3: Some Title Names are too damn long man This was mainly discovered because I found a bug where it seems that pagefind is indexing the headers generated within generated element. As a result, since these titles are extremely long, it ended up completely hiding the excerpt part of the `search-result-item.`

The fix for this was simple -> by ensuring title doesn't wrap around and overflows.

But from this I basically found out that we should probably discuss on what we want pagefind to be indexing as valid headers (and as a result a subsection). IMO, I don't think we should be letting pagefind index these generated headers.

Problem 4: The BIG one I realised this issue when serve the 2103 site and querying for "Refactoring", and only seeing 1 sub result (, the "What" section", ) when there should be like 5 or 6.

Referring back to how we select the subresult for each weighted_location,

  1. Iterate through the sorted weighted_locations to find the corresponding sub result that contains it the most. i.e. we are finding the the subresult that contains the most occurrences of the marked term.

So the issue occurred because most of the first 10 weighted_locations were referring to the same marked queried term "Refactoring". As a result, when iterating through the weighted_locations, it was essentially repeating the same process over and over again of finding the sub result with the most occurrence of the term "Refactoring". Hence, as the "What" section (i.e. subresult) had the most occurrences of the term "Refactoring", it was essentially selecting the "What" subresult for every single iteration, as such NOT including the other occurrences.

Afterwhich, in step 4:

  1. Remove duplicate entries (cases where they may share the same title)

It was removing all the duplicated sub results, hence why it was only displaying the 1 sub result.

For how much time it took me to log and debug this issue, the fix for was simple -> only store the FIRST instance of each sub-result allowing the correct storing of the other sections which ensures that we can display the actual maximum of 10 sub-results.

Ps: Sorry if my grammar is bad, its because of my ADHD I swear. I'll also add more links within this PR to where I found these resources (though I did include quite a bit within types.ts already), its 1am in the morning and a Monday, I'm going to sleep now gn my friends. Sweet dreams too.

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)

Refactor pagefind to use pagefind.js with in house UI & css

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).

@MoshiMoshiMochi
Add pagefind search result utility files
7e622a4
@MoshiMoshiMochi
Remvove pagefind-ui.css & load pagefind.js dynamically
5993850 
No longer a need for pagefind-ui.css as we will be referencing our own
custom CSS instead. Likewise, we no longern eed PagefindUI's js.

Dynamically imports pagefind by lazy loading it each time the search
opens.
@MoshiMoshiMochi
Fix import path in page.njk
78ed61d
@MoshiMoshiMochi
Replace PagefindUI with pagefind.js API in Search.vue
27284f6 
Removed deep() overrides with custom css
Update keyboard navigation using selectedIndex state
Remove MutationObserver and innerHTML hacky solution
Implemented custom result rendering
@MoshiMoshiMochi
Update styling for Search.vue
4679ec6
@MoshiMoshiMochi
Update pagefind search utils to process subresult status
7f3c4e9 
Included an additional field subResult fields in FormattedSearchResult
to detect whether the result if a subResult and if it is the last
subResult.

Updated Search.vue results to indicate if a result if a main result or a
search result with svgs. Svgs were taken from algolia's design on the
cs2103 website.
@MoshiMoshiMochi
Fix bug first index sub result and Clean search.css
eb4f989 
The occured as the first sub result would be essentially the same as the
main result. This is because our page names and their first heading are
usually the same contributing to this error. For example,
makingTheSiteSearchable.html is the same as
makingTheSiteSearchable.html#making-the-site-searchable.

Hence, by checking of the sub result's title is the same as the main
result's title, we can identify which sub result to not include when
displaying the data.

Also search.css by removing accidentally duplicated code and
restructuring the order of the class selectors in a more logical manner.
Also included more comments explaining and breaking down the classes
into different sections for easier understandability. Word lol
@MoshiMoshiMochi
Update styling for mark & font sizes
1e484be
@MoshiMoshiMochi
Fix mark component not appearing in excerpt bug
89827ce 
Some of the marked components were not appearing as they were being cut
off within the elipsis due to the length of the excerpt displayed.

Hence, instead, it now processes the excerpt length to display a maximum
of 15 characters before it to ensure that the marked components are
always included.
@MoshiMoshiMochi
Add nowrap for result titles styling
6271bde 
This was mainly discovered because I found a bug where it seems that
pagefind is indexing the headers generated within generated
<question></question>. As a result, since these titles are extremely
long, it ended up completely hiding the excerpt part of the
search-result-item.

Hence, this warrants a change by first ensuring that nowrap on the title
to ensure that it only displays the first part of the header.

And also, I need to raise a issue for the bug as I don't think we should
be letting pagefind index these generated headers.
@MoshiMoshiMochi
Add merging of consecutive marked terms
4eb8cdd 
This will ensure that they are displayed as one segment instead of 2
distinct segements when the search terms are next to each other within
the excerpt.
@MoshiMoshiMochi
Fix bug storing only duplicated sub-results not unique
714c640 
Previous it was adding duplicated sub-results instead of unqiue ones.
E.g.when searching "refactoring" in 2103 site, it was would store 10
(the count limt) copies of the "What" subresult instead of the other
sub-sections (How, When, etc).

This happened because it was iterating through each weighted location
(i.e. the search term position). And for each, it would select the
sub-result with the most context, after which it would push the it into
the sub array without checking for duplicates. Hence, using the 2103
site example from before, there were >=10 instances of "Refactoring" in
"What" section, it was interating through these instances until it
reached the 10 count limit. After which, the filters to remove the
duplicated entries would result in only mention of the "What" section
being displayed, which meant that it would only display "Refactoring"
with 1 sub result -> "What" section.

Hence, to fix this, I added a duplicate check before pushing subs array.
Now we will only store the FIRST instance of each sub-result. Hence
"What" is stored once, and it will allow the correct storing of the
other sections as well. This ensures that we can display the actual
maximum of 10 sub-results.
@MoshiMoshiMochi
Add more DocSearch styling
6084fda
@MoshiMoshiMochi
Use score instead of weight when sorting
f01e27a
@MoshiMoshiMochi
Copy link
Copy Markdown
Contributor Author

MoshiMoshiMochi commented Mar 29, 2026

@MarkBind/active-3281-members

Still got test cases to make but yall can take a look at the netlify preview first to see how the updated pagefind UI looks like!

https://deploy-preview-2879--markbind-master.netlify.app/userguide/makingthesitesearchable#using-pagefind-beta

@gerteck
Copy link
Copy Markdown
Member

gerteck commented Mar 29, 2026 •
edited
Loading

@MarkBind/active-3281-members

Still got test cases to make but yall can take a look at the netlify preview first to see how the updated pagefind UI looks like!

WIP looking good!! Clean design, looking forward to the final form 👀

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 30, 2026 •
edited
Loading

Codecov Report

❌ Patch coverage is 91.56627% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 71.40%. Comparing base (cb0edbc) to head (18cdda1).
⚠️ Report is 1 commits behind head on master.

Files with missing lines Patch % Lines
packages/core/src/Pagefind/searchUtils.ts 90.14% 7 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #2879      +/-   ##
==========================================
+ Coverage   71.04%   71.40%   +0.35%     
==========================================
  Files         131      132       +1     
  Lines        7119     7231     +112     
  Branches     1587     1626      +39     
==========================================
+ Hits         5058     5163     +105     
- Misses       1961     2062     +101     
+ Partials      100        6      -94

☔ 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 MoshiMoshiMochi marked this pull request as ready for review March 30, 2026 14:46
@gerteck gerteck requested a review from Copilot March 31, 2026 03:59
Copilot AI reviewed Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Refactors MarkBind’s Vue search modal to use the lower-level pagefind.js API (lazy-loaded) instead of window.PagefindUI, and introduces core utilities/types to format Pagefind results for a custom in-house UI.

Changes:

  • Replaced PagefindUI DOM-injection approach with pagefind.js + Vue-native result rendering and keyboard navigation.
  • Added @markbind/core/src/Pagefind types + formatting utilities (with new unit tests).
  • Updated site asset injection to drop pagefind-ui.css/js and provide a window.loadPagefind() loader; updated functional test HTML snapshots accordingly.

Reviewed changes

Copilot reviewed 121 out of 122 changed files in this pull request and generated 8 comments.

Show a summary per file
File Description
packages/vue-components/src/pagefindSearchBar/Search.vue Switches to pagefind.js search + custom Vue-rendered results UI
packages/vue-components/src/pagefindSearchBar/assets/search.css New/updated styling and CSS variables for the in-house search UI
packages/vue-components/src/tests/Search.spec.js Updates tests for the new Search.vue behavior and UI rendering
packages/core/test/unit/Pagefind/searchUtils.test.ts Adds unit tests for Pagefind result formatting utilities
packages/core/src/Site/SitePagesManager.ts Updates injected Pagefind asset from pagefind-ui.js to pagefind.js
packages/core/src/Pagefind/types.ts Adds TS types describing Pagefind API result structures + formatted result type
packages/core/src/Pagefind/searchUtils.ts Adds result formatting utilities (ranking, truncation, mark merging, etc.)
packages/core/src/Pagefind/index.ts Adds Pagefind subpath entry point (types + utilities re-exports)
packages/core/src/Page/page.njk Replaces pagefind-ui includes with a lazy window.loadPagefind() dynamic import loader
packages/core/package.json Exposes ./src/Pagefind export path for consumers
packages/cli/test/functional/test_site/expected/testWeb3FormPlugin.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testVariableContainsInclude.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testTree.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testTooltipSpacing.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testThumbnails.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testSourceContainScript.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testSingleAltFrontMatter.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPopoverTrigger.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPopovers.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPlantUML.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPanelsClosingTransition.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPanels.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPanelMarkdownParsing.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPageNavWithoutTitleAndNavHeadings.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPageNavWithOnlyTitle.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPageNavTarget.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPageNavPrint.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testPageNav.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testOcticonInPage.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testNunjucksPathResolving.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testModals.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testMermaid.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testMath.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testMaterialIconsInPage.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testList.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testLinks.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testLayoutsWithAltFrontMatter.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testLayoutsOverrideWithAltFrontmatter.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testLayoutsOverride.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testLayouts.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testIncludePluginsRendered.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testIncludeMultipleModals.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testIncludeBoilerplate.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testImages.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testIconsInSiteLayout.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testHr.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testGlyphiconInPage.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testFontAwesomeInPage.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testExternalScripts.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testEmptyFrontmatter.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testEmptyAltFrontMatter.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testDates.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testCodeBlocks.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testCenterText.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testBootstrapIconInPage.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testAnnotate.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testAnchorGeneration.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testAltFrontMatterParsing.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/testAltFrontMatterInvalidKeyValue.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/test_md_fragment.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/sub_site/testNunjucksPathResolving.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/sub_site/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site/expected/bugs/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/UserGuide.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/QuickStart.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/Features.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/FAQ.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/team/johndoe.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/team/AboutUs.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/TracingCode.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Testing.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/SettingUp.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Requirements.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Implementation.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Documentation.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/DevOps.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/DeveloperGuide.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Design.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Configuration.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_portfolio/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_minimal/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_default/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic3b.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic3a.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic2.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic1.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_templates/test_default/expected/404.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_table_plugin/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_special_tags/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_custom_plugins/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/test_folder/extra_3.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/test_folder/extra_2.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/test_folder/extra_1.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/README.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/Page-1.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/Home.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic3b.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic3a.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic2.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic1.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/about.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/404.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/Page-1.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/Home.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic3b.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic3a.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic2.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic1.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/about.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/404.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/_Sidebar.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/_Footer.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
packages/cli/test/functional/test_site_algolia_plugin/expected/index.html Updates expected HTML to remove pagefind-ui CSS/JS and include loader script
.gitignore Ignores compiled JS output under packages/core/src/Pagefind
.eslintignore Ignores compiled JS output under packages/core/src/Pagefind

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

gerteck
gerteck approved these changes Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@gerteck gerteck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work on this @MoshiMoshiMochi

Just a suggestion on abstracting the inline script of page.njk

Otherwise this PR is a big step in the direction of removing the dependency on the pre-defined pagefind assets ui.js and ui.css that will allow us the flexibility to adapt the search to our needs!

After addressing the comments on this PR I think it can be merged

packages/core/src/Page/page.njk Outdated
window.__pagefind__ = null;
window.loadPagefind = async () => {
if (!window.__pagefind__) {
const module = await import('{{ baseUrl }}/markbind/pagefind/pagefind.js');
Copy link
Copy Markdown
Member

@gerteck gerteck Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very nice way of lazy loading 👍

packages/vue-components/src/pagefindSearchBar/Search.vue
Copy link
Copy Markdown
Member

@gerteck gerteck Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

noticed some UI issues with the interface, but I think this iteration of shifting the search to inhouse is already more than adequate 👍 , and any UI refines can be tackled in subsequent PRs.

@MoshiMoshiMochi
Copy link
Copy Markdown
Contributor Author

MoshiMoshiMochi commented Mar 31, 2026

Does anyone else wanna look at the PR? If not imma merge it

@MoshiMoshiMochi MoshiMoshiMochi added the r.Patch Version resolver: increment by 0.0.1 label Mar 31, 2026
@MoshiMoshiMochi MoshiMoshiMochi merged commit b8a8991 into MarkBind:master Mar 31, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@gerteck gerteck gerteck approved these changes

Assignees

No one assigned

Labels

r.Patch Version resolver: increment by 0.0.1

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Refactor Search.vue to use pagefind.js instead of window.PagefindUI

3 participants

@MoshiMoshiMochi @gerteck