add docsearch

[tesseralis]

There's currently a bug where links to anchors don't actually work (try searching once the netlify build deploys). It goes to #__gatsby, which is the top level id. It might have something to do with the differences in config between react and reactjs_es.

@s-pace maybe you can help us get this working?

[netlify]

Deploy preview for es-reactjs ready!

Built with commit c3a73e6

https://deploy-preview-184--es-reactjs.netlify.com

[tesseralis]

oooh

[tesseralis]

Searching for text inside works, but if you try to search for a header, it takes you here: https://es.reactjs.org/docs/hooks-intro.html#___gatsby

[s-pace]

👋 @tesseralis,

The redirection to the anchor #___gatsby is done because there is no id or nameattribute set to the DOM element matching the lvl0 selector (that is to stay article h1). The fallback behaviour is to extract an anchor from the closest ancestor, that is to say the element

. You can find more details here. This is the same behaviour on Reactjs by the way.

Can you set one of these attribute to the <h1/> element?

[tesseralis]

@s-pace Ah, I see. It also seems like the main React docs don't allow you to search for the top level header? (e.g. you can't look up the page "Getting Started"). I'll raise the issue in the main react repo for now.

Until then, @carburo @Darking360 I think this can be merged.

[tesseralis]

@s-pace, is it possible to have the h1s link to the root page instead of an anchor? For example, searching "Getting started" should take you to reactjs.org/docs/getting-started.html instead of reactjs.org/docs/getting-started.html#getting-started. Is this what the lvl0 container is for?

[s-pace]

@tesseralis regarding your questions:

It also seems like the main React docs don't allow you to search for the top level header?

Actually it does, the highlighted part of the header is just not different.

You can see an example on the main page for the query Getti:

This is due to the version of the DocSearch UI being used. By comparison, with the latest version of the dropdown, you do have this highlighting:

is it possible to have the h1s link to the root page instead of an anchor?

This would be possible by using this handleSelected function. Adding a unique identifier to every <h1/> tags will be more straightforward and enables a more accurate redirection. It will help in more situations.