hpe-design-system icon indicating copy to clipboard operation
hpe-design-system copied to clipboard

Add Algolia docs search

Open taysea opened this issue 1 year ago • 3 comments

Deploy Preview

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

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

taysea avatar May 30 '23 23:05 taysea