cengage
react-magma-docs: Docs Search
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
https://www.figma.com/design/pdcWRIHYjeu8y09XzAT1SB/Documentation-Site?m=auto&node-id=0-1100&t=IecisTBX2XiyUhXY-1
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/
There are 3 main components to this feature:
- Search Index (Indexed copy of our Docs)
- Search Engine (will process a query and return a search result)
- 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
