Migrate to Gatsby 🚀

[saihaj]

Summary

Migrate content to Gatsby site.

Preview -> https://graphql-docs-gatsby.vercel.app

What is left:

• Create layout and sidebar components in order to add graphql-js docs
• Create layout and sidebar components in order to add blog
• Users page
• Add Algolia search plugin (Need maintainer to set this up)
• Google Analytics setup (Need maintainer to set this up)

Since Algolia and GA keys will go .env and need to set those accordingly in CI pipeline too

Issues that should be resolved before merging (🙏 Need Help 🙏 )

• Fix DOM nesting errors: CSS needs to be modified so that instead of forcing a body tag inside a div components/Layout.js a div with some className is used
• Fix animations in pages/index.js: useEffect hook is used to run the animations but the problem is when page changes it still runs for some reason and I don't know how to fix it. Update: I tried a clean up function to remove the child nodes but no good.
• Code highlighting: I was able to prefix classnames where needed for code highlighting but some colors are not working because there are different classnames when compared to css/Prism.less
• For code in markdown, gatsby-transformer-remark seems to add className to <code> tag which is causing border boxes around line. Need to remove those classnames somehow.
• Order of items in Sidebar is in ascending order (that is how graphql queries return it) need to find a way so that we can override the order where needed.
• Show title of next page in "continue reading" button. I tried passing the permalink to context from gatsby-node.js so that I can run one more query that will return title and one that returns content . When running it in GraphiQL (single query) the results are as expected but when I combine it with page query then the title is not correct.
• Add business_layer.png: I forgot to add this when moving learn docs
• CNCF iFrame -> I was able to add landscape but don't couldn't get the resizer script working

Possibly can refactor but don't know how to:

• Since I can't pass in variables to static query ([feat]: add ability to pass variables to StaticQuery gatsbyjs/gatsby#10482) there was not an elegant way other than separating the logic in a separate component (components/Sidebar/Sidebar.js) and pass down data as props from a separate component that runs static query.
• I think it is possible to do same thing for templates

Closes #875

[carolstran]

Hey @saihaj 👋🏼 Thanks so much for taking the initiative on this!

I was talking with @IvanGoncharov and we were thinking of merging these changes into a new branch and then fix the missing parts/issues in additional PRs (we can track everything in the original issue - #875). That way, this PR doesn't become overwhelming and others can help get it to a place where we could then merge into source.

What do you think?

[saihaj]

Hey @carolstran sounds good to me

[IvanGoncharov]

@saihaj Can you please rebase?
And I will create a separate branch.
The next step after that would be to start publishing it under next.graphql.org.

[saihaj]

Hey 👋🏼 @IvanGoncharov you are all set to deploy 🚀 it !

[carolstran]

It needs another rebase but then pinging @IvanGoncharov again for this 💫

[saihaj]

@IvanGoncharov 🚀

[carolstran]

Looking through this again, I don't think we need an author field here 🤔

[saihaj]

My bad 🤦‍♂️ I was using one of my projects to make this and forgot to update. What about version number? Do we follow semantic versioning?

[carolstran]

Good question, I'm not super familiar with versioning in open source. Wdyt @IvanGoncharov?

[IvanGoncharov]

@saihaj Thanks a lot for all your work 👍
Merged into a separate branch since there still some issues that need to be addressed.
But now that it's a branch other people can help by submitting PRs against this branch.

[IvanGoncharov]

I will open a PR so we can all coordinate.