hpe-design-system
hpe-design-system copied to clipboard
Add Algolia docs search
What does this PR do?
Draft PR to demo use of "Algolia DocSearch" to site. Search is a key functionality of the docs site and we have limited resources at the moment to enhance our in-house search algorithm. This PR demos use of Algolia's free Docsearch (free for docs sites). Algolia is used by other docs site like Material UI, Tailwind CSS, and Gatsby (among many others).
Algolia handles creating the search index and we just render the component and can adjust styling of the modal using CSS. I've taken a stab to align with our brand colors/somewhat closely to the existing search modal.
Click on the "Search" icon in the header to view.
Notes/To dos:
- [x] Fix TestCafe tests which are looking for old search element. NOTE: also updated deeplinks test to just be checked in the search test and remove need for the separate file/redundant test.
- [x] See if we can have search results use Next Link as opposed to native HTML anchor (to improve routing/reload performance): I believe we can leverage
transformItems
from their API: https://docsearch.algolia.com/docs/api#transformitems - [x] CSS for dark mode
Where should the reviewer start?
What testing has been done on this PR?
In addition to the feature you are implementing, have you checked the following:
General UX Checks
- [ ] Small, medium, and large screen sizes
- [ ] Cross-browsers (FireFox, Chrome, and Safari)
- [ ] Light & dark modes
- [ ] All hyperlinks route properly
Accessibility Checks
- [ ] Keyboard interactions
- [ ] Screen reader experience
- [ ] Run WAVE accessibility plugin (Chrome)
Code Quality Checks
- [ ] Console is free of warnings and errors
- [ ] Passes E2E commit checks
- [ ] Visual snapshots are reasonable