Merge pull request #14 from iamtimsmith/upgrade-to-v4

Upgrade to v4

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/posts/2021-11-29---react-101-the-basics.md

@@ -116,7 +116,7 @@ These libraries allow you to establish a path to use in the url and a component
 Along with React, Facebook developed a tool for testing JavaScript called [Jest](https://jestjs.io/). When used by itself, Jest is primary good for testing logic. It doesn't handle any sort of DOM rendering or snapshot testing, so another library is needed for that. The two most commonly used tools for DOM testing are [Enzyme](https://enzymejs.github.io/enzyme/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). They both do pretty much the same thing, so it's really just a matter of preference. For end-to-end testing, the most commonly used library is [Cypress](https://www.cypress.io/).
 
 #### Styles
-In addition to normal css, there are [different tools which can be used for styling](/blog/how-to-use-styles-in-a-react-js-application/) in your React applications. [Styled Components](https://styled-components.com/) is a popular option and allows you to write your styles directly in your JavaScript code. [Sass](https://sass-lang.com/) is another commonly used option which has many benefits of css with some "special sauce" on top. Of course, you can also use tools such as Bootstrap, Material UI, etc.
+In addition to [normal css](/blog/using-variables-in-css), there are [different tools which can be used for styling](/blog/how-to-use-styles-in-a-react-js-application/) in your React applications. [Styled Components](https://styled-components.com/) is a popular option and allows you to write your styles directly in your JavaScript code. [Sass](https://sass-lang.com/) is another commonly used option which has many benefits of css with some "special sauce" on top. Of course, you can also use tools such as Bootstrap, Material UI, etc.
 
 ## Conclusion
 As you can see, React has a lot to offer when building front-end applications. It is one of the most in-demand skills for a developer seeking a job. There is a huge community and as a result tons of options when building out a project.

src/posts/2021-12-27---first-experiences-with-material-ui.md

@@ -0,0 +1,41 @@
+---
+title: First Experiences with Material UI
+description: Sample description
+image: gatsby-astronaut.png
+tags: [react, mui]
+published: false
+---
+
+I have recently started learning and playing around with [Material UI](https://mui.com/) for an upcoming project. In this post, I'll be talking about my first experiences with it and some of the benefits and challenges I've found while getting started.
+
+<Gif
+	src="https://media.giphy.com/media/1zgOBEmZk2M8vSJxqD/giphy.mp4"
+/>
+
+## What is Material UI?
+Before we can talk about the Material UI (or MUI) library, we should talk about [Material design](https://material.io/design/introduction). According to the website, "Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web."
+
+> Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web.
+
+In other words, Material is a set of ideas and standards to help make things using the system more consistent and accessible. The Material UI library takes this concept and provides prebuilt React components using this design system along with the ability to customize the styles.
+
+Since I have been learning more about accessibilty and trying to take a more accesssibility first approach to building user interfaces, the idea that this comes built-in to the library (for the most part) is very appealing. Now that you know more about what MUI is, let's get into building things with it!
+
+## First steps: Installation
+Installing MUI is just like installing any other library using NPM or Yarn. It does have some dependencies which need to be installed alongside it. By default, MUI uses [Emotion](https://emotion.sh/docs/introduction) for styling. To get MUI and Emotion installed in your project, you can run this command in your terminal:
+
+```bash
+npm i @mui/material @emotion/react @emotion/styled
+```
+
+Personally, I am more comfortable with [Styled Components](https://styled-components.com/) than Emotion so when the docs mentioned the ability to [use Styled Components](/blog/how-to-use-styles-in-a-react-js-application/) instead, so I initially decided to try that. It did not go well.
+
+At first, I was [using Parcel to bundle my package](/blog/parcel-js-who-says-bundling-needs-to-be-difficult/) since it was quick and easy to set up for a playground. There was not any configuration for this [in the documentation](https://mui.com/guides/styled-engine/) and since it's just an exploration into MUI didn't feel worth the trouble to figure out the proper configuration. As a result, I scrapped Parcel and started looking into Create-React-App and Next since examples were provided for those.
+
+Create React App proved more difficult than I expected to configure because for some reason the webpack config change wasn't working. Next I tried... well... Next. I got it up and running without too much trouble and started building. After having more discussions with others working on the project, we opted to just go with the default Emotion configuration.
+
+Knowing this, it was very easy to spin up a Create React App environment and just run the command above to install my packages. There are also icons which can be used and to install this you will have to run the following command.
+
+```bash
+npm i @mui/icons-material
+```

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