refactor(starter): upgrade and move to typescript

2025-07-27 20:52:49 +02:00 · 2022-04-16 14:25:55 +00:00
parent 67ebabbaac
commit 50a99f57f7
156 changed files with 5350 additions and 7173 deletions
--- a/src/components/Feed/Feed.module.scss
+++ b/src/components/Feed/Feed.module.scss
@@ -2,20 +2,20 @@
@import "../../assets/scss/mixins";

 .feed {
-  &__item {
+  .item {
    @include margin-bottom(1.25);

    &:last-child {
      @include margin-bottom(0.5);
    }

-    &-title {
+    .title {
      font-size: $typographic-base-font-size * 1.6875;
      @include line-height(1.5);
      @include margin-top(0);
      @include margin-bottom(0.5);

-      &-link {
+      .link {
        color: $color-base;

        &:hover,
@@ -26,26 +26,26 @@
      }
    }

-    &-description {
+    .description {
      font-size: $typographic-base-font-size;
      @include line-height(1);
      @include margin-bottom(0.75);
    }

-    &-meta {
-      &-time {
+    .meta {
+      .time {
        color: $color-base;
        font-size: $typographic-small-font-size;
        font-weight: 600;
        text-transform: uppercase;
      }

-      &-divider {
-        margin: 0 5px;
+      .divider {
+        @include margin(0, 0.5);
      }

-      &-category {
-        &-link {
+      .category {
+        .link {
          color: $color-secondary;
          font-size: $typographic-small-font-size;
          font-weight: 600;
@@ -59,7 +59,7 @@
      }
    }

-    &-more {
+    .more {
      color: $color-primary;
      font-size: $typographic-base-font-size;

--- a/src/components/Feed/Feed.test.tsx
+++ b/src/components/Feed/Feed.test.tsx
@@ -2,52 +2,11 @@ import React from "react";
 import renderer from "react-test-renderer";

 import { Feed } from "@/components/Feed";
+import * as mocks from "@/mocks";

 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 props = { edges: mocks.edges };
    const tree = renderer.create(<Feed {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -4,7 +4,7 @@ import { Link } from "gatsby";

 import { Edge } from "@/types";

-import styles from "./Feed.module.scss";
+import * as styles from "./Feed.module.scss";

 type Props = {
  edges: Array<Edge>;
@@ -13,10 +13,10 @@ type Props = {
 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"]}>
+      <div className={styles.item} key={edge.node.fields.slug}>
+        <div className={styles.meta}>
          <time
-            className={styles["feed__item-meta-time"]}
+            className={styles.time}
            dateTime={new Date(edge.node.frontmatter.date).toLocaleDateString(
              "en-US",
              { year: "numeric", month: "long", day: "numeric" },
@@ -27,28 +27,22 @@ const Feed: React.FC<Props> = ({ edges }: Props) => (
              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"]}
-            >
+          <span className={styles.divider} />
+          <span className={styles.category}>
+            <Link to={edge.node.fields.categorySlug} className={styles.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}
-          >
+        <h2 className={styles.title}>
+          <Link className={styles.link} to={edge.node.fields.slug}>
            {edge.node.frontmatter.title}
          </Link>
        </h2>
-        <p className={styles["feed__item-description"]}>
+        <p className={styles.description}>
          {edge.node.frontmatter.description}
        </p>
-        <Link className={styles["feed__item-more"]} to={edge.node.fields.slug}>
+        <Link className={styles.more} to={edge.node.fields.slug}>
          Read
        </Link>
      </div>
--- a/src/components/Feed/snapshots/Feed.test.tsx.snap
+++ b/src/components/Feed/snapshots/Feed.test.tsx.snap
@@ -1,101 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Feed renders correctly 1`] = `
-<div
-  className="feed"
->
-  <div
-    className="feed__item"
-  >
-    <div
-      className="feed__item-meta"
-    >
+<div>
+  <div>
+    <div>
      <time
-        className="feed__item-meta-time"
        dateTime="September 1, 2016"
      >
        September 2016
      </time>
-      <span
-        className="feed__item-meta-divider"
-      />
-      <span
-        className="feed__item-meta-category"
-      >
+      <span />
+      <span>
        <a
-          className="feed__item-meta-category-link"
-          href="/test_0"
+          href="/typography"
        >
-          test_0
+          typography
        </a>
      </span>
    </div>
-    <h2
-      className="feed__item-title"
-    >
+    <h2>
      <a
-        className="feed__item-title-link"
-        href="/test_0"
+        href="/posts/perfecting-the-art-of-perfection"
      >
-        test_0
+        Perfecting the Art of Perfection
      </a>
    </h2>
-    <p
-      className="feed__item-description"
-    >
-      test_0
+    <p>
+      An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.
    </p>
    <a
-      className="feed__item-more"
-      href="/test_0"
+      href="/posts/perfecting-the-art-of-perfection"
    >
      Read
    </a>
  </div>
-  <div
-    className="feed__item"
-  >
-    <div
-      className="feed__item-meta"
-    >
+  <div>
+    <div>
      <time
-        className="feed__item-meta-time"
        dateTime="September 1, 2016"
      >
        September 2016
      </time>
-      <span
-        className="feed__item-meta-divider"
-      />
-      <span
-        className="feed__item-meta-category"
-      >
+      <span />
+      <span>
        <a
-          className="feed__item-meta-category-link"
-          href="/test_1"
+          href="/design-inspiration"
        >
-          test_1
+          design inspiration
        </a>
      </span>
    </div>
-    <h2
-      className="feed__item-title"
-    >
+    <h2>
      <a
-        className="feed__item-title-link"
-        href="/test_1"
+        href="/posts/the-birth-of-movable-type"
      >
-        test_1
+        Johannes Gutenberg: The Birth of Movable Type
      </a>
    </h2>
-    <p
-      className="feed__item-description"
-    >
-      test_1
+    <p>
+      German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.
    </p>
    <a
-      className="feed__item-more"
-      href="/test_1"
+      href="/posts/the-birth-of-movable-type"
    >
      Read
    </a>
--- a/src/components/Icon/Icon.module.scss
+++ b/src/components/Icon/Icon.module.scss
@@ -1,6 +1,6 @@
 .icon {
  display: inline-block;
-  fill: currentColor;
+  fill: currentcolor;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
@@ -8,10 +8,8 @@
  font-weight: normal;
  height: 1em;
  line-height: 1em;
-  margin-left: 0.2em;
-  margin-right: 0.2em;
  speak: none;
-  stroke: currentColor;
+  stroke: currentcolor;
  stroke-width: 0;
  text-align: center;
  text-transform: none;
--- a/src/components/Icon/Icon.test.tsx
+++ b/src/components/Icon/Icon.test.tsx
@@ -2,17 +2,13 @@ import React from "react";
 import renderer from "react-test-renderer";

 import { Icon } from "@/components/Icon";
+import { ICONS } from "@/constants";
+import { getIcon } from "@/utils";

 describe("Icon", () => {
-  const props = {
-    name: "test",
-    icon: {
-      viewBox: "0 0 0 0",
-      path: "",
-    },
-  };
-
  it("renders correctly", () => {
+    const [github] = Object.keys(ICONS) as Array<keyof typeof ICONS>;
+    const props = { name: github, icon: getIcon(github) };
    const tree = renderer.create(<Icon {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,12 +1,14 @@
 import React from "react";

-import styles from "./Icon.module.scss";
+import { ICONS } from "@/constants";
+
+import * as styles from "./Icon.module.scss";

 interface Props {
-  name: string;
+  name: keyof typeof ICONS;
  icon: {
-    path?: string;
    viewBox?: string;
+    path?: string;
  };
 }

--- a/src/components/Icon/snapshots/Icon.test.tsx.snap
+++ b/src/components/Icon/snapshots/Icon.test.tsx.snap
@@ -2,14 +2,13 @@

 exports[`Icon renders correctly 1`] = `
 <svg
-  className="icon"
-  viewBox="0 0 0 0"
+  viewBox="0 0 26 28"
 >
  <title>
-    test
+    github
  </title>
  <path
-    d=""
+    d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
  />
 </svg>
 `;
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -0,0 +1,62 @@
+import React, { FC } from "react";
+
+import { graphql, StaticQuery } from "gatsby";
+import {
+  GatsbyImage,
+  GatsbyImageProps,
+  IGatsbyImageData,
+} from "gatsby-plugin-image";
+import { FileSystemNode } from "gatsby-source-filesystem";
+
+interface Props extends Omit<GatsbyImageProps, "image"> {
+  path: string;
+}
+
+interface Data {
+  images: {
+    edges: Array<{
+      node: FileSystemNode & {
+        childImageSharp: {
+          gatsbyImageData: IGatsbyImageData;
+        };
+      };
+    }>;
+  };
+}
+
+const Image: FC<Props> = ({ path, ...rest }: Props) => (
+  <StaticQuery
+    query={graphql`
+      query {
+        images: allFile(
+          filter: { ext: { regex: "/png|jpg|jpeg|webp|tif|tiff/" } }
+        ) {
+          edges {
+            node {
+              absolutePath
+              childImageSharp {
+                gatsbyImageData(formats: [AUTO, WEBP, AVIF])
+              }
+            }
+          }
+        }
+      }
+    `}
+    render={(data: Data) => {
+      const { images: { edges = [] } = {} } = data;
+      const image = edges.find(({ node }) => node.absolutePath.includes(path));
+
+      if (!image) {
+        return null;
+      }
+
+      const {
+        node: { childImageSharp },
+      } = image;
+
+      return <GatsbyImage {...rest} image={childImageSharp.gatsbyImageData} />;
+    }}
+  />
+);
+
+export default Image;
--- a/src/components/Image/index.ts
+++ b/src/components/Image/index.ts
@@ -0,0 +1 @@
+export { default as Image } from "./Image";
--- a/src/components/Layout/Layout.test.tsx
+++ b/src/components/Layout/Layout.test.tsx
@@ -12,12 +12,11 @@ const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 describe("Layout", () => {
  const props = {
    ...mocks.siteMetadata,
-    description: "test",
-    title: "test",
+    title: mocks.siteMetadata.site.siteMetadata.title,
+    description: mocks.siteMetadata.site.siteMetadata.subtitle,
  };

  beforeEach(() => {
-    console.log(mockedStaticQuery);
    mockedStaticQuery.mockImplementationOnce(({ render }) => render(props));
    mockedUseStaticQuery.mockReturnValue(props);
  });
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -3,7 +3,7 @@ import Helmet from "react-helmet";

 import { useSiteMetadata } from "@/hooks";

-import styles from "./Layout.module.scss";
+import * as styles from "./Layout.module.scss";

 interface Props {
  title: string;
@@ -12,7 +12,12 @@ interface Props {
  children: React.ReactNode;
 }

-const Layout: React.FC<Props> = ({ children, title, description, socialImage = "" }: Props) => {
+const Layout: React.FC<Props> = ({
+  children,
+  title,
+  description,
+  socialImage = "",
+}: Props) => {
  const { author, url } = useSiteMetadata();
  const metaImage = socialImage || author.photo;
  const metaImageUrl = url + metaImage;
--- a/src/components/Layout/snapshots/Layout.test.tsx.snap
+++ b/src/components/Layout/snapshots/Layout.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Layout renders correctly 1`] = `
-<div
-  className="layout"
->
+<div>
  test
 </div>
 `;
--- a/src/components/Page/Page.module.scss
+++ b/src/components/Page/Page.module.scss
@@ -4,11 +4,11 @@
 .page {
  @include margin-bottom(2);

-  &__inner {
-    padding: 25px 20px;
+  .inner {
+    @include padding(1, 0.75, 0);
  }

-  &__title {
+  .title {
    font-size: $typographic-base-font-size * 2.5;
    font-weight: 600;
    @include line-height(2);
@@ -16,7 +16,7 @@
    @include margin-bottom(1.45);
  }

-  &__body {
+  .body {
    font-size: $typographic-base-font-size;
    @include line-height(1);
    @include margin(0, 0, 1);
@@ -27,8 +27,8 @@
  .page {
    lost-column: 7/12;

-    &__inner {
-      padding: 30px 20px;
+    .inner {
+      @include padding(1.25, 0.75, 0);
    }
  }
 }
@@ -37,8 +37,8 @@
  .page {
    lost-column: 2/3;

-    &__inner {
-      padding: 40px 35px;
+    .inner {
+      @include padding(1.5, 1, 0);
    }
  }
 }
--- a/src/components/Page/Page.test.tsx
+++ b/src/components/Page/Page.test.tsx
@@ -1,15 +1,16 @@
 import React from "react";
 import renderer from "react-test-renderer";

-import Page from "./Page";
+import { Page } from "@/components/Page";
+import * as mocks from "@/mocks";

 describe("Page", () => {
-  const props = {
-    children: "test",
-    title: "test",
-  };
-
  it("renders correctly", () => {
+    const props = {
+      children: mocks.markdownRemark.html,
+      title: mocks.markdownRemark.frontmatter.title,
+    };
+
    const tree = renderer
      .create(<Page {...props}>{props.children}</Page>)
      .toJSON();
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";

 import type { Nullable } from "@/types";

-import styles from "./Page.module.scss";
+import * as styles from "./Page.module.scss";

 interface Props {
  title?: string;
@@ -20,9 +20,9 @@ const Page: React.FC<Props> = ({ title, children }: Props) => {

  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 className={styles.inner}>
+        {title && <h1 className={styles.title}>{title}</h1>}
+        <div className={styles.body}>{children}</div>
      </div>
    </div>
  );
--- a/src/components/Page/snapshots/Page.test.tsx.snap
+++ b/src/components/Page/snapshots/Page.test.tsx.snap
@@ -1,21 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Page renders correctly 1`] = `
-<div
-  className="page"
->
-  <div
-    className="page__inner"
-  >
-    <h1
-      className="page__title"
-    >
-      test
+<div>
+  <div>
+    <h1>
+      Perfecting the Art of Perfection
    </h1>
-    <div
-      className="page__body"
-    >
-      test
+    <div>
+      &lt;p&gt;An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.&lt;/p&gt;
    </div>
  </div>
 </div>
--- a/src/components/Pagination/Pagination.module.scss
+++ b/src/components/Pagination/Pagination.module.scss
@@ -4,14 +4,14 @@
@import "../../assets/scss/mixins";

 .pagination {
-  @include margin-top(2);
  display: flex;
+  @include margin-top(2);

-  &__prev {
+  .previous {
    text-align: left;
    width: 50%;

-    &-link {
+    .previousLink {
      color: $color-secondary;
      font-size: 26px;
      font-weight: bold;
@@ -21,18 +21,18 @@
        color: $color-primary;
      }

-      &--disable {
-        color: color.adjust($color-gray, 20%);
+      &.disable {
+        color: color.adjust($color-gray, $whiteness: 20%);
        pointer-events: none;
      }
    }
  }

-  &__next {
+  .next {
    text-align: right;
    width: 50%;

-    &-link {
+    .nextLink {
      color: $color-secondary;
      font-size: 26px;
      font-weight: bold;
@@ -42,8 +42,8 @@
        color: $color-primary;
      }

-      &--disable {
-        color: color.adjust($color-gray, 20%);
+      &.disable {
+        color: color.adjust($color-gray, $whiteness: 20%);
        pointer-events: none;
      }
    }
--- a/src/components/Pagination/Pagination.test.tsx
+++ b/src/components/Pagination/Pagination.test.tsx
@@ -1,16 +1,12 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import Pagination from "./Pagination";
+
+import { Pagination } from "@/components/Pagination";
+import * as mocks from "@/mocks";

 describe("Pagination", () => {
-  const props = {
-    prevPagePath: "/page/1",
-    nextPagePath: "/page/3",
-    hasNextPage: true,
-    hasPrevPage: true,
-  };
-
  it("renders correctly", () => {
+    const props = { ...mocks.pageContext.pagination };
    const tree = renderer.create(<Pagination {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,11 +1,11 @@
 import React from "react";

-import classNames from "classnames/bind";
+import classNames from "classnames";
 import { Link } from "gatsby";

 import { PAGINATION } from "@/constants";

-import styles from "./Pagination.module.scss";
+import * as styles from "./Pagination.module.scss";

 type Props = {
  prevPagePath: string;
@@ -14,27 +14,23 @@ type Props = {
  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 prevClassName = classNames(styles.previousLink, {
+    [styles.disable]: !hasPrevPage,
  });

-  const nextClassName = cx({
-    "pagination__next-link": true,
-    "pagination__next-link--disable": !hasNextPage,
+  const nextClassName = classNames(styles.nextLink, {
+    [styles.disable]: !hasNextPage,
  });

  return (
-    <div className={styles["pagination"]}>
-      <div className={styles["pagination__prev"]}>
+    <div className={styles.pagination}>
+      <div className={styles.previous}>
        <Link
          rel="prev"
          to={hasPrevPage ? prevPagePath : "/"}
@@ -43,7 +39,7 @@ const Pagination = ({
          {PAGINATION.PREV_PAGE}
        </Link>
      </div>
-      <div className={styles["pagination__next"]}>
+      <div className={styles.next}>
        <Link
          rel="next"
          to={hasNextPage ? nextPagePath : "/"}
--- a/src/components/Pagination/snapshots/Pagination.test.tsx.snap
+++ b/src/components/Pagination/snapshots/Pagination.test.tsx.snap
@@ -1,26 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Pagination renders correctly 1`] = `
-<div
-  className="pagination"
->
-  <div
-    className="pagination__prev"
-  >
+<div>
+  <div>
    <a
-      className="pagination__prev-link"
-      href="/page/1"
+      className=""
+      href="/typography/page/1"
      rel="prev"
    >
      ← PREV
    </a>
  </div>
-  <div
-    className="pagination__next"
-  >
+  <div>
    <a
-      className="pagination__next-link"
-      href="/page/3"
+      className=""
+      href="/typography/page/3"
      rel="next"
    >
      → NEXT
--- a/src/components/Post/Author/Author.module.scss
+++ b/src/components/Post/Author/Author.module.scss
@@ -4,13 +4,13 @@
 .author {
  border-top: 1px solid $color-gray-border;
  max-width: $layout-post-width;
-  padding-top: 20px;
+  @include padding-top(1);
  @include line-height(1);
  @include margin-top(1);
  @include margin-bottom(2);

-  &__bio {
-    &-twitter {
+  .bio {
+    .twitter {
      display: block;
      text-decoration: underline;
    }
--- a/src/components/Post/Author/Author.test.tsx
+++ b/src/components/Post/Author/Author.test.tsx
@@ -10,11 +10,11 @@ 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);
  });

--- a/src/components/Post/Author/Author.tsx
+++ b/src/components/Post/Author/Author.tsx
@@ -3,17 +3,17 @@ import React from "react";
 import { useSiteMetadata } from "@/hooks";
 import { getContactHref } from "@/utils";

-import styles from "./Author.module.scss";
+import * as styles from "./Author.module.scss";

 const Author = () => {
  const { author } = useSiteMetadata();

  return (
    <div className={styles.author}>
-      <p className={styles.author__bio}>
+      <p className={styles.bio}>
        {author.bio}
        <a
-          className={styles["author__bio-twitter"]}
+          className={styles.twitter}
          href={getContactHref("twitter", author.contacts.twitter)}
          rel="noopener noreferrer"
          target="_blank"
--- a/src/components/Post/Author/snapshots/Author.test.tsx.snap
+++ b/src/components/Post/Author/snapshots/Author.test.tsx.snap
@@ -1,15 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Author renders correctly 1`] = `
-<div
-  className="author"
->
-  <p
-    className="author__bio"
-  >
+<div>
+  <p>
    Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
    <a
-      className="author__bio-twitter"
      href="https://www.twitter.com/#"
      rel="noopener noreferrer"
      target="_blank"
--- a/src/components/Post/Comments/Comments.test.tsx
+++ b/src/components/Post/Comments/Comments.test.tsx
@@ -14,15 +14,16 @@ describe("Comments", () => {
    mockedStaticQuery.mockImplementationOnce(({ render }) =>
      render(mocks.siteMetadata),
    );
+
    mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
  });

-  const props = {
-    postTitle: "test",
-    postSlug: "/test",
-  };
-
  it("renders correctly", () => {
+    const props = {
+      postTitle: mocks.markdownRemark.frontmatter.title,
+      postSlug: mocks.markdownRemark.fields.slug,
+    };
+
    const tree = renderer.create(<Comments {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Post/Content/Content.module.scss
+++ b/src/components/Post/Content/Content.module.scss
@@ -2,11 +2,11 @@
@import "../../../assets/scss/mixins";

 .content {
-  margin: 0 auto;
+  @include margin-auto();
  max-width: $layout-post-single-width;
-  padding: 0 15px;
+  @include padding(0, 0.5);

-  &__title {
+  .title {
    font-size: $typographic-base-font-size * 2;
    font-weight: 600;
    margin-left: auto;
@@ -18,37 +18,41 @@
    @include margin-bottom(0);
  }

-  &__body {
-    & figure {
+  .body {
+    figure {
      @include margin-bottom(1);

-      & blockquote {
+      blockquote {
        font-style: italic;
-        margin-top: 0;
        text-align: center;
+        @include margin-top(0);
        @include padding(1, 0);

-        & p {
+        p {
          font-size: $typographic-base-font-size * 1.6817;
-          margin-top: 0;
          max-width: $layout-post-width;
+          @include margin-top(0);
          @include margin-bottom(1);
          @include line-height(1.5);
        }
      }
    }

-    & a {
+    a {
      text-decoration: underline;
    }

-    & * {
+    * {
      margin-left: auto;
      margin-right: auto;
      max-width: $layout-post-width;
    }

-    & img {
+    h2 > a {
+      visibility: hidden;
+    }
+
+    img {
      max-width: 100%;
    }
  }
@@ -56,25 +60,30 @@

@include breakpoint-md {
  .content {
-    padding: 0;
+    @include padding-equal(0);

-    &__title {
+    .title {
      font-size: $typographic-base-font-size * 3;
      @include line-height(2.25);
      @include margin-top(2.25);
      @include margin-bottom(1.5);
    }

-    &__body {
+    .body {
      font-size: $typographic-base-font-size * 1.125;
      @include line-height(1.125);
      @include margin-bottom(1.125);

-      & p {
+      p {
        font-size: $typographic-base-font-size * 1.125;
        @include line-height(1.125);
        @include margin-bottom(1.125);
      }
+
+      h2 > a {
+        visibility: unset;
+        @include padding-right(1);
+      }
    }
  }
 }
--- a/src/components/Post/Content/Content.test.tsx
+++ b/src/components/Post/Content/Content.test.tsx
@@ -2,10 +2,15 @@ import React from "react";
 import renderer from "react-test-renderer";

 import { Content } from "@/components/Post/Content";
+import * as mocks from "@/mocks";

 describe("Content", () => {
  it("renders correctly", () => {
-    const props = { title: "test", body: "<p>test</p>" };
+    const props = {
+      title: mocks.markdownRemark.frontmatter.title,
+      body: mocks.markdownRemark.html,
+    };
+
    const tree = renderer.create(<Content {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Post/Content/Content.tsx
+++ b/src/components/Post/Content/Content.tsx
@@ -1,6 +1,6 @@
 import React from "react";

-import styles from "./Content.module.scss";
+import * as styles from "./Content.module.scss";

 interface Props {
  title: string;
@@ -9,11 +9,8 @@ interface Props {

 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 }}
-    />
+    <h1 className={styles.title}>{title}</h1>
+    <div className={styles.body} dangerouslySetInnerHTML={{ __html: body }} />
  </div>
 );

--- a/src/components/Post/Content/snapshots/Content.test.tsx.snap
+++ b/src/components/Post/Content/snapshots/Content.test.tsx.snap
@@ -1,19 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Content renders correctly 1`] = `
-<div
-  className="content"
->
-  <h1
-    className="content__title"
-  >
-    test
+<div>
+  <h1>
+    Perfecting the Art of Perfection
  </h1>
  <div
-    className="content__body"
    dangerouslySetInnerHTML={
      Object {
-        "__html": "<p>test</p>",
+        "__html": "<p>An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.</p>",
      }
    }
  />
--- a/src/components/Post/Meta/Meta.module.scss
+++ b/src/components/Post/Meta/Meta.module.scss
@@ -2,7 +2,7 @@
@import "../../../assets/scss/mixins";

 .meta {
-  &__date {
+  .date {
    font-style: italic;
  }
 }
--- a/src/components/Post/Meta/Meta.test.tsx
+++ b/src/components/Post/Meta/Meta.test.tsx
@@ -2,10 +2,13 @@ import React from "react";
 import renderer from "react-test-renderer";

 import { Meta } from "@/components/Post/Meta";
+import * as mocks from "@/mocks";

 describe("Meta", () => {
  it("renders correctly", () => {
-    const props = { date: "2016-09-01" };
+    const props = {
+      date: mocks.markdownRemark.frontmatter.date,
+    };

    const tree = renderer.create(<Meta {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
--- a/src/components/Post/Meta/Meta.tsx
+++ b/src/components/Post/Meta/Meta.tsx
@@ -1,6 +1,6 @@
 import React from "react";

-import styles from "./Meta.module.scss";
+import * as styles from "./Meta.module.scss";

 interface Props {
  date: string;
@@ -8,7 +8,7 @@ interface Props {

 const Meta: React.FC<Props> = ({ date }: Props) => (
  <div className={styles.meta}>
-    <p className={styles.meta__date}>
+    <p className={styles.date}>
      Published{" "}
      {new Date(date).toLocaleDateString("en-US", {
        year: "numeric",
--- a/src/components/Post/Meta/snapshots/Meta.test.tsx.snap
+++ b/src/components/Post/Meta/snapshots/Meta.test.tsx.snap
@@ -1,12 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Meta renders correctly 1`] = `
-<div
-  className="meta"
->
-  <p
-    className="meta__date"
-  >
+<div>
+  <p>
    Published
     
    Sep 1, 2016
--- a/src/components/Post/Post.module.scss
+++ b/src/components/Post/Post.module.scss
@@ -2,19 +2,23 @@
@import "../../assets/scss/mixins";

 .post {
-  &__footer {
-    margin: 0 auto;
-    max-width: $layout-post-width;
-    padding: 0 15px;
+  .content {
+    @include margin-auto();
  }

-  &__comments {
-    margin: 0 auto;
+  .footer {
    max-width: $layout-post-width;
-    padding: 0 15px;
+    @include padding(0, 0.5);
+    @include margin-auto();
  }

-  &__home-button {
+  .comments {
+    max-width: $layout-post-width;
+    @include padding(0, 0.5);
+    @include margin-auto();
+  }
+
+  .button {
    border: 1px solid $color-gray-border;
    border-radius: $button-border-radius;
    color: $color-base;
@@ -26,8 +30,8 @@
    margin-left: auto;
    margin-right: auto;
    max-width: 90px;
-    padding: 0 24px;
    text-align: center;
+    @include padding(0, 1);
    @include margin-top(1);

    &:hover,
@@ -39,20 +43,20 @@

@include breakpoint-md {
  .post {
-    &__footer {
-      padding: 0;
+    .footer {
+      @include padding-equal(0);
    }

-    &__comments {
-      padding: 0;
+    .comments {
+      @include padding-equal(0);
    }

-    &__home-button {
+    .button {
      left: 30px;
-      margin: 0;
-      max-width: auto;
+      max-width: none;
      position: fixed;
      top: 30px;
+      @include margin-equal(0);
    }
  }
 }
--- a/src/components/Post/Post.test.tsx
+++ b/src/components/Post/Post.test.tsx
@@ -17,24 +17,8 @@ describe("Post", () => {
    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 props = { post: mocks.markdownRemark };
    const tree = renderer.create(<Post {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Post/Post.tsx
+++ b/src/components/Post/Post.tsx
@@ -10,7 +10,7 @@ import { Content } from "./Content";
 import { Meta } from "./Meta";
 import { Tags } from "./Tags";

-import styles from "./Post.module.scss";
+import * as styles from "./Post.module.scss";

 interface Props {
  post: Node;
@@ -23,21 +23,21 @@ const Post: React.FC<Props> = ({ post }: Props) => {

  return (
    <div className={styles.post}>
-      <Link className={styles["post__home-button"]} to="/">
+      <Link className={styles.button} to="/">
        All Articles
      </Link>

-      <div className={styles.post__content}>
+      <div className={styles.content}>
        <Content body={html} title={title} />
      </div>

-      <div className={styles.post__footer}>
+      <div className={styles.footer}>
        <Meta date={date} />
        {tags && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
        <Author />
      </div>

-      <div className={styles.post__comments}>
+      <div className={styles.comments}>
        <Comments postSlug={slug} postTitle={post.frontmatter.title} />
      </div>
    </div>
--- a/src/components/Post/Tags/Tags.module.scss
+++ b/src/components/Post/Tags/Tags.module.scss
@@ -4,24 +4,30 @@
 .tags {
  @include margin-bottom(0.5);

-  &__list {
+  .list {
    list-style: none;
-    margin: 0 -10px;
-    padding: 0;
+    @include padding-equal(0);

-    &-item {
+    .item {
      display: inline-block;
-      margin: 10px 5px;
+      @include margin(0.5, 0.125);

-      &-link {
+      @include breakpoint-sm {
+        &:first-child {
+          @include margin-left(0);
+          @include padding-left(0);
+        }
+      }
+
+      .link {
        border: 1px solid $color-gray-border;
        border-radius: $button-border-radius;
        color: $color-base;
        display: inline-block;
        height: $button-height;
        line-height: $button-height;
-        padding: 0 24px;
        text-decoration: none;
+        @include padding(0, 0.75);

        &:hover,
        &:focus {
--- a/src/components/Post/Tags/Tags.test.tsx
+++ b/src/components/Post/Tags/Tags.test.tsx
@@ -2,13 +2,15 @@ import React from "react";
 import renderer from "react-test-renderer";

 import { Tags } from "@/components/Post/Tags";
+import * as mocks from "@/mocks";

 describe("Tags", () => {
  it("renders correctly", () => {
    const props = {
-      tags: ["test_0", "test_1"],
-      tagSlugs: ["/test_0", "/test_1"],
+      tags: mocks.markdownRemark.frontmatter.tags,
+      tagSlugs: mocks.markdownRemark.fields.tagsSlugs,
    };
+
    const tree = renderer.create(<Tags {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Post/Tags/Tags.tsx
+++ b/src/components/Post/Tags/Tags.tsx
@@ -1,6 +1,8 @@
 import React from "react";
+
 import { Link } from "gatsby";
-import styles from "./Tags.module.scss";
+
+import * as styles from "./Tags.module.scss";

 type Props = {
  tags: string[];
@@ -8,16 +10,17 @@ type Props = {
 };

 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>
-        ))}
+  <div className={styles.tags}>
+    <ul className={styles.list}>
+      {tagSlugs
+        ? tagSlugs.map((slug, i) => (
+            <li className={styles.item} key={slug}>
+              <Link to={slug} className={styles.link}>
+                {tags[i]}
+              </Link>
+            </li>
+          ))
+        : null}
    </ul>
  </div>
 );
--- a/src/components/Post/Tags/snapshots/Tags.test.tsx.snap
+++ b/src/components/Post/Tags/snapshots/Tags.test.tsx.snap
@@ -1,30 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Tags renders correctly 1`] = `
-<div
-  className="tags"
->
-  <ul
-    className="tags__list"
-  >
-    <li
-      className="tags__list-item"
-    >
+<div>
+  <ul>
+    <li>
      <a
-        className="tags__list-item-link"
-        href="/test_0"
+        href="/handwriting"
      >
-        test_0
+        Handwriting
      </a>
    </li>
-    <li
-      className="tags__list-item"
-    >
+    <li>
      <a
-        className="tags__list-item-link"
-        href="/test_1"
+        href="/helvetica"
      >
-        test_1
+        Helvetica
      </a>
    </li>
  </ul>
--- a/src/components/Post/snapshots/Post.test.tsx.snap
+++ b/src/components/Post/snapshots/Post.test.tsx.snap
@@ -1,87 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Post renders correctly 1`] = `
-<div
-  className="post"
->
+<div>
  <a
-    className="post__home-button"
    href="/"
  >
    All Articles
  </a>
-  <div
-    className="post__content"
-  >
-    <div
-      className="content"
-    >
-      <h1
-        className="content__title"
-      >
-        test
+  <div>
+    <div>
+      <h1>
+        Perfecting the Art of Perfection
      </h1>
      <div
-        className="content__body"
        dangerouslySetInnerHTML={
          Object {
-            "__html": "<p>test</p>",
+            "__html": "<p>An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.</p>",
          }
        }
      />
    </div>
  </div>
-  <div
-    className="post__footer"
-  >
-    <div
-      className="meta"
-    >
-      <p
-        className="meta__date"
-      >
+  <div>
+    <div>
+      <p>
        Published
         
        Sep 1, 2016
      </p>
    </div>
-    <div
-      className="tags"
-    >
-      <ul
-        className="tags__list"
-      >
-        <li
-          className="tags__list-item"
-        >
-          <a
-            className="tags__list-item-link"
-            href="/test_0"
-          >
-            test_0
-          </a>
-        </li>
-        <li
-          className="tags__list-item"
-        >
-          <a
-            className="tags__list-item-link"
-            href="/test_1"
-          >
-            test_1
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div
-      className="author"
-    >
-      <p
-        className="author__bio"
-      >
+    <div>
+      <p>
        Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
        <a
-          className="author__bio-twitter"
          href="https://www.twitter.com/#"
          rel="noopener noreferrer"
          target="_blank"
@@ -94,8 +45,6 @@ exports[`Post renders correctly 1`] = `
      </p>
    </div>
  </div>
-  <div
-    className="post__comments"
-  />
+  <div />
 </div>
 `;
--- a/src/components/Sidebar/Author/Author.module.scss
+++ b/src/components/Sidebar/Author/Author.module.scss
@@ -2,20 +2,22 @@
@import "../../../assets/scss/mixins";

 .author {
-  &__photo {
+  .photo {
    background-clip: padding-box;
    border-radius: 50%;
    display: inline-block;
-    margin-bottom: 0;
+    height: 75px;
+    width: 75px;
+    @include margin-bottom(0);
  }

-  &__title {
+  .title {
    font-size: $typographic-base-font-size * 1.125;
    font-weight: 600;
    @include line-height(1.125);
    @include margin(0.5, 0, 0.5, 0);

-    &-link {
+    .link {
      color: $color-base;

      &:hover,
@@ -25,7 +27,7 @@
    }
  }

-  &__subtitle {
+  .subtitle {
    color: $color-gray;
    @include line-height(1);
    @include margin-bottom(1);
--- a/src/components/Sidebar/Author/Author.test.tsx
+++ b/src/components/Sidebar/Author/Author.test.tsx
@@ -5,9 +5,8 @@ import { Author } from "@/components/Sidebar/Author";
 import * as mocks from "@/mocks";

 describe("Author", () => {
-  const props = { isIndex: false, author: mocks.author };
-
  it("renders correctly", () => {
+    const props = { isIndex: false, author: mocks.author };
    const tree = renderer.create(<Author {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Sidebar/Author/Author.tsx
+++ b/src/components/Sidebar/Author/Author.tsx
@@ -1,8 +1,10 @@
 import React from "react";

-import { Link, withPrefix } from "gatsby";
+import { Link } from "gatsby";

-import styles from "./Author.module.scss";
+import { Image } from "@/components/Image";
+
+import * as styles from "./Author.module.scss";

 type Props = {
  author: {
@@ -16,29 +18,23 @@ type Props = {
 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}
-      />
+      <Image alt={author.name} path={author.photo} className={styles.photo} />
    </Link>

-    {isIndex === true ? (
-      <h1 className={styles.author__title}>
-        <Link className={styles["author__title-link"]} to="/">
+    {isIndex ? (
+      <h1 className={styles.title}>
+        <Link className={styles.link} to="/">
          {author.name}
        </Link>
      </h1>
    ) : (
-      <h2 className={styles.author__title}>
-        <Link className={styles["author__title-link"]} to="/">
+      <h2 className={styles.title}>
+        <Link className={styles.link} to="/">
          {author.name}
        </Link>
      </h2>
    )}
-    <p className={styles.author__subtitle}>{author.bio}</p>
+    <p className={styles.subtitle}>{author.bio}</p>
  </div>
 );

--- a/src/components/Sidebar/Author/snapshots/Author.test.tsx.snap
+++ b/src/components/Sidebar/Author/snapshots/Author.test.tsx.snap
@@ -1,33 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Author renders correctly 1`] = `
-<div
-  className="author"
->
+<div>
  <a
    href="/"
-  >
-    <img
-      alt="John Doe"
-      className="author__photo"
-      height="75"
-      src="/static/photo.jpg"
-      width="75"
-    />
-  </a>
-  <h2
-    className="author__title"
-  >
+  />
+  <h2>
    <a
-      className="author__title-link"
      href="/"
    >
      John Doe
    </a>
  </h2>
-  <p
-    className="author__subtitle"
-  >
+  <p>
    Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
  </p>
 </div>
--- a/src/components/Sidebar/Contacts/Contacts.module.scss
+++ b/src/components/Sidebar/Contacts/Contacts.module.scss
@@ -4,17 +4,17 @@
 .contacts {
  @include margin-bottom(1);

-  &__list {
+  .list {
    display: flex;
    flex-flow: row wrap;
    flex-grow: 0;
    flex-shrink: 0;
    list-style: none;
-    margin: 10px -3px;
-    padding: 0;
-    width: 140px;
+    max-width: 150px;
+    @include padding-equal(0);
+    @include margin(0.5, 0);

-    &-item {
+    .item {
      align-content: center;
      align-items: center;
      border: 1px solid $color-gray-bg;
@@ -23,12 +23,16 @@
      height: $button-height;
      justify-content: center;
      line-height: $button-height;
-      margin: 4px;
-      padding: 0;
      text-align: center;
      width: $button-height;
+      @include padding-equal(0);
+      @include margin-equal(0.25);

-      &-link {
+      &:nth-child(3n + 1) {
+        @include margin-left(0);
+      }
+
+      .link {
        border: 0;
        color: $color-base;
        display: flex;
--- a/src/components/Sidebar/Contacts/Contacts.test.tsx
+++ b/src/components/Sidebar/Contacts/Contacts.test.tsx
@@ -5,9 +5,8 @@ import { Contacts } from "@/components/Sidebar/Contacts";
 import * as mocks from "@/mocks";

 describe("Contacts", () => {
-  const props = { contacts: mocks.contacts };
-
  it("renders correctly", () => {
+    const props = { contacts: mocks.contacts };
    const tree = renderer.create(<Contacts {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Sidebar/Contacts/Contacts.tsx
+++ b/src/components/Sidebar/Contacts/Contacts.tsx
@@ -1,10 +1,11 @@
 import React from "react";

 import { Icon } from "@/components/Icon";
+import { ICONS } from "@/constants";
 import { Dictionary } from "@/types";
 import { getContactHref, getIcon } from "@/utils";

-import styles from "./Contacts.module.scss";
+import * as styles from "./Contacts.module.scss";

 type Props = {
  contacts: Dictionary<string>;
@@ -12,19 +13,21 @@ type Props = {

 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 className={styles.list}>
+      {(Object.keys(contacts) as Array<keyof typeof ICONS>).map(name =>
+        contacts[name] ? (
+          <li className={styles.item} key={name}>
+            <a
+              className={styles.link}
+              href={getContactHref(name, contacts[name])}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <Icon name={name} icon={getIcon(name)} />
+            </a>
+          </li>
+        ) : null,
+      )}
    </ul>
  </div>
 );
--- a/src/components/Sidebar/Contacts/snapshots/Contacts.test.tsx.snap
+++ b/src/components/Sidebar/Contacts/snapshots/Contacts.test.tsx.snap
@@ -1,23 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Contacts renders correctly 1`] = `
-<div
-  className="contacts"
->
-  <ul
-    className="contacts__list"
-  >
-    <li
-      className="contacts__list-item"
-    >
+<div>
+  <ul>
+    <li>
      <a
-        className="contacts__list-item-link"
        href="#"
        rel="noopener noreferrer"
        target="_blank"
      >
        <svg
-          className="icon"
          viewBox="0 0 22 28"
        >
          <title>
@@ -29,17 +21,13 @@ exports[`Contacts renders correctly 1`] = `
        </svg>
      </a>
    </li>
-    <li
-      className="contacts__list-item"
-    >
+    <li>
      <a
-        className="contacts__list-item-link"
        href="mailto:#"
        rel="noopener noreferrer"
        target="_blank"
      >
        <svg
-          className="icon"
          viewBox="0 0 28 28"
        >
          <title>
@@ -51,17 +39,13 @@ exports[`Contacts renders correctly 1`] = `
        </svg>
      </a>
    </li>
-    <li
-      className="contacts__list-item"
-    >
+    <li>
      <a
-        className="contacts__list-item-link"
        href="https://github.com/#"
        rel="noopener noreferrer"
        target="_blank"
      >
        <svg
-          className="icon"
          viewBox="0 0 26 28"
        >
          <title>
@@ -73,17 +57,13 @@ exports[`Contacts renders correctly 1`] = `
        </svg>
      </a>
    </li>
-    <li
-      className="contacts__list-item"
-    >
+    <li>
      <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>
@@ -95,17 +75,13 @@ exports[`Contacts renders correctly 1`] = `
        </svg>
      </a>
    </li>
-    <li
-      className="contacts__list-item"
-    >
+    <li>
      <a
-        className="contacts__list-item-link"
        href="https://t.me/#"
        rel="noopener noreferrer"
        target="_blank"
      >
        <svg
-          className="icon"
          viewBox="0 0 28 28"
        >
          <title>
@@ -117,28 +93,6 @@ 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>
 `;
--- a/src/components/Sidebar/Copyright/Copyright.module.scss
+++ b/src/components/Sidebar/Copyright/Copyright.module.scss
@@ -4,6 +4,6 @@
@import "../../../assets/scss/mixins";

 .copyright {
-  color: color.adjust($color-gray, 18%);
+  color: color.adjust($color-gray, $whiteness: 18%);
  font-size: $typographic-small-font-size;
 }
--- a/src/components/Sidebar/Copyright/Copyright.test.tsx
+++ b/src/components/Sidebar/Copyright/Copyright.test.tsx
@@ -2,10 +2,11 @@ import React from "react";
 import renderer from "react-test-renderer";

 import { Copyright } from "@/components/Sidebar/Copyright";
+import * as mocks from "@/mocks";

 describe("Copyright", () => {
  it("renders correctly", () => {
-    const props = { copyright: "copyright" };
+    const props = { copyright: mocks.siteMetadata.site.siteMetadata.copyright };
    const tree = renderer.create(<Copyright {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Sidebar/Copyright/Copyright.tsx
+++ b/src/components/Sidebar/Copyright/Copyright.tsx
@@ -1,6 +1,6 @@
 import React from "react";

-import styles from "./Copyright.module.scss";
+import * as styles from "./Copyright.module.scss";

 type Props = {
  copyright: string;
--- a/src/components/Sidebar/Copyright/snapshots/Copyright.test.tsx.snap
+++ b/src/components/Sidebar/Copyright/snapshots/Copyright.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Copyright renders correctly 1`] = `
-<div
-  className="copyright"
->
-  copyright
+<div>
+  All rights reserved.
 </div>
 `;
--- a/src/components/Sidebar/Menu/Menu.module.scss
+++ b/src/components/Sidebar/Menu/Menu.module.scss
@@ -4,16 +4,16 @@
 .menu {
  @include margin-bottom(1);

-  &__list {
+  .list {
    list-style: none;
-    margin: 0;
-    padding: 0;
+    @include margin-equal(0);
+    @include padding-equal(0);

-    &-item {
-      margin: 10px 0;
-      padding: 0;
+    .item {
+      @include margin(0.5, 0);
+      @include padding-equal(0);

-      &-link {
+      .link {
        border: 0;
        color: $typographic-base-font-color;
        font-size: $typographic-base-font-size;
@@ -25,7 +25,7 @@
          color: $color-primary;
        }

-        &--active {
+        &.active {
          border-bottom: 1px solid $color-base;
          color: $color-base;
        }
--- a/src/components/Sidebar/Menu/Menu.test.tsx
+++ b/src/components/Sidebar/Menu/Menu.test.tsx
@@ -5,11 +5,8 @@ import { Menu } from "@/components/Sidebar/Menu";
 import * as mocks from "@/mocks";

 describe("Menu", () => {
-  const props = {
-    menu: mocks.menu,
-  };
-
  it("renders correctly", () => {
+    const props = { menu: mocks.menu };
    const tree = renderer.create(<Menu {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Sidebar/Menu/Menu.tsx
+++ b/src/components/Sidebar/Menu/Menu.tsx
@@ -2,24 +2,24 @@ import React from "react";

 import { Link } from "gatsby";

-import styles from "./Menu.module.scss";
+import * as styles from "./Menu.module.scss";

 type Props = {
-  menu: {
+  menu: Array<{
    label: string;
    path: string;
-  }[];
+  }>;
 };

 const Menu: React.FC<Props> = ({ menu }: Props) => (
  <nav className={styles.menu}>
-    <ul className={styles.menu__list}>
+    <ul className={styles.list}>
      {menu.map(item => (
-        <li className={styles["menu__list-item"]} key={item.path}>
+        <li className={styles.item} key={item.path}>
          <Link
            to={item.path}
-            className={styles["menu__list-item-link"]}
-            activeClassName={styles["menu__list-item-link--active"]}
+            className={styles.link}
+            activeClassName={styles.active}
          >
            {item.label}
          </Link>
--- a/src/components/Sidebar/Menu/snapshots/Menu.test.tsx.snap
+++ b/src/components/Sidebar/Menu/snapshots/Menu.test.tsx.snap
@@ -1,37 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Menu renders correctly 1`] = `
-<nav
-  className="menu"
->
-  <ul
-    className="menu__list"
-  >
-    <li
-      className="menu__list-item"
-    >
+<nav>
+  <ul>
+    <li>
      <a
-        className="menu__list-item-link"
        href="/"
      >
        Articles
      </a>
    </li>
-    <li
-      className="menu__list-item"
-    >
+    <li>
      <a
-        className="menu__list-item-link"
        href="/pages/about"
      >
        About Me
      </a>
    </li>
-    <li
-      className="menu__list-item"
-    >
+    <li>
      <a
-        className="menu__list-item-link"
        href="/pages/contacts"
      >
        Contact Me
--- a/src/components/Sidebar/Sidebar.module.scss
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -3,8 +3,9 @@

 .sidebar {
  width: 100%;
-  &__inner {
-    padding: 25px 20px 0;
+
+  .inner {
+    @include padding(1, 0.75, 0);
    position: relative;
  }
 }
@@ -12,8 +13,10 @@
@include breakpoint-sm {
  .sidebar {
    lost-column: 5/12;
-    &__inner {
-      padding: 30px 20px 0;
+
+    .inner {
+      @include padding(1.25, 0.75, 0);
+
      &:after {
        background: $color-gray-border;
        background: linear-gradient(
@@ -37,8 +40,9 @@
@include breakpoint-md {
  .sidebar {
    lost-column: 1/3;
-    &__inner {
-      padding: 40px;
+
+    .inner {
+      @include padding-equal(1.5);
    }
  }
 }
--- a/src/components/Sidebar/Sidebar.test.tsx
+++ b/src/components/Sidebar/Sidebar.test.tsx
@@ -17,11 +17,8 @@ describe("Sidebar", () => {
    mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
  });

-  const props = {
-    isIndex: true,
-  };
-
  it("renders correctly", () => {
+    const props = { isIndex: true };
    const tree = renderer.create(<Sidebar {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -7,7 +7,7 @@ import { Contacts } from "./Contacts";
 import { Copyright } from "./Copyright";
 import { Menu } from "./Menu";

-import styles from "./Sidebar.module.scss";
+import * as styles from "./Sidebar.module.scss";

 type Props = {
  isIndex?: boolean;
@@ -18,7 +18,7 @@ const Sidebar = ({ isIndex }: Props) => {

  return (
    <div className={styles.sidebar}>
-      <div className={styles.sidebar__inner}>
+      <div className={styles.inner}>
        <Author author={author} isIndex={isIndex} />
        <Menu menu={menu} />
        <Contacts contacts={author.contacts} />
--- a/src/components/Sidebar/snapshots/Sidebar.test.tsx.snap
+++ b/src/components/Sidebar/snapshots/Sidebar.test.tsx.snap
@@ -1,73 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Sidebar renders correctly 1`] = `
-<div
-  className="sidebar"
->
-  <div
-    className="sidebar__inner"
-  >
-    <div
-      className="author"
-    >
+<div>
+  <div>
+    <div>
      <a
        href="/"
-      >
-        <img
-          alt="John Doe"
-          className="author__photo"
-          height="75"
-          src="/static/photo.jpg"
-          width="75"
-        />
-      </a>
-      <h1
-        className="author__title"
-      >
+      />
+      <h1>
        <a
-          className="author__title-link"
          href="/"
        >
          John Doe
        </a>
      </h1>
-      <p
-        className="author__subtitle"
-      >
+      <p>
        Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
      </p>
    </div>
-    <nav
-      className="menu"
-    >
-      <ul
-        className="menu__list"
-      >
-        <li
-          className="menu__list-item"
-        >
+    <nav>
+      <ul>
+        <li>
          <a
-            className="menu__list-item-link"
            href="/"
          >
            Articles
          </a>
        </li>
-        <li
-          className="menu__list-item"
-        >
+        <li>
          <a
-            className="menu__list-item-link"
            href="/pages/about"
          >
            About Me
          </a>
        </li>
-        <li
-          className="menu__list-item"
-        >
+        <li>
          <a
-            className="menu__list-item-link"
            href="/pages/contacts"
          >
            Contact Me
@@ -75,23 +43,15 @@ exports[`Sidebar renders correctly 1`] = `
        </li>
      </ul>
    </nav>
-    <div
-      className="contacts"
-    >
-      <ul
-        className="contacts__list"
-      >
-        <li
-          className="contacts__list-item"
-        >
+    <div>
+      <ul>
+        <li>
          <a
-            className="contacts__list-item-link"
            href="#"
            rel="noopener noreferrer"
            target="_blank"
          >
            <svg
-              className="icon"
              viewBox="0 0 22 28"
            >
              <title>
@@ -103,17 +63,13 @@ exports[`Sidebar renders correctly 1`] = `
            </svg>
          </a>
        </li>
-        <li
-          className="contacts__list-item"
-        >
+        <li>
          <a
-            className="contacts__list-item-link"
            href="mailto:#"
            rel="noopener noreferrer"
            target="_blank"
          >
            <svg
-              className="icon"
              viewBox="0 0 28 28"
            >
              <title>
@@ -125,17 +81,13 @@ exports[`Sidebar renders correctly 1`] = `
            </svg>
          </a>
        </li>
-        <li
-          className="contacts__list-item"
-        >
+        <li>
          <a
-            className="contacts__list-item-link"
            href="https://github.com/#"
            rel="noopener noreferrer"
            target="_blank"
          >
            <svg
-              className="icon"
              viewBox="0 0 26 28"
            >
              <title>
@@ -147,17 +99,13 @@ exports[`Sidebar renders correctly 1`] = `
            </svg>
          </a>
        </li>
-        <li
-          className="contacts__list-item"
-        >
+        <li>
          <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>
@@ -169,17 +117,13 @@ exports[`Sidebar renders correctly 1`] = `
            </svg>
          </a>
        </li>
-        <li
-          className="contacts__list-item"
-        >
+        <li>
          <a
-            className="contacts__list-item-link"
            href="https://t.me/#"
            rel="noopener noreferrer"
            target="_blank"
          >
            <svg
-              className="icon"
              viewBox="0 0 28 28"
            >
              <title>
@@ -191,33 +135,9 @@ exports[`Sidebar 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>
-    <div
-      className="copyright"
-    >
+    <div>
      All rights reserved.
    </div>
  </div>
				`@@ -0,0 +1 @@`
				`export { default as Image } from "./Image";`