Gatsby: Add search to gatsbyjs.org

[m-allanson]

It'd be really useful to have a site search on the gatsbyjs.org site. See the React docs for an example. They're using Algolia (via DocSearch) to provide the search functionality.

Algolia provide free accounts for open source project.

I'd be happy to implement this if someone can:

• Create a rough design for search on Gatsbyjs.org (particularly for mobile)
• Add the Algolia / DocSearch implementation code to this issue. See the DocSearch sign up page for details.

[calcsam]

That would be great!

[markmichon]

I was just looking into this the other day. AFAIK the react docs are using DocSearch, which looks a bit more turnkey than implementing it manually. Definitely a good idea to implement search in some way!

[m-allanson]

DocSearch looks good. I've updated this issue to reference the DocSearch signup page instead of an Algolia API key.

[calcsam]

That sounds right. From the original comment, we wouldn't need any design work with this, just loading the library in html.js and then designing a component. Should probably have colors match current design but that's about all.

https://github.com/reactjs/reactjs.org/blob/85a70b74a191ca6925778b55c22c73cd746f8c28/src/html.js#L21
https://github.com/reactjs/reactjs.org/blob/b8d13d5fe53462fbf45f9eab412c8eda8041c184/src/components/LayoutHeader/DocSearch.js

[fk]

Sorry for coming back so late @calcsam, I was swamped with work the past two weeks and am only slowly catching up with my inbox. I still got some emails to read ( 🙄 😄 ) … Ah, I see you edited your original comment which referenced me … don't give up on me yet tho! 😉

we wouldn't need any design work with this
have colors match current design

I agree in regards to the search component itself – that should be limited to 💅 .

I think we also need to invest some time figuring out how to include the search widget on the homepage though; on all other pages we should be fine follwing the reactjs.org approach.
On the homepage we already have slight issues with the main navigation "bleeding" into the dark masthead background since the "Features" section was added:

I haven't given this a lot of thought yet, but one option could be to remove the Discord and Twitter icons at least for smaller screens (unless @KyleAMathews has data that says different … probably even then ;-)). We have a dedicated "Community" page with that information already that we could spice up a little with those icons. I was also thinking of adding a footer at some point similar to the React docs …
Anyway – with those icons gone, we could use the "contracted" "Icon only" version of the search to add it to the current homepage design without causing too much work.

[m-allanson]

I think this needs someone who is the "owner" of gatsbyjs.org to go through the DocSearch sign up and post the supplied code here. I guess that's @KyleAMathews?

Then I can make a start on this and try out some of @fk's ideas.

[KyleAMathews]

Just signed up!

[m-allanson]

@KyleAMathews on that sign up page it says:

We’ll email you the code you need to integrate the search into your documentation.

I assume that includes an API key or similar. Could you post the code here?

[KyleAMathews]

It's arrived :-)

Congratulations, your search is now ready!
We had successfully configured the underlying crawler and it will now run every 24h.

We have done a workaround solution but could you add a class like "docSearch-content" on the to the following element:

DOM element that what would need to have a specific class; it matches the XPATH selector:"//body/div/div/div[2]/div[4]/div"

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

• 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/gatsbyjs.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 :)

[whmountains]

It would be super useful if you could simultaneously search github issues and plugins as well as documentation. Probably wouldn't work with the stock DocSearch though.

[KyleAMathews]

Yeah! It'd be awesome to have a universal search — docs, themes/starters, plugins, issues, etc.