chore: upgrade to Gatsby 5

gatsby-browser.js

@@ -1 +1,3 @@
-import "./src/global.css"
+import "./src/global.css";
+
+require("prism-themes/themes/prism-one-dark.css");

gatsby-config.ts

@@ -16,8 +16,8 @@ const config: GatsbyConfig = {
     {
       resolve: "gatsby-plugin-manifest",
       options: {
-        "icon": "src/images/icon.png"
+        icon: "src/images/icon.png",
-      }
+      },
     },
     {
       resolve: "gatsby-plugin-mdx",
@@ -25,12 +25,10 @@ const config: GatsbyConfig = {
         extensions: [".mdx", ".md"],
         gatsbyRemarkPlugins: [
           {
-            resolve: "gatsby-remark-highlight-code",
+            resolve: "gatsby-remark-prismjs",
             options: {
-              terminal: "carbon",
+              showLineNumbers: true,
-              theme: "one-dark",
+            },
-              lineNumbers: true,
-            }
           },
         ],
       },
@@ -43,14 +41,14 @@ const config: GatsbyConfig = {
       resolve: "gatsby-source-filesystem",
       options: {
         name: "images",
-        path: "./src/images/"
+        path: "./src/images/",
       },
     },
     {
       resolve: "gatsby-source-filesystem",
       options: {
         name: "pages",
-        path: "./src/content/pages/"
+        path: "./src/content/pages/",
       },
     },
     {
@@ -59,8 +57,8 @@ const config: GatsbyConfig = {
         name: "posts",
         path: "./src/content/posts/",
       },
-    }
+    },
-  ]
+  ],
 };
 
 export default config;

gatsby-node.mjs

