Fixes for new prettier

.eslintrc.js

@@ -5,27 +5,27 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
   ],
   settings: {
     react: {
-      version: "detect"
-    }
+      version: "detect",
+    },
   },
   env: {
     browser: true,
     node: true,
-    es6: true
+    es6: true,
   },
   plugins: ["@typescript-eslint", "react", "prettier"],
   parserOptions: {
     ecmaFeatures: {
-      jsx: true
+      jsx: true,
     },
     // Allows for the parsing of modern ECMAScript features
     ecmaVersion: 2018,
     // Allows for the use of imports
-    sourceType: "module"
+    sourceType: "module",
   },
   rules: {
     // Disable prop-types as we use TypeScript for type checking
@@ -35,12 +35,12 @@ module.exports = {
     // interface start with capital I
     "@typescript-eslint/interface-name-prefix": "off",
     // allow @ts-ignore for testing purposes
-    "@typescript-eslint/ban-ts-comment": "off"
+    "@typescript-eslint/ban-ts-comment": "off",
   },
   ignorePatterns: [
     "node_modules/**/*",
     "src/types/generated.tsx",
     "public/**/*",
-    "gatsby-config.js"
-  ]
+    "gatsby-config.js",
+  ],
 };

gatsby/gatsby-config.ts

@@ -12,31 +12,31 @@ module.exports = {
     siteUrl: `https://coreyja.com`,
     social: {
       github: `coreyja`,
-      twitter: `coreyja_dev`
-    }
+      twitter: `coreyja_dev`,
+    },
   },
   plugins: [
     {
       resolve: `gatsby-plugin-s3`,
       options: {
         bucketName: process.env.AWS_BUCKET,
         protocol: process.env.AWS_PROTOCOL,
-        hostname: process.env.AWS_HOSTNAME
-      }
+        hostname: process.env.AWS_HOSTNAME,
+      },
     },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         path: `${__dirname}/../content/blog`,
-        name: `blog`
-      }
+        name: `blog`,
+      },
     },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         path: `${__dirname}/../content/assets`,
-        name: `assets`
-      }
+        name: `assets`,
+      },
     },
     {
       resolve: `gatsby-transformer-remark`,
@@ -47,41 +47,41 @@ module.exports = {
             options: {
               maxWidth: 2000,
               withWebp: true,
-              tracedSVG: true
-            }
+              tracedSVG: true,
+            },
           },
           {
             resolve: `gatsby-remark-responsive-iframe`,
             options: {
-              wrapperStyle: `margin-bottom: 1.0725rem`
-            }
+              wrapperStyle: `margin-bottom: 1.0725rem`,
+            },
           },
           {
             resolve: `gatsby-remark-prismjs`,
             options: {
-              showLineNumbers: true
-            }
+              showLineNumbers: true,
+            },
           },
           `gatsby-remark-copy-linked-files`,
           `gatsby-remark-smartypants`,
           {
             resolve: "gatsby-remark-external-links",
             options: {
               target: "_blank",
-              rel: "noopener"
-            }
-          }
-        ]
-      }
+              rel: "noopener",
+            },
+          },
+        ],
+      },
     },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-sass`,
     {
       resolve: "gatsby-plugin-tags",
       options: {
-        templatePath: path.resolve(`${__dirname}/../src/templates/tag.tsx`)
-      }
+        templatePath: path.resolve(`${__dirname}/../src/templates/tag.tsx`),
+      },
     },
     {
       resolve: `gatsby-plugin-feed`,
@@ -101,7 +101,7 @@ module.exports = {
         feeds: [
           {
             serialize: ({
-              query: { site, allMarkdownRemark }
+              query: { site, allMarkdownRemark },
             }: {
               query: FeedQuery;
             }) => {
@@ -110,7 +110,7 @@ module.exports = {
                 throw "Must have a siteUrl";
               }
 
-              return allMarkdownRemark.edges.map(edge => {
+              return allMarkdownRemark.edges.map((edge) => {
                 return Object.assign({}, edge.node.frontmatter, {
                   description: edge.node.excerpt,
                   category: edge.node.fields?.tags,
@@ -119,8 +119,8 @@ module.exports = {
                   guid: siteUrl + edge.node.fields?.slug,
                   custom_elements: [
                     { "content:encoded": edge.node.html },
-                    { tags: (edge.node.fields?.tags || []).join(",") }
-                  ]
+                    { tags: (edge.node.fields?.tags || []).join(",") },
+                  ],
                 });
               });
             },
@@ -153,10 +153,10 @@ module.exports = {
               }
             `,
             output: "/rss.xml",
