refactor(starter): upgrade and move to typescript

src/assets/scss/_variables.scss

@@ -1,17 +1,16 @@
 @use "sass:math";
 @use "sass:color";
 
-$color-base: #222222;
-$color-primary: #5d93ff;
-$color-secondary: #f7a046;
+$color-base: hsl(0, 0%, 13%);
+$color-primary: hsl(220, 100%, 68%);
+$color-secondary: hsl(31, 92%, 62%);
 
-$color-white: #ffffff;
-$color-gray: color.adjust($color-base, 40%);
-$color-gray-border: color.adjust($color-base, 77%);
-$color-gray-bg: color.adjust($color-base, 79%);
+$color-white: hsl(0, 0%, 100%);
+$color-gray: color.adjust($color-base, $lightness: 40%);
+$color-gray-border: color.adjust($color-base, $lightness: 77%);
+$color-gray-bg: color.adjust($color-base, $lightness: 79%);
 
-$typographic-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI",
-  "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+$typographic-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
 
 $typographic-root-font-size: 100;
 $typographic-base-font-size: 16px;
@@ -23,10 +22,7 @@ $typographic-base-font-color: $color-base;
 $typographic-link-p-font-color: $color-primary;
 $typographic-link-s-font-color: $color-secondary;
 
-$typographic-leading: math.round(
-  16 * math.div($typographic-root-font-size, 100) *
-    $typographic-base-line-height
-);
+$typographic-leading: math.round(16 * math.div($typographic-root-font-size, 100) * $typographic-base-line-height);
 
 $button-height: 35px;
 $button-border-radius: 20px;

src/assets/scss/base/_generic.scss

@@ -13,7 +13,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   line-height: $typographic-base-line-height;
   margin: 0 0 0 calc(100vw - 100%);
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
@@ -148,11 +148,6 @@ figcaption {
   text-align: center;
 }
 
-.anchor {
-  margin-left: -30px !important;
-  padding-right: 14px !important;
-}
-
 @include breakpoint-sm {
   figure.float-left,
   figure.float-right {

src/assets/scss/base/_prism.scss

@@ -101,8 +101,8 @@ pre[class*="language-"]::selection {
   color: #b58900;
 }
 
-.token.important,
 .token.regex,
+.token.important,
 .token.variable {
   color: #cb4b16;
 }

src/assets/scss/mixins/_margin.scss

@@ -1,5 +1,17 @@
 @import "../variables";
 
+@mixin margin-auto($number: 0) {
+  margin: #{$number * $typographic-leading + "px"} auto;
+}
+
+@mixin margin-left($number) {
+  margin-left: #{$number * $typographic-leading + "px"};
+}
+
+@mixin margin-right($number) {
+  margin-right: #{$number * $typographic-leading + "px"};
+}
+
 @mixin margin-top($number) {
   margin-top: #{$number * $typographic-leading + "px"};
 }
@@ -8,36 +20,25 @@
   margin-bottom: #{$number * $typographic-leading + "px"};
 }
 
+@mixin margin-equal($number) {
+  margin: #{$number * $typographic-leading + "px"};
+}
+
 @mixin margin($top, $right, $bottom: null, $left: null) {
   @if not $left and not $bottom {
-    margin: #{$top *
-      $typographic-leading +
-      "px"}
-      #{$right *
-      $typographic-leading +
-      "px"};
+    margin:
+      #{$top * $typographic-leading + "px"}
+      #{$right * $typographic-leading + "px"};
   } @else if not $left or $left == $right {
-    margin: #{$top *
-      $typographic-leading +
-      "px"}
-      #{$right *
-      $typographic-leading +
-      "px"}
-      #{$bottom *
-      $typographic-leading +
-      "px"};
+    margin:
+      #{$top * $typographic-leading + "px"}
+      #{$right * $typographic-leading + "px"}
+      #{$bottom * $typographic-leading + "px"};
   } @else {
-    margin: #{$top *
-      $typographic-leading +
-      "px"}
-      #{$right *
-      $typographic-leading +
-      "px"}
-      #{$bottom *
-      $typographic-leading +
-      "px"}
-      #{$left *
-      $typographic-leading +
-      "px"};
+    margin:
+      #{$top * $typographic-leading + "px"}
+      #{$right * $typographic-leading + "px"}
+      #{$bottom * $typographic-leading + "px"}
+      #{$left * $typographic-leading + "px"};
   }
 }

src/assets/scss/mixins/_padding.scss

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

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;
 

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

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>

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>

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;

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

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

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

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;

src/components/Image/index.ts

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

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

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;

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

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

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();

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

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>

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

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

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 : "/"}

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

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

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

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"

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"

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

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

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

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

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>",
       }
     }
   />

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

