refactor(starter): upgrade to new version of gatsby

src/assets/scss/_base.scss

@@ -1,4 +1,4 @@
 @charset "UTF-8";
 
-@import "normalize-scss";
-@import "base/generic";
+@import "base/generic";
+@import "base/prism";

src/assets/scss/_mixins.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
 @import "mixins/breakpoints";
-@import "mixins/margin";
+@import "mixins/line-height";
 @import "mixins/padding";
-@import "mixins/line-height";
+@import "mixins/margin";

src/assets/scss/_variables.scss

@@ -1,20 +1,17 @@
-/**
- * Variables
- */
 @use "sass:math";
+@use "sass:color";
 
-// Colors
-$color-base: #222;
-$color-primary: #5D93FF;
-$color-secondary: #F7A046;
+$color-base: #222222;
+$color-primary: #5d93ff;
+$color-secondary: #f7a046;
 
-$color-white: #FFF;
-$color-gray: lighten($color-base, 40%);
-$color-gray-border: lighten($color-base, 77%);
-$color-gray-bg: lighten($color-base, 79%);
+$color-white: #ffffff;
+$color-gray: color.adjust($color-base, 40%);
+$color-gray-border: color.adjust($color-base, 77%);
+$color-gray-bg: color.adjust($color-base, 79%);
 
-// Typographic
-$typographic-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$typographic-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI",
+  "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
 
 $typographic-root-font-size: 100;
 $typographic-base-font-size: 16px;
@@ -26,13 +23,14 @@ $typographic-base-font-color: $color-base;
 $typographic-link-p-font-color: $color-primary;
 $typographic-link-s-font-color: $color-secondary;
 
-$typographic-leading: round(16 * math.div($typographic-root-font-size, 100) * $typographic-base-line-height);
+$typographic-leading: math.round(
+  16 * math.div($typographic-root-font-size, 100) *
+    $typographic-base-line-height
+);
 
-// Buttons
 $button-height: 35px;
 $button-border-radius: 20px;
 
-// Layout
 $layout-post-single-width: 945px;
 $layout-post-width: $layout-post-single-width - 305px;
 

src/assets/scss/base/_generic.scss

@@ -1,25 +1,25 @@
-/** 
- * Generic
- */
+@import "../variables";
+@import "../mixins";
+
 html {
   font-size: $typographic-root-font-size;
 }
 
 body {
-  margin: 0 0 0 calc(100vw - 100%);
-  font-family: $typographic-font-family;
   color: $typographic-base-font-color;
-  line-height: $typographic-base-line-height;
+  font-family: $typographic-font-family;
   font-size: $typographic-base-font-size;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  line-height: $typographic-base-line-height;
+  margin: 0 0 0 calc(100vw - 100%);
+  text-rendering: optimizeLegibility;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 
-h1,
 h2,
+h1,
 h3,
 h4,
 h5,
@@ -39,55 +39,59 @@ h2 {
   font-size: $typographic-base-font-size * 1.6875;
   @include line-height(1.5);
   @include margin-top(2);
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 }
 
 h3 {
   font-size: $typographic-base-font-size * 1.375;
   @include line-height(1);
   @include margin-top(2);
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 }
 
 h4 {
   font-size: $typographic-base-font-size * 1.2;
   @include line-height(1);
   @include margin-top(1.5);
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 }
 
 h5 {
   font-size: $typographic-base-font-size;
   @include line-height(1);
   @include margin-top(2.5);
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 }
 
 h6 {
   font-size: $typographic-base-font-size;
   @include line-height(1);
   @include margin-top(2.5);
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 }
 
 img {
   border: 0;
-  max-width: 100%;
   display: block;
-  margin: inherit auto;
+  max-width: 100%;
 }
 
 hr {
-  margin-top: 52px;
-  margin-bottom: 52px;
+  background-image: linear-gradient(
+    to bottom,
+    transparent 1px,
+    transparent 11px,
+    $color-base 11px,
+    $color-base 15px,
+    transparent 15px,
+    transparent 26px
+  );
+  background-size: 100% 26px;
   border: 0;
   color: $color-base;
   display: block;
   height: 26px;
-  margin-right: auto;
-  margin-left: auto;
-  background-size: 100% 26px;
-  background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, $color-base 11px, $color-base 15px, transparent 15px, transparent 26px);
+  margin: 52px auto;
   width: 100px;
 }
 
@@ -100,7 +104,6 @@ a {
   &:active {
     color: $typographic-link-s-font-color;
   }
-
 }
 
 b,
