Upgrade gatsby for uli-website

[dennyabrain]

Is your feature request related to a problem? Please describe.
I want to upgrade all gatsby dependencies used in uli-website

Its not as easy as just upgrading all dependencies to their latest. For instance one issue that I came up against is that the latest version of gatsby expects a latest version of gatsby-plugin-mdx. And apparently that plugin has had a major version upgrade and its involves upgrading the website code itself to use correctly. So as part of this issue, one must assess all thats needed to be changed and gives us updates here so we could do that.

[duggalsu]

This issue is now being handled with PR #483

• All packages have been updated to latest version
• gatsby and react-dom require legacy-peer-deps. This can only be implemented package-wide and has been addressed by adding the flag to the .npmrc file
  • https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/#updating-your-dependencies
  • https://stackoverflow.com/questions/69496618/automatic-npm-install-legacy-peer-deps-for-a-single-dependency
  • https://docs.npmjs.com/cli/v10/using-npm/config#legacy-peer-deps
• graphql schema changes have been handled by using gatsby-codemods on index.jsx
  • https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/#graphql-schema-changes-to-sort-and-aggregation-fields
• fileAbsolutePath has been removed from gatsby-plugin-mdx. This has been handled by using internal contentFilePath
  • https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/
  • https://stackoverflow.com/questions/75326784/gatsby-graphql-query-no-longer-working-after-update
• MDX File rendering issues after gatsby-plugin-mdx updates need to be resolved, specifically pages about, faq and research
  • https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/
    defaultLayout has been removed. We now have to manually add the layout to each MDX file.

  Only extensions, gatsbyRemarkPlugins, and mdxOptions exist as options now. Every other option got removed, 
  including defaultLayouts. See the layouts guide to learn how to use layouts with gatsby-plugin-mdx@^4.0.0.
  

  • https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#layouts
• slug moved within fields in gatsby-plugin-mdx now has to be handled correctly to render paths to open blogs. Currently added gatsby-node.mjs file for this and modified index.jsx
  • https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#extending-the-graphql-mdx-nodes
  • https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#slug
  • https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/#introduction
  • This approach is omitting localhost base url path if relativeFilePath is used and adding the base url twice when siteUrl from siteMetadata is added as absoluteFilePath
    • https://www.paulie.dev/posts/2022/09/mdx-2-breaking-changes-and-gatsby-plugin-mdx-v4-slug/
    • https://css-tricks.com/how-to-the-get-current-page-url-in-gatsby/
    • https://stackoverflow.com/questions/62733663/conditionally-render-siteurl-property-in-gatsby-config-based-on-environment
      For testing, replace siteUrl in gatsby-config.js with

    siteUrl: `http://localhost:8000`
    

    The other file required to test changes for this is gatsby-node.mjs
  • This package used in this approach is not strictly required - do NOT use this
    • https://github.com/gatsbyjs/gatsby/blob/master/examples/using-mdx/gatsby-node.mjs
  • This plugin has the same issues as above and is also not maintained - do NOT use this
    • https://www.gatsbyjs.com/plugins/gatsby-plugin-slug/