nodejs · sagirk · Mar 8, 2019 · Mar 7, 2019 · Mar 7, 2019 · Mar 8, 2019
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+.cache/
+.github/
+public/
diff --git a/package.json b/package.json
@@ -42,8 +42,11 @@
     "build": "gatsby build",
     "build-ci": "gatsby build --prefix-paths",
     "start": "gatsby develop",
-    "format": "prettier --write '**/*.tsx'",
-    "test": "jest"
+    "format": "prettier --write '**/*.{ts,tsx,js}'",
+    "format-check": "prettier --check '**/*.{ts,tsx,js}'",
+    "jest": "jest",
+    "test": "yarn run jest && yarn run format-check && yarn run tslint",
+    "tslint": "tslint --project ./tsconfig.json"
   },
   "devDependencies": {
     "@babel/core": "^7.3.3",
@@ -57,7 +60,7 @@
     "husky": "^1.3.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.1.0",
-    "prettier": "^1.14.2",
+    "prettier": "^1.16.4",
     "react-test-renderer": "^16.8.2",
     "tslint-config-prettier": "^1.15.0",
     "tslint-react": "^3.6.0"

diff --git a/src/components/article.tsx b/src/components/article.tsx
@@ -30,11 +30,13 @@ const Article = ({
         flexWrap: 'wrap',
         marginTop: '5rem',
         alignItems: 'center',
-      }}>
+      }}
+    >
       Contributors:
-      {authors && authors.map(author => (
-          author && <AuthorLink username={author} key={author}/>
-      ))}
+      {authors &&
+        authors.map(
+          author => author && <AuthorLink username={author} key={author} />
+        )}
     </div>
     <EditLink relativePath={relativePath} />
     <Pagination previous={previous} next={next} />

diff --git 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
@@ -17,7 +17,7 @@ const NavigationItem = ({ isDone, isActive, slug, title, onClick }: Props) => {
     if (ref && isActive) {
       element.current = ref;
     }
-  }
+  };
 
   useEffect(() => {
     if (element.current) {
@@ -34,7 +34,12 @@ const NavigationItem = ({ isDone, isActive, slug, title, onClick }: Props) => {
   }
 
   return (
-    <Link ref={handleRef} to={`/${slug}`} onClick={onClick} className={className}>
+    <Link
+      ref={handleRef}
+      to={`/${slug}`}
+      onClick={onClick}
+      className={className}
+    >
       {title}
     </Link>
   );

diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
@@ -6,7 +6,7 @@ import { PaginationInfo } from '../types';
 type Props = {
   previous?: PaginationInfo;
   next?: PaginationInfo;
-}
+};
 
 const ulStyles: SerializedStyles = css`
   display: flex;
@@ -33,6 +33,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
@@ -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/config.js b/src/config.js
@@ -20,4 +20,4 @@ module.exports = {
   twitterCard: `summary`,
   twitterImgAlt: `The Node.js Hexagon Logo`,
   facebook: `https://www.facebook.com/nodejsfoundation/`,
-}
+};
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -14,14 +14,14 @@ export default (props: Props) => {
   return (
     <Layout title={title} description={description}>
       <Hero title={title} />
-      <article style={{width: '100%'}} className="article-reader">
-          <p>
-            The page you're trying to access does not exist. Go back to the
-            Homepage or find what you're looking for in the menu.
-          </p>
-          <p>
-            Take me back to the <a href="/">Homepage</a> →
-          </p>
+      <article style={{ width: '100%' }} className="article-reader">
+        <p>
+          The page you're trying to access does not exist. Go back to the
+          Homepage or find what you're looking for in the menu.
+        </p>
+        <p>
+          Take me back to the <a href="/">Homepage</a> →
+        </p>
       </article>
     </Layout>
   );

diff --git a/src/util/createSlug.js b/src/util/createSlug.js
@@ -2,9 +2,9 @@ function createSlug(title) {
   let slug = title.toLowerCase().trim();
 
   const sets = [
-    {to: 'nodejs', from: /node.js/ }, // Replace node.js
-    {to: '-and-', from: /&/ }, // Replace &
-    {to: '-', from: /[/_,:;\\ .]/g } // Replace /_,:;\. and whitespace
+    { to: 'nodejs', from: /node.js/ }, // Replace node.js
+    { to: '-and-', from: /&/ }, // Replace &
+    { to: '-', from: /[/_,:;\\ .]/g }, // Replace /_,:;\. and whitespace
   ];
 
   sets.forEach(set => {
@@ -13,9 +13,9 @@ function createSlug(title) {
 
   return slug
     .replace(/[^\w\-]+/g, '') // Remove any non word characters
-    .replace(/--+/g, '-')   // Replace multiple hyphens with single
-    .replace(/^-/, '')        // Remove any leading hyphen
-    .replace(/-$/, '');       // Remove any trailing hyphen
+    .replace(/--+/g, '-') // Replace multiple hyphens with single
+    .replace(/^-/, '') // Remove any leading hyphen
+    .replace(/-$/, ''); // Remove any trailing hyphen
 }
 
 module.exports = createSlug;
diff --git 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-setup.js b/test-setup.js
@@ -1,3 +1,3 @@
 global.___loader = {
   enqueue: jest.fn(),
-}
+};
diff --git a/test/components/author-link.test.tsx b/test/components/author-link.test.tsx
@@ -5,7 +5,9 @@ import AuthorLink from '../../src/components/author-link';
 describe('AuthorLink component', () => {
   it('renders correctly', () => {
     const username = 'test-author';
-    const tree = renderer.create(<AuthorLink key={username} username={username} />).toJSON();
+    const tree = renderer
+      .create(<AuthorLink key={username} username={username} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('does not render without a username', () => {

diff --git 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
@@ -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/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', () => {

diff --git a/test/util/createSlug.test.js b/test/util/createSlug.test.js
@@ -13,7 +13,7 @@ describe('Tests for createSlug', () => {
       'title: subtitle',
       'a; b',
       'C:\\Program Files\\nodejs',
-      'a---b'
+      'a---b',
     ].map(createSlug);
     expect(slugs).toEqual([
       'how-to-install-nodejs',
@@ -26,7 +26,7 @@ describe('Tests for createSlug', () => {
       'title-subtitle',
       'a-b',
       'c-program-files-nodejs',
-      'a-b'
+      'a-b',
     ]);
   });
 });
diff --git a/test/util/onCreateNode.test.js b/test/util/onCreateNode.test.js
@@ -9,9 +9,9 @@ function createMockNodeOfType(type) {
     getNode: jest.fn(),
     node: {
       internal: { type },
-      frontmatter: { title: 'Test title' }
-    }
-  }
+      frontmatter: { title: 'Test title' },
+    },
+  };
 }
 
 describe('Tests for onCreateNode', () => {

diff --git a/tslint.json b/tslint.json
@@ -1,5 +1,8 @@
 {
   "extends": ["tslint-react", "tslint-config-prettier"],
+  "jsRules": {
+    "no-empty": true
+  },
   "rules": {
     "array-type": [true, "array"],
     "arrow-return-shorthand": true,

diff --git a/yarn.lock b/yarn.lock
@@ -9564,9 +9564,10 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@^1.14.2:
-  version "1.15.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.3.tgz#1feaac5bdd181237b54dbe65d874e02a1472786a"
+prettier@^1.16.4:
+  version "1.16.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
+  integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
 
 pretty-bytes@^4.0.2:
   version "4.0.2"