From c81eb9460936f801ebef64554ccc0533a9244042 Mon Sep 17 00:00:00 2001
From: Beni von Cheni <benjaminlchen@gmail.com>
Date: Sat, 2 Mar 2019 21:44:04 -0500
Subject: [PATCH 1/6] style: Use emotion styles and fix padding style below
 380px in header

---
 src/components/header.tsx                     | 34 +++++++++----------
 .../__snapshots__/header.test.tsx.snap        | 10 +-----
 2 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 05b591b406..5ea2abc67b 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,44 +1,42 @@
-import { Link } from 'gatsby'
-import React from 'react'
-import logo from '../images/logo.svg'
+import { Link } from 'gatsby';
+import React from 'react';
+import { css } from 'emotion';
+import logo from '../images/logo.svg';
 
 const Header = () => (
   <nav className="nav">
-    <ul
-      style={{
-        margin: '0 auto',
-        padding: '0 4.8rem',
-        display: 'flex',
-        alignItems: 'center',
-        listStyle: 'none',
-      }}
-    >
+    <ul css={css`
+      @media (max-width: 380px) {
+        padding: 0;
+      }
+      margin: 0 auto;
+      padding: 0 4.8rem;
+      display: flex;
+      align-items: center;
+      list-style: none;
+    `}>
       <li>
         <Link to="/" style={{ display: 'block' }}>
           <img src={logo} alt="Node.js" className="nav__logo" />
         </Link>
       </li>
-
       <li className="nav__tabs">
         <a target="_blank" href="https://nodejs.org/en/download/">
           Download
         </a>
       </li>
-
       <li className="nav__tabs">
         <a target="_blank" href="https://nodejs.org/en/docs/">
           API Docs
         </a>
       </li>
-
       <li className="nav__tabs">
         <a target="_blank" href="https://github.com/nodejs/nodejs.dev">
           GitHub
         </a>
       </li>
-
     </ul>
   </nav>
-)
+);
 
-export default Header
+export default Header;
diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap
index a22556672c..544d806b3c 100644
--- a/test/components/__snapshots__/header.test.tsx.snap
+++ b/test/components/__snapshots__/header.test.tsx.snap
@@ -5,15 +5,7 @@ exports[`Tests for Header component renders correctly 1`] = `
   className="nav"
 >
   <ul
-    style={
-      Object {
-        "alignItems": "center",
-        "display": "flex",
-        "listStyle": "none",
-        "margin": "0 auto",
-        "padding": "0 4.8rem",
-      }
-    }
+    css="css-14ebuk3"
   >
     <li>
       <a

From 8048d989a107a973e1836a8af531244360e3012b Mon Sep 17 00:00:00 2001
From: Beni von Cheni <benjaminlchen@gmail.com>
Date: Sat, 2 Mar 2019 21:54:33 -0500
Subject: [PATCH 2/6] refactor: Update code format by using "format" script

---
 src/components/article.tsx            |  8 +++---
 src/components/edit-link.tsx          | 14 ++++------
 src/components/header.tsx             | 22 +++++++++-------
 src/components/hero.tsx               | 14 +++++-----
 src/components/navigation-item.tsx    | 11 +++++---
 src/components/navigation-section.tsx |  8 +++---
 src/components/pagination.tsx         |  6 ++---
 src/components/seo.tsx                | 18 ++++++-------
 src/util/scrollTo.tsx                 | 21 +++++++++++----
 test/__fixtures__/page.tsx            | 38 ++++++++++++++-------------
 test/components/article.test.tsx      |  6 +----
 test/components/header.test.tsx       | 14 +++++-----
 test/components/hero.test.tsx         |  2 +-
 test/components/pagination.test.tsx   | 38 +++++++++++++++++++++------
 test/components/seo.test.tsx          |  8 +-----
 15 files changed, 128 insertions(+), 100 deletions(-)

diff --git a/src/components/article.tsx b/src/components/article.tsx
index c97076afc3..883f34fc9e 100644
--- a/src/components/article.tsx
+++ b/src/components/article.tsx
@@ -7,15 +7,15 @@ type Props = {
   page: RemarkPage;
   previous?: PageInfo;
   next?: PageInfo;
-}
+};
 
 const Article = ({ page, previous, next }: Props) => (
   <article className="article-reader">
     <h1 className="article-reader__headline">{page.frontmatter.title}</h1>
     <div dangerouslySetInnerHTML={{ __html: page.html }} />
     <EditLink relativePath={page.parent.relativePath} />
-    <Pagination previous={previous} next={next}/>
+    <Pagination previous={previous} next={next} />
   </article>
-)
+);
 
-export default Article
+export default Article;
diff --git a/src/components/edit-link.tsx b/src/components/edit-link.tsx
index 9a0813dcdf..382aee98af 100644
--- a/src/components/edit-link.tsx
+++ b/src/components/edit-link.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 type Props = {
-  relativePath?: string
-}
+  relativePath?: string;
+};
 
 const EditLink = ({ relativePath }: Props) => {
   if (!relativePath) {
@@ -11,11 +11,7 @@ const EditLink = ({ relativePath }: Props) => {
 
   const href = `https://github.com/nodejs/nodejs.dev/edit/master/src/documentation/${relativePath}`;
 
