Update Gatsby v5.15 and React v18.3 (#73)

* Add needed changes (WIP)

* Fix config to support null frontmatter

* Add extra updates on config to fix building issues

* Replace Netlify CMS with the Decap CMS as is the new name

* Add needed plugins

* Build works now

* Change missing wdget for new local ones

* Add missing dependency "shortid"

* Fix config

* Fix missing names

* Add fixes for FileRelationWidgetControl

* Upgrade to Gatsby v5

* Add env variables in config

* Add env variables in config

* Undo last commit

* Add missing previous dependency

* Add missing previous plugins

* Update node and yarn versions

* Changed from class components to function components

* Revert graphQL query to previous one

* Bumped Gatsby to ^5.15.0

* Add seo image fixes

* Code fix

* Add minor fix

* Convert BlogIndexPage to function component

* Fix class attribute to className

* Fix error in onsubmit functionality

* Remove incorrect "publicURL" image attribute

* Update Index Page “indexPage”

---------

Co-authored-by: Matias Perrone <github@matiasperrone.com>
Co-authored-by: sebastian marcet <smarcet@gmail.com>

Author: 3 people

.gitignore

@@ -9,3 +9,4 @@ static/admin/*.bundle.*
 yarn-error.log
 # Developer environment
 .idea/
+.env*

.nvmrc

@@ -1 +1 @@
-12.20.1
+20.18.1

gatsby-browser.js

@@ -7,68 +7,6 @@ module.exports = {
   plugins: [
     "gatsby-plugin-react-helmet",
     "gatsby-plugin-sass",
-    {
-      resolve: `gatsby-plugin-feed`,
-      options: {
-        query: `
-          {
-            site {
-              siteMetadata {
-                url
-                site_url: url
-              }
-            }
-          }
-        `,
-        feeds: [
-          {
-            serialize: ({ query: { site, allMarkdownRemark } }) => {
-              return allMarkdownRemark.edges.map(edge => {
-                return Object.assign({}, edge.node.frontmatter, {
-                  description: edge.node.frontmatter.seo ? edge.node.frontmatter.seo.description : null,
-                  date: edge.node.frontmatter.date,
-                  url: edge.node.frontmatter.seo ? edge.node.frontmatter.seo.url : null,
-                  guid: edge.node.frontmatter.seo ? edge.node.frontmatter.seo.url : null,
-                  custom_elements: [{ "content:encoded": edge.node.html }],
-                })
-              })
-            },
-            query: `
-              {
-                allMarkdownRemark(
-                  sort: { order: DESC, fields: [frontmatter___date] },
-                  filter: { frontmatter: { templateKey: { eq: "blog-post" } } }
-                ) {
-                  edges {
-                    node {
-                      html
-                      fields { slug }
-                      frontmatter {
-                        title
-                        date
-                        seo {
-                          description
-                          url
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            `,
-            output: "/rss.xml",
-            title: "Ironic Bare Metal RSS Feed",
-            // optional configuration to insert feed reference in pages:
-            // if `string` is used, it will be used to create RegExp and then test if pathname of
-            // current page satisfied this regular expression;
-            // if not provided or `undefined`, all pages will have feed reference inserted
-            match: "^/blog/",
-            // optional configuration to specify external rss feed, such as feedburner
-            // link: "https://feeds.feedburner.com/gatsby/blog",
-          },
-        ],
-      },
-    },
     {
       // keep as first gatsby-source-filesystem plugin for gatsby image support
       resolve: "gatsby-source-filesystem",
@@ -87,8 +25,15 @@ module.exports = {
     {
       resolve: "gatsby-source-filesystem",
       options: {
-        path: `${__dirname}/src/img`,
-        name: "images",
+        name: `content`,
+        path: `${__dirname}/src/content`,
+      },
+    },
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        path: `${__dirname}/src/pages`,
+        name: "pages",
       },
     },
     "gatsby-plugin-sharp",
@@ -97,18 +42,9 @@ module.exports = {
       resolve: "gatsby-transformer-remark",
       options: {
         plugins: [
-          {
-            resolve: "gatsby-remark-relative-images",
-            options: {
-              name: "uploads",
-            },
-          },
           {
             resolve: "gatsby-remark-images",
             options: {
-              // It's important to specify the maxWidth (in pixels) of
-              // the content container as this plugin uses this as the
-              // base for generating different widths of each image.
               maxWidth: 2048,
               linkImagesToOriginal: false,
             },
@@ -129,11 +65,65 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: `gatsby-plugin-feed`,
+      options: {
+        query: `
+          {
+            site {
+              siteMetadata {
+                title
+                description
+                url
+                site_url: url
+              }
+            }
+          }
+        `,
+        feeds: [
+          {
+            serialize: ({ query: { site, allMarkdownRemark } }) => {
+              return allMarkdownRemark.nodes.map(node => {
+                return Object.assign({}, node.frontmatter, {
+                  description: node.excerpt,
+                  date: node.frontmatter.date,
+                  url: site.siteMetadata.url + node.fields.slug,
+                  guid: site.siteMetadata.url + node.fields.slug,
+                  custom_elements: [{ "content:encoded": node.html }],
+                })
+              })
+            },
+            query: `
+              {
+                allMarkdownRemark(
+                  sort: { frontmatter: { date: DESC } },
+                ) {
+                  nodes {
+                    excerpt
+                    html
+                    fields {
+                      slug
+                    }
+                    frontmatter {
+                      title
+                      date
+                    }
+                  }
+                }
+              }
+            `,
+            output: "/rss.xml",
+            title: "Ironic Bare Metal RSS Feed",
+            match: "^/blog/",
+          },
+        ],
+      },
+    },
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
         // The property ID; the tracking code won't be generated without it
-        trackingId: "",
+        trackingId: "UA-PLACEHOLDER",
         // Defines where to place the tracking script - `true` in the head and `false` in the body
         head: true,
         // Setting this parameter is optional
@@ -147,7 +137,7 @@ module.exports = {
       options: {
         // You can add multiple tracking ids and a pageview event will be fired for all of them.
         trackingIds: [
-          "", // Google Analytics / GA
+          "GA_MEASUREMENT_ID", // Google Analytics / GA
         ],
         // This object gets passed directly to the gtag config command
         // This config will be shared across all trackingIds
@@ -181,11 +171,11 @@ module.exports = {
     {
       resolve: `gatsby-plugin-offline`,
       options: {
-        precachePages: [``, `/blog/*`],
+        precachePages: [`/`, `/blog/*`],
       },
     },
     {
-      resolve: "gatsby-plugin-netlify-cms",
+      resolve: "gatsby-plugin-decap-cms",
       options: {
         modulePath: `${__dirname}/src/cms/cms.js`,
       },
@@ -199,12 +189,7 @@ module.exports = {
       },
     }, // must be after other CSS plugins
     {
-      resolve: "gatsby-plugin-netlify", // make sure to keep it last in the array,
-      options: {
-        enableIdentityWidget: true,
-        htmlTitle: `Ironic | Content Manager`,
-        includeRobots: false,
-      },
+      resolve: "gatsby-plugin-netlify", // make sure to keep it last in the array
     },
   ],
 };

gatsby-config.js

@@ -1,8 +1,29 @@
 const _ = require('lodash')
-const axios = require('axios')
 const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
-const { fmImagesToRelative } = require('gatsby-remark-relative-images')
+
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions
+
+  const typeDefs = `
+    type MarkdownRemarkFrontmatter {
+      category: [BlogCategory]
+      author: String
+      templateKey: String
+      date: Date @dateformat
+      title: String
+      subTitle: String
+      company: String
+    }
+    
+    type BlogCategory {
+      label: String
+      id: String
+    }
+  `
+
+  createTypes(typeDefs)
+}
 
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
@@ -36,7 +57,7 @@ exports.createPages = ({ actions, graphql }) => {
     const posts = result.data.allMarkdownRemark.edges
 
     posts.forEach(edge => {
-      const id = edge.node.id      
+      const id = edge.node.id
       createPage({
         path: edge.node.fields.slug.replace('/pages', ''),
         category: edge.node.frontmatter.category,
@@ -76,7 +97,7 @@ exports.createPages = ({ actions, graphql }) => {
 
     // author pages:
     let authors = []
-    // Iterate through each post, putting all found authors into `authors`    
+    // Iterate through each post, putting all found authors into `authors`
     posts.forEach(edge => {
       if (_.get(edge, `node.frontmatter.author`)) {
         authors = authors.concat(edge.node.frontmatter.author)
@@ -102,7 +123,6 @@ exports.createPages = ({ actions, graphql }) => {
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
-  fmImagesToRelative(node) // convert image paths for gatsby images
 
   if (node.internal.type === `MarkdownRemark`) {
     const value = createFilePath({ node, getNode })

gatsby-node.js

@@ -2,7 +2,7 @@
   publish = "public"
   command = "npm run build"
 [build.environment]
-  NODE_VERSION = "12.20.1"
-  YARN_VERSION = "1.13.0"
+  NODE_VERSION = "20.18.1"
+  YARN_VERSION = "v1.22.22"
   YARN_FLAGS = "--no-ignore-optional"
   PYTHON_VERSION = "3.10"