Upgrade to Gatsby v2

src/components/Sidebar/Author/Author.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import profilePic from '../../../pages/photo.jpg';
+import styles from './Author.module.scss';
+
+const Author = ({ author, isIndex }) => (
+  <div className={styles['author']}>
+    <Link to="/">
+      <img
+        src={profilePic}
+        className={styles['author__photo']}
+        width="75"
+        height="75"
+        alt={author.name}
+      />
+    </Link>
+
+    { isIndex ? (
+      <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

@@ -0,0 +1,36 @@
+@import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+.author {
+  &__photo {
+    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);
+
+    &-link {
+      color: $color-base;
+
+      &:hover,
+      &:focus {
+        color: $color-base
+      }
+
+    }
+
+  }
+
+  &__subtitle {
+    color: $color-gray;
+    @include line-height(1);
+    @include margin-bottom(1)
+  }
+
+}

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

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

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Author renders correctly 1`] = `
+<div
+  className="author"
+>
+  <Link
+    to="/"
+  >
+    <img
+      alt="test"
+      className="author__photo"
+      height="75"
+      src="file"
+      width="75"
+    />
+  </Link>
+  <h2
+    className="author__title"
+  >
+    <Link
+      className="author__title-link"
+      to="/"
+    >
+      test
+    </Link>
+  </h2>
+  <p
+    className="author__subtitle"
+  >
+    test
+  </p>
+</div>
+`;

src/components/Sidebar/Author/index.js

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