refactor(starter): upgrade and move to typescript

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