@@ -113,10 +116,9 @@ ul {
   @include margin-bottom(1);
 
   & li {
-    padding: 0 5px;
     margin-bottom: 10px;
+    padding: 0 5px;
   }
-
 }
 
 p {
@@ -125,20 +127,20 @@ p {
 }
 
 blockquote {
-  padding: 0;
   font-style: italic;
+  padding: 0;
   text-align: center;
 }
 
 figure {
   display: block;
-  width: 100%;
   height: auto;
+  width: 100%;
 }
 
 figcaption {
-  @include line-height(.75);
-  @include margin-top(.25);
+  @include line-height(0.75);
+  @include margin-top(0.25);
   color: $color-base;
   font-size: $typographic-small-font-size;
   font-style: italic;
@@ -165,5 +167,4 @@ figcaption {
   .float-left {
     float: left;
   }
-
 }

src/assets/scss/base/_prism.scss

@@ -0,0 +1,117 @@
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #657b83;
+  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+  font-size: 1em;
+  -ms-hyphens: none;
+  -moz-hyphens: none;
+  -webkit-hyphens: none;
+  hyphens: none;
+  line-height: 1.5;
+  -o-tab-size: 4;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  text-align: left;
+  white-space: pre;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+}
+
+pre[class*="language-"] {
+  border-radius: 0.3em;
+  margin: 0.5em 0;
+  overflow: auto;
+  padding: 1em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background-color: #fdf6e3;
+}
+
+:not(pre) > code[class*="language-"] {
+  border-radius: 0.3em;
+  padding: 0.1em;
+}
+
+code[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+pre[class*="language-"]::-moz-selection {
+  background: #073642;
+}
+
+code[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+pre[class*="language-"]::selection {
+  background: #073642;
+}
+
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #93a1a1;
+}
+
+.token.punctuation {
+  color: #586e75;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.number,
+.token.property,
+.token.symbol,
+.token.tag {
+  color: #268bd2;
+}
+
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string,
+.token.url {
+  color: #2aa198;
+}
+
+.token.entity {
+  background: #eee8d5;
+  color: #657b83;
+  cursor: help;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #859900;
+}
+
+.token.class-name,
+.token.function {
+  color: #b58900;
+}
+
+.token.important,
+.token.regex,
+.token.variable {
+  color: #cb4b16;
+}
+
+.token.bold,
+.token.important {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}

src/assets/scss/main.scss

@@ -2,4 +2,4 @@
 
 @import "variables";
 @import "mixins";
-@import "base";
+@import "base";

src/assets/scss/mixins/_breakpoints.scss

@@ -1,25 +1,23 @@
-/**
- * Breakpoints
- */
+@import "../variables";
 
 @mixin breakpoint-xs {
-    @content;
+  @content;
 }
 
 @mixin breakpoint-sm {
-    @media screen and (min-width: $layout-breakpoint-sm) {
-        @content;
-    }
+  @media screen and (min-width: $layout-breakpoint-sm) {
+    @content;
+  }
 }
 
 @mixin breakpoint-md {
-    @media screen and (min-width: $layout-breakpoint-md) {
-        @content;
-    }
+  @media screen and (min-width: $layout-breakpoint-md) {
+    @content;
+  }
 }
 
 @mixin breakpoint-lg {
-    @media screen and (min-width: $layout-breakpoint-lg) {
-        @content
-    }
-}
+  @media screen and (min-width: $layout-breakpoint-lg) {
+    @content;
+  }
+}

src/assets/scss/mixins/_line-height.scss

@@ -1,7 +1,5 @@
-/**
- * Line-Height
- */
+@import "../variables";
 
 @mixin line-height($number) {
-    line-height: #{ $number * $typographic-leading + "px"};
-}
+  line-height: #{$number * $typographic-leading + "px"};
+}

src/assets/scss/mixins/_margin.scss

@@ -1,25 +1,43 @@
-/**
- * Margin
- */
+@import "../variables";
 
 @mixin margin-top($number) {
-    margin-top: #{ $number * $typographic-leading + "px"};
+  margin-top: #{$number * $typographic-leading + "px"};
 }
 
 @mixin margin-bottom($number) {
-    margin-bottom: #{ $number * $typographic-leading + "px"};
+  margin-bottom: #{$number * $typographic-leading + "px"};
 }
 
-@mixin margin($top, $right, $bottom:null, $left:null) {
-    @if $left==null and $bottom==null {
-        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"};
-    }
-
-    @else if $left==null or $left==$right {
-        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"};
-    }
-    
-    @else {
-        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"} #{ $left * $typographic-leading + "px"};
-    }
-}
+@mixin margin($top, $right, $bottom: null, $left: null) {
+  @if not $left and not $bottom {
+    margin: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"};
+  } @else if not $left or $left == $right {
+    margin: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"}
+      #{$bottom *
+      $typographic-leading +
+      "px"};
+  } @else {
+    margin: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"}
+      #{$bottom *
+      $typographic-leading +
+      "px"}
+      #{$left *
+      $typographic-leading +
+      "px"};
+  }
+}

src/assets/scss/mixins/_padding.scss

@@ -1,19 +1,39 @@
-/**
- * Padding
- */
+@import "../variables";
 
-@mixin padding($top, $right, $bottom:null, $left:null) {
-    @if $left==null and $bottom==null {
-        padding: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"};
-    }
-    @else if $left==null or $left==$right {
-        padding: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"};
-    }
-    @else {
-        padding: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"} #{ $left * $typographic-leading + "px"};
-    }
+@mixin padding($top, $right, $bottom: null, $left: null) {
+  @if not $left and not $bottom {
+    padding: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"};
+  } @else if not $left or $left == $right {
+    padding: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"}
+      #{$bottom *
+      $typographic-leading +
+      "px"};
+  } @else {
+    padding: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"}
+      #{$bottom *
+      $typographic-leading +
+      "px"}
+      #{$left *
+      $typographic-leading +
+      "px"};
+  }
 }
 
 @mixin padding-equal($number) {
-    padding: #{ $number * $typographic-leading + "px"};
-}
+  padding: #{$number * $typographic-leading + "px"};
+}

src/cms/index.js

@@ -1,7 +0,0 @@
-// @flow strict
-import CMS from 'netlify-cms-app';
-import PagePreview from './preview-templates/page-preview';
-import PostPreview from './preview-templates/post-preview';
-
-CMS.registerPreviewTemplate('pages', PagePreview);
-CMS.registerPreviewTemplate('posts', PostPreview);

src/cms/preview-templates/page-preview.js

@@ -1,22 +0,0 @@
-// @flow strict
-import React from 'react';
-import type { Entry, WidgetFor } from '../../types';
-
-type Props = {
-  entry: Entry,
-  widgetFor: WidgetFor
-};
-
-const PagePreview = ({ entry, widgetFor }: Props) => {
-  const body = widgetFor('body');
-  const title = entry.getIn(['data', 'title']);
-
-  return (
-    <div className="page">
-      <h1 className="page__title">{title}</h1>
-      <div className="page__body">{ body }</div>
-    </div>
-  );
-};
-
-export default PagePreview;

src/cms/preview-templates/post-preview.js

@@ -1,22 +0,0 @@
-// @flow strict
-import React from 'react';
-import type { Entry, WidgetFor } from '../../types';
-
-type Props = {
-  entry: Entry,
-  widgetFor: WidgetFor
-};
-
-const PostPreview = ({ entry, widgetFor }: Props) => {
-  const body = widgetFor('body');
-  const title = entry.getIn(['data', 'title']);
-
-  return (
-    <div className="post">
-      <h1 className="post__title">{title}</h1>
-      <div className="post__body">{body}</div>
-    </div>
-  );
-};
-
-export default PostPreview;

src/components/Feed/Feed.js