-  return (
-    <a href={href} >
-      Edit this page on GitHub
-    </a>
-  )
-}
+  return <a href={href}>Edit this page on GitHub</a>;
+};
 
-export default EditLink
+export default EditLink;
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 5ea2abc67b..cff00bde88 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -5,16 +5,18 @@ import logo from '../images/logo.svg';
 
 const Header = () => (
   <nav className="nav">
-    <ul css={css`
-      @media (max-width: 380px) {
-        padding: 0;
-      }
-      margin: 0 auto;
-      padding: 0 4.8rem;
-      display: flex;
-      align-items: center;
-      list-style: none;
-    `}>
+    <ul
+      css={css`
+        @media (max-width: 380px) {
+          padding: 0;
+        }
+        margin: 0 auto;
+        padding: 0 4.8rem;
+        display: flex;
+        align-items: center;
+        list-style: none;
+      `}
+    >
       <li>
         <Link to="/" style={{ display: 'block' }}>
           <img src={logo} alt="Node.js" className="nav__logo" />
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index aecf93dbb0..580ef153ed 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -2,19 +2,19 @@ import React from 'react';
 
 type Props = {
   title: string;
-}
+};
 
 const Hero = ({ title }: Props) => (
   <div className="hero">
     <h1>{title}</h1>
     <div className="diagonal-hero-bg">
       <div className="stars">
-          <div className="small"/>
-          <div className="medium"/>
-          <div className="big"/>
-        </div>
+        <div className="small" />
+        <div className="medium" />
+        <div className="big" />
+      </div>
     </div>
   </div>
-)
+);
 
-export default Hero
+export default Hero;
diff --git a/src/components/navigation-item.tsx b/src/components/navigation-item.tsx
index c125a516a6..451fc07180 100644
--- a/src/components/navigation-item.tsx
+++ b/src/components/navigation-item.tsx
@@ -11,12 +11,12 @@ type Props = {
 
 const NavigationItem = ({ isDone, isActive, slug, title, onClick }: Props) => {
   const element = useRef<HTMLAnchorElement | null>(null);
-  
+
   const handleRef = (ref?: HTMLAnchorElement | null) => {
     if (ref && isActive) {
       element.current = ref;
     }
-  }
+  };
 
   useEffect(() => {
     if (element.current) {
@@ -33,7 +33,12 @@ const NavigationItem = ({ isDone, isActive, slug, title, onClick }: Props) => {
   }
 
   return (
-    <Link ref={handleRef} to={`/learn/${slug}`} onClick={onClick} className={className}>
+    <Link
+      ref={handleRef}
+      to={`/learn/${slug}`}
+      onClick={onClick}
+      className={className}
+    >
       {title}
     </Link>
   );
diff --git a/src/components/navigation-section.tsx b/src/components/navigation-section.tsx
index aa153a5240..9d7943d937 100644
--- a/src/components/navigation-section.tsx
+++ b/src/components/navigation-section.tsx
@@ -6,7 +6,7 @@ type Props = {
   title: string;
   items: NavigationItemData[];
   onItemClick: () => void;
-}
+};
 
 const NavigationSection = ({ title, items, onItemClick }: Props) => {
   return (
@@ -23,7 +23,7 @@ const NavigationSection = ({ title, items, onItemClick }: Props) => {
         />
       ))}
     </ul>
-  )
-}
+  );
+};
 