@@ -0,0 +1,101 @@
+import path from "path";
+import slugify from "@sindresorhus/slugify";
+
+/**
+ * @typedef {import('gatsby').GatsbyNode} GatsbyNode
+ */
+
+/** @type GatsbyNode["onCreateNode"] */
+export const onCreateNode = ({ node, actions }) => {
+  const { createNodeField } = actions;
+  if (node.internal.type === "Mdx") {
+    createNodeField({
+      node,
+      name: "slug",
+      value: slugify(node.frontmatter.title),
+    });
+  }
+};
+
+/** @type GatsbyNode["createPages"] */
+export const createPages = async ({
+  graphql,
+  actions,
+  /* createNodeId,
+  createContentDigest, */
+}) => {
+  const { createPage, createRedirect } = actions;
+
+  const results = await graphql(`
+    query {
+      allMdx {
+        edges {
+          node {
+            id
+            fields {
+              slug
+              source
+            }
+            internal {
+              contentFilePath
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  /** @type any[] */
+  const allEdges = results.data.allMdx.edges;
+
+  const blogEdges = allEdges.filter(
+    (edge) => edge.node.fields.source === "posts"
+  );
+  const pageEdges = allEdges.filter(
+    (edge) => edge.node.fields.source === "pages"
+  );
+
+  blogEdges.forEach((edge, index) => {
+    const previous =
+      index === blogEdges.length - 1 ? null : blogEdges[index + 1].node;
+    const next = index === 0 ? null : blogEdges[index - 1].node;
+
+    createPage({
+      path: `/blog/${edge.node.fields.slug}`,
+      component: `${path.resolve("./src/layouts/Post.tsx")}?__contentFilePath=${
+        edge.node.internal.contentFilePath
+      }`,
+      context: {
+        id: edge.node.id,
+        slug: edge.node.fields.slug,
+        previous,
+        next,
+      },
+    });
+  });
+
+  pageEdges.forEach((edge, index) => {
+    createPage({
+      path: `/${edge.node.fields.slug}`,
+      component: path.resolve("./src/layouts/Page.tsx"),
+      context: {
+        id: edge.node.id,
+        slug: edge.node.slug,
+      },
+    });
+  });
+
+  // redirects due to changed slugs
+  createRedirect({
+    fromPath: "/blog/nixos-restic-backups",
+    toPath: "/blog/optimised-backups-on-nix-os-with-restic-and-fd/",
+    isPermanent: true,
+    redirectInBrowser: true,
+  });
+  createRedirect({
+    fromPath: "/blog/nixos-restic-backups/",
+    toPath: "/blog/optimised-backups-on-nix-os-with-restic-and-fd/",
+    isPermanent: true,
+    redirectInBrowser: true,
+  });
+};

gatsby-node.ts

@@ -1,61 +0,0 @@
-import path from "path";
-import type { GatsbyNode } from "gatsby"
-
-export const createPages: GatsbyNode["createPages"] = async ({
-  graphql,
-  actions,
-  /* createNodeId,
-  createContentDigest, */
-}) => {
-  const { createPage } = actions
-
-  const results = await graphql<any>(`
-    query {
-      allMdx {
-        edges {
-          node {
-            slug
-            fields {
-              source
-            }
-          }
-        }
-      }
-    }
-  `)
-
-  const allEdges: any[] = results.data.allMdx.edges
-
-  const blogEdges = allEdges.filter(
-    (edge) => edge.node.fields.source === "posts"
-  )
-  const pageEdges = allEdges.filter(
-    (edge) => edge.node.fields.source === "pages"
-  )
-
-  blogEdges.forEach((edge, index) => {
-    const previous =
-      index === blogEdges.length - 1 ? null : blogEdges[index + 1].node
-    const next = index === 0 ? null : blogEdges[index - 1].node
-
-    createPage({
-      path: `/blog/${edge.node.slug}`,
-      component: path.resolve("./src/layouts/Post.tsx"),
-      context: {
-        slug: edge.node.slug,
-        previous,
-        next
-      }
-    })
-  })
-
-  pageEdges.forEach((edge, index) => {
-    createPage({
-      path: `/${edge.node.slug}`,
-      component: path.resolve("./src/layouts/Page.tsx"),
-      context: {
-        slug: edge.node.slug
-      }
-    })
-  })
-}

package.json

@@ -5,9 +5,7 @@
   "description": "felschr.com",
   "author": "Felix Schröter",
   "license": "MIT",
-  "keywords": [
+  "keywords": ["gatsby"],
-    "gatsby"
-  ],
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
@@ -17,29 +15,30 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@deckdeckgo/highlight-code": "^3.6.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/mdx": "^2.0.0",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^2.0.0",
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.8",
-    "gatsby": "^4.19.2",
+    "@sindresorhus/slugify": "^2.2.1",
-    "gatsby-plugin-emotion": "^7.19.0",
+    "gatsby": "^5.14.0",
-    "gatsby-plugin-image": "^2.19.0",
+    "gatsby-plugin-emotion": "^8.14.0",
-    "gatsby-plugin-manifest": "^4.19.0",
+    "gatsby-plugin-image": "^3.14.0",
-    "gatsby-plugin-mdx": "^3.19.0",
+    "gatsby-plugin-manifest": "^5.14.0",
+    "gatsby-plugin-mdx": "^5.14.0",
     "gatsby-plugin-mdx-frontmatter": "^0.0.4",
     "gatsby-plugin-mdx-source-name": "^1.0.1",
-    "gatsby-plugin-react-helmet": "^5.19.0",
+    "gatsby-plugin-react-helmet": "^6.14.0",
-    "gatsby-plugin-sharp": "^4.19.0",
+    "gatsby-plugin-sharp": "^5.14.0",
-    "gatsby-plugin-sitemap": "^5.19.0",
+    "gatsby-plugin-sitemap": "^6.14.0",
-    "gatsby-remark-highlight-code": "^3.2.0",
+    "gatsby-remark-prismjs": "^7.14.0",
-    "gatsby-source-filesystem": "^4.19.0",
+    "gatsby-source-filesystem": "^5.14.0",
-    "gatsby-transformer-remark": "^5.19.0",
+    "gatsby-transformer-remark": "^6.14.0",
-    "gatsby-transformer-sharp": "^4.19.0",
+    "gatsby-transformer-sharp": "^5.14.0",
-    "react": "^17.0.2",
+    "prism-themes": "^1.9.0",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-icons": "^4.7.1"
   },
   "devDependencies": {

src/layouts/Post.tsx

@@ -1,17 +1,23 @@
-import React from "react"
+import React from "react";
-import { graphql, Link as GatsbyLink, PageProps } from "gatsby"
+import { graphql, Link as GatsbyLink, PageProps } from "gatsby";
-import { GatsbyImage, getImage } from "gatsby-plugin-image"
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
-import { MDXRenderer } from "gatsby-plugin-mdx"
+import { MDXProvider } from "@mdx-js/react";
-import NavigateNextIcon from "@mui/icons-material/NavigateNext"
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
-import Layout from "../components/organisms/Layout"
+import Layout from "../components/organisms/Layout";
 
-import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader";
 import { Breadcrumbs, Link } from "@mui/material";
-import { Box } from "@mui/system"
+import { Box } from "@mui/system";
-deckDeckGoHighlightElement();
 
-const BlogPost = ({ data: { mdx }, path }: PageProps<Queries.BlogPostQuery>) => {
+const mdxComponents = {};
-  const featuredImage = getImage(mdx?.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!)
+
+const BlogPost = ({
+  data: { mdx },
+  path,
+  children,
+}: PageProps<Queries.BlogPostQuery>) => {
+  const featuredImage = getImage(
+    mdx?.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!
+  );
 
   return (
     <Layout
@@ -40,28 +46,25 @@ const BlogPost = ({ data: { mdx }, path }: PageProps<Queries.BlogPostQuery>) =>
             </Link>
           </Breadcrumbs>
           {featuredImage && (
-          <Box display="flex" justifyContent="center">
+            <Box display="flex" justifyContent="center">
-            <GatsbyImage
+              <GatsbyImage
-              image={featuredImage}
+                image={featuredImage}
-              alt={mdx?.frontmatter?.featuredImageAlt ?? ""}
+                alt={mdx?.frontmatter?.featuredImageAlt ?? ""}
-            />
+              />
-          </Box>
+            </Box>
           )}
         </>
       }
     >
-      <MDXRenderer>
+      <MDXProvider components={mdxComponents}>{children}</MDXProvider>
-        {mdx?.body ?? ""}
-      </MDXRenderer>
     </Layout>
-  )
+  );
-}
+};
 
 export const query = graphql`
   query BlogPost($id: String) {
     mdx(fields: { source: { eq: "posts" } }, id: { eq: $id }) {
       id
-      body
       frontmatter {
         title
         published
@@ -75,6 +78,6 @@ export const query = graphql`
       }
     }
   }
-`
+`;
 
-export default BlogPost
+export default BlogPost;

src/pages/blog/index.tsx

@@ -1,19 +1,19 @@
-import * as React from "react"
+import * as React from "react";
-import { ReactNode } from "react"
+import { ReactNode } from "react";
-import { GatsbyLinkProps, graphql, Link, PageProps } from "gatsby"
+import { GatsbyLinkProps, graphql, Link, PageProps } from "gatsby";
-import Layout from "../../components/organisms/Layout"
+import Layout from "../../components/organisms/Layout";
-import { Card, CardContent, CardMedia, Grid, Typography } from "@mui/material"
+import { Card, CardContent, CardMedia, Grid, Typography } from "@mui/material";
-import styled from "@emotion/styled"
+import styled from "@emotion/styled";
-import { GatsbyImage, getImage } from "gatsby-plugin-image"
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
 
 type PostProps = {
-  size?: "normal" | "highlight"
+  size?: "normal" | "highlight";
-  post: Queries.BlogQuery["allMdx"]["edges"][0]["node"]
+  post: Queries.BlogQuery["allMdx"]["edges"][0]["node"];
-}
+};
 
 const Post = ({ size = "normal", post }: PostProps) => {
   const PostLink = styled((props: { children: ReactNode }) => (
-    <Link to={`/blog/${post.slug}`} {...props} />
+    <Link to={`/blog/${post.fields.slug}`} {...props} />
   ))`
     color: inherit;
     text-decoration: inherit;
@@ -21,18 +21,15 @@ const Post = ({ size = "normal", post }: PostProps) => {
     &:hover {
       opacity: 0.8;
     }
-  `
+  `;
 
-  const featuredImage = getImage(post.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!)
+  const featuredImage = getImage(
-  const isHighlight = size === "highlight"
+    post.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!
+  );
+  const isHighlight = size === "highlight";
 
   return (
-    <Grid
+    <Grid item xs={12} sm={isHighlight ? 12 : 6} md={isHighlight ? 12 : 4}>
-      item
-      xs={12}
-      sm={isHighlight ? 12 : 6}
-      md={isHighlight ? 12 : 4}
-    >
       <Card>
         {featuredImage && (
           <CardMedia
@@ -48,24 +45,20 @@ const Post = ({ size = "normal", post }: PostProps) => {
         )}
         <CardContent>
           <Typography variant="h5" gutterBottom>
-            <PostLink>
+            <PostLink>{post.frontmatter?.title}</PostLink>
-              {post.frontmatter?.title}
-            </PostLink>
           </Typography>
 
           <Typography fontStyle="normal" color="GrayText">
-            <PostLink>
+            <PostLink>{post.excerpt}</PostLink>
-              {post.excerpt}
-            </PostLink>
           </Typography>
         </CardContent>
       </Card>
     </Grid>
-  )
+  );
-}
+};
 
 const Blog = ({ data: { allMdx } }: PageProps<Queries.BlogQuery>) => {
-  const [highlight, ...posts] = allMdx.edges
+  const [highlight, ...posts] = allMdx.edges;
 
   return (
     <Layout pageTitle="Blog">
@@ -76,20 +69,25 @@ const Blog = ({ data: { allMdx } }: PageProps<Queries.BlogQuery>) => {
         ))}
       </Grid>
     </Layout>
-  )
+  );
-}
+};
 
 export const query = graphql`
   query Blog {
     allMdx(
-      sort: { fields: [frontmatter___published], order: DESC }
+      sort: { frontmatter: { published: DESC } }
-      filter: { fields: { source: { eq: "posts" } }, frontmatter: { published: { ne: null } } }
+      filter: {
+        fields: { source: { eq: "posts" } }
+        frontmatter: { published: { ne: "" } }
+      }
     ) {
       edges {
         node {
           id
-          slug
           excerpt(pruneLength: 400)
+          fields {
+            slug
+          }
           frontmatter {
             title
             published
@@ -104,6 +102,6 @@ export const query = graphql`
       }
     }
   }
-`
+`;
 
-export default Blog
+export default Blog;