[docs][workflow] Implementing search with algolia.

Part of the Top 25 Learning Workflows initiative. See #13708 for the meta issue that this issue falls under.

User story

As a new Gatsby user, I would like to learn how to integrate Algolia into my Gatsby site.

Evaluation

Search	Discover	Complete	Linked	Tone	Style	Overall
😄	😄	😄	😐	😐	😄	😄

Steps taken to implement

1. Searchability i. Searched gatsby algolia on Google; clicked first result.
2. Discoverability i. Brought me right to the content i’m looking for at docs /adding-search-with-algolia/, thereby having no need to click on anything on .org.
3. Completeness i. Followed steps to install the gatsby-plugin-algolia and react-instantsearch-dom. [rec] Having the installation steps documented in the plugins page would go a long way as I could get easily intimidated reading up the installation process on the readme of the plugin on github. ii. Followed steps to configure algolia-plugin in gatsby-config.js file. [rec] Making explicit on where to create .env in project would save some research time. [rec] As well as a guide on how to setup env variables on the Netlify dashboard will be significant. iii. Followed steps to adding search interface to site.[rec] Though a new gatsby project works on the assumption that gatsby-transformer-remark plugin has be installed and that the appropriate fields in frontmatter of the markdown files are in place. So an explicit mention of this would go a long way. iv. Success!!
4. Linkedness i. Links to the dotenv docs on setup process would be very helpful. ii. Links to styled components docs would be useful as well.
5. Tone i. Sometimes heavy on technical terminology; perhaps not completely understandable to a web development beginner.
6. Style i. [rec] A header for the section of setting up queries at src/utils/algolia.js would reduce the cognitive load.

Recommendations

• Completeness: Having the gatsby-plugin-algolia and react-instantsearch-dom installation steps documented in the plugins page would go a long way as I could get easily intimidated reading up the installation process on the readme of the plugin on Github.
• Completeness: Making explicit on where to create .env in project would save some research time.
• Completeness: A guide on how to setup env variables on the Netlify dashboard will be significant.
• Completeness: An explicit mention to install gatsby-transformer-plugin and having the appropriate fields in the frontmatter of the markdown files would go a long way.
• Style: A header for the section of setting up queries at src/utils/algolia.js would reduce the cognitive load.

[ehrencrona]

I reviewed them again. As far as I can tell all the points under “recommendations” are covered by the changes.

[marcysutton]

I think we can close this one, thanks @ehrencrona for your PR!! It was a great addition.