react-magma-docs: Docs Search

[orion-cengage]

Proposed Technology: We are currently considering Algolia to power the search of our documentation.

Requirements:

• Must be able to search across all pages
• Hopefully able to search across the tabs of pages like individual components, and results link to the page and appropriate tab.
• Search results are displayed within a dropdown attached to the Search input, rather than a separate Results page.
• Need to be able to style and hopefully change the layout within that dropdown to create the best experience possible.

Questions

• Tabs: Does searching across tabs on component pages mean we need the tabs to have unique URLs?
• Versions: Do we need to structure the URL for old versions of docs like some of the other design systems?

Design WIP

https://cengage.invisionapp.com/share/MJ11EMUTN648

[orion-cengage]

Some of the big players are still using Algolia and it seems like it has been getting a lot of upgrades and improvements over the last couple years.

Examples:

MUI - https://mui.com/material-ui/react-button/

Bootstrap - https://getbootstrap.com/docs/5.3/customize/color-modes/

[moathabuhamad-cengage]

There are 3 main components to this feature:

1. Search Index (Indexed copy of our Docs)
2. Search Engine (will process a query and return a search result)
3. UI element (a search field and an element to display)

We have 4 possible solutions (easiest to hardest implementation):

• docsearch by Algolia is free for open-source projects they will crawl our docs site and create an Index.
• API based + SaaS : Algolia.
• API based + Self-hosted : Typesense.
• Client side search: gatsby-plugin-local-search and js-search.

For the UI Element we should use: InstantSearch or autocomplete