Immutable-js: Add search to the docs

[Haroenv]

What happened

I wanted to look something up, but couldn't find exactly what I needed without some probing around.

How to solve this

We could add search to the docs, with DocSearch this would be quite simple. I'm sure that me and @s-pace would be available to help set it up 🙌 !

[leebyron]

Cool idea, I'm open to PRs for this

[s-pace]

:wave: @leebyron

I have made a quick showcase in order to let you try it. You will notice that the redirection could be enhanced.

We would need some changes regarding the layout of the page. We pickup the name (or id) of the titles (matching the lvls selectors of your configuration file) in order to correctly scroll down to the right matching part of your content. Regarding the navigational behaviour of your website, we would need to extract these anchors. Ideally these attributes/anchors would match the subsection of your pages (if you want to continue this way of navigation within your pages).

Example for redirecting to https://facebook.github.io/immutable-js/docs/#/Seq.Set/toJSON:

We will extract the documentation content from the parent page https://facebook.github.io/immutable-js/docs/#/Seq.Set

The DOM title matching h3.memberLabel from this former page should have an id equals to toJSON

Could you point us out how we could make these changes?

[s-pace]

EDIT:
FYI:

I've successfully configured the underlying crawler and it will now run every 24h.

<!-- 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: '83f61f865ef4cb682e0432410c2f7809',
  indexName: 'immutable_js',
  inputSelector: '### REPLACE ME ####',
  algoliaOptions: { 'facetFilters': ["tags:$TAGS"] },
  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 $TAGS with the tags you want to search on. The list of possible tags is hardcoded in the config. So as of today you have: home

  For example if you want to refine the search to the tags "home" just specify:

 'facetFilters': ["tags:home"]