Upgraded to v4. Fixed Note error. Removed unneeded dependencies.

gatsby-config.js

@@ -32,9 +32,7 @@ module.exports = {
     `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,
-    // `gatsby-plugin-gatsby-cloud`,
     `gatsby-plugin-sitemap`,
-    `gatsby-plugin-netlify`,
     `gatsby-plugin-catch-links`,
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-react-axe`,
@@ -101,7 +99,7 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-plugin-feed-mdx`,
+      resolve: `gatsby-plugin-feed`,
       options: {
         query: `
           {
@@ -148,10 +146,6 @@ module.exports = {
             `,
             output: '/rss.xml',
             title: "Tim Smith'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/',
           },
         ],
@@ -178,22 +172,9 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-local-search',
       options: {
-        // A unique name for the search index. This should be descriptive of
-        // what the index contains. This is required.
         name: 'posts',
-
-        // Set the search engine to create the index. This is required.
-        // The following engines are supported: flexsearch, lunr
         engine: 'flexsearch',
-
-        // Provide options to the engine. This is optional and only recommended
-        // for advanced users.
-        //
-        // Note: Only the flexsearch engine supports options.
         engineOptions: 'speed',
-
-        // GraphQL query used to fetch all data for the search index. This is
-        // required.
         query: `{
 					posts: allMdx(
 						filter: {
@@ -218,25 +199,8 @@ module.exports = {
 					}
 				}
         `,
-
-        // Field used as the reference value for each document.
-        // Default: 'id'.
         ref: 'id',
-
-        // List of keys to index. The values of the keys are taken from the
-        // normalizer function below.
-        // Default: all fields
         index: ['title', 'description', 'tags', 'slug', 'body'],
-
-        // List of keys to store and make available in your UI. The values of
-        // the keys are taken from the normalizer function below.
-        // Default: all fields
-        // store: ['id', 'path', 'title'],
-
-        // Function used to map the result from the GraphQL query. This should
-        // return an array of items to index in the form of flat objects
-        // containing properties to index. The objects must contain the `ref`
-        // field above (default: 'id'). This is required.
         normalizer: ({ data }) =>
           data.posts.nodes.map(node => ({
             ...node,

package.json

@@ -16,30 +16,26 @@
     "@mdx-js/react": "^1.6.22",
     "babel-plugin-styled-components": "^2.0.1",
     "dayjs": "^1.10.7",
-    "gatsby": "^3.6.2",
+    "gatsby": "^4.3.0",
     "gatsby-image": "^3.11.0",
-    "gatsby-plugin-catch-links": "^3.7.1",
-    "gatsby-plugin-feed": "^3.7.1",
-    "gatsby-plugin-feed-mdx": "^1.1.0",
-    "gatsby-plugin-gatsby-cloud": "^2.6.1",
-    "gatsby-plugin-google-analytics": "^3.7.1",
-    "gatsby-plugin-google-gtag": "^3.7.1",
-    "gatsby-plugin-image": "^1.6.0",
+    "gatsby-plugin-catch-links": "^4.3.0",
+    "gatsby-plugin-feed": "^4.3.0",
+    "gatsby-plugin-google-analytics": "^4.3.0",
+    "gatsby-plugin-google-gtag": "^4.3.0",
+    "gatsby-plugin-image": "^2.3.0",
     "gatsby-plugin-local-search": "^2.0.1",
     "gatsby-plugin-mailchimp": "^5.2.2",
-    "gatsby-plugin-manifest": "^3.6.0",
-    "gatsby-plugin-mdx": "^2.7.1",
-    "gatsby-plugin-netlify": "^3.7.1",
-    "gatsby-plugin-offline": "^4.6.0",
+    "gatsby-plugin-manifest": "^4.3.0",
+    "gatsby-plugin-mdx": "^3.3.0",
+    "gatsby-plugin-offline": "^5.3.0",
     "gatsby-plugin-react-axe": "^0.5.0",
-    "gatsby-plugin-react-helmet": "^4.6.0",
-    "gatsby-plugin-sharp": "^3.6.0",
-    "gatsby-plugin-sitemap": "^4.3.1",
-    "gatsby-plugin-styled-components": "^4.14.0",
+    "gatsby-plugin-react-helmet": "^5.3.0",
+    "gatsby-plugin-sharp": "^4.3.0",
+    "gatsby-plugin-sitemap": "^5.3.0",
+    "gatsby-plugin-styled-components": "^5.3.0",
     "gatsby-remark-external-links": "^0.0.4",
-    "gatsby-remark-images": "^5.4.1",
-    "gatsby-remark-prismjs": "^5.4.1",
-    "gatsby-remark-twitter-cards": "^0.6.1",
+    "gatsby-remark-images": "^6.3.0",
+    "gatsby-remark-prismjs": "^6.3.0",
     "gatsby-remark-unwrap-images": "^1.0.2",
     "gatsby-source-filesystem": "^3.6.0",
     "gatsby-source-graphql": "^3.7.1",

src/components/blog-list/blog-list.i.ts

@@ -1,13 +1,15 @@
+export interface PostTeaser {
+  id?: string;
+  excerpt: string;
+  frontmatter: {
+    title: string;
+    published?: boolean;
+  };
+  fields: {
+    slug: string;
+  };
+}
+
 export interface BlogListProps {
-  posts: {
-    id: string;
-    excerpt: string;
-    frontmatter: {
-      title: string;
-      published?: boolean;
-    };
-    fields: {
-      slug: string;
-    };
-  }[];
+  posts: PostTeaser[];
 }

src/components/blog-list/blog-list.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Link } from 'gatsby';
 import { BlogListItems, BlogPost, BlogPostTitle } from './blog-list.style';
-import { BlogListProps } from './blog-list.i';
+import { BlogListProps, PostTeaser } from './blog-list.i';
 
 export const BlogList = ({ posts }: BlogListProps) => {
   return (
     <BlogListItems>
-      {posts.map((node, id) => (
-        <BlogPost key={id}>
+      {posts.map((node: PostTeaser, key: number) => (
+        <BlogPost key={key}>
           <BlogPostTitle>
             <Link to={node.fields.slug}>{node.frontmatter.title}</Link>{' '}
           </BlogPostTitle>

src/components/footer/footer.tsx

@@ -26,13 +26,13 @@ export const Footer = () => {
   return (
     <FooterSection>
       <nav>
-        {socials.map((social: SocialMenuItem) => (
+        {socials.map((social: SocialMenuItem, key: number) => (
           <a
             href={social.url}
             target='_blank'
             rel='noreferrer nofollow'
             aria-label={social.name}
-            key={social.name}
+            key={key}
           >
             {getIcon(social.name.toLowerCase())}
           </a>

src/components/header/header.tsx

@@ -12,8 +12,8 @@ export const Header = () => {
     <Navbar>
       <Logo to='/'>{site.title}</Logo>
       <Nav aria-label='Main menu'>
-        {site.menu.map((item: MenuItem, id: number) => (
-          <Link to={item.url} key={id}>
+        {site.menu.map((item: MenuItem, key: number) => (
+          <Link to={item.url} key={key}>
             {item.name}
           </Link>
         ))}

src/components/sharing/sharing.i.ts

@@ -1,3 +1,8 @@
 export interface SharingProps {
   title: string;
 }
+
+export interface SocialSite {
+  name: string;
+  href: string;
+}

src/components/sharing/sharing.tsx

@@ -3,7 +3,7 @@ import { useLocation } from '@reach/router';
 import { SiteContext } from '../../utils/context';
 import { getIcon, getSharingData } from '../../utils/social';
 import { SharingBar, Label, Button, Site } from './sharing.style';
-import { SharingProps } from './sharing.i';
+import { SharingProps, SocialSite } from './sharing.i';
 
 export const Sharing = ({ title }: SharingProps) => {
   const { site } = useContext(SiteContext);
@@ -25,19 +25,21 @@ export const Sharing = ({ title }: SharingProps) => {
   return (
     <SharingBar show={showing} aria-label='Sharing navigation'>
       <Label>Share:</Label>
-      {getSharingData(url, image, title).map(site => (
-        <Button
-          site={site.name.toLowerCase() as Site}
-          href={site.href}
-          target='_parent'
-          rel='noreferrer nofollow'
-          title={`Share to ${site.name}`}
-          aria-label={`Share to ${site.name}`}
-          key={site.name}
-        >
-          {getIcon(site.name.toLowerCase())}
-        </Button>
-      ))}
+      {getSharingData(url, image, title).map(
+        (site: SocialSite, key: number) => (
+          <Button
+            site={site.name.toLowerCase() as Site}
+            href={site.href}
+            target='_parent'
+            rel='noreferrer nofollow'
+            title={`Share to ${site.name}`}
+            aria-label={`Share to ${site.name}`}
+            key={key}
+          >
+            {getIcon(site.name.toLowerCase())}
+          </Button>
+        )
+      )}
     </SharingBar>
   );
 };

src/components/socials/socials.tsx

@@ -22,13 +22,13 @@ export const Socials = () => {
         <BackToTopButton show={show} onClick={handleClick}>
           &uarr;
         </BackToTopButton>
-        {site.socials.map((social: SocialItem) => (
+        {site.socials.map((social: SocialItem, key: number) => (
           <a
             href={social.url}
             target='_blank'
             rel='noreferrer nofollow'
             aria-label={social.name}
-            key={social.name}
+            key={key}
           >
             {getIcon(social.name.toLowerCase())}
           </a>

src/components/tags/tags.tsx

@@ -6,8 +6,8 @@ export const Tags = ({ tags = [] }: TagsProps) => {
   return (
     <TagList aria-label='tags'>
       <span>Tags: </span>
-      {tags.map(tag => (
-        <Tag to={`/tags/${tag}`} key={tag}>
+      {tags.map((tag: string, key: number) => (
+        <Tag to={`/tags/${tag}`} key={key}>
           #{tag}
         </Tag>
       ))}

src/pages/404.md

@@ -32,7 +32,6 @@ export const pageQuery = graphql`
         fields {
           slug
         }
-        id
         excerpt
       }
     }

src/pages/uses.md

@@ -3,12 +3,6 @@ title: Uses
 description: If you're interested in the various tools I use when developing, you can find a list of them here.
 ---
 
-<Seo
-	title='Uses'
-	description={`If you're interested in the various tools I use when developing, you can find a list of them here.`}
-	image='/timsmith-social.jpg'
-/>
-
 My set up changes every so often, but I'll try to keep an up-to-date list of the stuff I'm using. If you're interested in the various tools I use when developing, you can find a list of them here.
 
 ## Hardware

src/posts/2020-02-12---creating-a-basic-server-with-express-js.md

@@ -280,14 +280,13 @@ module.exports = {
 
 Congratulations! You now have a working express application complete with routing, controllers, and views. You can add more items as you see fit to continue and build on your app. Next steps would be adding a database with models, setting up authorization for users, and setting up private routes. Now go forth and create great things!
 
-<Note>
+---
 
 This is the first in a series of posts about setting up a project with Express.
 
 1. Creating a Basic Server with Express.js
 1. [Using MongoDB with an Express.js project](/blog/using-mongodb-with-express-js)
 <!-- 1. [Adding Authentication to an Express application with Passport.js](/blog/adding-auth-to-express-application-with-passport) -->
 
-</Note>
 
 Have thoughts or questions? You can reach me on Twitter at [@iam_timsmith](https://www.twitter.com/iam_timsmith).

src/posts/2020-02-13---using-mongodb-with-express-js.md

@@ -122,11 +122,12 @@ In addition, you may notice that the date field is an object while the comments
 
 Finally, you define the model for Post using the schema which makes it available to use when handling data in your application.
 
-<br />
-<br />
+---
 
 This is the second in a series of posts about setting up a project with Express.
 
 1. [Creating a Basic Server with Express.js](/blog/creating-a-basic-server-with-express-js)
 1. Using MongoDB with an Express.js project
 <!-- 1. [Adding Authentication to an Express application with Passport.js](/blog/adding-auth-to-express-application-with-passport) -->
+
+Have thoughts or questions? You can reach me on Twitter at [@iam_timsmith](https://www.twitter.com/iam_timsmith).

src/templates/blog.tsx

@@ -37,7 +37,6 @@ export const query = graphql`
       skip: $skip
     ) {
       nodes {
-        id
         frontmatter {
           title
           published

src/templates/tag.tsx

@@ -28,7 +28,6 @@ export const query = graphql`
       sort: { fields: fileAbsolutePath, order: DESC }
     ) {
       nodes {
-        id
         frontmatter {
           title
           published