chore: upgrade to gatsby 5 (#159)

Signed-off-by: Michael Crenshaw <[email protected]>
argoproj · Jun 4, 2024 · 38606e0 · 38606e0
1 parent 1f3cfb5
commit 38606e0
Show file tree

Hide file tree

Showing 8 changed files with 3,080 additions and 3,996 deletions.
diff --git a/content/pages/cd/index.mdx b/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?
 

diff --git a/gatsby-node.js b/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,
         },

diff --git a/package.json b/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"

diff --git a/src/components/features.js b/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]
                     )
                   }

diff --git a/src/components/maintainers.js b/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"

diff --git a/src/components/members.js b/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 (

diff --git a/src/templates/page-default.js b/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