Add algolia search engine to the website

[jvican]

I've submitted a request to crawl all the Scala official website to provide search capabilities to Algolia via https://community.algolia.com/docsearch/.

I have the same service in Bloop and I have to say it's excellent. https://scalacenter.github.io/bloop/

However, I have no idea about web, and I need the help of someone who would submit a PR trying to style and place the search box that Algolia will provide us. If you know how to do this, your help would be much appreciated.

[franktominc]

Can I pick this up?

[jvican]

Yes @franktominc! This is the installation instructions I got via email:

Congratulations, your search is now ready!
I've successfully configured the underlying crawler and it will now run every 24h. We will handle webpages that have the same layout than http://docs.scala-lang.org/tour/tour-of-scala.html

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: 'fbc439670f5d4e3730cdcb715c359391',
indexName: 'scala-lang',
inputSelector: '### REPLACE ME ####',
algoliaOptions: { 'facetFilters': ["language:$LANGUAGE"] },
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 $LANGUAGE with the language you want to search on.
The list of possible language is hardcoded in the config.
So as of today you have: ba, en, es, ja, ko, pl, ru, zh-cn

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

- Optionally customize the look and feel by following the DocSearch documentation (https://community.algolia.com/docsearch/documentation/)
- You can also check your configuration in our github repo (https://github.com/algolia/docsearch-configs/blob/master/configs/scala-lang.json).

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

[s-pace]

👋

Happy to help if you need anything.

Cheers

[franktominc]

Hey guys, I'd be happy to discuss some layout options with you. Concerning the search box, where do you think would be the best spot to place it? I have some options below

It can be in a totally unrelated spot, I'm just exploring some options. Also, does it have to appear in all pages?? If that is the case, I think options 2 and 3 are the best placement for it.

[jvican]

I think that putting it in all the pages makes sense. I’ll probably go fothis option 2 among the options you list but I’d also consider adding th search box exactly to the right of the “docs” text, which is below the Scala logo (second row). I think it would fit in there!

[jvican]

/cc @exoego who may be interested in tackling this one too.

[exoego]

I think the right of "docs" @jvican suggested has a strong point.
Readers can recognize that the search box is limited for "documentation" section easily.

I found the scala blog have got a search box while browsing.
So I also suggest the below from design consitency perspective.

[heathermiller]

I would go with how we did it for the Scala blog search box (option 2 above). This one is already designed to be responsive. So I think it's more than just design consistency with the rest of the website. The first option (next to the docs text) would have to be made responsive. So option 2 is not only consistent, but it's already responsive and we can just reuse it.

[jvican]

If the top bar is already responsive, then that's a strong argument to go for option 2 then. The search box will crawl all the website, not only docs, so that would make sense too. @exoego thanks for looking into this ❤️

[heathermiller]

Indeed, thank you @exoego!!! ❤️x💯

[s-pace]

Hope you are doing great.

Do you need some help in order to integrate DocSearch? I would be happy to help and note any of your feedback.

By the way, we do provide the algolia analytics for free for your DocSearch index. Please send me the email addresses of the people you want to grant access to.

Have a nice day,

[jvican]

Given that this ticket hasn't been picked up by a contributor yet, @s-pace is going to disable the crawler for our website so that their CPU resources can be better utilized. As soon as we have a pull request opened, I'll ask Sylvain to re-index and crawl the website (thank you Algolia).

[s-pace]

Thank you @jvican

Yep feel free to ping us as soon as you need. We would be happy to enable it :)