refactor(starter): upgrade to new version of gatsby

src/components/Sidebar/Author/Author.js

@@ -1,40 +0,0 @@
-// @flow strict
-import React from 'react';
-import { withPrefix, Link } from 'gatsby';
-import styles from './Author.module.scss';
-
-type Props = {
-  author: {
-    name: string,
-    bio: string,
-    photo: string
-  },
-  isIndex: ?boolean
-};
-
-const Author = ({ author, isIndex }: Props) => (
-  <div className={styles['author']}>
-    <Link to="/">
-      <img
-        src={withPrefix(author.photo)}
-        className={styles['author__photo']}
-        width="75"
-        height="75"
-        alt={author.name}
-      />
-    </Link>
-
-    { isIndex === true ? (
-      <h1 className={styles['author__title']}>
-        <Link className={styles['author__title-link']} to="/">{author.name}</Link>
-      </h1>
-    ) : (
-      <h2 className={styles['author__title']}>
-        <Link className={styles['author__title-link']} to="/">{author.name}</Link>
-      </h2>
-    )}
-    <p className={styles['author__subtitle']}>{author.bio}</p>
-  </div>
-);
-
-export default Author;

src/components/Sidebar/Author/Author.module.scss

@@ -1,36 +1,33 @@
-@import '../../../assets/scss/variables';
-@import '../../../assets/scss/mixins';
+@import "../../../assets/scss/variables";
+@import "../../../assets/scss/mixins";
 
 .author {
   &__photo {
+    background-clip: padding-box;
+    border-radius: 50%;
     display: inline-block;
     margin-bottom: 0;
-    border-radius: 50%;
-    background-clip: padding-box
   }
 
   &__title {
     font-size: $typographic-base-font-size * 1.125;
     font-weight: 600;
     @include line-height(1.125);
-    @include margin(.5, 0, .5, 0);
+    @include margin(0.5, 0, 0.5, 0);
 
     &-link {
       color: $color-base;
 
       &:hover,
       &:focus {
-        color: $color-base
+        color: $color-base;
       }
-
     }
-
   }
 
   &__subtitle {
     color: $color-gray;
     @include line-height(1);
-    @include margin-bottom(1)
+    @include margin-bottom(1);
   }
-
-}
+}

src/components/Sidebar/Author/Author.test.js

@@ -1,20 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Author from './Author';
-
-describe('Author', () => {
-  const props = {
-    author: {
-      name: 'test',
-      photo: '/photo.jpg',
-      bio: 'test'
-    },
-    isIndex: false
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Author {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Sidebar/Author/Author.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Author } from "@/components/Sidebar/Author";
+import * as mocks from "@/mocks";
+
+describe("Author", () => {
+  const props = { isIndex: false, author: mocks.author };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Author {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sidebar/Author/Author.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import { Link, withPrefix } from "gatsby";
+
+import styles from "./Author.module.scss";
+
+type Props = {
+  author: {
+    name: string;
+    bio: string;
+    photo: string;
+  };
+  isIndex?: boolean;
+};
+
+const Author = ({ author, isIndex }: Props) => (
+  <div className={styles.author}>
+    <Link to="/">
+      <img
+        src={withPrefix(author.photo)}
+        className={styles.author__photo}
+        width="75"
+        height="75"
+        alt={author.name}
+      />
+    </Link>
+
+    {isIndex === true ? (
+      <h1 className={styles.author__title}>
+        <Link className={styles["author__title-link"]} to="/">
+          {author.name}
+        </Link>
+      </h1>
+    ) : (
+      <h2 className={styles.author__title}>
+        <Link className={styles["author__title-link"]} to="/">
+          {author.name}
+        </Link>
+      </h2>
+    )}
+    <p className={styles.author__subtitle}>{author.bio}</p>
+  </div>
+);
+
+export default Author;

src/components/Sidebar/Author/__snapshots__/Author.test.tsx.snap

@@ -8,10 +8,10 @@ exports[`Author renders correctly 1`] = `
     href="/"
   >
     <img
-      alt="test"
+      alt="John Doe"
       className="author__photo"
       height="75"
-      src="/photo.jpg"
+      src="/static/photo.jpg"
       width="75"
     />
   </a>
@@ -22,13 +22,13 @@ exports[`Author renders correctly 1`] = `
       className="author__title-link"
       href="/"
     >
-      test
+      John Doe
     </a>
   </h2>
   <p
     className="author__subtitle"
   >
-    test
+    Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
   </p>
 </div>
 `;

src/components/Sidebar/Author/index.js

@@ -1,2 +0,0 @@
-// @flow strict
-export { default } from './Author';

src/components/Sidebar/Author/index.ts

@@ -0,0 +1 @@
+export { default as Author } from "./Author";