chore: upgrade to gatsby 5 (#159)

Signed-off-by: Michael Crenshaw <350466+crenshaw-dev@users.noreply.github.com>

content/pages/cd/index.mdx

@@ -9,13 +9,11 @@ docs: https://argo-cd.readthedocs.io
 quickstart: https://argo-cd.readthedocs.io/en/stable/getting_started
 ---
 
-import argoUiGif from "./argo-cd-ui.gif"
-
 ## What is Argo CD?
 
 Argo CD is a declarative, GitOps continuous delivery tool for Kubernetes.
 
-<img src={argoUiGif} alt="Argo UI" />
+![Argo CD UI](./argo-cd-ui.gif)
 
 ## Why Argo CD?
 

gatsby-node.js

@@ -26,10 +26,15 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
  const result = await graphql(
  `
  query {
- allMdx(filter: { fileAbsolutePath: { regex: "/(content/pages)/" } }) {
+ allMdx(filter: { internal: { contentFilePath: { regex: "/(content/pages)/" } } }) {
  nodes {
  id
- slug
+ fields {
+ slug
+ }
+ internal {
+ contentFilePath
+ }
  }
  }
  }
@@ -48,8 +53,8 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
  if (pages.length > 0) {
  pages.forEach(page => {
  createPage({
- path: page.slug,
- component: pageDefault,
+ path: page.fields.slug,
+ component: `${pageDefault}?__contentFilePath=${page.internal.contentFilePath}`,
  context: {
  id: page.id,
  },

package.json

@@ -16,37 +16,37 @@
  },
  "dependencies": {
  "@animated-burgers/burger-squeeze": "^1.1.2",
- "@mdx-js/mdx": "^1.6.22",
- "@mdx-js/react": "^1.6.22",
+ "@mdx-js/mdx": "^2.0.0",
+ "@mdx-js/react": "^2.0.0",
  "axios": "^0.28.0",
  "body-scroll-lock": "^3.1.5",
  "classnames": "^2.3.1",
- "gatsby": "^4.0.0",
- "gatsby-plugin-google-gtag": "^4.0.0",
- "gatsby-plugin-image": "^2.0.0",
- "gatsby-plugin-manifest": "^4.0.0",
- "gatsby-plugin-mdx": "^2.14.1",
- "gatsby-plugin-react-helmet": "^5.0.0",
- "gatsby-plugin-react-svg": "^3.0.1",
- "gatsby-plugin-sass": "^5.0.0",
- "gatsby-plugin-sharp": "^4.0.0",
- "gatsby-plugin-sitemap": "^5.0.0",
- "gatsby-remark-images": "^5.4.1",
- "gatsby-source-filesystem": "^4.0.0",
- "gatsby-transformer-remark": "^5.25.1",
- "gatsby-transformer-sharp": "^4.0.0",
+ "gatsby": "^5.0.0",
+ "gatsby-plugin-google-gtag": "^5.0.0",
+ "gatsby-plugin-image": "^3.0.0",
+ "gatsby-plugin-manifest": "^5.0.0",
+ "gatsby-plugin-mdx": "^5.0.0",
+ "gatsby-plugin-react-helmet": "^6.0.0",
+ "gatsby-plugin-react-svg": "^3.0.0",
+ "gatsby-plugin-sass": "^6.0.0",
+ "gatsby-plugin-sharp": "^5.0.0",
+ "gatsby-plugin-sitemap": "^6.0.0",
+ "gatsby-remark-images": "^7.0.0",
+ "gatsby-source-filesystem": "^5.0.0",
+ "gatsby-transformer-remark": "^6.0.0",
+ "gatsby-transformer-sharp": "^5.0.0",
  "gsap": "^3.7.0",
- "react": "^17.0.1",
+ "react": "^18.0.0",
  "react-device-detect": "^1.17.0",
- "react-dom": "^17.0.1",
- "react-helmet": "^6.1.0",
+ "react-dom": "^18.0.0",
+ "react-helmet": "^6.0.0",
  "sass": "^1.34.1"
  },
  "devDependencies": {
  "@tailwindcss/aspect-ratio": "^0.2.1",
  "@tailwindcss/typography": "^0.4.1",
  "autoprefixer": "^10.2.6",
- "gatsby-plugin-postcss": "^5.0.0",
+ "gatsby-plugin-postcss": "^6.0.0",
  "postcss": "^8.4.31",
  "prettier": "2.3.1",
  "tailwindcss": "^2.2.4"

src/components/features.js

@@ -10,8 +10,8 @@ const Features = () => {
  graphql`
  query {
  allMdx(
- filter: { fileAbsolutePath: { regex: "/(content/pages)/" } }
- sort: { order: ASC, fields: frontmatter___order }
+ filter: { internal: { contentFilePath: { regex: "/(content/pages)/" } } }
+ sort: { frontmatter: { order: ASC } }
  ) {
  edges {
  node {
@@ -25,8 +25,8 @@ const Features = () => {
  image {
  childImageSharp {
  gatsbyImageData(
- width: 850
- placeholder: BLURRED
+ width: 850,
+ placeholder: BLURRED,
  formats: [AUTO, WEBP, AVIF]
  )
  }

src/components/maintainers.js

@@ -6,13 +6,15 @@ const Maintainers = () => {
  const query = useStaticQuery(
  graphql`
  query {
- allMarkdownRemark(
+ allMdx(
  filter: {
- fileAbsolutePath: {
- regex: "/(members/codefresh|intuit|blackrock|redhat|akuity)/"
+ internal: {
+ contentFilePath: {
+ regex: "/(members/codefresh|intuit|blackrock|redhat|akuity)/"
+ }
  }
  }
- sort: { order: ASC, fields: frontmatter___title }
+ sort: { frontmatter: { title: ASC } }
  ) {
  edges {
  node {
@@ -32,7 +34,7 @@ const Maintainers = () => {
 
  return (
  <div className="flex flex-wrap justify-center -mx-1">
- {query.allMarkdownRemark.edges.map(item => {
+ {query.allMdx.edges.map(item => {
  return (
  <div
  className="w-1/2 py-1 px-1 lg:w-1/6"

src/components/members.js

@@ -6,9 +6,9 @@ const Members = () => {
  const query = useStaticQuery(
  graphql`
  query {
- allMarkdownRemark(
- filter: { fileAbsolutePath: { regex: "/(content/members)/" } }
- sort: { order: ASC, fields: frontmatter___title }
+ allMdx(
+ filter: { internal: { contentFilePath: { regex: "/(content/members)/" } } }
+ sort: { frontmatter: { title: ASC } }
  ) {
  edges {
  node {
@@ -26,7 +26,7 @@ const Members = () => {
  `
  )
 
- const allMembers = query.allMarkdownRemark.edges
+ const allMembers = query.allMdx.edges
  const [members, setMembers] = React.useState(allMembers.slice(0, 23))
 
  return (

src/templates/page-default.js

@@ -1,6 +1,5 @@
 import * as React from "react"
 import { graphql, Link } from "gatsby"
-import { MDXRenderer } from "gatsby-plugin-mdx"
 import { MDXProvider } from "@mdx-js/react"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
@@ -14,7 +13,7 @@ import RolloutsSvg from "../svg/rollouts.svg"
 import CdSvg from "../svg/gitops-cd.svg"
 import YoutubeEmbed from "../components/ui/youtube-embed"
 
-const PageTemplate = ({ data, location }) => {
+const PageTemplate = ({ data, location, children }) => {
  const siteTitle = data.site.siteMetadata?.title || "Title"
  const page = data.mdx
  const shortcodes = { Link, YoutubeEmbed }
@@ -70,7 +69,7 @@ const PageTemplate = ({ data, location }) => {
  </div>
 
  <MDXProvider components={shortcodes}>
- <MDXRenderer>{page.body}</MDXRenderer>
+ {children}
  </MDXProvider>
 
  <div className="mt-6 text-center space-y-4 md:space-x-4 md:space-y-0">
@@ -103,7 +102,6 @@ export const pageQuery = graphql`
  }
  }
  mdx(id: { eq: $id }) {
- body
  frontmatter {
  order
  title