-export default NavigationSection
+export default NavigationSection;
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
index 07cf0069b9..44be65c7c3 100644
--- a/src/components/pagination.tsx
+++ b/src/components/pagination.tsx
@@ -5,7 +5,7 @@ import { PageInfo } from '../types';
 type Props = {
   previous?: PageInfo;
   next?: PageInfo;
-}
+};
 
 const Pagination = ({ previous, next }: Props) => (
   <ul
@@ -32,6 +32,6 @@ const Pagination = ({ previous, next }: Props) => (
       )}
     </li>
   </ul>
-)
+);
 
-export default Pagination
+export default Pagination;
diff --git a/src/components/seo.tsx b/src/components/seo.tsx
index 53e39e550d..8482023493 100644
--- a/src/components/seo.tsx
+++ b/src/components/seo.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import { Helmet } from 'react-helmet'
-import config from '../config'
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import config from '../config';
 
 type Props = {
-  title?: string
-  description?: string
-  img?: string
-}
+  title?: string;
+  description?: string;
+  img?: string;
+};
 
 const SEO = ({ title, description, img }: Props) => (
   <Helmet
@@ -93,6 +93,6 @@ const SEO = ({ title, description, img }: Props) => (
   >
     <html lang={config.lang} />
   </Helmet>
-)
+);
 
-export default SEO
+export default SEO;
diff --git a/src/util/scrollTo.tsx b/src/util/scrollTo.tsx
index 00ad921f39..fb49a149ff 100644
--- a/src/util/scrollTo.tsx
+++ b/src/util/scrollTo.tsx
@@ -1,7 +1,15 @@
-const easeInOutCubic = (t: number, b: number, c: number, d: number) => (t /= d / 2) < 1 ? c / 2 * t * t * t + b : c / 2 * ((t -= 2) * t * t + 2) + b;
+const easeInOutCubic = (t: number, b: number, c: number, d: number) =>
+  (t /= d / 2) < 1
+    ? (c / 2) * t * t * t + b
+    : (c / 2) * ((t -= 2) * t * t + 2) + b;
 
-export function scrollTo(scrollTo: number, duration: number = 333): Promise<boolean> {
-  const start = (window.pageYOffset || document.documentElement.scrollTop)  - (document.documentElement.clientTop || 0);
+export function scrollTo(
+  scrollTo: number,
+  duration: number = 333
+): Promise<boolean> {
+  const start =
+    (window.pageYOffset || document.documentElement.scrollTop) -
+    (document.documentElement.clientTop || 0);
   const change = scrollTo - start;
   let previousTime = window.performance.now();
   let currentTime = 0;
@@ -12,7 +20,10 @@ export function scrollTo(scrollTo: number, duration: number = 333): Promise<bool
       const increment = time - previousTime;
       previousTime = time;
       currentTime += increment;
-      (document.scrollingElement || window).scrollTo(0, easeInOutCubic(currentTime, start, change, duration));
+      (document.scrollingElement || window).scrollTo(
+        0,
+        easeInOutCubic(currentTime, start, change, duration)
+      );
 
       if (currentTime < duration) {
         return window.requestAnimationFrame(animateScroll);
@@ -23,4 +34,4 @@ export function scrollTo(scrollTo: number, duration: number = 333): Promise<bool
   });
 
   return ret;
-};
+}
diff --git a/test/__fixtures__/page.tsx b/test/__fixtures__/page.tsx
index 4524537754..52803ced18 100644
--- a/test/__fixtures__/page.tsx
+++ b/test/__fixtures__/page.tsx
@@ -1,21 +1,23 @@
 import { RemarkPage, PageInfo } from '../../src/types';
 
-export const createPageInfo = (title: string) => ({
-  frontmatter: { title },
-  fields: { slug: title },
-}) as PageInfo;
+export const createPageInfo = (title: string) =>
+  ({
+    frontmatter: { title },
+    fields: { slug: title },
+  } as PageInfo);
 
