React: Add search to the documentation

Created on 7 Sep 2015 · 14Comments · Source: facebook/react

Hey folks,

Here at Algolia we do use React on some of our projects internally and found that searching the React documentation could be improved. So I was considering sending you a PR which adds such search to your documentation.

I saw that the website is using Jekyll, and we do actually have a Jekyll plugin. If you don't known Algolia, we're a SaaS provider, offering an hosted search engine, accessible through a REST API. Pushing data to our API will be as easy as jekyll algolia push.

You can see a live demo of a similar (currently pending) PR on the Bootstrap documentation here. We've already provided such free accounts to other popular open-source projects that we love and use (Laravel, HackerNews, FontAwesome or cdnjs for example).

I just wanted to check with you first if that is something you would be interested for the React documentation before I start coding anything. If so, I'll start hacking something and if you like it, we could then move forward together. We would of course give you full access to your unlimited free account (we only ask for a small "powered by Algolia" logo).

Just hit reply if you have any questions, I'd be really happy to make this happen.

Source

pixelastic

Most helpful comment

@pixelastic Can you take down the reactjs.algolia.com site or add a robots.txt to disallow crawling? It's getting indexed by Google.

sophiebits on 22 Jul 2016

👍3

All 14 comments

:+1:

yang-wei on 8 Sep 2015

I checked the Bootstrap example and it looks really cool and useful. I think this will improve the docs a lot as of I (and probably many others) finds it hard to find specific areas of the documentation. :+1:
cc @zpao

edvinerikson on 8 Sep 2015

Would be nice indeed!

vjeux on 8 Sep 2015

We probably wouldn't do an Algolia logo (and certainly not on every page), but we could link to you on our acknowledgements page:

http://facebook.github.io/react/acknowledgements.html

Let me know if that would work for you. This would also likely be a pretty low priority for us. We do plan to revamp the website eventually though.

sophiebits on 9 Sep 2015

As a developer in the early stages of learning React I would find search to be one of, or even the most useful features of these, or any other docs, and as such would imagine addressing the lack thereof would be a crucial step to encouraging framework adoption.

Using Google for a specific term or method gets you to the page, but not the appropriate position on the page, creating a frustrating user experience. I imagine an ideal & UCD friendly internal search would be able to link to a specific id such as those found on the a.hash-link near each heading on a page.

Bshally on 9 Sep 2015

Hey, I've worked a bit on the search. You can test it live here: https://reactjs.algolia.com/ (with relevant code in here.

Screencast

This does a search in all pages of the website (except blog index and pagination pages). If your browser locale is set to chinese, japanese or korean, it will also search in those translations. You can navigate through results in the dropdown using your keyboard, and you'll be directly send to the relevant part of the page.

To reindex your data, you just have to jekyll algolia push. The display is done through our autocomplete.js library (currently using Zepto as a dependency), and a bit of CSS.

Tell me what you think, and if you have any question about the implementation. Oh, and we're totally ok with a link in the acknowledgements page. Ping me if you need the credentials to access your account.

pixelastic on 14 Sep 2015

Tested it out a bit just now and it works brilliantly on the user end. My only suggestion would be to make the dropdown elements a tad bit bigger on mobile for ease of use. Hope this makes its way through eventually.

Bshally on 14 Sep 2015

Hey @Bshally, thanks for the feedback and suggestions. I did not really invest much time on the mobile side at the moment (the reactjs website itself does not seem to be very mobile-friendly), but this is something that could definitely be added.

pixelastic on 14 Sep 2015

Hey @pixelastic - thanks for getting this started. We have a bunch of things going on and this is still pretty low priority for us at the moment. I wouldn't spend much more time on it until we've had a chance to circle back and take a look.