@@ -1,34 +0,0 @@
-// @flow strict
-import React from 'react';
-import { Link } from 'gatsby';
-import type { Edges } from '../../types';
-import styles from './Feed.module.scss';
-
-type Props = {
-  edges: Edges
-};
-
-const Feed = ({ edges }: Props) => (
-  <div className={styles['feed']}>
-    {edges.map((edge) => (
-      <div className={styles['feed__item']} key={edge.node.fields.slug}>
-        <div className={styles['feed__item-meta']}>
-          <time className={styles['feed__item-meta-time']} dateTime={ new Date(edge.node.frontmatter.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}>
-          { new Date(edge.node.frontmatter.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long' })}
-          </time>
-          <span className={styles['feed__item-meta-divider']} />
-          <span className={styles['feed__item-meta-category']}>
-            <Link to={edge.node.fields.categorySlug} className={styles['feed__item-meta-category-link']}>{edge.node.frontmatter.category}</Link>
-          </span>
-        </div>
-        <h2 className={styles['feed__item-title']}>
-          <Link className={styles['feed__item-title-link']} to={edge.node.fields.slug}>{edge.node.frontmatter.title}</Link>
-        </h2>
-        <p className={styles['feed__item-description']}>{edge.node.frontmatter.description}</p>
-        <Link className={styles['feed__item-readmore']} to={edge.node.fields.slug}>Read</Link>
-      </div>
-    ))}
-  </div>
-);
-
-export default Feed;

src/components/Feed/Feed.module.scss

@@ -1,43 +1,41 @@
-@import '../../assets/scss/variables';
-@import '../../assets/scss/mixins';
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
 
 .feed {
   &__item {
     @include margin-bottom(1.25);
 
     &:last-child {
-      @include margin-bottom(.5);
+      @include margin-bottom(0.5);
     }
 
     &-title {
       font-size: $typographic-base-font-size * 1.6875;
       @include line-height(1.5);
       @include margin-top(0);
-      @include margin-bottom(.5);
+      @include margin-bottom(0.5);
 
       &-link {
         color: $color-base;
 
         &:hover,
         &:focus {
-          color: $color-base;
           border-bottom: 1px solid $color-base;
+          color: $color-base;
         }
-
       }
-
     }
 
     &-description {
       font-size: $typographic-base-font-size;
       @include line-height(1);
-      @include margin-bottom(.75);
+      @include margin-bottom(0.75);
     }
 
     &-meta {
       &-time {
-        font-size: $typographic-small-font-size;
         color: $color-base;
+        font-size: $typographic-small-font-size;
         font-weight: 600;
         text-transform: uppercase;
       }
@@ -48,8 +46,8 @@
 
       &-category {
         &-link {
-          font-size: $typographic-small-font-size;
           color: $color-secondary;
+          font-size: $typographic-small-font-size;
           font-weight: 600;
           text-transform: uppercase;
 
@@ -57,25 +55,19 @@
           &:focus {
             color: $color-primary;
           }
-
         }
-
       }
-
     }
 
-    &-readmore {
-      font-size: $typographic-base-font-size;
+    &-more {
       color: $color-primary;
+      font-size: $typographic-base-font-size;
 
       &:hover,
       &:focus {
-        color: $color-primary;
         border-bottom: 1px solid $color-primary;
+        color: $color-primary;
       }
-
     }
-
   }
-
-}
+}

src/components/Feed/Feed.test.js

@@ -1,66 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Feed from './Feed';
-
-describe('Feed', () => {
-  const props = {
-    edges: [
-      {
-        node: {
-          fields: {
-            slug: '/test_0',
-            categorySlug: '/test_0',
-            tagSlugs: [
-              '/test-1',
-              '/test-2'
-            ]
-          },
-          frontmatter: {
-            date: '2016-09-01',
-            description: 'test_0',
-            category: 'test_0',
-            tags: [
-              'test-1',
-              'test-2'
-            ],
-            title: 'test_0'
-          },
-          id: 'test-123',
-          html: '<p>test</p>'
-
-        }
-      },
-      {
-        node: {
-          fields: {
-            slug: '/test_1',
-            categorySlug: '/test_1',
-            tagSlugs: [
-              '/test-1',
-              '/test-2'
-            ]
-          },
-          frontmatter: {
-            date: '2016-09-01',
-            description: 'test_1',
-            category: 'test_1',
-            tags: [
-              'test-1',
-              'test-2'
-            ],
-            title: 'test_1'
-          },
-          id: 'test-321',
-          html: '<p>test</p>'
-
-        }
-      }
-    ]
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Feed {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Feed/Feed.test.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Feed } from "@/components/Feed";
+
+describe("Feed", () => {
+  const props = {
+    edges: [
+      {
+        node: {
+          fields: {
+            slug: "/test_0",
+            categorySlug: "/test_0",
+            tagSlugs: ["/test-1", "/test-2"],
+          },
+          frontmatter: {
+            template: "post",
+            date: "2016-09-01",
+            description: "test_0",
+            category: "test_0",
+            tags: ["test-1", "test-2"],
+            title: "test_0",
+          },
+          id: "test-123",
+          html: "<p>test</p>",
+        },
+      },
+      {
+        node: {
+          fields: {
+            slug: "/test_1",
+            categorySlug: "/test_1",
+            tagSlugs: ["/test-1", "/test-2"],
+          },
+          frontmatter: {
+            template: "post",
+            date: "2016-09-01",
+            description: "test_1",
+            category: "test_1",
+            tags: ["test-1", "test-2"],
+            title: "test_1",
+          },
+          id: "test-321",
+          html: "<p>test</p>",
+        },
+      },
+    ],
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Feed {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Feed/Feed.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import { Link } from "gatsby";
+
+import { Edge } from "@/types";
+
+import styles from "./Feed.module.scss";
+
+type Props = {
+  edges: Array<Edge>;
+};
+
+const Feed: React.FC<Props> = ({ edges }: Props) => (
+  <div className={styles.feed}>
+    {edges.map(edge => (
+      <div className={styles.feed__item} key={edge.node.fields.slug}>
+        <div className={styles["feed__item-meta"]}>
+          <time
+            className={styles["feed__item-meta-time"]}
+            dateTime={new Date(edge.node.frontmatter.date).toLocaleDateString(
+              "en-US",
+              { year: "numeric", month: "long", day: "numeric" },
+            )}
+          >
+            {new Date(edge.node.frontmatter.date).toLocaleDateString("en-US", {
+              year: "numeric",
+              month: "long",
+            })}
+          </time>
+          <span className={styles["feed__item-meta-divider"]} />
+          <span className={styles["feed__item-meta-category"]}>
+            <Link
+              to={edge.node.fields.categorySlug}
+              className={styles["feed__item-meta-category-link"]}
+            >
+              {edge.node.frontmatter.category}
+            </Link>
+          </span>
+        </div>
+        <h2 className={styles["feed__item-title"]}>
+          <Link
+            className={styles["feed__item-title-link"]}
+            to={edge.node.fields.slug}
+          >
+            {edge.node.frontmatter.title}
+          </Link>
+        </h2>
+        <p className={styles["feed__item-description"]}>
+          {edge.node.frontmatter.description}
+        </p>
+        <Link className={styles["feed__item-more"]} to={edge.node.fields.slug}>
+          Read
+        </Link>
+      </div>
+    ))}
+  </div>
+);
+
+export default Feed;

src/components/Feed/__snapshots__/Feed.test.tsx.snap

@@ -46,7 +46,7 @@ exports[`Feed renders correctly 1`] = `
       test_0
     </p>
     <a
-      className="feed__item-readmore"
+      className="feed__item-more"
       href="/test_0"
     >
       Read
@@ -94,7 +94,7 @@ exports[`Feed renders correctly 1`] = `
       test_1
     </p>
     <a
-      className="feed__item-readmore"
+      className="feed__item-more"
       href="/test_1"
     >
       Read

src/components/Feed/index.js

@@ -1,2 +0,0 @@
-// @flow strict
-export { default } from './Feed';

src/components/Feed/index.ts

@@ -0,0 +1 @@
+export { default as Feed } from "./Feed";

src/components/Icon/Icon.js

@@ -1,20 +0,0 @@
-// @flow strict
-import React from 'react';
-import styles from './Icon.module.scss';
-
-type Props = {
-  name: string,
-  icon: {
-    viewBox?: string,
-    path?: string
-  }
-};
-
-const Icon = ({ name, icon }: Props) => (
-  <svg className={styles['icon']} viewBox={icon.viewBox}>
-    <title>{name}</title>
-    <path d={icon.path} />
-  </svg>
-);
-
-export default Icon;

src/components/Icon/Icon.module.scss

@@ -1,19 +1,19 @@
 .icon {
   display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
   fill: currentColor;
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
-  margin-right: .2em;
-  text-align: center;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1em;
-  margin-left: .2em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  height: 1em;
+  line-height: 1em;
+  margin-left: 0.2em;
+  margin-right: 0.2em;
+  speak: none;
+  stroke: currentColor;
+  stroke-width: 0;
+  text-align: center;
+  text-transform: none;
+  width: 1em;
+}

src/components/Icon/Icon.test.js

@@ -1,19 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Icon from './Icon';
-
-describe('Icon', () => {
-  const props = {
-    name: 'test',
-    icon: {
-      viewBox: '0 0 0 0',
-      path: '',
-    }
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Icon {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Icon/Icon.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Icon } from "@/components/Icon";
+
+describe("Icon", () => {
+  const props = {
+    name: "test",
+    icon: {
+      viewBox: "0 0 0 0",
+      path: "",
+    },
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Icon {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Icon/Icon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import styles from "./Icon.module.scss";
+
+interface Props {
+  name: string;
+  icon: {
+    path?: string;
+    viewBox?: string;
+  };
+}
+
+const Icon: React.FC<Props> = ({ name, icon }: Props) => (
+  <svg className={styles.icon} viewBox={icon.viewBox}>
+    <title>{name}</title>
+    <path d={icon.path} />
+  </svg>
+);
+
+export default Icon;

src/components/Icon/index.js

@@ -1,2 +0,0 @@
-// @flow strict
-export { default } from './Icon';

src/components/Icon/index.ts

@@ -0,0 +1 @@
+export { default as Icon } from "./Icon";

src/components/Layout/Layout.module.scss

@@ -1,6 +1,6 @@
-@import '../../assets/scss/variables';
-@import '../../assets/scss/mixins';
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
 
 .layout {
-    lost-center: $layout-width;
-}
+  lost-center: $layout-width;
+}

src/components/Layout/Layout.test.js

@@ -1,30 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { useStaticQuery, StaticQuery } from 'gatsby';
-import siteMetadata from '../../../jest/__fixtures__/site-metadata';
-import Layout from './Layout';
-import type { RenderCallback } from '../../types';
-
-describe('Layout', () => {
-  const props = {
-    ...siteMetadata,
-    children: 'test',
-    description: 'test',
-    title: 'test'
-  };
-
-  beforeEach(() => {
-    StaticQuery.mockImplementationOnce(
-      ({ render }: RenderCallback) => (
-        render(props)
-      ),
-      useStaticQuery.mockReturnValue(props)
-    );
-  });
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Layout {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Layout/Layout.test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { StaticQuery, useStaticQuery } from "gatsby";
+
+import { Layout } from "@/components/Layout";
+import * as mocks from "@/mocks";
+
+const mockedStaticQuery = StaticQuery as jest.Mock;
+const mockedUseStaticQuery = useStaticQuery as jest.Mock;
+
+describe("Layout", () => {
+  const props = {
+    ...mocks.siteMetadata,
+    description: "test",
+    title: "test",
+  };
+
+  beforeEach(() => {
+    console.log(mockedStaticQuery);
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(props));
+    mockedUseStaticQuery.mockReturnValue(props);
+  });
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Layout {...props}>test</Layout>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Layout/Layout.tsx

@@ -1,23 +1,18 @@
-// @flow strict
-import React from 'react';
-import Helmet from 'react-helmet';
-import type { Node as ReactNode } from 'react';
-import { useSiteMetadata } from '../../hooks';
-import styles from './Layout.module.scss';
+import React from "react";
+import Helmet from "react-helmet";
 
-type Props = {
-  children: ReactNode,
-  title: string,
-  description?: string,
-  socialImage?: string
-};
+import { useSiteMetadata } from "@/hooks";
 
-const Layout = ({
-  children,
-  title,
-  description,
-  socialImage = ''
-}: Props) => {
+import styles from "./Layout.module.scss";
+
+interface Props {
+  title: string;
+  description?: string;
+  socialImage?: string;
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<Props> = ({ children, title, description, socialImage = "" }: Props) => {
   const { author, url } = useSiteMetadata();
   const metaImage = socialImage || author.photo;
   const metaImageUrl = url + metaImage;

src/components/Layout/index.js

@@ -1,2 +0,0 @@
-// @flow strict
-export { default } from './Layout';

src/components/Layout/index.ts

@@ -0,0 +1 @@
+export { default as Layout } from "./Layout";

src/components/Page/Page.js

@@ -1,28 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import styles from './Page.module.scss';
-
-type Props = {
-  title?: string,
-  children: React.Node
-};
-
-const Page = ({ title, children }: Props) => {
-  const pageRef = useRef();
-
-  useEffect(() => {
-    pageRef.current.scrollIntoView();
-  });
-
-  return (
-    <div ref={pageRef} className={styles['page']}>
-      <div className={styles['page__inner']}>
-        { title && <h1 className={styles['page__title']}>{title}</h1>}
-        <div className={styles['page__body']}>
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Page;

src/components/Page/Page.module.scss

@@ -1,5 +1,5 @@
-@import '../../assets/scss/variables';
-@import '../../assets/scss/mixins';
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
 
 .page {
   @include margin-bottom(2);
@@ -21,7 +21,6 @@
     @include line-height(1);
     @include margin(0, 0, 1);
   }
-
 }
 
 @include breakpoint-sm {
@@ -31,9 +30,7 @@
     &__inner {
       padding: 30px 20px;
     }
-
   }
-
 }
 
 @include breakpoint-md {
@@ -43,7 +40,5 @@
     &__inner {
       padding: 40px 35px;
     }
-
   }
-
-}
+}

src/components/Page/Page.test.js

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

src/components/Page/Page.test.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import Page from "./Page";
+
+describe("Page", () => {
+  const props = {
+    children: "test",
+    title: "test",
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer
+      .create(<Page {...props}>{props.children}</Page>)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Page/Page.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useRef } from "react";
+
+import type { Nullable } from "@/types";
+
+import styles from "./Page.module.scss";
+
+interface Props {
+  title?: string;
+  children: React.ReactNode;
+}
+
+const Page: React.FC<Props> = ({ title, children }: Props) => {
+  const pageRef = useRef<Nullable<HTMLDivElement>>(null);
+
+  useEffect(() => {
+    if (pageRef.current) {
+      pageRef.current.scrollIntoView();
+    }
+  }, []);
+
+  return (
+    <div ref={pageRef} className={styles.page}>
+      <div className={styles.page__inner}>
+        {title && <h1 className={styles.page__title}>{title}</h1>}
+        <div className={styles.page__body}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;

src/components/Page/index.js

@@ -1,2 +0,0 @@
-// @flow strict
-export { default } from './Page';

src/components/Page/index.ts

@@ -0,0 +1 @@
+export { default as Page } from "./Page";

src/components/Pagination/Pagination.js

@@ -1,45 +0,0 @@
-// @flow strict
-import React from 'react';
-import classNames from 'classnames/bind';
-import { Link } from 'gatsby';
-import { PAGINATION } from '../../constants';
-import styles from './Pagination.module.scss';
-
-type Props = {
-  prevPagePath: string,
-  nextPagePath: string,
-  hasNextPage: boolean,
-  hasPrevPage: boolean
-};
-
-const cx = classNames.bind(styles);
-
-const Pagination = ({
-  prevPagePath,
-  nextPagePath,
-  hasNextPage,
-  hasPrevPage
-}: Props) => {
-  const prevClassName = cx({
-    'pagination__prev-link': true,
-    'pagination__prev-link--disable': !hasPrevPage
-  });
-
-  const nextClassName = cx({
-    'pagination__next-link': true,
-    'pagination__next-link--disable': !hasNextPage
-  });
-
-  return (
-    <div className={styles['pagination']}>
-      <div className={styles['pagination__prev']}>
-        <Link rel="prev" to={hasPrevPage ? prevPagePath : '/'} className={prevClassName}>{PAGINATION.PREV_PAGE}</Link>
-      </div>
-      <div className={styles['pagination__next']}>
-        <Link rel="next" to={hasNextPage ? nextPagePath : '/'} className={nextClassName}>{PAGINATION.NEXT_PAGE}</Link>
-      </div>
-    </div>
-  );
-};
-
-export default Pagination;

src/components/Pagination/Pagination.module.scss

@@ -1,13 +1,15 @@
-@import '../../assets/scss/variables';
-@import '../../assets/scss/mixins';
+@use "sass:color";
+
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
 
 .pagination {
   @include margin-top(2);
   display: flex;
 
   &__prev {
-    width: 50%;
     text-align: left;
+    width: 50%;
 
     &-link {
       color: $color-secondary;
@@ -20,17 +22,15 @@
       }
 
       &--disable {
+        color: color.adjust($color-gray, 20%);
         pointer-events: none;
-        color: lighten($color-gray, 20%);
       }
-
     }
-
   }
 
   &__next {
-    width: 50%;
     text-align: right;
+    width: 50%;
 
     &-link {
       color: $color-secondary;
@@ -43,12 +43,9 @@
       }
 
       &--disable {
+        color: color.adjust($color-gray, 20%);
         pointer-events: none;
-        color: lighten($color-gray, 20%);
       }
-
     }
-
   }
-
-}
+}

src/components/Pagination/Pagination.test.js

@@ -1,18 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Pagination from './Pagination';
-
-describe('Pagination', () => {
-  const props = {
-    prevPagePath: '/page/1',
-    nextPagePath: '/page/3',
-    hasNextPage: true,
-    hasPrevPage: true
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Pagination {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Pagination/Pagination.test.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import Pagination from "./Pagination";
+
+describe("Pagination", () => {
+  const props = {
+    prevPagePath: "/page/1",
+    nextPagePath: "/page/3",
+    hasNextPage: true,
+    hasPrevPage: true,
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Pagination {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Pagination/Pagination.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import classNames from "classnames/bind";
+import { Link } from "gatsby";
+
+import { PAGINATION } from "@/constants";
+
+import styles from "./Pagination.module.scss";
+
+type Props = {
+  prevPagePath: string;
+  nextPagePath: string;
+  hasNextPage: boolean;
+  hasPrevPage: boolean;
+};
+
+const cx = classNames.bind(styles);
+
+const Pagination = ({
+  prevPagePath,
+  nextPagePath,
+  hasNextPage,
+  hasPrevPage,
+}: Props) => {
+  const prevClassName = cx({
+    "pagination__prev-link": true,
+    "pagination__prev-link--disable": !hasPrevPage,
+  });
+
+  const nextClassName = cx({
+    "pagination__next-link": true,
+    "pagination__next-link--disable": !hasNextPage,
+  });
+
+  return (
+    <div className={styles["pagination"]}>
+      <div className={styles["pagination__prev"]}>
+        <Link
+          rel="prev"
+          to={hasPrevPage ? prevPagePath : "/"}
+          className={prevClassName}
+        >
+          {PAGINATION.PREV_PAGE}
+        </Link>
+      </div>
+      <div className={styles["pagination__next"]}>
+        <Link
+          rel="next"
+          to={hasNextPage ? nextPagePath : "/"}
+          className={nextClassName}
+        >
+          {PAGINATION.NEXT_PAGE}
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;

src/components/Pagination/index.js

@@ -1,2 +0,0 @@
-// @flow strict
-export { default } from './Pagination';

src/components/Pagination/index.ts

@@ -0,0 +1 @@
+export { default as Pagination } from "./Pagination";

src/components/Post/Author/Author.js

@@ -1,27 +0,0 @@
-// @flow strict
-import React from 'react';
-import { getContactHref } from '../../../utils';
-import styles from './Author.module.scss';
-import { useSiteMetadata } from '../../../hooks';
-
-const Author = () => {
-  const { author } = useSiteMetadata();
-
-  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 default Author;

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

@@ -1,5 +1,5 @@
-@import '../../../assets/scss/variables';
-@import '../../../assets/scss/mixins';
+@import "../../../assets/scss/variables";
+@import "../../../assets/scss/mixins";
 
 .author {
   border-top: 1px solid $color-gray-border;
@@ -22,5 +22,4 @@
     margin-left: auto;
     margin-right: auto;
   }
-
-}
+}

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

@@ -1,23 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { useStaticQuery, StaticQuery } from 'gatsby';
-import Author from './Author';
-import siteMetadata from '../../../../jest/__fixtures__/site-metadata';
-import type { RenderCallback } from '../../../types';
-
-describe('Author', () => {
-  beforeEach(() => {
-    StaticQuery.mockImplementationOnce(
-      ({ render }: RenderCallback) => (
-        render(siteMetadata)
-      ),
-      useStaticQuery.mockReturnValue(siteMetadata)
-    );
-  });
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Author />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Post/Author/Author.test.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { StaticQuery, useStaticQuery } from "gatsby";
+
+import { Author } from "@/components/Post/Author";
+import * as mocks from "@/mocks";
+
+const mockedStaticQuery = StaticQuery as jest.Mock;
+const mockedUseStaticQuery = useStaticQuery as jest.Mock;
+
+describe("Author", () => {
+  console.log(mockedStaticQuery);
+  beforeEach(() => {
+    mockedStaticQuery.mockImplementationOnce(({ render }) =>
+      render(mocks.siteMetadata),
+    );
+    mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
+  });
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Author />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Post/Author/Author.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { useSiteMetadata } from "@/hooks";
+import { getContactHref } from "@/utils";
+
+import styles from "./Author.module.scss";
+
+const Author = () => {
+  const { author } = useSiteMetadata();
+
+  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 default Author;

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

@@ -7,7 +7,7 @@ exports[`Author renders correctly 1`] = `
   <p
     className="author__bio"
   >
-    Test bio
+    Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
     <a
       className="author__bio-twitter"
       href="https://www.twitter.com/#"
@@ -15,7 +15,7 @@ exports[`Author renders correctly 1`] = `
       target="_blank"
     >
       <strong>
-        Test name
+        John Doe
       </strong>
        on Twitter
     </a>

src/components/Post/Author/index.js

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

src/components/Post/Author/index.ts

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

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

@@ -1,28 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { useStaticQuery, StaticQuery } from 'gatsby';
-import Comments from './Comments';
-import siteMetadata from '../../../../jest/__fixtures__/site-metadata';
-import type { RenderCallback } from '../../../types';
-
-describe('Comments', () => {
-  beforeEach(() => {
-    StaticQuery.mockImplementationOnce(
-      ({ render }: RenderCallback) => (
-        render(siteMetadata)
-      ),
-      useStaticQuery.mockReturnValue(siteMetadata)
-    );
-  });
-
-  const props = {
-    postTitle: 'test',
-    postSlug: '/test'
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Comments {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Post/Comments/Comments.test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { StaticQuery, useStaticQuery } from "gatsby";
+
+import { Comments } from "@/components/Post/Comments";
+import * as mocks from "@/mocks";
+
+const mockedStaticQuery = StaticQuery as jest.Mock;
+const mockedUseStaticQuery = useStaticQuery as jest.Mock;
+
+describe("Comments", () => {
+  beforeEach(() => {
+    mockedStaticQuery.mockImplementationOnce(({ render }) =>
+      render(mocks.siteMetadata),
+    );
+    mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
+  });
+
+  const props = {
+    postTitle: "test",
+    postSlug: "/test",
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Comments {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Post/Comments/Comments.tsx

@@ -1,14 +1,14 @@
-// @flow strict
-import React from 'react';
-import ReactDisqusComments from 'react-disqus-comments';
-import { useSiteMetadata } from '../../../hooks';
+import React from "react";
+import ReactDisqusComments from "react-disqus-comments";
 
-type Props = {
-  postTitle: string,
-  postSlug: string
-};
+import { useSiteMetadata } from "@/hooks";
 
-const Comments = ({ postTitle, postSlug }: Props) => {
+interface Props {
+  postTitle: string;
+  postSlug: string;
+}
+
+const Comments: React.FC<Props> = ({ postTitle, postSlug }: Props) => {
   const { url, disqusShortname } = useSiteMetadata();
 
   if (!disqusShortname) {

src/components/Post/Comments/index.js

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

src/components/Post/Comments/index.ts

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

src/components/Post/Content/Content.js

@@ -1,17 +0,0 @@
-// @flow strict
-import React from 'react';
-import styles from './Content.module.scss';
-
-type Props = {
-  body: string,
-  title: string
-};
-
-const Content = ({ body, title }: Props) => (
-  <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

@@ -1,21 +1,21 @@
-@import '../../../assets/scss/variables';
-@import '../../../assets/scss/mixins';
+@import "../../../assets/scss/variables";
+@import "../../../assets/scss/mixins";
 
 .content {
+  margin: 0 auto;
   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;
+    font-weight: 600;
     margin-left: auto;
     margin-right: auto;
-    font-weight: 600;
+    max-width: $layout-post-width;
     text-align: center;
     @include line-height(1.65);
     @include margin-top(1);
-    @include margin-bottom(0)
+    @include margin-bottom(0);
   }
 
   &__body {
@@ -24,38 +24,34 @@
 
       & blockquote {
         font-style: italic;
-        text-align: center;
         margin-top: 0;
+        text-align: center;
         @include padding(1, 0);
 
         & p {
-          max-width: $layout-post-width;
           font-size: $typographic-base-font-size * 1.6817;
           margin-top: 0;
+          max-width: $layout-post-width;
           @include margin-bottom(1);
-          @include line-height(1.5)
+          @include line-height(1.5);
         }
-
       }
-
     }
 
     & a {
-      text-decoration: underline
+      text-decoration: underline;
     }
 
     & * {
-      max-width: $layout-post-width;
       margin-left: auto;
-      margin-right: auto
+      margin-right: auto;
+      max-width: $layout-post-width;
     }
 
     & img {
       max-width: 100%;
     }
-
   }
-
 }
 
 @include breakpoint-md {
@@ -66,7 +62,7 @@
       font-size: $typographic-base-font-size * 3;
       @include line-height(2.25);
       @include margin-top(2.25);
-      @include margin-bottom(1.5)
+      @include margin-bottom(1.5);
     }
 
     &__body {
@@ -77,11 +73,8 @@
       & p {
         font-size: $typographic-base-font-size * 1.125;
         @include line-height(1.125);
-        @include margin-bottom(1.125)
+        @include margin-bottom(1.125);
       }
-
     }
-
   }
-
-}
+}

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

@@ -1,16 +0,0 @@
-// @flow strict
-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/Content.test.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Content } from "@/components/Post/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/Content.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import styles from "./Content.module.scss";
+
+interface Props {
+  title: string;
+  body: string;
+}
+
+const Content: React.FC<Props> = ({ body, title }: Props) => (
+  <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/index.js

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

src/components/Post/Content/index.ts

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

src/components/Post/Meta/Meta.js

@@ -1,15 +0,0 @@
-// @flow strict
-import React from 'react';
-import styles from './Meta.module.scss';
-
-type Props = {
-  date: string
-};
-
-const Meta = ({ date }: Props) => (
-  <div className={styles['meta']}>
-    <p className={styles['meta__date']}>Published {new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</p>
-  </div>
-);
-
-export default Meta;

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

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

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

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

src/components/Post/Meta/Meta.test.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Meta } from "@/components/Post/Meta";
+
+describe("Meta", () => {
+  it("renders correctly", () => {
+    const props = { date: "2016-09-01" };
+
+    const tree = renderer.create(<Meta {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Post/Meta/Meta.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import styles from "./Meta.module.scss";
+
+interface Props {
+  date: string;
+}
+
+const Meta: React.FC<Props> = ({ date }: Props) => (
+  <div className={styles.meta}>
+    <p className={styles.meta__date}>
+      Published{" "}
+      {new Date(date).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      })}
+    </p>
+  </div>
+);
+
+export default Meta;

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

@@ -7,7 +7,8 @@ exports[`Meta renders correctly 1`] = `
   <p
     className="meta__date"
   >
-    Published 
+    Published
+     
     Sep 1, 2016
   </p>
 </div>

src/components/Post/Meta/index.js

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

src/components/Post/Meta/index.ts

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

src/components/Post/Post.js

@@ -1,42 +0,0 @@
-// @flow strict
-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';
-import type { Node } from '../../types';
-
-type Props = {
-  post: Node
-};
-
-const Post = ({ post }: Props) => {
-  const { html } = post;
-  const { tagSlugs, slug } = post.fields;
-  const { tags, title, date } = post.frontmatter;
-
-  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 && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
-        <Author />
-      </div>
-
-      <div className={styles['post__comments']}>
-        <Comments postSlug={slug} postTitle={post.frontmatter.title} />
-      </div>
-    </div>
-  );
-};
-
-export default Post;

src/components/Post/Post.module.scss

@@ -1,42 +1,40 @@
-@import '../../assets/scss/variables';
-@import '../../assets/scss/mixins';
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
 
 .post {
   &__footer {
-    max-width: $layout-post-width;
     margin: 0 auto;
+    max-width: $layout-post-width;
     padding: 0 15px;
   }
 
   &__comments {
-    max-width: $layout-post-width;
     margin: 0 auto;
+    max-width: $layout-post-width;
     padding: 0 15px;
   }
 
   &__home-button {
-    display: block;
-    max-width: 90px;
-    height: $button-height;
-    padding: 0 24px;
-    line-height: $button-height;
-    text-align: center;
-    color: $color-base;
     border: 1px solid $color-gray-border;
     border-radius: $button-border-radius;
+    color: $color-base;
+    display: block;
     font-size: $typographic-base-font-size;
     font-weight: normal;
+    height: $button-height;
+    line-height: $button-height;
     margin-left: auto;
     margin-right: auto;
+    max-width: 90px;
+    padding: 0 24px;
+    text-align: center;
     @include margin-top(1);
 
     &:hover,
     &:focus {
       color: $color-primary;
     }
-
   }
-
 }
 
 @include breakpoint-md {
@@ -50,13 +48,11 @@
     }
 
     &__home-button {
-      position: fixed;
-      max-width: auto;
+      left: 30px;
       margin: 0;
+      max-width: auto;
+      position: fixed;
       top: 30px;
-      left: 30px
     }
-
   }
-
-}
+}

src/components/Post/Post.test.js

@@ -1,46 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { useStaticQuery, StaticQuery } from 'gatsby';
-import Post from './Post';
-import siteMetadata from '../../../jest/__fixtures__/site-metadata';
-import type { RenderCallback } from '../../types';
-
-describe('Post', () => {
-  beforeEach(() => {
-    StaticQuery.mockImplementationOnce(
-      ({ render }: RenderCallback) => (
-        render(siteMetadata)
-      ),
-      useStaticQuery.mockReturnValue(siteMetadata)
-    );
-  });
-
-  const props = {
-    post: {
-      id: 'test-123',
-      html: '<p>test</p>',
-      fields: {
-        slug: '/test',
-        categorySlug: '/test-category',
-        tagSlugs: [
-          '/test_0',
-          '/test_1'
-        ]
-      },
-      frontmatter: {
-        date: '2016-09-01',
-        tags: [
-          'test_0',
-          'test_1'
-        ],
-        title: 'test'
-      }
-    }
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Post {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Post/Post.test.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { StaticQuery, useStaticQuery } from "gatsby";
+
+import { Post } from "@/components/Post";
+import * as mocks from "@/mocks";
+
+const mockedStaticQuery = StaticQuery as jest.Mock;
+const mockedUseStaticQuery = useStaticQuery as jest.Mock;
+
+describe("Post", () => {
+  beforeEach(() => {
+    mockedStaticQuery.mockImplementationOnce(({ render }) =>
+      render(mocks.siteMetadata),
+    );
+    mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
+  });
+
+  const props = {
+    post: {
+      id: "test-123",
+      html: "<p>test</p>",
+      fields: {
+        slug: "/test",
+        categorySlug: "/test-category",
+        tagSlugs: ["/test_0", "/test_1"],
+      },
+      frontmatter: {
+        date: "2016-09-01",
+        tags: ["test_0", "test_1"],
+        title: "test",
+      },
+    },
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Post {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Post/Post.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { Link } from "gatsby";
+
+import type { Node } from "@/types";
+
+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";
+
+interface Props {
+  post: Node;
+}
+
+const Post: React.FC<Props> = ({ post }: Props) => {
+  const { html } = post;
+  const { tagSlugs, slug } = post.fields;
+  const { tags, title, date } = post.frontmatter;
+
+  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 && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
+        <Author />
+      </div>
+
+      <div className={styles.post__comments}>
+        <Comments postSlug={slug} postTitle={post.frontmatter.title} />
+      </div>
+    </div>
+  );
+};
+
+export default Post;

src/components/Post/Tags/Tags.js

@@ -1,25 +0,0 @@
-// @flow strict
-import React from 'react';
-import { Link } from 'gatsby';
-import styles from './Tags.module.scss';
-
-type Props = {
-  tags: string[],
-  tagSlugs: string[]
-};
-
-const Tags = ({ tags, tagSlugs }: Props) => (
-  <div className={styles['tags']}>
-    <ul className={styles['tags__list']}>
-      {tagSlugs && 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

@@ -1,8 +1,8 @@
-@import '../../../assets/scss/variables';
-@import '../../../assets/scss/mixins';
+@import "../../../assets/scss/variables";
+@import "../../../assets/scss/mixins";
 
 .tags {
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 
   &__list {
     list-style: none;
@@ -14,24 +14,20 @@
       margin: 10px 5px;
 
       &-link {
-        display: inline-block;
-        height: $button-height;
-        padding: 0 24px;
-        line-height: $button-height;
         border: 1px solid $color-gray-border;
-        text-decoration: none;
         border-radius: $button-border-radius;
         color: $color-base;
+        display: inline-block;
+        height: $button-height;
+        line-height: $button-height;
+        padding: 0 24px;
+        text-decoration: none;
 
         &:hover,
         &:focus {
           color: $color-primary;
         }
-
       }
-
     }
-
   }
-
-}
+}

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

@@ -1,22 +0,0 @@
-// @flow strict
-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/Tags.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Tags } from "@/components/Post/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/Tags.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "gatsby";
+import styles from "./Tags.module.scss";
+
+type Props = {
+  tags: string[];
+  tagSlugs: string[];
+};
+
+const Tags = ({ tags, tagSlugs }: Props) => (
+  <div className={styles["tags"]}>
+    <ul className={styles["tags__list"]}>
+      {tagSlugs &&
+        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/index.js

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

src/components/Post/Tags/index.ts

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

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

@@ -40,7 +40,8 @@ exports[`Post renders correctly 1`] = `
       <p
         className="meta__date"
       >
-        Published 
+        Published
+         
         Sep 1, 2016
       </p>
     </div>
@@ -78,7 +79,7 @@ exports[`Post renders correctly 1`] = `
       <p
         className="author__bio"
       >
-        Test bio
+        Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
         <a
           className="author__bio-twitter"
           href="https://www.twitter.com/#"
@@ -86,7 +87,7 @@ exports[`Post renders correctly 1`] = `
           target="_blank"
         >
           <strong>
-            Test name
+            John Doe
           </strong>
            on Twitter
         </a>

src/components/Post/index.js

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

src/components/Post/index.ts

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

src/components/Sidebar/Author/Author.js

@@ -1,40 +0,0 @@
-// @flow strict
-import React from 'react';
-import { withPrefix, Link } from 'gatsby';
-import styles from './Author.module.scss';
-
-type Props = {
-  author: {
-    name: string,
-    bio: string,
-    photo: string
-  },
-  isIndex: ?boolean
-};
-
-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}
-      />
-    </Link>
-
-    { isIndex === true ? (
-      <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

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