@@ -2,7 +2,7 @@
 @import "../../../assets/scss/mixins";
 
 .meta {
-  &__date {
+  .date {
     font-style: italic;
   }
 }

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();

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",

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

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

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

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>

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 {

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

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

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>

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

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

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

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

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>

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;

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

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

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

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

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

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;

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

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

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

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>

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

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

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

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} />

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>

src/constants/icons.ts

@@ -1,65 +1,61 @@
 const ICONS = {
-  TWITTER: {
+  twitter: {
     path: "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",
     viewBox: "0 0 26 28",
   },
-  FACEBOOK: {
+  facebook: {
     path: "M14.984 0.187v4.125h-2.453c-1.922 0-2.281 0.922-2.281 2.25v2.953h4.578l-0.609 4.625h-3.969v11.859h-4.781v-11.859h-3.984v-4.625h3.984v-3.406c0-3.953 2.422-6.109 5.953-6.109 1.687 0 3.141 0.125 3.563 0.187z",
     viewBox: "0 0 16 28",
   },
-  TELEGRAM: {
+  telegram: {
     path: "M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z",
     viewBox: "0 0 28 28",
   },
-  VKONTAKTE: {
-    path: "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",
-    viewBox: "0 0 31 28",
-  },
-  GITHUB: {
+  github: {
     path: "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",
     viewBox: "0 0 26 28",
   },
-  EMAIL: {
+  email: {
     path: "M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z",
     viewBox: "0 0 28 28",
   },
-  RSS: {
+  rss: {
     path: "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",
     viewBox: "0 0 22 28",
   },
-  LINKEDIN: {
+  linkedin: {
     path: "M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z",
     viewBox: "0 0 24 24",
   },
-  INSTAGRAM: {
+  instagram: {
     path: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z",
     viewBox: "0 0 24 24",
   },
-  LINE: {
+  line: {
     path: "M24 10.304c0-5.369-5.383-9.738-12-9.738-6.616 0-12 4.369-12 9.738 0 4.814 4.269 8.846 10.036 9.608.391.084.922.258 1.057.592.121.303.079.778.039 1.085l-.171 1.027c-.053.303-.242 1.186 1.039.647 1.281-.54 6.911-4.069 9.428-6.967 1.739-1.907 2.572-3.843 2.572-5.992zm-18.988-2.595c.129 0 .234.105.234.234v4.153h2.287c.129 0 .233.104.233.233v.842c0 .129-.104.234-.233.234h-3.363c-.063 0-.119-.025-.161-.065l-.001-.001-.002-.002-.001-.001-.003-.003c-.04-.042-.065-.099-.065-.161v-5.229c0-.129.104-.234.233-.234h.842zm14.992 0c.129 0 .233.105.233.234v.842c0 .129-.104.234-.233.234h-2.287v.883h2.287c.129 0 .233.105.233.234v.842c0 .129-.104.234-.233.234h-2.287v.884h2.287c.129 0 .233.105.233.233v.842c0 .129-.104.234-.233.234h-3.363c-.063 0-.12-.025-.162-.065l-.003-.004-.003-.003c-.04-.042-.066-.099-.066-.161v-5.229c0-.062.025-.119.065-.161l.004-.004.003-.003c.042-.04.099-.066.162-.066h3.363zm-10.442.001c.129 0 .234.104.234.233v5.229c0 .128-.105.233-.234.233h-.842c-.129 0-.234-.105-.234-.233v-5.229c0-.129.105-.233.234-.233h.842zm2.127 0h.008l.012.001.013.001.01.001.013.003.008.003.014.004.008.003.013.006.007.003.013.007.007.004.012.009.006.004.013.011.004.004.014.014.002.002.018.023 2.396 3.236v-3.106c0-.129.105-.233.234-.233h.841c.13 0 .234.104.234.233v5.229c0 .128-.104.233-.234.233h-.841l-.06-.008-.004-.001-.015-.005-.007-.003-.012-.004-.011-.006-.007-.003-.014-.009-.002-.002-.06-.058-2.399-3.24v3.106c0 .128-.104.233-.234.233h-.841c-.129 0-.234-.105-.234-.233v-5.229c0-.129.105-.233.234-.233h.841z",
     viewBox: "0 0 24 24",
   },
-  GITLAB: {
+  gitlab: {
     path: "M 38.011719 4 C 37.574219 3.996094 37.183594 4.273438 37.046875 4.691406 L 32.074219 20 L 17.925781 20 L 12.953125 4.691406 C 12.820313 4.289063 12.449219 4.011719 12.023438 4 C 11.597656 3.992188 11.214844 4.25 11.0625 4.648438 L 5.070313 20.640625 C 5.066406 20.640625 5.066406 20.644531 5.0625 20.648438 L 2.0625 28.648438 C 1.90625 29.070313 2.046875 29.542969 2.414063 29.808594 L 24.40625 45.800781 L 24.410156 45.808594 C 24.414063 45.808594 24.414063 45.808594 24.414063 45.8125 C 24.425781 45.820313 24.441406 45.828125 24.453125 45.835938 C 24.46875 45.84375 24.480469 45.855469 24.496094 45.863281 C 24.5 45.863281 24.5 45.867188 24.503906 45.867188 C 24.503906 45.867188 24.507813 45.871094 24.511719 45.871094 C 24.515625 45.875 24.519531 45.878906 24.527344 45.878906 C 24.53125 45.882813 24.539063 45.886719 24.542969 45.890625 C 24.5625 45.898438 24.585938 45.910156 24.609375 45.917969 C 24.609375 45.917969 24.609375 45.917969 24.609375 45.921875 C 24.632813 45.929688 24.65625 45.9375 24.675781 45.945313 C 24.679688 45.945313 24.679688 45.945313 24.683594 45.949219 C 24.699219 45.953125 24.714844 45.957031 24.734375 45.964844 C 24.742188 45.964844 24.75 45.96875 24.761719 45.96875 C 24.761719 45.972656 24.761719 45.972656 24.761719 45.96875 C 24.78125 45.976563 24.800781 45.980469 24.820313 45.984375 C 24.847656 45.988281 24.871094 45.992188 24.898438 45.996094 C 24.9375 45.996094 24.980469 46 25.019531 46 C 25.058594 45.996094 25.09375 45.996094 25.128906 45.988281 C 25.144531 45.988281 25.15625 45.988281 25.171875 45.984375 C 25.171875 45.984375 25.175781 45.984375 25.179688 45.984375 C 25.1875 45.980469 25.191406 45.980469 25.199219 45.980469 C 25.203125 45.980469 25.207031 45.976563 25.214844 45.976563 C 25.222656 45.972656 25.234375 45.972656 25.242188 45.96875 C 25.257813 45.964844 25.269531 45.960938 25.28125 45.957031 C 25.289063 45.957031 25.292969 45.957031 25.296875 45.953125 C 25.300781 45.953125 25.304688 45.953125 25.308594 45.953125 C 25.324219 45.945313 25.34375 45.9375 25.359375 45.933594 C 25.378906 45.925781 25.394531 45.917969 25.410156 45.910156 C 25.414063 45.910156 25.414063 45.910156 25.417969 45.90625 C 25.421875 45.90625 25.425781 45.90625 25.429688 45.902344 C 25.4375 45.898438 25.445313 45.894531 25.453125 45.890625 C 25.476563 45.878906 25.496094 45.867188 25.515625 45.855469 C 25.523438 45.851563 25.527344 45.847656 25.53125 45.84375 C 25.535156 45.84375 25.539063 45.839844 25.542969 45.839844 C 25.558594 45.828125 25.574219 45.820313 25.589844 45.808594 L 25.597656 45.796875 L 47.589844 29.808594 C 47.953125 29.542969 48.09375 29.070313 47.9375 28.648438 L 44.945313 20.675781 C 44.941406 20.667969 44.9375 20.65625 44.9375 20.648438 L 38.9375 4.648438 C 38.789063 4.261719 38.425781 4.003906 38.011719 4 Z M 8.066406 22 L 16.472656 22 L 22.328125 40.015625 Z M 33.527344 22 L 41.933594 22 L 27.671875 40.015625 Z M 6.3125 23.007813 L 19.6875 39.902344 L 4.203125 28.640625 Z M 43.6875 23.007813 L 45.796875 28.640625 L 30.3125 39.902344 Z",
     viewBox: "0 0 50 50",
   },
-  WEIBO: {
+  weibo: {
     path: "M 16.28125 3.8125 C 16.054688 3.828125 15.816406 3.859375 15.59375 3.90625 C 15.179688 3.996094 14.910156 4.402344 15 4.8125 C 15.085938 5.226563 15.492188 5.496094 15.90625 5.40625 C 17.179688 5.136719 18.566406 5.53125 19.5 6.5625 C 20.433594 7.597656 20.679688 9.011719 20.28125 10.25 C 20.152344 10.652344 20.378906 11.089844 20.78125 11.21875 C 21.183594 11.347656 21.617188 11.121094 21.75 10.71875 C 22.3125 8.976563 21.96875 7.015625 20.65625 5.5625 C 19.671875 4.46875 18.296875 3.875 16.9375 3.8125 C 16.710938 3.800781 16.507813 3.796875 16.28125 3.8125 Z M 10.0625 6.09375 C 8.667969 6.242188 6.699219 7.332031 4.96875 9.0625 C 3.082031 10.949219 2 12.957031 2 14.6875 C 2 17.996094 6.226563 20 10.375 20 C 15.8125 20 19.4375 16.820313 19.4375 14.3125 C 19.4375 12.796875 18.179688 11.949219 17.03125 11.59375 C 16.75 11.507813 16.539063 11.464844 16.6875 11.09375 C 17.007813 10.289063 17.066406 9.589844 16.71875 9.09375 C 16.070313 8.164063 14.253906 8.210938 12.21875 9.0625 C 12.21875 9.0625 11.585938 9.351563 11.75 8.84375 C 12.0625 7.835938 12.019531 6.988281 11.53125 6.5 C 11.1875 6.152344 10.695313 6.027344 10.0625 6.09375 Z M 16.8125 6.5 C 16.589844 6.488281 16.375 6.515625 16.15625 6.5625 C 15.800781 6.636719 15.578125 7.019531 15.65625 7.375 C 15.734375 7.730469 16.082031 7.953125 16.4375 7.875 C 16.863281 7.785156 17.34375 7.902344 17.65625 8.25 C 17.96875 8.597656 18.042969 9.054688 17.90625 9.46875 C 17.792969 9.816406 17.964844 10.199219 18.3125 10.3125 C 18.660156 10.421875 19.046875 10.253906 19.15625 9.90625 C 19.429688 9.058594 19.265625 8.085938 18.625 7.375 C 18.144531 6.84375 17.476563 6.53125 16.8125 6.5 Z M 10.8125 10.90625 C 13.582031 11.003906 15.8125 12.378906 16 14.28125 C 16.214844 16.457031 13.71875 18.484375 10.40625 18.8125 C 7.09375 19.140625 4.214844 17.640625 4 15.46875 C 3.785156 13.292969 6.316406 11.265625 9.625 10.9375 C 10.039063 10.898438 10.417969 10.890625 10.8125 10.90625 Z M 8.9375 13 C 7.804688 13.101563 6.734375 13.75 6.25 14.6875 C 5.589844 15.964844 6.242188 17.378906 7.75 17.84375 C 9.308594 18.324219 11.140625 17.597656 11.78125 16.21875 C 12.410156 14.871094 11.605469 13.472656 10.0625 13.09375 C 9.691406 13 9.316406 12.964844 8.9375 13 Z M 8.21875 15.0625 C 8.351563 15.066406 8.472656 15.109375 8.59375 15.15625 C 9.082031 15.355469 9.234375 15.878906 8.9375 16.34375 C 8.632813 16.804688 7.988281 17.027344 7.5 16.8125 C 7.019531 16.601563 6.882813 16.074219 7.1875 15.625 C 7.414063 15.289063 7.824219 15.058594 8.21875 15.0625 Z",
     viewBox: "2 2 19 19",
   },
-  CODEPEN: {
+  codepen: {
     path: "M24 8.182l-.018-.087-.017-.05c-.01-.024-.018-.05-.03-.075-.003-.018-.015-.034-.02-.05l-.035-.067-.03-.05-.044-.06-.046-.045-.06-.045-.046-.03-.06-.044-.044-.04-.015-.02L12.58.19c-.347-.232-.796-.232-1.142 0L.453 7.502l-.015.015-.044.035-.06.05-.038.04-.05.056-.037.045-.05.06c-.02.017-.03.03-.03.046l-.05.06-.02.06c-.02.01-.02.04-.03.07l-.01.05C0 8.12 0 8.15 0 8.18v7.497c0 .044.003.09.01.135l.01.046c.005.03.01.06.02.086l.015.05c.01.027.016.053.027.075l.022.05c0 .01.015.04.03.06l.03.04c.015.01.03.04.045.06l.03.04.04.04c.01.013.01.03.03.03l.06.042.04.03.01.014 10.97 7.33c.164.12.375.163.57.163s.39-.06.57-.18l10.99-7.28.014-.01.046-.037.06-.043.048-.036.052-.058.033-.045.04-.06.03-.05.03-.07.016-.052.03-.077.015-.045.03-.08v-7.5c0-.05 0-.095-.016-.14l-.014-.045.044.003zm-11.99 6.28l-3.65-2.44 3.65-2.442 3.65 2.44-3.65 2.44zm-1.034-6.674l-4.473 2.99L2.89 8.362l8.086-5.39V7.79zm-6.33 4.233l-2.582 1.73V10.3l2.582 1.726zm1.857 1.25l4.473 2.99v4.82L2.89 15.69l3.618-2.417v-.004zm6.537 2.99l4.474-2.98 3.613 2.42-8.087 5.39v-4.82zm6.33-4.23l2.583-1.72v3.456l-2.583-1.73zm-1.855-1.24L13.042 7.8V2.97l8.085 5.39-3.612 2.415v.003z",
     viewBox: "0 0 24 24",
   },
-  YOUTUBE: {
+  youtube: {
     path: "M21.582,6.186c-0.23-0.86-0.908-1.538-1.768-1.768C18.254,4,12,4,12,4S5.746,4,4.186,4.418 c-0.86,0.23-1.538,0.908-1.768,1.768C2,7.746,2,12,2,12s0,4.254,0.418,5.814c0.23,0.86,0.908,1.538,1.768,1.768 C5.746,20,12,20,12,20s6.254,0,7.814-0.418c0.861-0.23,1.538-0.908,1.768-1.768C22,16.254,22,12,22,12S22,7.746,21.582,6.186z M10,15.464V8.536L16,12L10,15.464z",
     viewBox: "0 0 24 24",
   },
-  SOUNDCLOUD: {
+  soundcloud: {
     path: "M 14.5 6 C 12.601563 6 11 6.90625 10 8.40625 L 10 17 L 20.5 17 C 22.398438 17 24 15.398438 24 13.5 C 24 11.601563 22.398438 10 20.5 10 C 20.300781 10 20.011719 9.992188 19.8125 10.09375 C 19.210938 7.695313 17 6 14.5 6 Z M 8 8 L 8 17 L 9 17 L 9 8.09375 C 8.699219 7.992188 8.300781 8 8 8 Z M 7 8.09375 C 6.601563 8.195313 6.300781 8.398438 6 8.5 L 6 17 L 7 17 Z M 5 9.40625 C 4.5 9.90625 4.195313 10.488281 4.09375 11.1875 L 4 11.1875 L 4 17 L 5 17 Z M 3 11 C 2.601563 11 2.300781 11.085938 2 11.1875 L 2 16.8125 C 2.300781 16.914063 2.601563 17 3 17 Z M 1 11.8125 C 0.398438 12.3125 0 13.101563 0 14 C 0 14.898438 0.398438 15.6875 1 16.1875 Z",
     viewBox: "0 0 24 24",
   },
-  MEDIUM: {
+  medium: {
     path: "M2.846 6.887a.928.928 0 00-.303-.784l-2.24-2.7V3h6.958l5.378 11.795L17.367 3H24v.403L22.084 5.24a.561.561 0 00-.213.538v13.498a.56.56 0 00.213.537l1.871 1.837v.403h-9.412v-.403l1.939-1.882c.19-.19.19-.246.19-.537V8.321l-5.389 13.688h-.728L4.28 8.321v9.174c-.052.385.076.774.347 1.052l2.521 3.058v.404H0v-.404l2.521-3.058c.27-.279.39-.67.325-1.052V6.887z",
     viewBox: "0 0 24 24",
   },

src/hooks/use-site-metadata.ts

@@ -25,7 +25,6 @@ const useSiteMetadata = () => {
                 linkedin
                 telegram
                 instagram
-                vkontakte
                 soundcloud
               }
             }

src/hooks/use-tags-list.ts

@@ -23,7 +23,7 @@ const useTagsList = () => {
             totalCount
           }
         }
-      }>
+      }
     `,
   );
 

src/templates/CategoriesListTemplate/index.ts

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

src/templates/CategoriesTemplate/CategoriesTemplate.test.tsx

@@ -5,24 +5,24 @@ import { StaticQuery, useStaticQuery } from "gatsby";
 
 import * as mocks from "@/mocks";
 
-import CategoriesListTemplate from "./CategoriesListTemplate";
+import CategoriesTemplate from "./CategoriesTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
-describe("CategoriesListTemplate", () => {
-  const props = {
-    ...mocks.siteMetadata,
-    ...mocks.allMarkdownRemark,
-  };
-
+describe("CategoriesTemplate", () => {
   beforeEach(() => {
+    const props = {
+      ...mocks.siteMetadata,
+      allMarkdownRemark: mocks.allMarkdownRemark,
+    };
+
     mockedStaticQuery.mockImplementationOnce(({ render }) => render(props));
     mockedUseStaticQuery.mockReturnValue(props);
   });
 
   it("renders correctly", () => {
-    const tree = renderer.create(<CategoriesListTemplate />).toJSON();
+    const tree = renderer.create(<CategoriesTemplate />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

src/templates/CategoriesTemplate/CategoriesTemplate.tsx

@@ -8,7 +8,7 @@ import { Sidebar } from "@/components/Sidebar";
 import { useCategoriesList, useSiteMetadata } from "@/hooks";
 import { toKebabCase } from "@/utils";
 
-const CategoriesListTemplate: React.FC = () => {
+const CategoriesTemplate: React.FC = () => {
   const { title, subtitle } = useSiteMetadata();
   const categories = useCategoriesList();
 
@@ -30,4 +30,4 @@ const CategoriesListTemplate: React.FC = () => {
   );
 };
 
-export default CategoriesListTemplate;
+export default CategoriesTemplate;

src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap

@@ -1,76 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CategoriesListTemplate renders correctly 1`] = `
-<div
-  className="layout"
->
-  <div
-    className="sidebar"
-  >
-    <div
-      className="sidebar__inner"
-    >
-      <div
-        className="author"
-      >
+exports[`CategoriesTemplate renders correctly 1`] = `
+<div>
+  <div>
+    <div>
+      <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>
-      <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
@@ -78,23 +44,15 @@ exports[`CategoriesListTemplate 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>
@@ -106,17 +64,13 @@ exports[`CategoriesListTemplate 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>
@@ -128,17 +82,13 @@ exports[`CategoriesListTemplate 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>
@@ -150,17 +100,13 @@ exports[`CategoriesListTemplate 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>
@@ -172,17 +118,13 @@ exports[`CategoriesListTemplate 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>
@@ -194,51 +136,19 @@ exports[`CategoriesListTemplate 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>
   </div>
-  <div
-    className="page"
-  >
-    <div
-      className="page__inner"
-    >
-      <h1
-        className="page__title"
-      >
+  <div>
+    <div>
+      <h1>
         Categories
       </h1>
-      <div
-        className="page__body"
-      >
+      <div>
         <ul>
           <li>
             <a

src/templates/CategoryTemplate/CategoryTemplate.test.tsx

@@ -11,13 +11,6 @@ const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("CategoryTemplate", () => {
-  const props = {
-    data: {
-      ...mocks.allMarkdownRemark,
-    },
-    ...mocks.pageContext,
-  };
-
   beforeEach(() => {
     mockedStaticQuery.mockImplementationOnce(({ render }) =>
       render(mocks.siteMetadata),
@@ -26,6 +19,13 @@ describe("CategoryTemplate", () => {
   });
 
   it("renders correctly", () => {
+    const props = {
+      data: {
+        allMarkdownRemark: mocks.allMarkdownRemark,
+      },
+      pageContext: mocks.pageContext,
+    };
+
     const tree = renderer.create(<CategoryTemplate {...props} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

src/templates/CategoryTemplate/CategoryTemplate.tsx

@@ -47,13 +47,13 @@ const CategoryTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
 };
 
 export const query = graphql`
-  query CategoryPage($category: String, $postsLimit: Int!, $postsOffset: Int!) {
+  query CategoryTemplate($group: String, $limit: Int!, $offset: Int!) {
     allMarkdownRemark(
-      limit: $postsLimit
-      skip: $postsOffset
+      limit: $limit
+      skip: $offset
       filter: {
         frontmatter: {
-          category: { eq: $category }
+          category: { eq: $group }
           template: { eq: "post" }
           draft: { ne: true }
         }

src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap

@@ -1,76 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CategoryTemplate renders correctly 1`] = `
-<div
-  className="layout"
->
-  <div
-    className="sidebar"
-  >
-    <div
-      className="sidebar__inner"
-    >
-      <div
-        className="author"
-      >
+<div>
+  <div>
+    <div>
+      <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>
-      <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
@@ -78,23 +44,15 @@ exports[`CategoryTemplate 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>
@@ -106,17 +64,13 @@ exports[`CategoryTemplate 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>
@@ -128,17 +82,13 @@ exports[`CategoryTemplate 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>
@@ -150,17 +100,13 @@ exports[`CategoryTemplate 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>
@@ -172,17 +118,13 @@ exports[`CategoryTemplate 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>
@@ -194,170 +136,98 @@ exports[`CategoryTemplate 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>
   </div>
-  <div
-    className="page"
-  >
-    <div
-      className="page__inner"
-    >
-      <h1
-        className="page__title"
-      >
+  <div>
+    <div>
+      <h1>
         typography
       </h1>
-      <div
-        className="page__body"
-      >
-        <div
-          className="feed"
-        >
-          <div
-            className="feed__item"
-          >
-            <div
-              className="feed__item-meta"
-            >
+      <div>
+        <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="/typography"
                 >
                   typography
                 </a>
               </span>
             </div>
-            <h2
-              className="feed__item-title"
-            >
+            <h2>
               <a
-                className="feed__item-title-link"
                 href="/posts/perfecting-the-art-of-perfection"
               >
                 Perfecting the Art of Perfection
               </a>
             </h2>
-            <p
-              className="feed__item-description"
-            >
+            <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="/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="/design-inspiration"
                 >
                   design inspiration
                 </a>
               </span>
             </div>
-            <h2
-              className="feed__item-title"
-            >
+            <h2>
               <a
-                className="feed__item-title-link"
                 href="/posts/the-birth-of-movable-type"
               >
                 Johannes Gutenberg: The Birth of Movable Type
               </a>
             </h2>
-            <p
-              className="feed__item-description"
-            >
+            <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="/posts/the-birth-of-movable-type"
             >
               Read
             </a>
           </div>
         </div>
-        <div
-          className="pagination"
-        >
-          <div
-            className="pagination__prev"
-          >
+        <div>
+          <div>
             <a
-              className="pagination__prev-link"
+              className=""
               href="/typography/page/1"
               rel="prev"
             >
               ← PREV
             </a>
           </div>
-          <div
-            className="pagination__next"
-          >
+          <div>
             <a
-              className="pagination__next-link"
+              className=""
               href="/typography/page/3"
               rel="next"
             >

src/templates/CategoryTemplate/index.ts

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

src/templates/IndexTemplate/IndexTemplate.test.tsx

@@ -11,21 +11,19 @@ const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("IndexTemplate", () => {
-  const props = {
-    data: {
-      ...mocks.allMarkdownRemark,
-    },
-    ...mocks.pageContext,
-  };
-
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) =>
-      render(mocks.siteMetadata),
-    );
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });
 
   it("renders correctly", () => {
+    const props = {
+      data: {
+        allMarkdownRemark: mocks.allMarkdownRemark,
+      },
+      pageContext: mocks.pageContext,
+    };
+
     const tree = renderer.create(<IndexTemplate {...props} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

src/templates/IndexTemplate/IndexTemplate.tsx

@@ -45,10 +45,10 @@ const IndexTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
 };
 
 export const query = graphql`
-  query IndexTemplate($postsLimit: Int!, $postsOffset: Int!) {
+  query IndexTemplate($limit: Int!, $offset: Int!) {
     allMarkdownRemark(
-      limit: $postsLimit
-      skip: $postsOffset
+      limit: $limit
+      skip: $offset
       sort: { order: DESC, fields: [frontmatter___date] }
       filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
     ) {

src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap

@@ -1,76 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`IndexTemplate renders correctly 1`] = `
-<div
-  className="layout"
->
-  <div
-    className="sidebar"
-  >
-    <div
-      className="sidebar__inner"
-    >
-      <div
-        className="author"
-      >
+<div>
+  <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
@@ -78,23 +44,15 @@ exports[`IndexTemplate 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>
@@ -106,17 +64,13 @@ exports[`IndexTemplate 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>
@@ -128,17 +82,13 @@ exports[`IndexTemplate 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>
@@ -150,17 +100,13 @@ exports[`IndexTemplate 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>
@@ -172,17 +118,13 @@ exports[`IndexTemplate 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>
@@ -194,165 +136,95 @@ exports[`IndexTemplate 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>
   </div>
-  <div
-    className="page"
-  >
-    <div
-      className="page__inner"
-    >
-      <div
-        className="page__body"
-      >
-        <div
-          className="feed"
-        >
-          <div
-            className="feed__item"
-          >
-            <div
-              className="feed__item-meta"
-            >
+  <div>
+    <div>
+      <div>
+        <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="/typography"
                 >
                   typography
                 </a>
               </span>
             </div>
-            <h2
-              className="feed__item-title"
-            >
+            <h2>
               <a
-                className="feed__item-title-link"
                 href="/posts/perfecting-the-art-of-perfection"
               >
                 Perfecting the Art of Perfection
               </a>
             </h2>
-            <p
-              className="feed__item-description"
-            >
+            <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="/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="/design-inspiration"
                 >
                   design inspiration
                 </a>
               </span>
             </div>
-            <h2
-              className="feed__item-title"
-            >
+            <h2>
               <a
-                className="feed__item-title-link"
                 href="/posts/the-birth-of-movable-type"
               >
                 Johannes Gutenberg: The Birth of Movable Type
               </a>
             </h2>
-            <p
-              className="feed__item-description"
-            >
+            <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="/posts/the-birth-of-movable-type"
             >
               Read
             </a>
           </div>
         </div>
-        <div
-          className="pagination"
-        >
-          <div
-            className="pagination__prev"
-          >
+        <div>
+          <div>
             <a
-              className="pagination__prev-link"
+              className=""
               href="/typography/page/1"
               rel="prev"
             >
               ← PREV
             </a>
           </div>
-          <div
-            className="pagination__next"
-          >
+          <div>
             <a
-              className="pagination__next-link"
+              className=""
               href="/typography/page/3"
               rel="next"
             >

src/templates/IndexTemplate/index.ts

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

src/templates/NotFoundTemplate/__snapshots__/NotFoundTemplate.test.tsx.snap

@@ -1,76 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NotFoundTemplate renders correctly 1`] = `
-<div
-  className="layout"
->
-  <div
-    className="sidebar"
-  >
-    <div
-      className="sidebar__inner"
-    >
-      <div
-        className="author"
-      >
+<div>
+  <div>
+    <div>
+      <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>
-      <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
@@ -78,23 +44,15 @@ exports[`NotFoundTemplate 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>
@@ -106,17 +64,13 @@ exports[`NotFoundTemplate 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>
@@ -128,17 +82,13 @@ exports[`NotFoundTemplate 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>
@@ -150,17 +100,13 @@ exports[`NotFoundTemplate 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>
@@ -172,17 +118,13 @@ exports[`NotFoundTemplate 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>
@@ -194,51 +136,19 @@ exports[`NotFoundTemplate 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>
   </div>
-  <div
-    className="page"
-  >
-    <div
-      className="page__inner"
-    >
-      <h1
-        className="page__title"
-      >
+  <div>
+    <div>
+      <h1>
         NOT FOUND
       </h1>
-      <div
-        className="page__body"
-      >
+      <div>
         <p>
           You just hit a route that doesn't exist... the sadness.
         </p>

src/templates/NotFoundTemplate/index.ts

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

src/templates/PageTemplate/PageTemplate.tsx

@@ -25,7 +25,7 @@ const PageTemplate: React.FC<Props> = ({ data }: Props) => {
     <Layout
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
-      socialImage={socialImage?.publicURL}
+      socialImage={socialImage}
     >
       <Sidebar />
       <Page title={title}>
@@ -36,7 +36,7 @@ const PageTemplate: React.FC<Props> = ({ data }: Props) => {
 };
 
 export const query = graphql`
-  query PageBySlug($slug: String!) {
+  query PageTemplate($slug: String!) {
     markdownRemark(fields: { slug: { eq: $slug } }) {
       id
       html
@@ -44,9 +44,7 @@ export const query = graphql`
         title
         date
         description
-        socialImage {
-          publicURL
-        }
+        socialImage
       }
     }
   }

src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap

@@ -1,76 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageTemplate renders correctly 1`] = `
-<div
-  className="layout"
->
-  <div
-    className="sidebar"
-  >
-    <div
-      className="sidebar__inner"
-    >
-      <div
-        className="author"
-      >
+<div>
+  <div>
+    <div>
+      <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>
-      <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
@@ -78,23 +44,15 @@ exports[`PageTemplate 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>
@@ -106,17 +64,13 @@ exports[`PageTemplate 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>
@@ -128,17 +82,13 @@ exports[`PageTemplate 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>
@@ -150,17 +100,13 @@ exports[`PageTemplate 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>
@@ -172,17 +118,13 @@ exports[`PageTemplate 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>
@@ -194,55 +136,23 @@ exports[`PageTemplate 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>
   </div>
-  <div
-    className="page"
-  >
-    <div
-      className="page__inner"
-    >
-      <h1
-        className="page__title"
-      >
+  <div>
+    <div>
+      <h1>
         Perfecting the Art of Perfection
       </h1>
-      <div
-        className="page__body"
-      >
+      <div>
         <div
           dangerouslySetInnerHTML={
             Object {
-              "__html": "",
+              "__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>",
             }
           }
         />

src/templates/PageTemplate/index.ts

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

src/templates/PostTemplate/PostTemplate.test.tsx

@@ -18,7 +18,9 @@ describe("PostTemplate", () => {
   };
 
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
+    mockedStaticQuery.mockImplementationOnce(({ render }) =>
+      render(mocks.siteMetadata),
+    );
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });
 

src/templates/PostTemplate/PostTemplate.tsx

@@ -23,7 +23,7 @@ const PostTemplate: React.FC<Props> = ({ data }: Props) => {
     <Layout
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
-      socialImage={socialImage?.publicURL}
+      socialImage={socialImage}
     >
       <Post post={data.markdownRemark} />
     </Layout>
@@ -31,7 +31,7 @@ const PostTemplate: React.FC<Props> = ({ data }: Props) => {
 };
 
 export const query = graphql`
-  query PostBySlug($slug: String!) {
+  query PostTemplate($slug: String!) {
     markdownRemark(fields: { slug: { eq: $slug } }) {
       id
       html
@@ -44,9 +44,7 @@ export const query = graphql`
         description
         tags
         title
-        socialImage {
-          publicURL
-        }
+        socialImage
       }
     }
   }

src/templates/PostTemplate/__snapshots__/PostTemplate.test.tsx.snap

@@ -1,62 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PostTemplate renders correctly 1`] = `
-<div
-  className="layout"
->
-  <div
-    className="post"
-  >
+<div>
+  <div>
     <a
-      className="post__home-button"
       href="/"
     >
       All Articles
     </a>
-    <div
-      className="post__content"
-    >
-      <div
-        className="content"
-      >
-        <h1
-          className="content__title"
-        >
+    <div>
+      <div>
+        <h1>
           Perfecting the Art of Perfection
         </h1>
         <div
-          className="content__body"
           dangerouslySetInnerHTML={
             Object {
-              "__html": "",
+              "__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="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"
@@ -69,9 +46,7 @@ exports[`PostTemplate renders correctly 1`] = `
         </p>
       </div>
     </div>
-    <div
-      className="post__comments"
-    />
+    <div />
   </div>
 </div>
 `;

src/templates/PostTemplate/index.ts

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

src/templates/TagTemplate/TagTemplate.test.tsx

@@ -11,13 +11,6 @@ const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("TagTemplate", () => {
-  const props = {
-    data: {
-      ...mocks.allMarkdownRemark,
-    },
-    ...mocks.pageContext,
-  };
-
   beforeEach(() => {
     mockedStaticQuery.mockImplementationOnce(({ render }) =>
       render(mocks.siteMetadata),
@@ -26,6 +19,13 @@ describe("TagTemplate", () => {
   });
 
   it("renders correctly", () => {
+    const props = {
+      data: {
+        allMarkdownRemark: mocks.allMarkdownRemark,
+      },
+      pageContext: mocks.pageContext,
+    };
+
     const tree = renderer.create(<TagTemplate {...props} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

src/templates/TagTemplate/TagTemplate.tsx

@@ -47,7 +47,7 @@ const TagTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
 };
 
 export const query = graphql`
-  query TagPage($tag: String, $postsLimit: Int!, $postsOffset: Int!) {
+  query TagTemplate($group: String, $limit: Int!, $offset: Int!) {
     site {
       siteMetadata {
         title
@@ -55,11 +55,11 @@ export const query = graphql`
       }
     }
     allMarkdownRemark(
-      limit: $postsLimit
-      skip: $postsOffset
+      limit: $limit
+      skip: $offset
       filter: {
         frontmatter: {
-          tags: { in: [$tag] }
+          tags: { in: [$group] }
           template: { eq: "post" }
           draft: { ne: true }
         }

src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap

@@ -1,76 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TagTemplate renders correctly 1`] = `
-<div
-  className="layout"
->
-  <div
-    className="sidebar"
-  >
-    <div
-      className="sidebar__inner"
-    >
-      <div
-        className="author"
-      >
+<div>
+  <div>
+    <div>
+      <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>
-      <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
@@ -78,23 +44,15 @@ exports[`TagTemplate 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>
@@ -106,17 +64,13 @@ exports[`TagTemplate 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>
@@ -128,17 +82,13 @@ exports[`TagTemplate 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>
@@ -150,17 +100,13 @@ exports[`TagTemplate 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>
@@ -172,17 +118,13 @@ exports[`TagTemplate 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>
@@ -194,170 +136,98 @@ exports[`TagTemplate 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>
   </div>
-  <div
-    className="page"
-  >
-    <div
-      className="page__inner"
-    >
-      <h1
-        className="page__title"
-      >
+  <div>
+    <div>
+      <h1>
         typography
       </h1>
-      <div
-        className="page__body"
-      >
-        <div
-          className="feed"
-        >
-          <div
-            className="feed__item"
-          >
-            <div
-              className="feed__item-meta"
-            >
+      <div>
+        <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="/typography"
                 >
                   typography
                 </a>
               </span>
             </div>
-            <h2
-              className="feed__item-title"
-            >
+            <h2>
               <a
-                className="feed__item-title-link"
                 href="/posts/perfecting-the-art-of-perfection"
               >
                 Perfecting the Art of Perfection
               </a>
             </h2>
-            <p
-              className="feed__item-description"
-            >
+            <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="/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="/design-inspiration"
                 >
                   design inspiration
                 </a>
               </span>
             </div>
-            <h2
-              className="feed__item-title"
-            >
+            <h2>
               <a
-                className="feed__item-title-link"
                 href="/posts/the-birth-of-movable-type"
               >
                 Johannes Gutenberg: The Birth of Movable Type
               </a>
             </h2>
-            <p
-              className="feed__item-description"
-            >
+            <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="/posts/the-birth-of-movable-type"
             >
               Read
             </a>
           </div>
         </div>
-        <div
-          className="pagination"
-        >
-          <div
-            className="pagination__prev"
-          >
+        <div>
+          <div>
             <a
-              className="pagination__prev-link"
+              className=""
               href="/typography/page/1"
               rel="prev"
             >
               ← PREV
             </a>
           </div>
-          <div
-            className="pagination__next"
-          >
+          <div>
             <a
-              className="pagination__next-link"
+              className=""
               href="/typography/page/3"
               rel="next"
             >

src/templates/TagTemplate/index.ts

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

src/templates/TagsListTemplate/index.ts

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

src/templates/TagsTemplate/TagsTemplate.test.tsx

@@ -5,24 +5,24 @@ import { StaticQuery, useStaticQuery } from "gatsby";
 
 import * as mocks from "@/mocks";
 
-import TagsListTemplate from "./TagsListTemplate";
+import TagsTemplate from "./TagsTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
-describe("TagsListTemplate", () => {
-  const props = {
-    ...mocks.siteMetadata,
-    ...mocks.allMarkdownRemark,
-  };
-
+describe("TagsTemplate", () => {
   beforeEach(() => {
+    const props = {
+      ...mocks.siteMetadata,
+      allMarkdownRemark: mocks.allMarkdownRemark,
+    };
+
     mockedStaticQuery.mockImplementationOnce(({ render }) => render(props));
     mockedUseStaticQuery.mockReturnValue(props);
   });
 
   it("renders correctly", () => {
-    const tree = renderer.create(<TagsListTemplate />).toJSON();
+    const tree = renderer.create(<TagsTemplate />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

src/templates/TagsTemplate/TagsTemplate.tsx

@@ -8,7 +8,7 @@ import { Sidebar } from "@/components/Sidebar";
 import { useSiteMetadata, useTagsList } from "@/hooks";
 import { toKebabCase } from "@/utils";
 
-const TagsListTemplate: React.FC = () => {
+const TagsTemplate: React.FC = () => {
   const { title, subtitle } = useSiteMetadata();
   const tags = useTagsList();
 
@@ -17,7 +17,7 @@ const TagsListTemplate: React.FC = () => {
       <Sidebar />
       <Page title="Tags">
         <ul>
-          {tags.map((tag) => (
+          {tags.map(tag => (
             <li key={tag.fieldValue}>
               <Link to={`/tag/${toKebabCase(tag.fieldValue)}/`}>
                 {tag.fieldValue} ({tag.totalCount})
@@ -30,4 +30,4 @@ const TagsListTemplate: React.FC = () => {
   );
 };
 
-export default TagsListTemplate;
+export default TagsTemplate;

src/templates/TagsTemplate/__snapshots__/TagsTemplate.test.tsx.snap

@@ -1,76 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TagsListTemplate renders correctly 1`] = `
-<div
-  className="layout"
->
-  <div
-    className="sidebar"
-  >
-    <div
-      className="sidebar__inner"
-    >
-      <div
-        className="author"
-      >
+exports[`TagsTemplate renders correctly 1`] = `
+<div>
+  <div>
+    <div>
+      <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>
-      <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
@@ -78,23 +44,15 @@ exports[`TagsListTemplate 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>
@@ -106,17 +64,13 @@ exports[`TagsListTemplate 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>
@@ -128,17 +82,13 @@ exports[`TagsListTemplate 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>
@@ -150,17 +100,13 @@ exports[`TagsListTemplate 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>
@@ -172,17 +118,13 @@ exports[`TagsListTemplate 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>
@@ -194,51 +136,19 @@ exports[`TagsListTemplate 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>
   </div>
-  <div
-    className="page"
-  >
-    <div
-      className="page__inner"
-    >
-      <h1
-        className="page__title"
-      >
+  <div>
+    <div>
+      <h1>
         Tags
       </h1>
-      <div
-        className="page__body"
-      >
+      <div>
         <ul>
           <li>
             <a

src/types/frontmatter.ts

@@ -5,9 +5,7 @@ interface Frontmatter {
   template: string;
   description?: string;
   tags?: Array<string>;
-  socialImage?: {
-    publicURL: string;
-  };
+  socialImage?: string;
 }
 
 export default Frontmatter;