Upgrade to Gatsby v2

src/components/Post/Author/Author.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { graphql, StaticQuery } from 'gatsby';
+import { getContactHref } from '../../../utils';
+import styles from './Author.module.scss';
+
+export const PureAuthor = ({ data }) => {
+  const { author } = data.site.siteMetadata;
+
+  return (
+    <div className={styles['author']}>
+      <p className={styles['author__bio']}>
+        {author.bio}
+        <a
+          className={styles['author__bio-twitter']}
+          href={getContactHref('twitter', author.contacts.twitter)}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <strong>{author.name}</strong> on Twitter
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export const Author = (props) => (
+  <StaticQuery
+    query={graphql`
+      query AuthorQuery {
+        site {
+          siteMetadata {
+            author {
+              name
+              bio
+              contacts {       
+                twitter
+              }
+            }
+          }
+        }
+      }
+    `}
+    render={(data) => <PureAuthor {...props} data={data} />}
+  />
+);
+
+export default Author;

src/components/Post/Author/Author.module.scss

@@ -0,0 +1,26 @@
+@import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+.author {
+  border-top: 1px solid $color-gray-border;
+  max-width: $layout-post-width;
+  padding-top: 20px;
+  @include line-height(1);
+  @include margin-top(1);
+  @include margin-bottom(2);
+
+  &__bio {
+    &-twitter {
+      display: block;
+      text-decoration: underline;
+    }
+  }
+}
+
+@include breakpoint-sm {
+  .author {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+}

src/components/Post/Author/Author.test.js

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

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

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Author renders correctly 1`] = `
+<div
+  className="author"
+>
+  <p
+    className="author__bio"
+  >
+    test
+    <a
+      className="author__bio-twitter"
+      href="https://www.twitter.com/test"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <strong>
+        test
+      </strong>
+       on Twitter
+    </a>
+  </p>
+</div>
+`;

src/components/Post/Author/index.js

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