upgrading to gatsby3

Author: npalm

gatsby-config.js

@@ -65,7 +65,6 @@ module.exports = {
         trackingId: config.googleAnalyticsId,
       },
     },
-    `gatsby-plugin-feed`,
     `gatsby-plugin-offline`,
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-react-helmet`,
@@ -81,5 +80,64 @@ module.exports = {
         icon: config.icon,
       }
     },
+
+    {
+     resolve: `gatsby-plugin-feed`,
+      options: {
+        query: `
+          {
+            site {
+              siteMetadata {
+                title
+                description
+                siteUrl
+                site_url: siteUrl
+              }
+            }
+          }
+        `,
+        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.siteUrl + node.fields.slug,
+                  guid: site.siteMetadata.siteUrl + node.fields.slug,
+                  custom_elements: [{ "content:encoded": node.html }],
+                })
+              })
+            },
+            query: `
+              {
+                allMarkdownRemark(
+                  sort: { order: DESC, fields: [frontmatter___date] },
+                ) {
+                  nodes {
+                    excerpt
+                    html
+                    fields { 
+                      slug 
+                    }
+                    frontmatter {
+                      title
+                      date
+                    }
+                  }
+                }
+              }
+            `,
+            output: "/rss.xml",
+            title: "Your Site's 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/",
+          },
+        ],
+      },
+    },
   ],
 }

package.json

@@ -4,46 +4,46 @@
   "version": "0.0.0-development",
   "author": "Niek, Jeroen",
   "dependencies": {
-    "babel-plugin-styled-components": "^1.8.0",
-    "core-js": "^2.5.7",
-    "disqus-react": "^1.0.5",
-    "gatsby": "^2.4.2",
-    "gatsby-plugin-feed": "2.2.0",
-    "gatsby-plugin-google-analytics": "2.0.19",
-    "gatsby-plugin-manifest": "^2.0.12",
-    "gatsby-plugin-offline": "^2.0.20",
-    "gatsby-plugin-react-helmet": "^3.0.12",
-    "gatsby-plugin-sharp": "^2.0.22",
-    "gatsby-plugin-styled-components": "^3.0.4",
-    "gatsby-remark-autolink-headers": "^2.0.12",
-    "gatsby-remark-copy-linked-files": "^2.0.9",
-    "gatsby-remark-emoji": "^0.0.2",
-    "gatsby-remark-images": "^3.0.5",
+    "babel-plugin-styled-components": "^2.0.2",
+    "core-js": "^3.20.0",
+    "disqus-react": "^1.1.2",
+    "gatsby": "^4.4.0",
+    "gatsby-plugin-feed": "^4.4.0",
+    "gatsby-plugin-google-analytics": "^4.4.0",
+    "gatsby-plugin-manifest": "^4.4.0",
+    "gatsby-plugin-offline": "^5.4.0",
+    "gatsby-plugin-react-helmet": "^5.4.0",
+    "gatsby-plugin-sharp": "^4.4.0",
+    "gatsby-plugin-styled-components": "^5.4.0",
+    "gatsby-remark-autolink-headers": "^5.4.0",
+    "gatsby-remark-copy-linked-files": "^5.4.0",
+    "gatsby-remark-emoji": "^0.0.3",
+    "gatsby-remark-images": "^6.4.0",
     "gatsby-remark-numbered-footnotes": "^1.0.1",
-    "gatsby-remark-prismjs": "^3.2.4",
-    "gatsby-remark-responsive-iframe": "^2.0.9",
-    "gatsby-remark-smartypants": "^2.0.8",
-    "gatsby-source-filesystem": "^2.0.23",
-    "gatsby-transformer-remark": "^2.3.0",
-    "gatsby-transformer-sharp": "^2.1.14",
-    "lodash": "^4.17.5",
-    "prismjs": "^1.15.0",
-    "react": "^16.8.3",
-    "react-burger-menu": "^2.6.10",
-    "react-dom": "^16.8.3",
-    "react-helmet": "^5.2.0",
-    "react-icons": "^3.6.1",
-    "styled-components": "4.3.2"
+    "gatsby-remark-prismjs": "^6.4.0",
+    "gatsby-remark-responsive-iframe": "^5.4.0",
+    "gatsby-remark-smartypants": "^5.4.0",
+    "gatsby-source-filesystem": "^4.4.0",
+    "gatsby-transformer-remark": "^5.4.0",
+    "gatsby-transformer-sharp": "^4.4.0",
+    "lodash": "^4.17.21",
+    "prismjs": "^1.25.0",
+    "react": "^17.0.2",
+    "react-burger-menu": "^3.0.6",
+    "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
+    "react-icons": "^4.3.1",
+    "styled-components": "5.3.3"
   },
   "devDependencies": {
-    "eslint": "^6.0.1",
-    "eslint-plugin-react": "^7.7.0",
-    "gatsby-cli": "^2.5.12",
-    "now": "^19.0.1",
-    "prettier": "^1.12.0",
-    "puppeteer": "^1.9.0",
-    "semantic-release": "^15.13.12",
-    "yaml": "^1.6.0"
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "gatsby-cli": "^4.4.0",
+    "now": "^21.0.1",
+    "prettier": "^2.5.1",
+    "puppeteer": "^13.0.0",
+    "semantic-release": "^18.0.1",
+    "yaml": "^1.10.2"
   },
   "homepage": "https://040code.github.io",
   "keywords": [

src/components/Hero.js

@@ -111,7 +111,7 @@ class Hero extends React.Component {
                 authors.map((author, i) => {
                   return (
                     <Fragment key={`author-list-${i}`}>
-                      <AuthorLink to={`authors/${author}`}>{author}</AuthorLink>
+                      <AuthorLink to={`/authors/${author}`}>{author}</AuthorLink>
                       {i < authors.length - 1 ? ' ' : ''}
                     </Fragment>
                   )

src/components/PostsListItem.js

@@ -69,7 +69,7 @@ class PostsListItem extends React.Component {
       <Post>
         <PostHeader>
           <h2>
-            <PostTitleLink to={slug}>
+            <PostTitleLink to={`/${slug}`}>
               {siteConfig.multilangPosts && <Flag language={language} />}
               {title}
             </PostTitleLink>

src/components/TagList.js

@@ -39,7 +39,7 @@ class TagList extends React.Component {
         {tags.map((tag, i) => {
           return (
             <Fragment key={`tag-list-${i}`}>
-              <TagListItem className="w3-round-size" to={`tags/${tag}`}>
+              <TagListItem className="w3-round-size" to={`/tags/${tag}`}>
                 {tag}
               </TagListItem>
               {i < tags.length - 1 ? ' ' : ''}