Add search to the website

[Haroenv]

Hey hey 👋, DocSearch could be used here to find things in the reference simpler.

Some questions first:

1. What kind of design should we want?
2. Where should the search box be?
3. what should be indexed?

also cc @s-pace

[yoshuawuyts]

Oh this looks pretty excellent!

1. I was thinking perhaps something in the top nav bar? Getting functionality in first, and styling it later might be the most efficient way to approach it.
2. Uehhh, see 1?
3. Probably all the text in the docs?

I'm pretty excited about this! - it probably doesn't work offline, right? - but then.. that probably doesn't matter too much?

[Haroenv]

Nope, it's doing a request per character, there's not really a way to make a great search offline available unless you'd have a whole search engine on your computer.

What urls are that then, https://choo.io/reference/*, https://handbook.choo.io too?

[s-pace]

👋 Happy to help @yoshuawuyts, Please let us know what you would like to have and once it is done, just submit one of your link her I will provide you the JS snippet to integrate within your website. TY @Haroenv

[yoshuawuyts]

@Haroenv yeah, /reference should be enough. Currently moving to /docs as per #59 - but it should already be indexable.

Was thinking we move handbook.choo.io to choo.io/guides/your-first-choo-app or something, so no need to index it! :grin:

[s-pace]

👋 @yoshuawuyts ,

Perfect! You can update it later on

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: '87f0d96cbd5365099c978ede57cc22f5',
  indexName: 'choo',
  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
• You can also check your configuration in the github repo. 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 :)

NB: In your email NB2: Berlin ist wunderbar

[yoshuawuyts]

@s-pace thanks heaps!

@Haroenv you willing to pick it back up from here? :grin:

[Haroenv]

Seems like something went wrong with Zepto (a dependency of DocSearch), where it can't list data of input events for some reason. I don't have the bandwidth currently to make a new version of DocSearch which doesn't depend on Zepto unfortunately (there's a PR for that issue, but not much noise https://github.com/madrobby/zepto/pull/1319).

I also am not too sure how to initialise docsearch after I made the dom node, should I render a script element?

docsearch({
  apiKey: '87f0d96cbd5365099c978ede57cc22f5',
  indexName: 'choo',
  inputSelector: '#docsearch',
});

See my quick work at https://github.com/Haroenv/website-3/commit/479d56730b9e2cd4e85cee545ff00ecaa4f5e918

For the styling I guess I'll need to do sheetify with the css from node_modules