Upgrade to Gatsby v2

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