Breaking: Upgrade Gatsby to latest version 5.

.github/workflows/deploy-production.yml

@@ -21,7 +21,7 @@ jobs:
           aws-region: ap-south-1
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Install Packages
         run: npm install --legacy-peer-deps
 

addMdxLayout.js

@@ -0,0 +1,47 @@
+console.log("Starting Adding Layout to Mdx Files in Pages......");
+const fs = require("fs");
+const path = require("path");
+
+const pagesDir = path.join(__dirname, "src/pages");
+
+function prependToFile(filePath, content) {
+  const originalContent = fs.readFileSync(filePath, "utf8");
+  // Check if the file already contains the required content
+  if (!hasRequiredContent(originalContent)) {
+    fs.writeFileSync(filePath, content + originalContent);
+    console.log(`Updated ${filePath}`);
+  } else {
+    console.log(`Skipped ${filePath}`);
+  }
+}
+
+function hasRequiredContent(content) {
+  return (
+    content.includes(
+      'import DefaultLayoutNarrow from "@/components/default-layout-narrow"'
+    ) &&
+    content.includes("<DefaultLayoutNarrow>{children}</DefaultLayoutNarrow>")
+  );
+}
+
+function processFiles(dir) {
+  const files = fs.readdirSync(dir);
+
+  files.forEach((file) => {
+    const filePath = path.join(dir, file);
+    const stats = fs.statSync(filePath);
+
+    if (stats.isDirectory()) {
+      processFiles(filePath); // Recursively process directories
+    } else if (filePath.endsWith(".mdx")) {
+      const importStatement = `import DefaultLayoutNarrow from "@/components/default-layout-narrow";\n\n`;
+      const wrapperComponent = `export default function Layout({ children }) {\n  return <DefaultLayoutNarrow>{children}</DefaultLayoutNarrow>;\n}\n\n`;
+
+      prependToFile(filePath, importStatement + wrapperComponent);
+    }
+  });
+}
+
+processFiles(pagesDir);
+
+console.log("Adding Layout Completed!")

gatsby-config.js → gatsby-config.mjs