-export const createRemarkPage = (title: string) => ({
-  html: `<span>${title}</span>`,
-  parent: {
-    relativePath: `path/${title}.md`
-  },
-  frontmatter: {
-    title,
-    description: 'mock-description',
-    author: 'mock-author',
-  },
-  fields: {
-    slug: title
-  },
-}) as RemarkPage;
+export const createRemarkPage = (title: string) =>
+  ({
+    html: `<span>${title}</span>`,
+    parent: {
+      relativePath: `path/${title}.md`,
+    },
+    frontmatter: {
+      title,
+      description: 'mock-description',
+      author: 'mock-author',
+    },
+    fields: {
+      slug: title,
+    },
+  } as RemarkPage);
diff --git a/test/components/article.test.tsx b/test/components/article.test.tsx
index ae115aa3ec..d5fadc3df2 100644
--- a/test/components/article.test.tsx
+++ b/test/components/article.test.tsx
@@ -10,11 +10,7 @@ describe('Article component', () => {
     const prevMock = createPageInfo('mock-prev');
     const nextMock = createPageInfo('mock-next');
     renderer.render(
-      <Article
-        page={pageMock}
-        previous={prevMock}
-        next={nextMock}
-      />
+      <Article page={pageMock} previous={prevMock} next={nextMock} />
     );
     expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
diff --git a/test/components/header.test.tsx b/test/components/header.test.tsx
index 8cc8fc1384..35d1118c39 100644
--- a/test/components/header.test.tsx
+++ b/test/components/header.test.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import renderer from 'react-test-renderer'
-import Header from '../../src/components/header'
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Header from '../../src/components/header';
 
 describe('Tests for Header component', () => {
   it('renders correctly', () => {
-    const tree = renderer.create(<Header />).toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-})
+    const tree = renderer.create(<Header />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/test/components/hero.test.tsx b/test/components/hero.test.tsx
index b49132f294..cc2d1d1783 100644
--- a/test/components/hero.test.tsx
+++ b/test/components/hero.test.tsx
@@ -5,7 +5,7 @@ import Hero from '../../src/components/hero';
 describe('Hero component', () => {
   it('renders correctly', () => {
     const title = 'Introduction to Node.js';
-    const tree = renderer.create(<Hero title={title}/>).toJSON();
+    const tree = renderer.create(<Hero title={title} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/test/components/pagination.test.tsx b/test/components/pagination.test.tsx
index cd01fadd4c..7d1400056f 100644
--- a/test/components/pagination.test.tsx
+++ b/test/components/pagination.test.tsx
@@ -4,25 +4,47 @@ import Pagination from '../../src/components/pagination';
 
 describe('Pagination component', () => {
   it('renders links to the next and previous page', () => {
-    const next = { frontmatter: { title: 'next-page' }, fields: { slug: 'next-page' }};
-    const prev = { frontmatter: { title: 'prev-page' }, fields: { slug: 'prev-page' }};
-    const tree = renderer.create(<Pagination next={next} previous={prev} />).toJSON();
+    const next = {
+      frontmatter: { title: 'next-page' },
+      fields: { slug: 'next-page' },
+    };
+    const prev = {
+      frontmatter: { title: 'prev-page' },
+      fields: { slug: 'prev-page' },
+    };
+    const tree = renderer
+      .create(<Pagination next={next} previous={prev} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('renders correctly when there is no next page', () => {
-    const prev = { frontmatter: { title: 'prev-page' }, fields: { slug: 'prev-page' }};
+    const prev = {
+      frontmatter: { title: 'prev-page' },
+      fields: { slug: 'prev-page' },
+    };
     const tree = renderer.create(<Pagination previous={prev} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('renders correctly when there is no previous page', () => {
-    const next = { frontmatter: { title: 'next-page' }, fields: { slug: 'next-page' }};
+    const next = {
+      frontmatter: { title: 'next-page' },
+      fields: { slug: 'next-page' },
+    };
     const tree = renderer.create(<Pagination next={next} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('only renders links to pages that has a title', () => {
-    const next = { frontmatter: { title: 'next-page' }, fields: { slug: 'next-page' }};
-    const prev = { frontmatter: { title: null }, fields: { slug: 'prev-page' }};
-    const tree = renderer.create(<Pagination next={next} previous={prev} />).toJSON();
+    const next = {
+      frontmatter: { title: 'next-page' },
+      fields: { slug: 'next-page' },
+    };
+    const prev = {
+      frontmatter: { title: null },
+      fields: { slug: 'prev-page' },
+    };
+    const tree = renderer
+      .create(<Pagination next={next} previous={prev} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/test/components/seo.test.tsx b/test/components/seo.test.tsx
index e209fad334..dc2f03292c 100644
--- a/test/components/seo.test.tsx
+++ b/test/components/seo.test.tsx
@@ -8,13 +8,7 @@ describe('SEO component', () => {
     const title = 'title-mock';
     const description = 'description-mock';
     const img = 'image-mock';
-    renderer.render(
-      <SEO
-        title={title}
-        description={description}
-        img={img}
-      />
-    );
+    renderer.render(<SEO title={title} description={description} img={img} />);
     expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
   it('uses config properties as fallback for missing props', () => {

From 9d5ca5a15a04af13475bfea25eceb8e4362f2c90 Mon Sep 17 00:00:00 2001
From: Beni von Cheni <benjaminlchen@gmail.com>
Date: Sat, 2 Mar 2019 22:10:26 -0500
Subject: [PATCH 3/6] test: Update header test snapshot

---
 test/components/__snapshots__/header.test.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap
index 544d806b3c..99b81f94ff 100644
--- a/test/components/__snapshots__/header.test.tsx.snap
+++ b/test/components/__snapshots__/header.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Tests for Header component renders correctly 1`] = `
   className="nav"
 >
   <ul
-    css="css-14ebuk3"
+    css="css-k9ksbg"
   >
     <li>
       <a

From 7ee8f0456cd02de2a275f28117f90c5ffe5908ff Mon Sep 17 00:00:00 2001
From: Beni von Cheni <benjaminlchen@gmail.com>
Date: Sun, 3 Mar 2019 00:09:30 -0500
Subject: [PATCH 4/6] refactor: Revert code format update

---
 src/components/article.tsx            |  8 +++---
 src/components/edit-link.tsx          | 14 ++++++----
 src/components/hero.tsx               | 12 ++++-----
 src/components/navigation-item.tsx    |  9 ++-----
 src/components/navigation-section.tsx |  8 +++---
 src/components/pagination.tsx         |  6 ++---
 src/components/seo.tsx                | 18 ++++++-------
 src/util/scrollTo.tsx                 | 21 ++++-----------
 test/__fixtures__/page.tsx            | 38 +++++++++++++--------------
 test/components/article.test.tsx      |  6 ++++-
 test/components/header.test.tsx       | 14 +++++-----
 test/components/hero.test.tsx         |  2 +-
 test/components/pagination.test.tsx   | 38 ++++++---------------------
 test/components/seo.test.tsx          |  8 +++++-
 14 files changed, 88 insertions(+), 114 deletions(-)

diff --git a/src/components/article.tsx b/src/components/article.tsx
index 883f34fc9e..c97076afc3 100644
--- a/src/components/article.tsx
+++ b/src/components/article.tsx
@@ -7,15 +7,15 @@ type Props = {
   page: RemarkPage;
   previous?: PageInfo;
   next?: PageInfo;
-};
+}
 
 const Article = ({ page, previous, next }: Props) => (
   <article className="article-reader">
     <h1 className="article-reader__headline">{page.frontmatter.title}</h1>
     <div dangerouslySetInnerHTML={{ __html: page.html }} />
     <EditLink relativePath={page.parent.relativePath} />
-    <Pagination previous={previous} next={next} />
+    <Pagination previous={previous} next={next}/>
   </article>
-);
+)
 
-export default Article;
+export default Article
diff --git a/src/components/edit-link.tsx b/src/components/edit-link.tsx
index 382aee98af..9a0813dcdf 100644
--- a/src/components/edit-link.tsx
+++ b/src/components/edit-link.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 type Props = {
-  relativePath?: string;
-};
+  relativePath?: string
+}
 
 const EditLink = ({ relativePath }: Props) => {
   if (!relativePath) {
@@ -11,7 +11,11 @@ const EditLink = ({ relativePath }: Props) => {
 
   const href = `https://github.com/nodejs/nodejs.dev/edit/master/src/documentation/${relativePath}`;
 
-  return <a href={href}>Edit this page on GitHub</a>;
-};
+  return (
+    <a href={href} >
+      Edit this page on GitHub
+    </a>
+  )
+}
 
-export default EditLink;
+export default EditLink
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 580ef153ed..0aca56a849 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -2,19 +2,19 @@ import React from 'react';
 
 type Props = {
   title: string;
-};
+}
 
 const Hero = ({ title }: Props) => (
   <div className="hero">
     <h1>{title}</h1>
     <div className="diagonal-hero-bg">
       <div className="stars">
-        <div className="small" />
-        <div className="medium" />
-        <div className="big" />
+        <div className="small"/>
+        <div className="medium"/>
+        <div className="big"/>
       </div>
     </div>
   </div>
-);
+)
 
-export default Hero;
+export default Hero
diff --git a/src/components/navigation-item.tsx b/src/components/navigation-item.tsx
index 451fc07180..a7f0fa5312 100644
--- a/src/components/navigation-item.tsx
+++ b/src/components/navigation-item.tsx
@@ -16,7 +16,7 @@ const NavigationItem = ({ isDone, isActive, slug, title, onClick }: Props) => {
     if (ref && isActive) {
       element.current = ref;
     }
-  };
+  }
 
   useEffect(() => {
     if (element.current) {
@@ -33,12 +33,7 @@ const NavigationItem = ({ isDone, isActive, slug, title, onClick }: Props) => {
   }
 
   return (
-    <Link
-      ref={handleRef}
-      to={`/learn/${slug}`}
-      onClick={onClick}
-      className={className}
-    >
+    <Link ref={handleRef} to={`/learn/${slug}`} onClick={onClick} className={className}>
       {title}
     </Link>
   );
diff --git a/src/components/navigation-section.tsx b/src/components/navigation-section.tsx
index 9d7943d937..aa153a5240 100644
--- a/src/components/navigation-section.tsx
+++ b/src/components/navigation-section.tsx
@@ -6,7 +6,7 @@ type Props = {
   title: string;
   items: NavigationItemData[];
   onItemClick: () => void;
-};
+}
 
 const NavigationSection = ({ title, items, onItemClick }: Props) => {
   return (
@@ -23,7 +23,7 @@ const NavigationSection = ({ title, items, onItemClick }: Props) => {
         />
       ))}
     </ul>
-  );
-};
+  )
+}
 
-export default NavigationSection;
+export default NavigationSection
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
index 44be65c7c3..07cf0069b9 100644
--- a/src/components/pagination.tsx
+++ b/src/components/pagination.tsx
@@ -5,7 +5,7 @@ import { PageInfo } from '../types';
 type Props = {
   previous?: PageInfo;
   next?: PageInfo;
-};
+}
 
 const Pagination = ({ previous, next }: Props) => (
   <ul
@@ -32,6 +32,6 @@ const Pagination = ({ previous, next }: Props) => (
       )}
     </li>
   </ul>
-);
+)
 
-export default Pagination;
+export default Pagination
diff --git a/src/components/seo.tsx b/src/components/seo.tsx
index 8482023493..53e39e550d 100644
--- a/src/components/seo.tsx
+++ b/src/components/seo.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import config from '../config';
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import config from '../config'
 
 type Props = {
-  title?: string;
-  description?: string;
-  img?: string;
-};
+  title?: string
+  description?: string
+  img?: string
+}
 
 const SEO = ({ title, description, img }: Props) => (
   <Helmet
@@ -93,6 +93,6 @@ const SEO = ({ title, description, img }: Props) => (
   >
     <html lang={config.lang} />
   </Helmet>
-);
+)
 
-export default SEO;
+export default SEO
diff --git a/src/util/scrollTo.tsx b/src/util/scrollTo.tsx
index fb49a149ff..00ad921f39 100644
--- a/src/util/scrollTo.tsx
+++ b/src/util/scrollTo.tsx
@@ -1,15 +1,7 @@
-const easeInOutCubic = (t: number, b: number, c: number, d: number) =>
-  (t /= d / 2) < 1
-    ? (c / 2) * t * t * t + b
-    : (c / 2) * ((t -= 2) * t * t + 2) + b;
+const easeInOutCubic = (t: number, b: number, c: number, d: number) => (t /= d / 2) < 1 ? c / 2 * t * t * t + b : c / 2 * ((t -= 2) * t * t + 2) + b;
 
-export function scrollTo(
-  scrollTo: number,
-  duration: number = 333
-): Promise<boolean> {
-  const start =
-    (window.pageYOffset || document.documentElement.scrollTop) -
-    (document.documentElement.clientTop || 0);
+export function scrollTo(scrollTo: number, duration: number = 333): Promise<boolean> {
+  const start = (window.pageYOffset || document.documentElement.scrollTop)  - (document.documentElement.clientTop || 0);
   const change = scrollTo - start;
   let previousTime = window.performance.now();
   let currentTime = 0;
@@ -20,10 +12,7 @@ export function scrollTo(
       const increment = time - previousTime;
       previousTime = time;
       currentTime += increment;
-      (document.scrollingElement || window).scrollTo(
-        0,
-        easeInOutCubic(currentTime, start, change, duration)
-      );
+      (document.scrollingElement || window).scrollTo(0, easeInOutCubic(currentTime, start, change, duration));
 
       if (currentTime < duration) {
         return window.requestAnimationFrame(animateScroll);
@@ -34,4 +23,4 @@ export function scrollTo(
   });
 
   return ret;
-}
+};
diff --git a/test/__fixtures__/page.tsx b/test/__fixtures__/page.tsx
index 52803ced18..4524537754 100644
--- a/test/__fixtures__/page.tsx
+++ b/test/__fixtures__/page.tsx
@@ -1,23 +1,21 @@
 import { RemarkPage, PageInfo } from '../../src/types';
 
-export const createPageInfo = (title: string) =>
-  ({
-    frontmatter: { title },
-    fields: { slug: title },
-  } as PageInfo);
+export const createPageInfo = (title: string) => ({
+  frontmatter: { title },
+  fields: { slug: title },
+}) as PageInfo;
 
-export const createRemarkPage = (title: string) =>
-  ({
-    html: `<span>${title}</span>`,
-    parent: {
-      relativePath: `path/${title}.md`,
-    },
-    frontmatter: {
-      title,
-      description: 'mock-description',
-      author: 'mock-author',
-    },
-    fields: {
-      slug: title,
-    },
-  } as RemarkPage);
+export const createRemarkPage = (title: string) => ({
+  html: `<span>${title}</span>`,
+  parent: {
+    relativePath: `path/${title}.md`
+  },
+  frontmatter: {
+    title,
+    description: 'mock-description',
+    author: 'mock-author',
+  },
+  fields: {
+    slug: title
+  },
+}) as RemarkPage;
diff --git a/test/components/article.test.tsx b/test/components/article.test.tsx
index d5fadc3df2..ae115aa3ec 100644
--- a/test/components/article.test.tsx
+++ b/test/components/article.test.tsx
@@ -10,7 +10,11 @@ describe('Article component', () => {
     const prevMock = createPageInfo('mock-prev');
     const nextMock = createPageInfo('mock-next');
     renderer.render(
-      <Article page={pageMock} previous={prevMock} next={nextMock} />
+      <Article
+        page={pageMock}
+        previous={prevMock}
+        next={nextMock}
+      />
     );
     expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
diff --git a/test/components/header.test.tsx b/test/components/header.test.tsx
index 35d1118c39..8cc8fc1384 100644
--- a/test/components/header.test.tsx
+++ b/test/components/header.test.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Header from '../../src/components/header';
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Header from '../../src/components/header'
 
 describe('Tests for Header component', () => {
   it('renders correctly', () => {
-    const tree = renderer.create(<Header />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
+    const tree = renderer.create(<Header />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/test/components/hero.test.tsx b/test/components/hero.test.tsx
index cc2d1d1783..b49132f294 100644
--- a/test/components/hero.test.tsx
+++ b/test/components/hero.test.tsx
@@ -5,7 +5,7 @@ import Hero from '../../src/components/hero';
 describe('Hero component', () => {
   it('renders correctly', () => {
     const title = 'Introduction to Node.js';
-    const tree = renderer.create(<Hero title={title} />).toJSON();
+    const tree = renderer.create(<Hero title={title}/>).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/test/components/pagination.test.tsx b/test/components/pagination.test.tsx
index 7d1400056f..cd01fadd4c 100644
--- a/test/components/pagination.test.tsx
+++ b/test/components/pagination.test.tsx
@@ -4,47 +4,25 @@ import Pagination from '../../src/components/pagination';
 
 describe('Pagination component', () => {
   it('renders links to the next and previous page', () => {
-    const next = {
-      frontmatter: { title: 'next-page' },
-      fields: { slug: 'next-page' },
-    };
-    const prev = {
-      frontmatter: { title: 'prev-page' },
-      fields: { slug: 'prev-page' },
-    };
-    const tree = renderer
-      .create(<Pagination next={next} previous={prev} />)
-      .toJSON();
+    const next = { frontmatter: { title: 'next-page' }, fields: { slug: 'next-page' }};
+    const prev = { frontmatter: { title: 'prev-page' }, fields: { slug: 'prev-page' }};
+    const tree = renderer.create(<Pagination next={next} previous={prev} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('renders correctly when there is no next page', () => {
-    const prev = {
-      frontmatter: { title: 'prev-page' },
-      fields: { slug: 'prev-page' },
-    };
+    const prev = { frontmatter: { title: 'prev-page' }, fields: { slug: 'prev-page' }};
     const tree = renderer.create(<Pagination previous={prev} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('renders correctly when there is no previous page', () => {
-    const next = {
-      frontmatter: { title: 'next-page' },
-      fields: { slug: 'next-page' },
-    };
+    const next = { frontmatter: { title: 'next-page' }, fields: { slug: 'next-page' }};
     const tree = renderer.create(<Pagination next={next} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('only renders links to pages that has a title', () => {
-    const next = {
-      frontmatter: { title: 'next-page' },
-      fields: { slug: 'next-page' },
-    };
-    const prev = {
-      frontmatter: { title: null },
-      fields: { slug: 'prev-page' },
-    };
-    const tree = renderer
-      .create(<Pagination next={next} previous={prev} />)
-      .toJSON();
+    const next = { frontmatter: { title: 'next-page' }, fields: { slug: 'next-page' }};
+    const prev = { frontmatter: { title: null }, fields: { slug: 'prev-page' }};
+    const tree = renderer.create(<Pagination next={next} previous={prev} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/test/components/seo.test.tsx b/test/components/seo.test.tsx
index dc2f03292c..e209fad334 100644
--- a/test/components/seo.test.tsx
+++ b/test/components/seo.test.tsx
@@ -8,7 +8,13 @@ describe('SEO component', () => {
     const title = 'title-mock';
     const description = 'description-mock';
     const img = 'image-mock';
-    renderer.render(<SEO title={title} description={description} img={img} />);
+    renderer.render(
+      <SEO
+        title={title}
+        description={description}
+        img={img}
+      />
+    );
     expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
   it('uses config properties as fallback for missing props', () => {

From 1e2c169fee9d13dc20f4085fd8f59cd28485fc45 Mon Sep 17 00:00:00 2001
From: Beni von Cheni <benjaminlchen@gmail.com>
Date: Sun, 3 Mar 2019 00:12:11 -0500
Subject: [PATCH 5/6] refactor: Revert code format update

---
 src/components/hero.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 0aca56a849..eab68db863 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -8,11 +8,11 @@ const Hero = ({ title }: Props) => (
   <div className="hero">
     <h1>{title}</h1>
     <div className="diagonal-hero-bg">
-      <div className="stars">
-        <div className="small"/>
-        <div className="medium"/>
-        <div className="big"/>
-      </div>
+        <div className="stars">
+          <div className="small"/>
+          <div className="medium"/>
+          <div className="big"/>
+        </div>
     </div>
   </div>
 )

From 8e9944ac5003bfe2c6822e032b572c6f0363f4c5 Mon Sep 17 00:00:00 2001
From: Beni von Cheni <benjaminlchen@gmail.com>
Date: Sun, 3 Mar 2019 00:13:43 -0500
Subject: [PATCH 6/6] refactor: Revert code format update

---
 src/components/hero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index eab68db863..aecf93dbb0 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -8,7 +8,7 @@ const Hero = ({ title }: Props) => (
   <div className="hero">
     <h1>{title}</h1>
     <div className="diagonal-hero-bg">
-        <div className="stars">
+      <div className="stars">
           <div className="small"/>
           <div className="medium"/>
           <div className="big"/>