refactor(starter): upgrade to new version of gatsby

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);
   }
-
-}
+}

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

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

src/components/Sidebar/Author/Author.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Author } from "@/components/Sidebar/Author";
+import * as mocks from "@/mocks";
+
+describe("Author", () => {
+  const props = { isIndex: false, author: mocks.author };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Author {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sidebar/Author/Author.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import { Link, withPrefix } 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/__snapshots__/Author.test.tsx.snap

@@ -8,10 +8,10 @@ exports[`Author renders correctly 1`] = `
     href="/"
   >
     <img
-      alt="test"
+      alt="John Doe"
       className="author__photo"
       height="75"
-      src="/photo.jpg"
+      src="/static/photo.jpg"
       width="75"
     />
   </a>
@@ -22,13 +22,13 @@ exports[`Author renders correctly 1`] = `
       className="author__title-link"
       href="/"
     >
-      test
+      John Doe
     </a>
   </h2>
   <p
     className="author__subtitle"
   >
-    test
+    Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
   </p>
 </div>
 `;

src/components/Sidebar/Author/index.js

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

src/components/Sidebar/Author/index.ts

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

src/components/Sidebar/Contacts/Contacts.js

@@ -1,32 +0,0 @@
-// @flow strict
-import React from 'react';
-import { getContactHref, getIcon } from '../../../utils';
-import Icon from '../../Icon';
-import styles from './Contacts.module.scss';
-
-type Props = {
-  contacts: {
-    [string]: string,
-  },
-};
-
-const Contacts = ({ contacts }: Props) => (
-  <div className={styles['contacts']}>
-    <ul className={styles['contacts__list']}>
-      {Object.keys(contacts).map((name) => (!contacts[name] ? null : (
-        <li className={styles['contacts__list-item']} key={name}>
-          <a
-            className={styles['contacts__list-item-link']}
-            href={getContactHref(name, contacts[name])}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <Icon name={name} icon={getIcon(name)} />
-          </a>
-        </li>
-      )))}
-    </ul>
-  </div>
-);
-
-export default Contacts;

src/components/Sidebar/Contacts/Contacts.module.scss

@@ -1,5 +1,5 @@
-@import '../../../assets/scss/variables';
-@import '../../../assets/scss/mixins';
+@import "../../../assets/scss/variables";
+@import "../../../assets/scss/mixins";
 
 .contacts {
   @include margin-bottom(1);
@@ -10,38 +10,34 @@
     flex-grow: 0;
     flex-shrink: 0;
     list-style: none;
-    padding: 0;
     margin: 10px -3px;
+    padding: 0;
     width: 140px;
 
     &-item {
-      padding: 0;
-      margin: 4px;
-      display: flex;
       align-content: center;
       align-items: center;
-      justify-content: center;
-      height: $button-height;
-      width: $button-height;
-      line-height: $button-height;
-      border-radius: 50%;
-      text-align: center;
       border: 1px solid $color-gray-bg;
+      border-radius: 50%;
+      display: flex;
+      height: $button-height;
+      justify-content: center;
+      line-height: $button-height;
+      margin: 4px;
+      padding: 0;
+      text-align: center;
+      width: $button-height;
 
       &-link {
         border: 0;
-        display: flex;
         color: $color-base;
-  
+        display: flex;
+
         &:hover,
         &:focus {
           color: $color-primary;
         }
-
       }
-
     }
-
   }
-
-}
+}

src/components/Sidebar/Contacts/Contacts.test.js

@@ -1,22 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Contacts from './Contacts';
-
-describe('Contacts', () => {
-  const props = {
-    contacts: {
-      email: '#',
-      twitter: '#',
-      vkontakte: '#',
-      github: '#',
-      rss: '#',
-      telegram: '#'
-    }
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Contacts {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Sidebar/Contacts/Contacts.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Contacts } from "@/components/Sidebar/Contacts";
+import * as mocks from "@/mocks";
+
+describe("Contacts", () => {
+  const props = { contacts: mocks.contacts };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Contacts {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sidebar/Contacts/Contacts.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { Icon } from "@/components/Icon";
+import { Dictionary } from "@/types";
+import { getContactHref, getIcon } from "@/utils";
+
+import styles from "./Contacts.module.scss";
+
+type Props = {
+  contacts: Dictionary<string>;
+};
+
+const Contacts: React.FC<Props> = ({ contacts }: Props) => (
+  <div className={styles.contacts}>
+    <ul className={styles.contacts__list}>
+      {Object.keys(contacts).map(name => (
+        <li className={styles["contacts__list-item"]} key={name}>
+          <a
+            className={styles["contacts__list-item-link"]}
+            href={getContactHref(name, contacts[name])}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <Icon name={name} icon={getIcon(name)} />
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+export default Contacts;

src/components/Sidebar/Contacts/__snapshots__/Contacts.test.tsx.snap

@@ -7,6 +7,28 @@ exports[`Contacts renders correctly 1`] = `
   <ul
     className="contacts__list"
   >
+    <li
+      className="contacts__list-item"
+    >
+      <a
+        className="contacts__list-item-link"
+        href="#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          className="icon"
+          viewBox="0 0 22 28"
+        >
+          <title>
+            rss
+          </title>
+          <path
+            d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+          />
+        </svg>
+      </a>
+    </li>
     <li
       className="contacts__list-item"
     >
@@ -29,50 +51,6 @@ exports[`Contacts renders correctly 1`] = `
         </svg>
       </a>
     </li>
-    <li
-      className="contacts__list-item"
-    >
-      <a
-        className="contacts__list-item-link"
-        href="https://www.twitter.com/#"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <svg
-          className="icon"
-          viewBox="0 0 26 28"
-        >
-          <title>
-            twitter
-          </title>
-          <path
-            d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-          />
-        </svg>
-      </a>
-    </li>
-    <li
-      className="contacts__list-item"
-    >
-      <a
-        className="contacts__list-item-link"
-        href="https://vk.com/#"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <svg
-          className="icon"
-          viewBox="0 0 31 28"
-        >
-          <title>
-            vkontakte
-          </title>
-          <path
-            d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
-          />
-        </svg>
-      </a>
-    </li>
     <li
       className="contacts__list-item"
     >
@@ -100,19 +78,19 @@ exports[`Contacts renders correctly 1`] = `
     >
       <a
         className="contacts__list-item-link"
-        href="#"
+        href="https://www.twitter.com/#"
         rel="noopener noreferrer"
         target="_blank"
       >
         <svg
           className="icon"
-          viewBox="0 0 22 28"
+          viewBox="0 0 26 28"
         >
           <title>
-            rss
+            twitter
           </title>
           <path
-            d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+            d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
           />
         </svg>
       </a>
@@ -139,6 +117,28 @@ exports[`Contacts renders correctly 1`] = `
         </svg>
       </a>
     </li>
+    <li
+      className="contacts__list-item"
+    >
+      <a
+        className="contacts__list-item-link"
+        href="https://vk.com/#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          className="icon"
+          viewBox="0 0 31 28"
+        >
+          <title>
+            vkontakte
+          </title>
+          <path
+            d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+          />
+        </svg>
+      </a>
+    </li>
   </ul>
 </div>
 `;

src/components/Sidebar/Contacts/index.js

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