Styled-components-website: Add site search

[mxstbr]

I love how the React and Flow docs do their search, I think that's using Algolia? We should have the search input on every page, so it'll likely have to sit in the nav bar at the top, ref #83.

~For now it'd be fine to only live on docs pages in the sidebar though, don't let yourself be blocked by #83!~

Update: There's a search component ready for the nav bar.

[morajabi]

@mxstbr I checked Flow and it's using Algolia. How do you want results to be? I think Flow results box are a bit overhead for styled-components, isn't it? I'd like to implement it.

[mxstbr]

I quite like the flow result box, but feel free to experiment and come up with something better!

[morajabi]

I found this: https://github.com/algolia/docsearch I'm pretty sure it's what Webpack, Babel, React and others use. How is it?

[mxstbr]

Let's do it!

[morajabi]

@mxstbr @philpl I need to inject a small JS into the docs page so Algolia team can scrape our site and then I can go forward with the search component.

[mxstbr]

Sounds great!

[morajabi]

This is the reply I got from Algolia team (I thought it's good to have it here too):

---

Hi Mohammad,

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: '79886fb59ad3ebe2002b481cffbbe7cb',
indexName: 'styled-components',
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/styled-components.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 :)

---

I'll try setting it up tomorrow.

[mxstbr]

👌

[mckernanin]

@morajabi need any help getting this wrapped up?

[morajabi]

This was done actually, but I think we had a minor problem on mobile and we hold it? @mxstbr Am I recalling correctly?

[imbhargav5]

Fixed as of #310