Emotion: Adding search to the documentation

[Haroenv]

Hey! I noticed that the website doesn't have search, as you might have seen on other websites, it's pretty simple to add DocSearch to a website like these for free. Some examples:

• glamorous
• React

Fair disclosure: I work for Algolia

[tkh44]

I would love to have this.

[tkh44]

I started the process of getting indexed.

[mitchellhamilton]

A few days ago I signed up for it and I just got an email asking if I was the owner and if I can add a JS snippet which I just replied to.

[Haroenv]

I see both of your emails, we’ll index it tomorrow 😄

[s-pace]

​Glad to know that you are eager to implement it.
​
​In such purpose, I will need you to add some specific classe names to some relevant DOM elements of your website. We will use this web page as an example.
​
​Could you add a steady class name, e.g. docSearch-content to the following highlighted element:

​Dom element that must have a steady class name like docSearch-content. Matching XPATH selector: //*[@id="___gatsby"]/div/div/div[2]/div/div/div[3]/div/div[1]

​Could you add also another classe name, e.g. docSearch-lvl1 to the following active one:
​

DOM "curent" element that must have a steady class name like docSearch-lvl1.
​
​Finally the following element would need a specific class too like docSearch-lvl0:
​

​DOM "curent" element's parent that must have a steady class name like docSearch-lvl0.
​
​Those classes will help use to extract the right context of your documents and hence increase the relevancy of your search experience.
​
​Last but not least, if you could add a sitemap, it would be a safer way to ensure that we don't miss any document. Otherwise, we will crawl your web site in order to discover it.
​
​Feel free to ping us if you need any further detail or help.

[mitchellhamilton]

@s-pace Just added those classes and a sitemap.

[s-pace]

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: 'd160789a17f10ba962c4bce1b298fbbb', 
 indexName: 'emotion_sh', 
 inputSelector: '### REPLACE ME ####', 
 debug: false // Set debug to true if you want to inspect the dropdown 
}); 
</script> 

• Add a search input if you don't have any yet, and update the inputSelector value in the code snippet to a CSS selector that targets your input field.
• Optionally customize the look and feel by following the DocSearch documentation (https://community.algolia.com/docsearch/documentation/)
• You can also check your configuration in the github repo (https://github.com/algolia/docsearch-configs/blob/master/configs/emotion_sh.json). Feel free to open pull requests!

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 :)