Add algolia UI #22
Closed
Add algolia UI #22
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
These pages will be the browsing/search pages for specific categories of content. Also established links to these pages from our nav components (footer and categoryHero).
This provides resets and base styles for the instantsearch UI components.
This search client includes our Algolia project ID and read-only API key. Both of these are safe and in fact intended to be used client-side. Individual search UIs can import and use this client with the InstantSearch React component.
Breakpoints can't be set through CSS custom properties. Instead, we set them in JS and use string interpolation in styled components to share reusable breakpoint dimensions.
This is the core infrastructure for styling the Algolia hit components for tutorials (the search result cards). In the hits.js module we're extending the built-in Algolia hit component so that we can pass props to the hit components in the future (e.g. to control information display). In the tutorialHit.js module we're setting up the result card's display specifically for tutorial results. Right now we're just showing the title and a snippet extract from the search.
The categories match the existing learn site and correspond to fields in the Algolia data model.
We implement a custom version of the Algolia instantsearch RefinementList in order to get control over styling.
This ensures that the counts next to each keyword in the RefinementsList (and other faceting widgets) correspond to the number of tutorials (base URLs) rather than the number of documents in the Algolia DB.
If there are too many facets in a keyword list, the user can either hit the show more button to show additional facets, or search for the facet. The default is to order facets by their popularity, which especially makes sense in the context of showing results from a search term---you want to use these keywords to filter further and it makes sense to be able to zero in on the most popular keyword (or exclude it). This work is using the built-in instantsearch styling so far.
This widget makes it easy to see and dismiss what filters are active. The custom CurrentRefinement component includes a function to translate database attributes into presentational labels (e.g. "astropy_package_keywords" to "Astropy package")
The goal is to match the appearance of the existing tutorial card.
Merged
|
Replaced by #25 since we're now looking to put results on the homepage, and combine search results from all content types. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The purpose of this work is to begin adding the Algolia InstantSearch UI into the Learn site to provide a browseable, filterable, and searchable listing of content.