refactor(starter): upgrade and move to typescript

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