Add Algolia search bar?

[clairefro]

The award-winning tutorial is ~18,000 words long. Should we help users find stuff quickly by adding a search bar?

How to add search bar in Docusaurus: https://v2.docusaurus.io/docs/search

Obstacles:

1. How to approach i18n?
2. Who owns API key?

[cannikin]

Definitely. I'm using Algolia now for the search on the main site so I can just make a new API key! I'll get it to you on Slack.

Can this Contextual Search work with the locale instead of a version? If it just works on the URL path then maybe the locale would have to come after /docs/ since that's where the version normally goes? Or, Docusaurus places some special significance on the version identifier and it only works with that. :(

[cannikin]

Okay I signed up at https://docsearch.algolia.com/apply/ and they'll supposedly send us the code to integrate soon. Maybe it'll handle the translated docs automatically? 😬

[cannikin]

Check it! Want to do the honors?

Hi there, 

Congratulations, your search is now ready! 
I've successfully configured the underlying crawler and it will now run every 24h. 

You're now a few steps away from having it working on your website: 

- Copy the following CSS/JS snippets and add them to your page 

<!-- at the end of the HEAD --> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" /> 

<!-- at the end of the BODY --> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> 
<script type="text/javascript"> docsearch({ 
apiKey: '1758f0d1738d7b343c07374765afa18d', 
indexName: 'learn-redwood', 
inputSelector: '### REPLACE ME ####', 
algoliaOptions: { 'facetFilters': ["type:$TYPE"] }, 
debug: false // Set debug to true if you want to inspect the dropdown 
}); 
</script> 

- Add a search input in your page if you don't have any yet. Then update the inputSelector value in JS snippet 
to a CSS selector that targets your search input field. 

- Replace $TYPE with the type you want to search on. 
The list of possible type is hardcoded in the config. 
So as of today you have: content, lvl1, lvl3, lvl4 

For example if you want to refine the search to the type "content" just specify: 'facetFilters': ["type:content"] 

- Optionally customize the look and feel by following the DocSearch documentation 
(See https://docsearch.algolia.com/docs/styling/) 
- You can also check your configuration in our GitHub repository 
(See https://github.com/algolia/docsearch-configs/blob/master/configs/learn-redwood.json). 
- rob@prestonwernerventures.com has already an Algolia account. Analytics available from the Algolia dashboard by selecting the application DOCSEARCH (access granted) 
Please open a pull request if want to leverage your configuration! 

Feel free to get back to us if you have any issues or questions regarding the integration. 

We'd also be happy to get your feedback and thoughts about DocSearch - so we can continue to improve it. 

Have a nice day :)

[cannikin]

You snooze, you lose! Now I get all the glory. 😛