[chore] Gatsby 5 migration, deps upgrade and minor fixes

[fturmel]

Per #750, this upgrades Gatsby to v5 and most deps to their latest major versions. It should allow us to explore the new Slices API and keep improving build times.

Here's the official migration guide for reference: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/

Overview

• Upgrade to node 18, React 18, etc
• Rewrite GraphQL queries with new sort syntax
• Upgrade to MDX v2 - this was the majority of the work, a lot has changed
• Upgrade to react-youtube v10 - some props were renamed
• Remove @mdx-js/mdx, html-react-parser and gatsby-plugin-meta-redirect

And a few extras things:

• Add trailingSlash: 'never' in Gatsby config to get rid of 301s on initial page loads
  • This doesn't appear to work on the preview build, there could be additional things to configure on Netlify to make this work properly. Possibly related if we want to investigate: https://answers.netlify.com/t/remove-trailing-slash-redirect-for-gatsby-gatsby-cloud-netlify-website/20976/11
• Fix some React warnings: can't nest p tags, missing tbody in table, missing React keys in list
• Fix an event listener not being removed on component unmount

Related work to consider?

Up for discussion imo, they could be done in separate PRs.

• Migrate from react-helmet to Gatsby Head
• Migrate all node scripts to ESM so we can use remark-gfm v3. See https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxoptions
  • Per Support ESM usage with Gatsby gatsbyjs/gatsby#31599 there is a very recent effort to officially support ESM, maybe we should hold off for now?
• Find a way to migrate to latest postcss-custom-media and postcss-custom-properties? The importFrom option has been removed. See replacement for `importFrom` and `exportTo` csstools/postcss-plugins#192

[netlify]

✅ Deploy Preview for codingtrain ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	b8245a9
🔍 Latest deploy log	https://app.netlify.com/sites/codingtrain/deploys/639018c950a131000ab69048
😎 Deploy Preview	https://deploy-preview-818--codingtrain.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[shiffman]

Wow, this is incredible! I'm very excited to check through this and merge. @runemadsen, if you have a few minutes to glance over too let me know!

[fturmel]

@shiffman Glad you like it!

Quick update, the ESM work previously mentioned seem to have already been merged and will be rolled out this month in Gatsby 5.3 per https://github.com/gatsbyjs/gatsby/pull/37221/files

[runemadsen]

This looks good to me! I haven't done a full user test of the deploy preview, but if everything seems to work, I'm all for the merge.

[shiffman]

Thank you @runemadsen and @fturmel!