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';

src/components/Post/Comments/Comments.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { graphql, StaticQuery } from 'gatsby';
+import ReactDisqusComments from 'react-disqus-comments';
+
+export const PureComments = ({ data, postTitle, postSlug }) => {
+  const {
+    siteUrl,
+    disqusShortname
+  } = data.site.siteMetadata;
+
+  return (
+    <ReactDisqusComments
+      shortname={disqusShortname}
+      identifier={postTitle}
+      title={postTitle}
+      url={siteUrl + postSlug}
+    />
+  );
+};
+
+export const Comments = (props) => (
+  <StaticQuery
+    query={graphql`
+      query CommentsQuery {
+        site {
+          siteMetadata {
+            disqusShortname
+            url
+          }
+        }
+      }
+    `}
+    render={(data) => <PureComments {...props} data={data}/>}
+  />
+);
+
+export default Comments;

src/components/Post/Comments/Comments.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { PureComments as Comments } from './Comments';
+
+describe('Comments', () => {
+  it('renders correctly', () => {
+    const props = {
+      data: {
+        site: {
+          siteMetadata: {
+            url: 'http://localhost',
+            disqusShortname: 'test'
+          }
+        }
+      },
+      postTitle: 'test',
+      postSlug: '/test'
+    };
+
+    const tree = renderer.create(<Comments {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Comments renders correctly 1`] = `
+<div>
+  <div
+    id="disqus_thread"
+  />
+</div>
+`;

src/components/Post/Comments/index.js

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

src/components/Post/Content/Content.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styles from './Content.module.scss';
+
+const Content = ({ body, title }) => (
+  <div className={styles['content']}>
+    <h1 className={styles['content__title']}>{title}</h1>
+    <div className={styles['content__body']} dangerouslySetInnerHTML={{ __html: body }} />
+  </div>
+);
+
+export default Content;

src/components/Post/Content/Content.module.scss

@@ -0,0 +1,104 @@
+@import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+.content {
+  max-width: $layout-post-single-width;
+  padding: 0 15px;
+  margin: 0 auto;
+
+  &__title {
+    font-size: $typographic-base-font-size * 2;
+    max-width: $layout-post-width;
+    margin-left: auto;
+    margin-right: auto;
+    font-weight: 600;
+    text-align: center;
+    @include line-height(1.65);
+    @include margin-top(1);
+    @include margin-bottom(0)
+  }
+
+  &__body {
+    & figure {
+      @include margin-bottom(1);
+
+      & blockquote {
+        font-style: italic;
+        text-align: center;
+        margin-top: 0;
+        @include padding(1, 0);
+
+        & p {
+          max-width: $layout-post-width;
+          font-size: $typographic-base-font-size * 1.6817;
+          margin-top: 0;
+          @include margin-bottom(1);
+          @include line-height(1.5)
+        }
+
+      }
+
+    }
+
+    & a {
+      text-decoration: underline
+    }
+
+    & .gatsby-highlight {
+      max-width: $layout-post-width;
+      margin-left: 15px;
+      margin-right: 15px;
+      @include margin-bottom(1)
+    }
+
+    & *:not(div) {
+      max-width: $layout-post-width;
+      margin-left: auto;
+      margin-right: auto
+    }
+
+  }
+
+}
+
+@include breakpoint-sm {
+  .content {
+    &__body {
+      & .gatsby-highlight {
+        margin-left: auto;
+        margin-right: auto
+      }
+
+    }
+
+  }
+
+}
+
+@include breakpoint-md {
+  .content {
+    padding: 0;
+
+    &__title {
+      font-size: $typographic-base-font-size * 3;
+      @include line-height(2.25);
+      @include margin-top(2.25);
+      @include margin-bottom(1.5)
+    }
+
+    &__body {
+      font-size: $typographic-base-font-size * 1.125;
+      @include line-height(1.125);
+      @include margin-bottom(1.125);
+
+      & p {
+        font-size: $typographic-base-font-size * 1.125;
+        @include line-height(1.125);
+        @include margin-bottom(1.125)
+      }
+
+    }
+
+  }
+
+}

src/components/Post/Content/Content.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Content from './Content';
+
+describe('Content', () => {
+  it('renders correctly', () => {
+    const props = {
+      title: 'test',
+      body: '<p>test</p>'
+    };
+
+    const tree = renderer.create(<Content {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Content renders correctly 1`] = `
+<div
+  className="content"
+>
+  <h1
+    className="content__title"
+  >
+    test
+  </h1>
+  <div
+    className="content__body"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>test</p>",
+      }
+    }
+  />
+</div>
+`;

src/components/Post/Content/index.js

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

src/components/Post/Meta/Meta.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import moment from 'moment';
+import styles from './Meta.module.scss';
+
+const Meta = ({ date }) => (
+  <div className={styles['meta']}>
+    <p className={styles['meta__date']}>Published {moment(date).format('D MMM YYYY')}</p>
+  </div>
+);
+
+export default Meta;

src/components/Post/Meta/Meta.module.scss

@@ -0,0 +1,9 @@
+@import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+.meta {
+  &__date {
+    font-style: italic;
+  }
+
+}

src/components/Post/Meta/Meta.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Meta from './Meta';
+
+describe('Meta', () => {
+  it('renders correctly', () => {
+    const props = {
+      date: '2016-09-01T23:46:37.121Z'
+    };
+
+    const tree = renderer.create(<Meta {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Meta renders correctly 1`] = `
+<div
+  className="meta"
+>
+  <p
+    className="meta__date"
+  >
+    Published 
+    2 Sep 2016
+  </p>
+</div>
+`;

src/components/Post/Meta/index.js

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

src/components/Post/Post.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import Author from './Author';
+import Comments from './Comments';
+import Content from './Content';
+import Meta from './Meta';
+import Tags from './Tags';
+import styles from './Post.module.scss';
+
+const Post = ({ post }) => {
+  const {
+    tags,
+    title,
+    date
+  } = post.frontmatter;
+
+  const { html } = post;
+  const { tagSlugs } = post.fields;
+
+  return (
+    <div className={styles['post']}>
+      <Link className={styles['post__home-button']} to="/">All Articles</Link>
+
+      <div className={styles['post__content']}>
+        <Content body={html} title={title} />
+      </div>
+
+      <div className={styles['post__footer']}>
+        <Meta date={date} />
+        <Tags tags={tags} tagSlugs={tagSlugs} />
+        <Author />
+      </div>
+
+      <div className={styles['post__comments']}>
+        <Comments postSlug={post.fields.slug} postTitle={post.frontmatter.title} />
+      </div>
+    </div>
+  );
+};
+
+export default Post;

src/components/Post/Post.module.scss

@@ -0,0 +1,64 @@
+@import '../../assets/scss/variables';
+@import '../../assets/scss/mixins';
+
+.post {
+  &__footer {
+    max-width: $layout-post-width;
+    margin: 0 auto;
+    padding: 0 15px;
+  }
+
+  &__comments {
+    max-width: $layout-post-width;
+    margin: 0 auto;
+    padding: 0 15px;
+  }
+
+  &__home-button {
+    display: block;
+    width: 90px;
+    height: 35px;
+    font-size: $typographic-base-font-size;
+    padding: 0 16px;
+    line-height: 35px;
+    text-align: center;
+    color: lighten($color-base, 20%);
+    background: $color-gray-bg;
+    font-weight: normal;
+    border-radius: 3px;
+    margin-left: auto;
+    margin-right: auto;
+    @include margin-top(1);
+
+    &:hover,
+    &:focus {
+      color: $color-base;
+      background: darken($color-gray-bg, 5%);
+      border: 0
+    }
+
+  }
+
+}
+
+@include breakpoint-md {
+  .post {
+    &__footer {
+      padding: 0;
+    }
+
+    &__comments {
+      padding: 0;
+    }
+
+    &__home-button {
+      max-width: auto;
+      position: fixed;
+      margin: 0;
+      top: 30px;
+      left: 30px
+    }
+
+  }
+
+}

src/components/Post/Post.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Post from './Post';
+
+describe('Post', () => {
+  const props = {
+    post: {
+      html: '<p>test</p>',
+      fields: {
+        tagSlugs: [
+          '/test_0',
+          '/test_1'
+        ]
+      },
+      frontmatter: {
+        date: '2016-09-01T23:46:37.121Z',
+        tags: [
+          'test_0',
+          'test_1'
+        ],
+        title: 'test'
+      }
+    }
+  };
+
+  it('renders correctly', () => {
+    const tree = renderer.create(<Post {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Post/Tags/Tags.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import styles from './Tags.module.scss';
+
+const Tags = ({ tags, tagSlugs }) => (
+  <div className={styles['tags']}>
+    <ul className={styles['tags__list']}>
+      {tagSlugs.map((slug, i) => (
+        <li className={styles['tags__list-item']} key={tags[i]}>
+          <Link to={slug} className={styles['tags__list-item-link']}>
+            {tags[i]}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+export default Tags;

src/components/Post/Tags/Tags.module.scss

@@ -0,0 +1,38 @@
+@import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+.tags {
+  @include margin-bottom(.5);
+
+  &__list {
+    list-style: none;
+    margin: 0 -10px;
+    padding: 0;
+
+    &-item {
+      display: inline-block;
+      margin: 10px 5px;
+
+      &-link {
+        background: $color-gray-bg;
+        text-decoration: none;
+        border: 0;
+        border-radius: 3px;
+        color: lighten($color-base, 20%);
+        line-height: $typographic-base-line-height;
+        padding: 8px 16px;
+
+        &:hover,
+        &:focus {
+          color: $color-base;
+          background: darken($color-gray-bg, 5%);
+          border: 0;
+        }
+
+      }
+
+    }
+
+  }
+
+}

src/components/Post/Tags/Tags.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Tags from './Tags';
+
+describe('Tags', () => {
+  it('renders correctly', () => {
+    const props = {
+      tags: [
+        'test_0',
+        'test_1'
+      ],
+      tagSlugs: [
+        '/test_0',
+        '/test_1'
+      ]
+    };
+
+    const tree = renderer.create(<Tags {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tags renders correctly 1`] = `
+<div
+  className="tags"
+>
+  <ul
+    className="tags__list"
+  >
+    <li
+      className="tags__list-item"
+    >
+      <Link
+        className="tags__list-item-link"
+        to="/test_0"
+      >
+        test_0
+      </Link>
+    </li>
+    <li
+      className="tags__list-item"
+    >
+      <Link
+        className="tags__list-item-link"
+        to="/test_1"
+      >
+        test_1
+      </Link>
+    </li>
+  </ul>
+</div>
+`;

src/components/Post/Tags/index.js

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

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

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Post renders correctly 1`] = `
+<div
+  className="post"
+>
+  <Link
+    className="post__home-button"
+    to="/"
+  >
+    All Articles
+  </Link>
+  <div
+    className="post__content"
+  >
+    <div
+      className="content"
+    >
+      <h1
+        className="content__title"
+      >
+        test
+      </h1>
+      <div
+        className="content__body"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<p>test</p>",
+          }
+        }
+      />
+    </div>
+  </div>
+  <div
+    className="post__footer"
+  >
+    <div
+      className="meta"
+    >
+      <p
+        className="meta__date"
+      >
+        Published 
+        2 Sep 2016
+      </p>
+    </div>
+    <div
+      className="tags"
+    >
+      <ul
+        className="tags__list"
+      >
+        <li
+          className="tags__list-item"
+        >
+          <Link
+            className="tags__list-item-link"
+            to="/test_0"
+          >
+            test_0
+          </Link>
+        </li>
+        <li
+          className="tags__list-item"
+        >
+          <Link
+            className="tags__list-item-link"
+            to="/test_1"
+          >
+            test_1
+          </Link>
+        </li>
+      </ul>
+    </div>
+    <StaticQuery
+      render={[Function]}
+    />
+  </div>
+  <div
+    className="post__comments"
+  >
+    <StaticQuery
+      render={[Function]}
+    />
+  </div>
+</div>
+`;

src/components/Post/index.js

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

src/components/Post/index.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import Link from 'gatsby-link';
-import moment from 'moment';
-import './style.scss';
-
-class Post extends React.Component {
-  render() {
-    const { title, date, category, description } = this.props.data.node.frontmatter;
-    const { slug, categorySlug } = this.props.data.node.fields;
-
-    return (
-      <div className="post">
-        <div className="post__meta">
-          <time className="post__meta-time" dateTime={moment(date).format('MMMM D, YYYY')}>
-            {moment(date).format('MMMM YYYY')}
-          </time>
-          <span className="post__meta-divider" />
-          <span className="post__meta-category" key={categorySlug}>
-            <Link to={categorySlug} className="post__meta-category-link">
-              {category}
-            </Link>
-          </span>
-        </div>
-        <h2 className="post__title">
-          <Link className="post__title-link" to={slug}>{title}</Link>
-        </h2>
-        <p className="post__description">{description}</p>
-        <Link className="post__readmore" to={slug}>Read</Link>
-      </div>
-    );
-  }
-}
-
-export default Post;

src/components/Post/style.scss

@@ -1,60 +0,0 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
-
-.post {
-    @include margin-bottom(1.25);
-    &:last-child {
-        @include margin-bottom(.5);
-    }
-    &__title {
-        font-size: $typographic-base-font-size * 1.6875;
-        @include line-height(1.5);
-        @include margin-top(0);
-        @include margin-bottom(.5);
-        &-link {
-            color: $color-base;
-            &:hover,
-            &:focus {
-                color: $color-base;
-                border-bottom: 1px solid $color-base;
-            }
-        }
-    }
-    &__description {
-        font-size: $typographic-base-font-size;
-        @include line-height(1);
-        @include margin-bottom(.75);
-    }
-    &__meta {
-        &-time {
-            font-size: $typographic-small-font-size;
-            color: $color-base;
-            font-weight: 500;
-            text-transform: uppercase;
-        }
-        &-divider {
-            margin: 0 5px;
-        }
-        &-category {
-            &-link {
-                font-size: $typographic-small-font-size;
-                color: $color-secondary;
-                font-weight: 500;
-                text-transform: uppercase;
-                &:hover,
-                &:focus {
-                    color: $color-primary;
-                }
-            }
-        }
-    }
-    &__readmore {
-        font-size: $typographic-base-font-size;
-        color: $color-primary;
-        &:hover,
-        &:focus {
-            color: $color-primary;
-            border-bottom: 1px solid $color-primary;
-        }
-    }
-}