-            title: "COREYJA RSS Feed"
-          }
-        ]
-      }
+            title: "COREYJA RSS Feed",
+          },
+        ],
+      },
     },
     {
       resolve: `gatsby-plugin-manifest`,
@@ -167,16 +167,16 @@ module.exports = {
         background_color: `#aa66cc`,
         theme_color: `#aa66cc`,
         display: `minimal-ui`,
-        icon: `content/assets/favicon.svg`
-      }
+        icon: `content/assets/favicon.svg`,
+      },
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-plugin-typography`,
       options: {
-        pathToConfigModule: `src/utils/typography`
-      }
+        pathToConfigModule: `src/utils/typography`,
+      },
     },
     `gatsby-plugin-sitemap`,
     {
@@ -187,9 +187,9 @@ module.exports = {
         stages: ["develop"],
         options: {
           emitWarning: true,
-          failOnError: true
-        }
-      }
-    }
-  ]
+          failOnError: true,
+        },
+      },
+    },
+  ],
 };

gatsby/gatsby-node.ts

@@ -50,14 +50,14 @@ const createBlog = async ({ graphql, actions }: CreatePagesArgs) => {
         previousNode.frontmatter?.title
           ? {
               slug: previousNode.fields.slug,
-              title: previousNode.frontmatter.title
+              title: previousNode.frontmatter.title,
             }
           : undefined;
       const next =
         nextNode && nextNode.fields?.slug && nextNode.frontmatter?.title
           ? {
               slug: nextNode.fields.slug,
-              title: nextNode.frontmatter.title
+              title: nextNode.frontmatter.title,
             }
           : undefined;
 
@@ -70,13 +70,13 @@ const createBlog = async ({ graphql, actions }: CreatePagesArgs) => {
       const context: BlogPostPageContext = {
         slug,
         previous,
-        next
+        next,
       };
 
       actions.createPage({
         path: slug,
         component: blogPost,
-        context
+        context,
       });
     });
 };
@@ -114,19 +114,19 @@ const createYears = async ({ graphql, actions }: CreatePagesArgs) => {
       actions.createPage({
         path: `/year/${year}/`,
         component: yearPage,
-        context
+        context,
       });
     });
 };
 
-export const createPages: GatsbyNode["createPages"] = node => {
+export const createPages: GatsbyNode["createPages"] = (node) => {
   return Promise.all([createBlog(node), createYears(node)]);
 };
 
 export const onCreateNode: GatsbyNode["onCreateNode"] = ({
   node,
   actions,
-  getNode
+  getNode,
 }) => {
   const { createNodeField } = actions;
 
@@ -135,14 +135,14 @@ export const onCreateNode: GatsbyNode["onCreateNode"] = ({
     createNodeField({
       name: `slug`,
       node,
-      value
+      value,
     });
 
     const date = new Date((node.frontmatter as { date: string }).date);
     createNodeField({
       node,
       name: `year`,
-      value: date.getFullYear()
+      value: date.getFullYear(),
     });
   }
 };

src/components/bio.tsx

@@ -14,13 +14,13 @@ import { rhythm } from "../utils/typography";
 const Bio: React.FunctionComponent = () => (
   <StaticQuery
     query={bioQuery}
-    render={data => {
+    render={(data) => {
       const { author, social } = data.site.siteMetadata;
       return (
         <div
           style={{
             display: `flex`,
-            marginBottom: rhythm(2.5)
+            marginBottom: rhythm(2.5),
           }}
         >
           <Image
@@ -30,16 +30,16 @@ const Bio: React.FunctionComponent = () => (
               marginRight: rhythm(1 / 2),
               marginBottom: 0,
               minWidth: 50,
-              borderRadius: `100%`
+              borderRadius: `100%`,
             }}
             imgStyle={{
-              borderRadius: `50%`
+              borderRadius: `50%`,
             }}
           />
           <p
             style={{
               marginTop: 0,
-              marginBottom: 0
+              marginBottom: 0,
             }}
           >
             Written by <strong>{author}</strong> who lives and works in NYC

src/components/blogLayout.tsx

@@ -10,7 +10,7 @@ import Layout from "./layout";
 import BlogSidebar from "./blogSidebar";
 import blogLayoutStyles from "./blogLayout.module.scss";
 
-const BlogLayout: React.FunctionComponent = props => (
+const BlogLayout: React.FunctionComponent = (props) => (
   <Layout>
     <div className={blogLayoutStyles.BlogLayout}>
       <header>

src/components/blogPost.tsx

@@ -21,7 +21,7 @@ interface Props {
   pageContext: PageContext;
 }
 
-const BlogPost: React.FunctionComponent<Props> = props => {
+const BlogPost: React.FunctionComponent<Props> = (props) => {
   const post = props.data.markdownRemark;
   const { previous, next } = props.pageContext;
 
@@ -66,7 +66,7 @@ const BlogPost: React.FunctionComponent<Props> = props => {
 
         <section className={blogPostStyles.tags} style={{ color }}>
           {post.fields?.tags?.map(
-            tag =>
+            (tag) =>
               tag && (
                 <Link
                   to={`/tags/${tag}`}
@@ -87,7 +87,7 @@ const BlogPost: React.FunctionComponent<Props> = props => {
             listStyle: `none`,
             padding: 0,
             margin: 0,
-            marginBottom: "1em"
+            marginBottom: "1em",
           }}
         >
           <li>

src/components/layout.tsx

@@ -12,7 +12,7 @@ class Layout extends React.Component {
         style={{
           // @ts-expect-error 2322: This is a real prop but TS disagrees
           WebkitFontSmoothing: "antialiased",
-          MozOsxFontSmoothing: "grayscale"
+          MozOsxFontSmoothing: "grayscale",
         }}
       >
         <Header />

src/components/postCard.tsx

@@ -34,7 +34,7 @@ const PostCard: React.FunctionComponent<Props> = ({ post }) => {
       </Link>
       <div className={postCardStyles.date}>{node.frontmatter?.date}</div>
       <div className={postCardStyles.tags}>
-        {tags.map(tag => (
+        {tags.map((tag) => (
           <Link
             to={`/tags/${tag}`}
             key={`/tags/${tag}`}