refactor(starter): upgrade and move to typescript

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

@@ -2,20 +2,22 @@
 @import "../../../assets/scss/mixins";
 
 .author {
-  &__photo {
+  .photo {
     background-clip: padding-box;
     border-radius: 50%;
     display: inline-block;
-    margin-bottom: 0;
+    height: 75px;
+    width: 75px;
+    @include margin-bottom(0);
   }
 
-  &__title {
+  .title {
     font-size: $typographic-base-font-size * 1.125;
     font-weight: 600;
     @include line-height(1.125);
     @include margin(0.5, 0, 0.5, 0);
 
-    &-link {
+    .link {
       color: $color-base;
 
       &:hover,
@@ -25,7 +27,7 @@
     }
   }
 
-  &__subtitle {
+  .subtitle {
     color: $color-gray;
     @include line-height(1);
     @include margin-bottom(1);

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

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

src/components/Sidebar/Author/Author.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 
-import { Link, withPrefix } from "gatsby";
+import { Link } from "gatsby";
 
-import styles from "./Author.module.scss";
+import { Image } from "@/components/Image";
+
+import * as styles from "./Author.module.scss";
 
 type Props = {
   author: {
@@ -16,29 +18,23 @@ type Props = {
 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}
-      />
+      <Image alt={author.name} path={author.photo} className={styles.photo} />
     </Link>
 
-    {isIndex === true ? (
-      <h1 className={styles.author__title}>
-        <Link className={styles["author__title-link"]} to="/">
+    {isIndex ? (
+      <h1 className={styles.title}>
+        <Link className={styles.link} to="/">
           {author.name}
         </Link>
       </h1>
     ) : (
-      <h2 className={styles.author__title}>
-        <Link className={styles["author__title-link"]} to="/">
+      <h2 className={styles.title}>
+        <Link className={styles.link} to="/">
           {author.name}
         </Link>
       </h2>
     )}
-    <p className={styles.author__subtitle}>{author.bio}</p>
+    <p className={styles.subtitle}>{author.bio}</p>
   </div>
 );
 

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

@@ -1,33 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Author renders correctly 1`] = `
-<div
-  className="author"
->
+<div>
   <a
     href="/"
-  >
-    <img
-      alt="John Doe"
-      className="author__photo"
-      height="75"
-      src="/static/photo.jpg"
-      width="75"
-    />
-  </a>
-  <h2
-    className="author__title"
-  >
+  />
+  <h2>
     <a
-      className="author__title-link"
       href="/"
     >
       John Doe
     </a>
   </h2>
-  <p
-    className="author__subtitle"
-  >
+  <p>
     Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
   </p>
 </div>