Add Pagefind Plugin #2568
Add Pagefind Plugin #2568
Conversation
…kbind into branch-addFullSearch
Conditional rendering for indexing for pagefind Fix bug of pagefind vue component
Add custom pagefind searchbar and searchbarResultItem vue components, that make use of pagefind API. Updated plugin to work with vue components Added defaultUI option to use default Pagefind UI Updated indexing logic
|
Thanks for picking this @gerteck |
|
As discussed previously, this is a fantastic addition to MarkBind! Something to consider after this PR would be the usability aspect. Given that the existing search function (by header) differs from this one (by text), with neither being replacements for the other (and with valid use cases for both), what we should consider is: How do we increase the visibility of this plugin? Is documentation sufficient for users to be able to find and use this plugin, or should we actively include it in our templates? (And if so, how do we arrange / prioritise the two search functions in the UI?) As mentioned during the group discussion, SICP JS in Source Academy handles this problem by putting both search functions side-by-side. By this train of thought, it might be worthwhile to make both of the search functions into modular components. |
Thank you for the insights! Completely agree with the further considerations for the feature addition. I think it relates with @2529 and there will be a need for further analysis of the cost and benefit of making certain plugins default and increasing the usability/visibility of the features of each plugin. The integration of both search functions as modular components could also be new issues to investigate and discuss! Will work on adding documentation for the plugin after further discussion and confirmation on the feature 👍 |
|
To add, the ideal outcome is that this plugin replaces both the current search (i.e., headers only) feature and the need to use third party search. The ideal is if this plugin can do what Algolia currently does for us (in terms of what user sees -- example https://nus-cs2103-ay2425s2.github.io/website/ ), or at least come close. |
During the discussion with @gerteck, the point made was that searching by header and searching by text have somewhat different use cases and each of them might be necessary for different situations (especially since MarkBind tends to be header-heavy given its use case). If the initial goal was to replace the current search with this plugin, then I think we should consider one of these:
Of course, keeping in mind that this is out of scope for this PR & we may have to open a new issue to continue discussing this (@gerteck feel free to start this discussion issue), also given this comment:
|
|
After discussion last week, I realized that if we can get a fully functional search bar that does a full text search, it would probably be a better idea to just do away with the index/header search, since it was a placeholder from the start. I found an interesting adaption of Pagefind in a very similar fashion to Algolia, see here
Using the vue command palette package, it would not be too hard to recreate the algolia UI sample implementation here (open source chinese blog, can do ctrl + k to open command palette, search "test") and effectively replace the current search bar with that. However, the issue is that these packages are all in Vue 3 making it incompatible with the current Vue2 library. I think it may be time to tackle the Vue 2 -> Vue 3 migration for greater longevity of the current components and future new components if developed |
What is the purpose of this pull request?
Overview of changes:
This PR introduces the PageFind plugin to the project, enabling full-text search capabilities for static sites. Read about PageFind.
Using the Pagefind plugin allows users to search through all content on the webpage entirely offline without signing up and/or using an online external search service (e.g. Algolia).
This PR builds on #2477
This relates to #205
Anything you'd like to highlight/discuss:
In brief, PageFind plugin indexes all files during the build process and generates the necessary search data. This data is then bundled into static assets that are served alongside the site. The assets are saved directly into the output directory (/_site/pagefind), and the plugin script is designed to load these assets dynamically.
Addressed Concerns:
Additional Tasks / To-do:
Possible Further Improvements:
Testing instructions:
site.json<pagefind-searchbar/>Other things you can try to play with:
<pagefind-searchbar defaultUI/>layouts/default.mdto<pagefind-searchbar menu-align-right/>This is how it roughly looks like on a sample page:
Proposed commit message: (wrap lines at 72 characters)
Add PageFind Plugin
Checklist: ☑️
Reviewer checklist:
Indicate the SEMVER impact of the PR:
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):