Add search-bar powered by local search index

[yujonglee]

Pull Request

Add search bar to the documentation site.

📖 Description

Currently, the documentation site does not have a search bar.
I implemented a search bar using:

• Pagefind
• Canary's UI component

Both are MIT licensed.

Video:
(Colors are configurable in the Docusaurus config)

Screen.Recording.2024-10-12.at.9.05.09.PM.mov

Notes:

• V2 and V1 are split. (Red tags in the video)
• The documentation (without API reference) and the API reference are split. (Small tabs in the video)
• If you want to try locally, run npm run build at least once, before running npm run start. Because Pagefind index is generated in production build.

🎫 Issues

None

👩‍💻 Reviewer Notes

None

📑 Test Plan

None

✅ Checklist

General

• I have included a change request file using $ npm run change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

⏭ Next Steps

None

[yujonglee]

@microsoft-github-policy-service agree

[janechu]

Hi @yujonglee, appreciate the PR but it looks like the documentation site (https://getcanary.dev/) for these packages is giving a 404, there is no README on npm registry (https://www.npmjs.com/package/@getcanary/docusaurus-theme-search-pagefind) and I can't be sure where the code is located.

I will close this for now, feel free to re-open once these issues are resolved. I do believe this is the correct approach however we must be able to do our due diligence on code security.