feat: Use MDX v2

.github/workflows/e2e-testing.yml

@@ -51,5 +51,8 @@ jobs:
         run: npx playwright install chromium --with-deps
       - name: Build Gatsby Site
         run: yarn build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          FLICKR_API_KEY: ${{ secrets.FLICKR_API_KEY }}
       - name: Run Playwright
         run: yarn e2e:build

packages/core/gatsby-config.ts

@@ -1,6 +1,7 @@
 import { GatsbyConfig, PluginOptions } from "gatsby"
 import remarkSlug from "remark-slug"
 import remarkSmartyPants from "remark-smartypants"
+import remarkUnwrapImages from "remark-unwrap-images"
 import camelCase from "lodash.camelcase"
 import { withDefaults, capitalize } from "utils"
 
@@ -35,7 +36,7 @@ const gatsbyConfig = (themeOptions: PluginOptions): GatsbyConfig => {
       {
         resolve: `gatsby-source-filesystem`,
         options: {
-          name: `src/pages`,
+          name: `pages`,
           path: `src/pages`,
         },
       },
@@ -73,7 +74,6 @@ const gatsbyConfig = (themeOptions: PluginOptions): GatsbyConfig => {
       {
         resolve: `gatsby-plugin-mdx`,
         options: {
-          lessBabel: true,
           extensions: [`.mdx`, `.md`],
           gatsbyRemarkPlugins: [
             {
@@ -85,7 +85,9 @@ const gatsbyConfig = (themeOptions: PluginOptions): GatsbyConfig => {
               },
             },
           ],
-          remarkPlugins: [remarkSlug, remarkSmartyPants],
+          mdxOptions: {
+            remarkPlugins: [remarkSlug, remarkSmartyPants, remarkUnwrapImages],
+          },
         },
       },
       `gatsby-transformer-sharp`,

packages/core/gatsby-node.ts

@@ -1,6 +1,7 @@
 import { CreateNodeArgs, GatsbyNode, PluginOptions } from "gatsby"
 import Prando from "prando"
 import get from "lodash.get"
+import readingTime from "reading-time"
 import { mdxResolverPassthrough, slugify, withDefaults, shuffle } from "utils"
 
 export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] = ({ actions }): void => {
@@ -47,8 +48,6 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
       id: ID!
       slug: String! @slugify(fieldName: "category")
       excerpt(pruneLength: Int = 160): String!
-      body: String!
-      html: String
       tableOfContents: JSON
       timeToRead: Int
       image: String
@@ -60,15 +59,14 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
       subtitle: String
       title: String!
       type: PostTypeEnum!
+      contentFilePath: String!
     }
 
     type MdxPost implements Node & Post {
       slug: String! @slugify(fieldName: "category")
       excerpt(pruneLength: Int = 140): String! @mdxpassthrough(fieldName: "excerpt")
-      body: String! @mdxpassthrough(fieldName: "body")
-      html: String! @mdxpassthrough(fieldName: "html")
       tableOfContents: JSON @mdxpassthrough(fieldName: "tableOfContents")
-      timeToRead: Int @mdxpassthrough(fieldName: "timeToRead")
+      timeToRead: Int
       image: String
       category: Category! @link(by: "name")
       date: Date! @dateformat
@@ -78,6 +76,7 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
       subtitle: String
       title: String!
       type: PostTypeEnum!
+      contentFilePath: String!
     }
 
     type Category implements Node {
@@ -93,27 +92,25 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
       id: ID!
       slug: String! @slugify(fallback: "garden")
       excerpt(pruneLength: Int = 160): String!
-      body: String!
-      html: String
       timeToRead: Int
       date: Date! @dateformat
       lastUpdated: Date! @dateformat
       title: String!
       tags: [String!]!
       icon: String!
+      contentFilePath: String!
     }
 
     type MdxGarden implements Node & Garden {
       slug: String! @slugify(fallback: "garden")
       excerpt(pruneLength: Int = 140): String! @mdxpassthrough(fieldName: "excerpt")
-      body: String! @mdxpassthrough(fieldName: "body")
-      html: String! @mdxpassthrough(fieldName: "html")
-      timeToRead: Int @mdxpassthrough(fieldName: "timeToRead")
+      timeToRead: Int
       date: Date! @dateformat
       lastUpdated: Date! @dateformat
       title: String!
       tags: [String!]!
       icon: String!
+      contentFilePath: String!
     }
 
     type CoreConfig implements Node {
@@ -179,29 +176,29 @@ export const sourceNodes: GatsbyNode["sourceNodes"] = ({ actions, createContentD
 }
 
 type WritingNode = {
-  frontmatter: {
-    slug?: string
-    image?: string
-    category: "Community" | "Design" | "Gatsby" | "JavaScript" | "React"
-    date: string
-    lastUpdated?: string
-    description: string
-    published: boolean
-    subtitle?: string
-    title: string
-    type: "prose" | "tutorial"
-  }
+  slug?: string
+  image?: string
+  category: "Community" | "Design" | "Gatsby" | "JavaScript" | "React"
+  date: string
+  lastUpdated?: string
+  description: string
+  published: boolean
+  subtitle?: string
+  title: string
+  type: "prose" | "tutorial"
+  contentFilePath: string
+  timeToRead: number
 }
 
 type GardenNode = {
-  frontmatter: {
-    slug?: string
-    date: string
-    lastUpdated?: string
-    title: string
-    tags: string[]
-    icon: string
-  }
+  slug?: string
+  date: string
+  lastUpdated?: string
+  title: string
+  tags: string[]
+  icon: string
+  contentFilePath: string
+  timeToRead: number
 }
 
 type MdxNode = WritingNode | GardenNode
@@ -219,10 +216,11 @@ export const onCreateNode = (
 
   const fileNode = getNode(node.parent)
   const source = fileNode.sourceInstanceName
+  const timeToRead = Math.round(readingTime(node.body as string).minutes)
 
   if (source === writingSource) {
-    const f = node.frontmatter as WritingNode["frontmatter"]
-    const fieldData: WritingNode["frontmatter"] = {
+    const f = node.frontmatter as WritingNode
+    const fieldData: WritingNode = {
       slug: f.slug ? f.slug : undefined,
       title: f.title,
       subtitle: f.subtitle ? f.subtitle : undefined,
@@ -233,6 +231,8 @@ export const onCreateNode = (
       description: f.description,
       published: f.published ?? true,
       type: f.type,
+      contentFilePath: fileNode.absolutePath as string,
+      timeToRead,
     }
 
     const mdxPostId = createNodeId(`${node.id} >>> MdxPost`)
@@ -254,14 +254,16 @@ export const onCreateNode = (
   }
 
   if (source === gardenSource) {
-    const f = node.frontmatter as GardenNode["frontmatter"]
-    const fieldData: GardenNode["frontmatter"] = {
+    const f = node.frontmatter as GardenNode
+    const fieldData: GardenNode = {
       slug: f.slug ? f.slug : undefined,
       title: f.title,
       date: f.date,
       lastUpdated: f.lastUpdated ? f.lastUpdated : f.date,
       icon: f.icon,
       tags: f.tags,
+      contentFilePath: fileNode.absolutePath as string,
+      timeToRead,
     }
 
     const mdxGardenId = createNodeId(`${node.id} >>> MdxGarden`)

packages/core/package.json

@@ -8,8 +8,7 @@
     "gatsby": "^4.0.0"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^2.1.2",
     "gatsby-plugin-catch-links": "next",
     "gatsby-plugin-mdx": "next",
     "gatsby-plugin-sharp": "next",
@@ -23,6 +22,7 @@
     "prando": "^6.0.1",
     "remark-slug": "^6.0.0",
     "remark-smartypants": "^0.0.1",
+    "remark-unwrap-images": "^2.0.0",
     "ts-node": "^10.7.0",
     "utils": "^0.0.1"
   },

playwright/meta.spec.ts

@@ -92,7 +92,7 @@ const metaTagAssertions = [
       },
       {
         key: `og:description`,
-        value: `You're a fan of  Plausible Analytics  and  Gatsby ? Great! In this guide you'll learn how to add Plausible Analytics to your Gatsby site…`,
+        value: `You’re a fan of Plausible Analytics and Gatsby? Great! In this guide you’ll learn how to add Plausible Analytics to your Gatsby site…`,
       },
       {
         key: `og:image`,

www/gatsby-node.ts

@@ -12,13 +12,15 @@ type CreatePagesResult = {
     nodes: {
       id: string
       slug: string
+      contentFilePath: string
     }[]
   }
   writing: {
     nodes: {
       id: string
       slug: string
       type: "prose" | "tutorial"
+      contentFilePath: string
     }[]
   }
 }
@@ -42,13 +44,15 @@ export const createPages: GatsbyNode["createPages"] = async ({ graphql, actions,
         nodes {
           id
           slug
+          contentFilePath
         }
       }
       writing: allPost(filter: { published: { eq: true } }) {
         nodes {
           id
           slug
           type
+          contentFilePath
         }
       }
     }
@@ -70,19 +74,19 @@ export const createPages: GatsbyNode["createPages"] = async ({ graphql, actions,
   garden.nodes.forEach((post) => {
     createPage({
       path: post.slug,
-      component: gardenTemplate,
+      component: `${gardenTemplate}?__contentFilePath=${post.contentFilePath}`,
       context: {
         id: post.id,
       },
     })
   })
 
   writing.nodes.forEach((article) => {
-    const component = article.type === `tutorial` ? tutorialTemplate : proseTemplate
+    const writingTemplate = article.type === `tutorial` ? tutorialTemplate : proseTemplate
 
     createPage({
       path: article.slug,
-      component,
+      component: `${writingTemplate}?__contentFilePath=${article.contentFilePath}`,
       context: {
         id: article.id,
       },

www/package.json

@@ -12,10 +12,10 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@chakra-ui/gatsby-plugin": "^3.0.0",
-    "@chakra-ui/react": "^2.0.2",
-    "@chakra-ui/system": "^2.0.2",
-    "@chakra-ui/theme-tools": "^2.0.0",
+    "@chakra-ui/gatsby-plugin": "3.0.1",
+    "@chakra-ui/react": "2.2.4",
+    "@chakra-ui/system": "2.2.2",
+    "@chakra-ui/theme-tools": "2.0.5",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@lekoarts/gatsby-source-flickr": "^0.0.1",
@@ -33,6 +33,7 @@
     "query-string": "^7.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-icons": "^4.3.1"
+    "react-icons": "^4.3.1",
+    "reading-time": "^1.5.0"
   }
 }

www/src/components/art/flickr-3d.tsx

@@ -57,8 +57,8 @@ export const Flickr3D = () => {
           key={img.photoId}
           alt={img.description}
           photoId={img.photoId}
-          height={img.imageUrls.image.height}
-          width={img.imageUrls.image.width}
+          height={img.imageUrls?.image?.height}
+          width={img.imageUrls?.image?.width}
           src={img.imageUrls.image.url}
           title={img.title}
         />

www/src/components/art/flickr-design.tsx

@@ -57,8 +57,8 @@ export const FlickrDesign = () => {
           key={img.photoId}
           alt={img.description}
           photoId={img.photoId}
-          height={img.imageUrls.image.height}
-          width={img.imageUrls.image.width}
+          height={img.imageUrls?.image?.height}
+          width={img.imageUrls?.image?.width}
           src={img.imageUrls.image.url}
           title={img.title}
         />

www/src/components/art/flickr-photography.tsx

@@ -69,8 +69,8 @@ export const FlickrPhotography = () => {
                 key={img.photoId}
                 alt={img.description}
                 photoId={img.photoId}
-                height={img.imageUrls.image.height}
-                width={img.imageUrls.image.width}
+                height={img.imageUrls?.image?.height}
+                width={img.imageUrls?.image?.width}
                 src={img.imageUrls.image.url}
                 title={img.title}
               />

www/src/components/mdx/index.tsx

@@ -19,6 +19,5 @@ export const components = {
   Alert,
   Collapsible,
   Video,
-  wrapper: ({ children }) => children,
   ...headings,
 }