[docs][workflow] Implementing search with algolia.

[mbappai]

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.

[marcysutton]

Hi there, thanks for the issue! I've filed it internally to track, but if anyone wants to help with validating and implementing these recommendations we would welcome your contribution.

[ehrencrona]

I tried to follow the Algolia tutorial based on a new project created using gatsby new. That fails because the tutorial assumes that gatsby-transformer-remark is installed and that there are markdown files containing certain fields in the frontmatter.

It would be good to clarify what the preconditions are on the project code. Ideally, it should be possible to run the tutorial directly on a site created using gatsby new

[mbappai]

I tried to follow the Algolia tutorial based on a new project created using gatsby new. That fails because the tutorial assumes that gatsby-transformer-remark is installed and that there are markdown files containing certain fields in the frontmatter.

It would be good to clarify what the preconditions are on the project code. Ideally, it should be possible to run the tutorial directly on a site created using gatsby new

Thank you for voicing that out Andreas, let me add that to the completeness. I hope it worked for you after you installed the right plugin and added the appropriate fields in the frontmatter of your files.

[ehrencrona]

The reason I followed the tutorial was I wanted to improve the documentation to address the issues mentioned in this ticket. Since so many different technologies come together in the tutorial it's quite challenging to present it in a clear way, but I hope to be able to suggest a few improvements. I hope make a PR today or tomorrow.

[mbappai]

The reason I followed the tutorial was I wanted to improve the documentation to address the issues mentioned in this ticket. Since so many different technologies come together in the tutorial it's quite challenging to present it in a clear way, but I hope to be able to suggest a few improvements. I hope make a PR today or tomorrow.

I totally understand your pain Andreas, and thank you so very much for taking the time to improve our beloved gatsby. Can't wait to see you PR. :)

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[w3bdesign]

Not entirely relevant, but seeing as I have recently worked with Algolia and implemented it in a React project, I recommend that you take a look at a project where I have implemented this with NextJS:

https://github.com/w3bdesign/nextjs-woocommerce

[han-so1omon]

Should this be closed following the PR submitted by @ehrencrona ?

[ehrencrona]

In my opinon: yes.

[han-so1omon]

@ehrencrona could you please detail which of the recommendations from @Mujeex you have covered?

[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.