@@ -1,4 +1,12 @@
-module.exports = {
+// const remarkGfm = import('remark-gfm');
+import remarkGfm from "remark-gfm"
+import { dirname } from "path"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const config = {
   siteMetadata: {
     title: `Tattle`,
     siteUrl: "https://tattle.co.in/", // looks like gatsby-plugin-feed requires this to be the field name
@@ -9,6 +17,15 @@ module.exports = {
   plugins: [
     `gatsby-plugin-react-helmet`,
     `gatsby-remark-images`,
+    {
+      resolve: `gatsby-plugin-alias-imports`,
+      options: {
+        alias: {
+          "@": "src",
+        },
+        extensions: ["js", "jsx", "json", "css", "mdx", "md"],
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -50,15 +67,13 @@ module.exports = {
         name: `community`,
         path: `${__dirname}/src/community`,
       },
-
     },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `pages`,
         path: `${__dirname}/src/pages`,
       },
-
     },
 
     `gatsby-transformer-sharp`,
@@ -79,9 +94,6 @@ module.exports = {
       resolve: "gatsby-plugin-mdx",
       options: {
         extensions: [`.mdx`],
-        defaultLayouts: {
-          default: require.resolve(`./src/components/default-layout-narrow.js`),
-        },
         gatsbyRemarkPlugins: [
           {
             resolve: `gatsby-remark-images`,
@@ -90,6 +102,9 @@ module.exports = {
             },
           },
         ],
+        mdxOptions: {
+          remarkPlugins: [remarkGfm],
+        },
       },
     },
     {
@@ -134,40 +149,41 @@ module.exports = {
         feeds: [
           {
             serialize: ({ query: { site, allMdx } }) => {
-              return allMdx.nodes.map(node => {
+              return allMdx.nodes.map((node) => {
                 return Object.assign({}, node.frontmatter, {
                   title: node.frontmatter.name,
                   description: node.frontmatter.excerpt,
-                  url: site.siteMetadata.siteUrl + "/blog/" + node.slug,
-                  guid: site.siteMetadata.siteUrl + "/blog/" + node.slug,
+                  url: site.siteMetadata.siteUrl + "/blog/" + node.fields.slug,
+                  guid: site.siteMetadata.siteUrl + "/blog/" + node.fields.slug,
                   date: node.frontmatter.date,
                   author: node.frontmatter.author,
                 })
               })
             },
-            query: `
-            {
-              allMdx(
-                filter: {fileAbsolutePath: {regex: "/.*/src/blog/"}}
-                sort: {fields: frontmatter___date, order: DESC}
-              ) {
-                nodes {
-                  slug
-                  frontmatter {
-                    name
-                    excerpt
-                    author
-                    project
-                    date
-                    tags
-                    cover
-                  }
-                  fileAbsolutePath
-                }
-              }
-            }
-
-            `,
+            query: `{
+  allMdx(
+    filter: {internal: {contentFilePath: {regex: "/.*/src/blog/"}}}
+    sort: {frontmatter: {date: DESC}}
+  ) {
+    nodes {
+      fields {
+        slug            
+      }
+      frontmatter {
+        name
+        excerpt
+        author
+        project
+        date
+        tags
+        cover
+      }
+      internal {
+        contentFilePath
+      }
+    }
+  }
+}`,
             output: "/rss.xml",
             title:
               "Tattle - Civic Tech intervention for Misinformation, Content Moderation and Media Literacy",
@@ -177,3 +193,5 @@ module.exports = {
     },
   ],
 }
+
+export default config

gatsby-node.js

@@ -11,15 +11,19 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       allMdx {
         nodes {
           id
+          fields {
+            slug
+          }
           frontmatter {
             name
             description
             people
             tags
             project
           }
-          fileAbsolutePath
-          slug
+          internal {
+            contentFilePath
+          }
         }
       }
     }
@@ -34,20 +38,22 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const projects = [
     ...new Set(
       nodes
-        .map(node => node.frontmatter.project)
-        .filter(project => typeof project === "string" && project.trim() !== "")
-        .map(project => projectSlugMaker(project))
+        .map((node) => node.frontmatter.project)
+        .filter(
+          (project) => typeof project === "string" && project.trim() !== ""
+        )
+        .map((project) => projectSlugMaker(project))
     ),
   ]
 
   // Unique Set of all the Tags
   const tags_set = new Set()
-  result.data.allMdx.nodes.forEach(node => {
+  result.data.allMdx.nodes.forEach((node) => {
     const tags_arr = node.frontmatter.tags
-      ? node.frontmatter.tags.split(",").map(tag => tag.trim())
+      ? node.frontmatter.tags.split(",").map((tag) => tag.trim())
       : []
     if (tags_arr) {
-      tags_arr.forEach(tag => tags_set.add(tag))
+      tags_arr.forEach((tag) => tags_set.add(tag))
     }
   })
 
@@ -58,107 +64,112 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   //   await fs.mkdir("./src/people/avatar")
   // }
 
-
   // The array should be similar to the tree (in default-sitemap-layout). If node exists pass node, else make a node object to pass name in it.
-  const siteMapNodes = [] 
+  const siteMapNodes = []
 
   createPage({
     path: `/blog/`,
-    component: path.resolve(`./src/components/default-blog-index-layout.js`),
+    component: require.resolve(`./src/components/default-blog-index-layout.js`),
     context: { projects },
   })
   //siteMapURLs.set("Blogs", "/blog")
-    siteMapNodes.push({name:"blog",isDir:false,node:{name:"blog"}})
+  siteMapNodes.push({ name: "blog", isDir: false, node: { name: "blog" } })
 
   // CREATE TAGS PAGE
-  tags_set.forEach(tag => {
+  tags_set.forEach((tag) => {
     createPage({
       path: `/blog/tags/${tag}`,
-      component: path.resolve("./src/components/default-tag-page-layout.js"),
+      component: require.resolve("./src/components/default-tag-page-layout.js"),
       context: { tag },
     })
   })
 
   // Create Tags Project Page
-  projects.forEach(project => {
+  projects.forEach((project) => {
     createPage({
       path: `/blog/tags/project/${project}`,
-      component: path.resolve(
+      component: require.resolve(
         "./src/components/default-tag-project-page-layout.js"
       ),
       context: { project },
     })
   })
 
   // Create Tags Project Page for Updates
-  projects.forEach(project => {
+  projects.forEach((project) => {
     createPage({
       path: `/updates/tags/project/${project}`,
-      component: path.resolve(
+      component: require.resolve(
         "./src/components/default-updates-project-tag-page-layout.js"
       ),
       context: { project },
     })
   })
 
-  nodes.forEach(async node => {
-    const { fileAbsolutePath, id } = node
+  nodes.forEach(async (node) => {
+    const { internal, id } = node
     // console.log(`------ : ${id}`)
 
+    let fileAbsolutePath = internal.contentFilePath
+
     if (fileAbsolutePath.indexOf("/src/people/") !== -1) {
       // create QR code avatar
 
       // await QRCode.toFile(
-      //   `./src/people/avatar/${node.slug}.png`,
-      //   "/people/${node.slug}"
+      //   `./src/people/avatar/${ node.fields.slug}.png`,
+      //   "/people/${ node.fields.slug}"
       // )
 
       // create Page
       await createPage({
-        path: `/people/${node.slug}`,
-        component: path.resolve(`./src/components/default-people-layout.js`),
+        path: `/people/${node.fields.slug}`,
+        component: require.resolve(`./src/components/default-people-layout.js`),
         context: { id },
       })
     }
 
     // if (fileAbsolutePath.indexOf("/src/project/") !== -1) {
     //   createPage({
-    //     path: `/project/${node.slug}`,
-    //     component: path.resolve(`./src/components/default-page-layout.js`),
+    //     path: `/project/${ node.fields.slug}`,
+    //     component: require.resolve(`./src/components/default-page-layout.js`),
     //     context: { id: node.id },
     //   })
     // }
 
     // CREATE BLOGS
     if (fileAbsolutePath.indexOf("/src/blog/") !== -1) {
+      const blogTemplate = path.resolve(
+        `./src/components/default-blog-layout.js`
+      )
       createPage({
-        path: `/blog/${node.slug}`,
-        component: path.resolve(`./src/components/default-blog-layout.js`),
+        path: `/blog/${node.fields.slug}`,
+        component: `${blogTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
         context: { id: node.id },
       })
     }
 
-    //TODO:Reconsider this 
-    // CREATE PROJECTS 
+    //TODO:Reconsider this
+    // CREATE PROJECTS
     if (fileAbsolutePath.indexOf("/src/project/") !== -1) {
       createPage({
-        path: `/project/${node.slug}`,
-        component: path.resolve(`./src/components/default-blog-layout.js`),
+        path: `/project/${node.fields.slug}`,
+        component: require.resolve(`./src/components/default-blog-layout.js`),
         context: { id: node.id },
       })
     }
-
   })
   // Create the Sitemap Page
   await createPage({
     path: `/sitemap/`,
-    component: path.resolve(`./src/components/default-sitemap-layout.js`),
-    context: { siteMapNodes:siteMapNodes },
+    component: require.resolve(`./src/components/default-sitemap-layout.js`),
+    context: { siteMapNodes: siteMapNodes },
   })
 }
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
-  if (node.internal.type === `MarkdownRemark`) {
+  const { createNodeField } = actions
+  if (node.internal.type === `Mdx`) {
+    // if (node.internal.type === `MarkdownRemark`) {
     const value = createFilePath({ node, getNode })
     createNodeField({
       name: `slug`,