Migrate to Gatsby 🚀

[IvanGoncharov]

Based on all the great work done by @saihaj in #896 👍

@saihaj You did an excellent job describing missing pieces in #896
Can you please post it here so I can pin this comment?
I can also assign this PR to you if you don't mind and you would be able to coordinate other people's help.
Just ping me in Slack if you need anything merged into the Gatsby branch.

[saihaj]

Remaining Issues

• 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
• 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.
• CNCF iFrame -> I was able to add landscape but don't couldn't get the resizer script working
• 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

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

I can also assign this PR to you if you don't mind and you would be able to coordinate other people's help.

👍🏼 Yes please

[saihaj]

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.

#790 can be resolved by this

[carolstran]

Should we close this because #938 was merged?

[saihaj]

Yes

[carolstran]

Alright closing then!