From 19ae1537d94c9c6cad7aedecbf45ff82d87b4cae Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 1 Apr 2020 14:19:05 +0300
Subject: [PATCH 01/51] Move blog's components under Blog namespace

---
 .../{BlogFeed => Blog/Feed}/Item/index.tsx    | 14 +++++------
 .../Feed}/Item/placeholder.svg                |  0
 .../Feed}/Item/styles.module.css              |  0
 .../{BlogFeed => Blog/Feed}/index.tsx         | 12 +++++-----
 .../{BlogFeed => Blog/Feed}/styles.module.css |  0
 .../{BlogFeedMeta => Blog/FeedMeta}/index.tsx |  8 +++----
 .../FeedMeta}/styles.module.css               |  0
 .../{BlogHome => Blog/Home}/index.tsx         | 14 +++++------
 .../{BlogLayout => Blog/Layout}/index.tsx     |  8 +++----
 .../Layout}/styles.module.css                 |  0
 .../{BlogPost => Blog/Post}/HeroPic/index.tsx |  4 ++--
 .../Post}/HeroPic/styles.module.css           |  0
 .../Post}/Markdown/index.tsx                  |  0
 .../Post}/Markdown/styles.module.css          |  0
 .../Post}/Share/icons/facebook.svg            |  0
 .../Post}/Share/icons/subscribe.svg           |  0
 .../Post}/Share/icons/twitter.svg             |  0
 .../{BlogPost => Blog/Post}/Share/index.tsx   |  2 +-
 .../Post}/Share/styles.module.css             |  0
 .../{BlogPost => Blog/Post}/Tooltip/index.tsx |  0
 .../Post}/Tooltip/styles.module.css           |  0
 .../{BlogPost => Blog/Post}/index.tsx         | 24 +++++++++----------
 .../{BlogPost => Blog/Post}/styles.module.css |  0
 .../{BlogTags => Blog/Tags}/index.tsx         | 14 +++++------
 src/components/Page/index.tsx                 |  4 ++--
 src/templates/blog-home.tsx                   |  4 ++--
 src/templates/blog-post.tsx                   |  4 ++--
 src/templates/blog-tags.tsx                   |  4 ++--
 28 files changed, 58 insertions(+), 58 deletions(-)
 rename src/components/{BlogFeed => Blog/Feed}/Item/index.tsx (93%)
 rename src/components/{BlogFeed => Blog/Feed}/Item/placeholder.svg (100%)
 rename src/components/{BlogFeed => Blog/Feed}/Item/styles.module.css (100%)
 rename src/components/{BlogFeed => Blog/Feed}/index.tsx (83%)
 rename src/components/{BlogFeed => Blog/Feed}/styles.module.css (100%)
 rename src/components/{BlogFeedMeta => Blog/FeedMeta}/index.tsx (86%)
 rename src/components/{BlogFeedMeta => Blog/FeedMeta}/styles.module.css (100%)
 rename src/components/{BlogHome => Blog/Home}/index.tsx (67%)
 rename src/components/{BlogLayout => Blog/Layout}/index.tsx (80%)
 rename src/components/{BlogLayout => Blog/Layout}/styles.module.css (100%)
 rename src/components/{BlogPost => Blog/Post}/HeroPic/index.tsx (93%)
 rename src/components/{BlogPost => Blog/Post}/HeroPic/styles.module.css (100%)
 rename src/components/{BlogPost => Blog/Post}/Markdown/index.tsx (100%)
 rename src/components/{BlogPost => Blog/Post}/Markdown/styles.module.css (100%)
 rename src/components/{BlogPost => Blog/Post}/Share/icons/facebook.svg (100%)
 rename src/components/{BlogPost => Blog/Post}/Share/icons/subscribe.svg (100%)
 rename src/components/{BlogPost => Blog/Post}/Share/icons/twitter.svg (100%)
 rename src/components/{BlogPost => Blog/Post}/Share/index.tsx (98%)
 rename src/components/{BlogPost => Blog/Post}/Share/styles.module.css (100%)
 rename src/components/{BlogPost => Blog/Post}/Tooltip/index.tsx (100%)
 rename src/components/{BlogPost => Blog/Post}/Tooltip/styles.module.css (100%)
 rename src/components/{BlogPost => Blog/Post}/index.tsx (85%)
 rename src/components/{BlogPost => Blog/Post}/styles.module.css (100%)
 rename src/components/{BlogTags => Blog/Tags}/index.tsx (53%)

diff --git a/src/components/BlogFeed/Item/index.tsx b/src/components/Blog/Feed/Item/index.tsx
similarity index 93%
rename from src/components/BlogFeed/Item/index.tsx
rename to src/components/Blog/Feed/Item/index.tsx
index acffe4e7cb..23a646cdf3 100644
--- a/src/components/BlogFeed/Item/index.tsx
+++ b/src/components/Blog/Feed/Item/index.tsx
@@ -1,17 +1,17 @@
 import React, { useEffect, useRef } from 'react'
 import { useRafState, useWindowSize } from 'react-use'
 import { graphql } from 'gatsby'
-import Link from '../../Link'
+import Link from '../../../Link'
 import Image, { FixedObject, FluidObject } from 'gatsby-image'
 import cn from 'classnames'
 
-import BlogFeedMeta from '../../BlogFeedMeta'
+import FeedMeta from '../../FeedMeta'
 
 import styles from './styles.module.css'
 
 import { ReactComponent as Placeholder } from './placeholder.svg'
 
-export interface IBlogFeedPostData {
+export interface IBlogPostData {
   id: string
   timeToRead: string
   fields: {
@@ -45,10 +45,10 @@ export interface IBlogFeedPostData {
 
 interface IBlogFeedItemProps {
   big?: boolean
-  feedPost: IBlogFeedPostData
+  feedPost: IBlogPostData
 }
 
-const BlogFeedItem: React.SFC<IBlogFeedItemProps> = ({
+const Item: React.SFC<IBlogFeedItemProps> = ({
   big,
   feedPost: { fields, frontmatter, timeToRead }
 }) => {
@@ -97,7 +97,7 @@ const BlogFeedItem: React.SFC<IBlogFeedItemProps> = ({
         <div className={styles.description}>{description}</div>
       </div>
       <div className={styles.meta}>
-        <BlogFeedMeta
+        <FeedMeta
           name={name}
           avatar={avatar}
           date={date}
@@ -158,4 +158,4 @@ export const query = graphql`
   }
 `
 
-export default BlogFeedItem
+export default Item
diff --git a/src/components/BlogFeed/Item/placeholder.svg b/src/components/Blog/Feed/Item/placeholder.svg
similarity index 100%
rename from src/components/BlogFeed/Item/placeholder.svg
rename to src/components/Blog/Feed/Item/placeholder.svg
diff --git a/src/components/BlogFeed/Item/styles.module.css b/src/components/Blog/Feed/Item/styles.module.css
similarity index 100%
rename from src/components/BlogFeed/Item/styles.module.css
rename to src/components/Blog/Feed/Item/styles.module.css
diff --git a/src/components/BlogFeed/index.tsx b/src/components/Blog/Feed/index.tsx
similarity index 83%
rename from src/components/BlogFeed/index.tsx
rename to src/components/Blog/Feed/index.tsx
index ac0ba6261f..6c240fd4ce 100644
--- a/src/components/BlogFeed/index.tsx
+++ b/src/components/Blog/Feed/index.tsx
@@ -4,14 +4,14 @@ import React from 'react'
 
 import cn from 'classnames'
 
-import Paginator, { IPaginatorPageInfo } from '../Paginator'
-import BlogFeedItem, { IBlogFeedPostData } from './Item'
+import Paginator, { IPaginatorPageInfo } from '../../Paginator'
+import Item, { IBlogPostData } from './Item'
 
 import styles from './styles.module.css'
 
 export interface IBlogFeedPostList {
   edges: Array<{
-    node: IBlogFeedPostData
+    node: IBlogPostData
   }>
 }
 
@@ -23,7 +23,7 @@ interface IBlogFeedProps {
   pageInfo: IPaginatorPageInfo
 }
 
-const BlogFeed: React.SFC<IBlogFeedProps> = ({
+const Feed: React.SFC<IBlogFeedProps> = ({
   feedPostList: { edges },
   pageInfo,
   bigFirst = true,
@@ -42,7 +42,7 @@ const BlogFeed: React.SFC<IBlogFeedProps> = ({
       </div>
       <div className={styles.posts}>
         {edges.map(({ node }, index) => (
-          <BlogFeedItem
+          <Item
             feedPost={node}
             key={node.id}
             big={bigFirst && index === 0 && pageInfo.currentPage === 1}
@@ -64,4 +64,4 @@ export const query = graphql`
   }
 `
 
-export default BlogFeed
+export default Feed
diff --git a/src/components/BlogFeed/styles.module.css b/src/components/Blog/Feed/styles.module.css
similarity index 100%
rename from src/components/BlogFeed/styles.module.css
rename to src/components/Blog/Feed/styles.module.css
diff --git a/src/components/BlogFeedMeta/index.tsx b/src/components/Blog/FeedMeta/index.tsx
similarity index 86%
rename from src/components/BlogFeedMeta/index.tsx
rename to src/components/Blog/FeedMeta/index.tsx
index 993ea2a85b..87feed81f4 100644
--- a/src/components/BlogFeedMeta/index.tsx
+++ b/src/components/Blog/FeedMeta/index.tsx
@@ -1,8 +1,8 @@
 import Image, { FixedObject } from 'gatsby-image'
 import React from 'react'
 
-import Link from '../Link'
-import { pluralizeComments } from '../../utils/i18n'
+import Link from '../../Link'
+import { pluralizeComments } from '../../../utils/i18n'
 
 import styles from './styles.module.css'
 
@@ -19,7 +19,7 @@ interface IBlogFeedMetaProps {
   timeToRead: string
 }
 
-const BlogFeedMeta: React.SFC<IBlogFeedMetaProps> = ({
+const FeedMeta: React.SFC<IBlogFeedMetaProps> = ({
   avatar,
   commentsUrl,
   commentsCount,
@@ -47,4 +47,4 @@ const BlogFeedMeta: React.SFC<IBlogFeedMetaProps> = ({
   )
 }
 
-export default BlogFeedMeta
+export default FeedMeta
diff --git a/src/components/BlogFeedMeta/styles.module.css b/src/components/Blog/FeedMeta/styles.module.css
similarity index 100%
rename from src/components/BlogFeedMeta/styles.module.css
rename to src/components/Blog/FeedMeta/styles.module.css
diff --git a/src/components/BlogHome/index.tsx b/src/components/Blog/Home/index.tsx
similarity index 67%
rename from src/components/BlogHome/index.tsx
rename to src/components/Blog/Home/index.tsx
index 551ddb620e..7cd1ed32c6 100644
--- a/src/components/BlogHome/index.tsx
+++ b/src/components/Blog/Home/index.tsx
@@ -1,20 +1,20 @@
 import React from 'react'
 
-import { IPaginatorPageInfo } from '../Paginator'
-import PageContent from '../PageContent'
-import BlogFeed, { IBlogFeedPostList } from '../BlogFeed'
-import Subscribe from '../Subscribe'
+import { IPaginatorPageInfo } from '../../Paginator'
+import PageContent from '../../PageContent'
+import Feed, { IBlogFeedPostList } from '../Feed'
+import Subscribe from '../../Subscribe'
 
 interface IBlogHomeProps {
   posts: IBlogFeedPostList
   pageInfo: IPaginatorPageInfo
 }
 
-const BlogHome: React.SFC<IBlogHomeProps> = ({ posts, pageInfo }) => {
+const Home: React.SFC<IBlogHomeProps> = ({ posts, pageInfo }) => {
   return (
     <>
       <PageContent>
-        <BlogFeed
+        <Feed
           feedPostList={posts}
           pageInfo={pageInfo}
           header="Data Version Control in Real Life"
@@ -32,4 +32,4 @@ const BlogHome: React.SFC<IBlogHomeProps> = ({ posts, pageInfo }) => {
   )
 }
 
-export default BlogHome
+export default Home
diff --git a/src/components/BlogLayout/index.tsx b/src/components/Blog/Layout/index.tsx
similarity index 80%
rename from src/components/BlogLayout/index.tsx
rename to src/components/Blog/Layout/index.tsx
index bf1f5907ae..8371ea95b6 100644
--- a/src/components/BlogLayout/index.tsx
+++ b/src/components/Blog/Layout/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import SEO from '../SEO'
-import MainLayout, { LayoutComponent } from '../MainLayout'
+import SEO from '../../SEO'
+import MainLayout, { LayoutComponent } from '../../MainLayout'
 
 import styles from './styles.module.css'
 
@@ -9,7 +9,7 @@ const keywords =
 const description =
   'Data Version Control Blog. We write about machine learning workflow. From data versioning and processing to model productionization. We share our news, findings, interesting reads, community takeaways.'
 
-const BlogLayout: LayoutComponent = ({ children, ...restProps }) => (
+const Layout: LayoutComponent = ({ children, ...restProps }) => (
   <MainLayout {...restProps} className={styles.layoutBlog}>
     <SEO
       title="Blog"
@@ -24,4 +24,4 @@ const BlogLayout: LayoutComponent = ({ children, ...restProps }) => (
   </MainLayout>
 )
 
-export default BlogLayout
+export default Layout
diff --git a/src/components/BlogLayout/styles.module.css b/src/components/Blog/Layout/styles.module.css
similarity index 100%
rename from src/components/BlogLayout/styles.module.css
rename to src/components/Blog/Layout/styles.module.css
diff --git a/src/components/BlogPost/HeroPic/index.tsx b/src/components/Blog/Post/HeroPic/index.tsx
similarity index 93%
rename from src/components/BlogPost/HeroPic/index.tsx
rename to src/components/Blog/Post/HeroPic/index.tsx
index 5be49f95e5..b296a4625d 100644
--- a/src/components/BlogPost/HeroPic/index.tsx
+++ b/src/components/Blog/Post/HeroPic/index.tsx
@@ -1,11 +1,11 @@
 import Image from 'gatsby-image'
 import React from 'react'
 
-import { BLOG } from '../../../consts'
+import { BLOG } from '../../../../consts'
 import {
   IBlogPostHeroPic,
   IGatsbyImageProps
-} from '../../../templates/blog-post'
+} from '../../../../templates/blog-post'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/BlogPost/HeroPic/styles.module.css b/src/components/Blog/Post/HeroPic/styles.module.css
similarity index 100%
rename from src/components/BlogPost/HeroPic/styles.module.css
rename to src/components/Blog/Post/HeroPic/styles.module.css
diff --git a/src/components/BlogPost/Markdown/index.tsx b/src/components/Blog/Post/Markdown/index.tsx
similarity index 100%
rename from src/components/BlogPost/Markdown/index.tsx
rename to src/components/Blog/Post/Markdown/index.tsx
diff --git a/src/components/BlogPost/Markdown/styles.module.css b/src/components/Blog/Post/Markdown/styles.module.css
similarity index 100%
rename from src/components/BlogPost/Markdown/styles.module.css
rename to src/components/Blog/Post/Markdown/styles.module.css
diff --git a/src/components/BlogPost/Share/icons/facebook.svg b/src/components/Blog/Post/Share/icons/facebook.svg
similarity index 100%
rename from src/components/BlogPost/Share/icons/facebook.svg
rename to src/components/Blog/Post/Share/icons/facebook.svg
diff --git a/src/components/BlogPost/Share/icons/subscribe.svg b/src/components/Blog/Post/Share/icons/subscribe.svg
similarity index 100%
rename from src/components/BlogPost/Share/icons/subscribe.svg
rename to src/components/Blog/Post/Share/icons/subscribe.svg
diff --git a/src/components/BlogPost/Share/icons/twitter.svg b/src/components/Blog/Post/Share/icons/twitter.svg
similarity index 100%
rename from src/components/BlogPost/Share/icons/twitter.svg
rename to src/components/Blog/Post/Share/icons/twitter.svg
diff --git a/src/components/BlogPost/Share/index.tsx b/src/components/Blog/Post/Share/index.tsx
similarity index 98%
rename from src/components/BlogPost/Share/index.tsx
rename to src/components/Blog/Post/Share/index.tsx
index 4503bafa95..f6b8a75efd 100644
--- a/src/components/BlogPost/Share/index.tsx
+++ b/src/components/Blog/Post/Share/index.tsx
@@ -1,7 +1,7 @@
 import { graphql, useStaticQuery } from 'gatsby'
 import React, { useCallback } from 'react'
 
-import Link from '../../Link'
+import Link from '../../../Link'
 import Tooltip from '../Tooltip'
 
 import { ReactComponent as Facebook } from './icons/facebook.svg'
diff --git a/src/components/BlogPost/Share/styles.module.css b/src/components/Blog/Post/Share/styles.module.css
similarity index 100%
rename from src/components/BlogPost/Share/styles.module.css
rename to src/components/Blog/Post/Share/styles.module.css
diff --git a/src/components/BlogPost/Tooltip/index.tsx b/src/components/Blog/Post/Tooltip/index.tsx
similarity index 100%
rename from src/components/BlogPost/Tooltip/index.tsx
rename to src/components/Blog/Post/Tooltip/index.tsx
diff --git a/src/components/BlogPost/Tooltip/styles.module.css b/src/components/Blog/Post/Tooltip/styles.module.css
similarity index 100%
rename from src/components/BlogPost/Tooltip/styles.module.css
rename to src/components/Blog/Post/Tooltip/styles.module.css
diff --git a/src/components/BlogPost/index.tsx b/src/components/Blog/Post/index.tsx
similarity index 85%
rename from src/components/BlogPost/index.tsx
rename to src/components/Blog/Post/index.tsx
index 369f0149b2..9eb7686ae3 100644
--- a/src/components/BlogPost/index.tsx
+++ b/src/components/Blog/Post/index.tsx
@@ -3,24 +3,24 @@ import cn from 'classnames'
 import React, { useMemo, useRef } from 'react'
 import { useWindowScroll, useWindowSize } from 'react-use'
 
-import { IBlogPostData } from '../../templates/blog-post'
+import { IBlogPostData } from '../../../templates/blog-post'
 
-import { useCommentsCount } from '../../utils/api'
-import { pluralizeComments } from '../../utils/i18n'
-import tagToSlug from '../../utils/tagToSlug'
+import { useCommentsCount } from '../../../utils/api'
+import { pluralizeComments } from '../../../utils/i18n'
+import tagToSlug from '../../../utils/tagToSlug'
 
 import Markdown from './Markdown'
-import BlogFeedMeta from '../BlogFeedMeta'
-import Link from '../Link'
-import PseudoButton from '../PseudoButton'
+import FeedMeta from '../FeedMeta'
+import Link from '../../Link'
+import PseudoButton from '../../PseudoButton'
 import HeroPic from './HeroPic'
 import Share from './Share'
-import PageContent from '../PageContent'
-import Subscribe from '../Subscribe'
+import PageContent from '../../PageContent'
+import Subscribe from '../../Subscribe'
 
 import styles from './styles.module.css'
 
-const BlogPost: React.SFC<IBlogPostData> = ({
+const Post: React.SFC<IBlogPostData> = ({
   html,
   timeToRead,
   frontmatter,
@@ -80,7 +80,7 @@ const BlogPost: React.SFC<IBlogPostData> = ({
               ) : (
                 <div className={styles.description}>{description}</div>
               )}
-              <BlogFeedMeta
+              <FeedMeta
                 commentsCount={result}
                 commentsUrl={commentsUrl}
                 name={name}
@@ -128,4 +128,4 @@ const BlogPost: React.SFC<IBlogPostData> = ({
   )
 }
 
-export default BlogPost
+export default Post
diff --git a/src/components/BlogPost/styles.module.css b/src/components/Blog/Post/styles.module.css
similarity index 100%
rename from src/components/BlogPost/styles.module.css
rename to src/components/Blog/Post/styles.module.css
diff --git a/src/components/BlogTags/index.tsx b/src/components/Blog/Tags/index.tsx
similarity index 53%
rename from src/components/BlogTags/index.tsx
rename to src/components/Blog/Tags/index.tsx
index bd1f411f73..3039c3125f 100644
--- a/src/components/BlogTags/index.tsx
+++ b/src/components/Blog/Tags/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
-import { IPaginatorPageInfo } from '../Paginator'
-import PageContent from '../PageContent'
-import BlogFeed, { IBlogFeedPostList } from '../BlogFeed'
-import Subscribe from '../Subscribe'
+import { IPaginatorPageInfo } from '../../Paginator'
+import PageContent from '../../PageContent'
+import Feed, { IBlogFeedPostList } from '../Feed'
+import Subscribe from '../../Subscribe'
 
 interface IBlogTagsProps {
   posts: IBlogFeedPostList
@@ -11,11 +11,11 @@ interface IBlogTagsProps {
   header: string
 }
 
-const BlogTags: React.SFC<IBlogTagsProps> = ({ posts, pageInfo, header }) => {
+const Tags: React.SFC<IBlogTagsProps> = ({ posts, pageInfo, header }) => {
   return (
     <>
       <PageContent>
-        <BlogFeed
+        <Feed
           feedPostList={posts}
           pageInfo={pageInfo}
           bigFirst={false}
@@ -27,4 +27,4 @@ const BlogTags: React.SFC<IBlogTagsProps> = ({ posts, pageInfo, header }) => {
   )
 }
 
-export default BlogTags
+export default Tags
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index 33df66a96b..f5c6150950 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -4,7 +4,7 @@ import { GlobalStyle } from '../../styles'
 import MainLayout, { LayoutComponent } from '../MainLayout'
 import DefaultSEO from './DefaultSEO'
 import DocumentationLayout from '../Documentation/Layout'
-import BlogLayout from '../BlogLayout'
+import Layout from '../Blog/Layout'
 
 import { useRedirects, useAnchorNavigation, useSmoothScroll } from './utils'
 
@@ -40,7 +40,7 @@ const Page: React.SFC<IPageProps> = props => {
     if (props.pageContext.isDocs) {
       LayoutComponent = DocumentationLayout as LayoutComponent
     } else if (props.pageContext.isBlog) {
-      LayoutComponent = BlogLayout
+      LayoutComponent = Layout
     }
   }
 
diff --git a/src/templates/blog-home.tsx b/src/templates/blog-home.tsx
index e87863d23a..2dd5fe7556 100644
--- a/src/templates/blog-home.tsx
+++ b/src/templates/blog-home.tsx
@@ -5,9 +5,9 @@ import {
   IPaginatorLocationContextValue,
   PaginatorLocationContext
 } from '../components/Paginator/LocationContext'
-import BlogHome from '../components/BlogHome'
+import BlogHome from '../components/Blog/Home'
 import { IPaginatorPageInfo } from '../components/Paginator'
-import { IBlogFeedPostList } from '../components/BlogFeed'
+import { IBlogFeedPostList } from '../components/Blog/Feed'
 
 interface IBlogHomePageProps {
   data: { posts: IBlogFeedPostList }
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
index 6fb930c868..86fa915818 100644
--- a/src/templates/blog-post.tsx
+++ b/src/templates/blog-post.tsx
@@ -4,7 +4,7 @@ import { graphql } from 'gatsby'
 import React from 'react'
 
 import SEO from '../components/SEO'
-import BlogPost from '../components/BlogPost'
+import Post from '../components/Blog/Post'
 
 interface IFluidObject extends FluidObject {
   presentationWidth?: number
@@ -86,7 +86,7 @@ const BlogPostPage: React.SFC<IBlogPostPageProps> = ({ data }) => {
           post.frontmatter.picture.childImageSharp.fluid.src
         }
       />
-      <BlogPost {...post} />
+      <Post {...post} />
     </>
   )
 }
diff --git a/src/templates/blog-tags.tsx b/src/templates/blog-tags.tsx
index 21b5620c65..f8aae1db7b 100644
--- a/src/templates/blog-tags.tsx
+++ b/src/templates/blog-tags.tsx
@@ -8,8 +8,8 @@ import {
 } from '../components/Paginator/LocationContext'
 import SEO from '../components/SEO'
 import { IPaginatorPageInfo } from '../components/Paginator'
-import BlogTags from '../components/BlogTags'
-import { IBlogFeedPostList } from '../components/BlogFeed'
+import BlogTags from '../components/Blog/Tags'
+import { IBlogFeedPostList } from '../components/Blog/Feed'
 
 interface IBlogTagsPageData {
   data: { posts: IBlogFeedPostList }

From 5edd0de26733522b955ed6935dff03b257bc862c Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 1 Apr 2020 14:35:55 +0300
Subject: [PATCH 02/51] Restructure components

---
 src/components/Blog/Home/index.tsx            |   4 +-
 src/components/Blog/Post/index.tsx            |   4 +-
 src/components/Blog/Tags/index.tsx            |   4 +-
 src/components/Community/index.js             |   4 +-
 .../Layout}/SearchForm/index.js               |   2 +-
 .../Layout}/SearchForm/styles.js              |   2 +-
 src/components/Documentation/Layout/index.js  |   6 +-
 .../{ => Features}/FeaturesHero/index.js      |   0
 .../{ => Features}/FeaturesHero/styles.js     |   0
 src/components/Features/index.js              |   8 +-
 .../{Hamburger => HamburgerIcon}/index.tsx    |   2 +-
 .../styles.module.css                         |   0
 src/components/HamburgerMenu/index.tsx        |   4 +-
 src/components/{Hero => HeroSection}/index.js |   4 +-
 .../{Hero => HeroSection}/styles.js           |   0
 src/components/{ => Home}/Diagram/index.js    |   4 +-
 src/components/{ => Home}/Diagram/styles.js   |   2 +-
 .../LandingHero}/GithubLine/index.js          |   2 +-
 .../LandingHero}/GithubLine/styles.js         |   0
 .../{ => Home}/LandingHero/index.js           |   8 +-
 .../{ => Home}/LandingHero/styles.js          |   2 +-
 src/components/{ => Home}/LearnMore/index.js  |   2 +-
 src/components/{ => Home}/LearnMore/styles.js |   2 +-
 .../{ => Home}/PromoSection/index.js          |   4 +-
 .../{ => Home}/PromoSection/styles.js         |   2 +-
 .../{ => Home/UseCases}/TextCollapse/index.js |   0
 .../UseCases}/TextCollapse/styles.js          |   0
 .../{ => Home/UseCases}/Video/index.js        |   2 +-
 .../{ => Home/UseCases}/Video/styles.js       |   0
 src/components/{ => Home}/UseCases/index.js   |   6 +-
 src/components/{ => Home}/UseCases/styles.js  |   2 +-
 src/components/Home/index.js                  |  20 +--
 .../{ => LayoutHeader}/Nav/index.tsx          |   8 +-
 .../{ => LayoutHeader}/Nav/styles.module.css  |   0
 src/components/LayoutHeader/index.tsx         |   2 +-
 .../form => SubscribeSection/Form}/index.tsx  |   0
 .../Form}/styles.module.css                   |   0
 .../glyph-1.svg                               |   0
 .../glyph-2.svg                               |   0
 .../{Subscribe => SubscribeSection}/index.tsx |   4 +-
 .../styles.module.css                         |   0
 src/components/{ => Support}/Popover/index.js |   0
 .../{ => Support}/Popover/styles.js           |   0
 src/components/Support/index.js               |   8 +-
 src/components/TextRotate/index.js            | 132 ------------------
 src/components/TextRotate/styles.js           |   7 -
 .../{ => Tooltip/MobileView}/Modal/index.js   |   0
 src/components/Tooltip/MobileView/index.js    |   2 +-
 48 files changed, 63 insertions(+), 202 deletions(-)
 rename src/components/{ => Documentation/Layout}/SearchForm/index.js (95%)
 rename src/components/{ => Documentation/Layout}/SearchForm/styles.js (95%)
 rename src/components/{ => Features}/FeaturesHero/index.js (100%)
 rename src/components/{ => Features}/FeaturesHero/styles.js (100%)
 rename src/components/{Hamburger => HamburgerIcon}/index.tsx (85%)
 rename src/components/{Hamburger => HamburgerIcon}/styles.module.css (100%)
 rename src/components/{Hero => HeroSection}/index.js (75%)
 rename src/components/{Hero => HeroSection}/styles.js (100%)
 rename src/components/{ => Home}/Diagram/index.js (98%)
 rename src/components/{ => Home}/Diagram/styles.js (97%)
 rename src/components/{ => Home/LandingHero}/GithubLine/index.js (95%)
 rename src/components/{ => Home/LandingHero}/GithubLine/styles.js (100%)
 rename src/components/{ => Home}/LandingHero/index.js (93%)
 rename src/components/{ => Home}/LandingHero/styles.js (98%)
 rename src/components/{ => Home}/LearnMore/index.js (92%)
 rename src/components/{ => Home}/LearnMore/styles.js (96%)
 rename src/components/{ => Home}/PromoSection/index.js (92%)
 rename src/components/{ => Home}/PromoSection/styles.js (98%)
 rename src/components/{ => Home/UseCases}/TextCollapse/index.js (100%)
 rename src/components/{ => Home/UseCases}/TextCollapse/styles.js (100%)
 rename src/components/{ => Home/UseCases}/Video/index.js (97%)
 rename src/components/{ => Home/UseCases}/Video/styles.js (100%)
 rename src/components/{ => Home}/UseCases/index.js (95%)
 rename src/components/{ => Home}/UseCases/styles.js (96%)
 rename src/components/{ => LayoutHeader}/Nav/index.tsx (94%)
 rename src/components/{ => LayoutHeader}/Nav/styles.module.css (100%)
 rename src/components/{Subscribe/form => SubscribeSection/Form}/index.tsx (100%)
 rename src/components/{Subscribe/form => SubscribeSection/Form}/styles.module.css (100%)
 rename src/components/{Subscribe => SubscribeSection}/glyph-1.svg (100%)
 rename src/components/{Subscribe => SubscribeSection}/glyph-2.svg (100%)
 rename src/components/{Subscribe => SubscribeSection}/index.tsx (90%)
 rename src/components/{Subscribe => SubscribeSection}/styles.module.css (100%)
 rename src/components/{ => Support}/Popover/index.js (100%)
 rename src/components/{ => Support}/Popover/styles.js (100%)
 delete mode 100644 src/components/TextRotate/index.js
 delete mode 100644 src/components/TextRotate/styles.js
 rename src/components/{ => Tooltip/MobileView}/Modal/index.js (100%)

diff --git a/src/components/Blog/Home/index.tsx b/src/components/Blog/Home/index.tsx
index 7cd1ed32c6..5d3c2d9610 100644
--- a/src/components/Blog/Home/index.tsx
+++ b/src/components/Blog/Home/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { IPaginatorPageInfo } from '../../Paginator'
 import PageContent from '../../PageContent'
 import Feed, { IBlogFeedPostList } from '../Feed'
-import Subscribe from '../../Subscribe'
+import SubscribeSection from '../../SubscribeSection'
 
 interface IBlogHomeProps {
   posts: IBlogFeedPostList
@@ -27,7 +27,7 @@ const Home: React.SFC<IBlogHomeProps> = ({ posts, pageInfo }) => {
           }
         />
       </PageContent>
-      <Subscribe />
+      <SubscribeSection />
     </>
   )
 }
diff --git a/src/components/Blog/Post/index.tsx b/src/components/Blog/Post/index.tsx
index 9eb7686ae3..5bcb8cc72c 100644
--- a/src/components/Blog/Post/index.tsx
+++ b/src/components/Blog/Post/index.tsx
@@ -16,7 +16,7 @@ import PseudoButton from '../../PseudoButton'
 import HeroPic from './HeroPic'
 import Share from './Share'
 import PageContent from '../../PageContent'
-import Subscribe from '../../Subscribe'
+import SubscribeSection from '../../SubscribeSection'
 
 import styles from './styles.module.css'
 
@@ -123,7 +123,7 @@ const Post: React.SFC<IBlogPostData> = ({
           )}
         </div>
       </PageContent>
-      <Subscribe />
+      <SubscribeSection />
     </>
   )
 }
diff --git a/src/components/Blog/Tags/index.tsx b/src/components/Blog/Tags/index.tsx
index 3039c3125f..1ceacb7374 100644
--- a/src/components/Blog/Tags/index.tsx
+++ b/src/components/Blog/Tags/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { IPaginatorPageInfo } from '../../Paginator'
 import PageContent from '../../PageContent'
 import Feed, { IBlogFeedPostList } from '../Feed'
-import Subscribe from '../../Subscribe'
+import SubscribeSection from '../../SubscribeSection'
 
 interface IBlogTagsProps {
   posts: IBlogFeedPostList
@@ -22,7 +22,7 @@ const Tags: React.SFC<IBlogTagsProps> = ({ posts, pageInfo, header }) => {
           header={header}
         />
       </PageContent>
-      <Subscribe />
+      <SubscribeSection />
     </>
   )
 }
diff --git a/src/components/Community/index.js b/src/components/Community/index.js
index e711d01f63..9d59fde4f9 100644
--- a/src/components/Community/index.js
+++ b/src/components/Community/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import Subscribe from '../Subscribe'
+import SubscribeSection from '../SubscribeSection'
 
 import CommunityContribute from './Contribute'
 import CommunityEvents from './Events'
@@ -25,7 +25,7 @@ export default function Community() {
         <CommunityContribute theme={themes.orange} />
         <CommunityLearn theme={themes.green} />
         <CommunityEvents theme={themes.purple} />
-        <Subscribe />
+        <SubscribeSection />
       </PageWrapper>
     </>
   )
diff --git a/src/components/SearchForm/index.js b/src/components/Documentation/Layout/SearchForm/index.js
similarity index 95%
rename from src/components/SearchForm/index.js
rename to src/components/Documentation/Layout/SearchForm/index.js
index a97911c835..265d7581ff 100644
--- a/src/components/SearchForm/index.js
+++ b/src/components/Documentation/Layout/SearchForm/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Promise from 'promise-polyfill'
-import { loadResource } from '../../utils/resources'
+import { loadResource } from '../../../../utils/resources'
 
 import { SearchArea, Input, Wrapper } from './styles'
 
diff --git a/src/components/SearchForm/styles.js b/src/components/Documentation/Layout/SearchForm/styles.js
similarity index 95%
rename from src/components/SearchForm/styles.js
rename to src/components/Documentation/Layout/SearchForm/styles.js
index bc74136b77..9852258104 100644
--- a/src/components/SearchForm/styles.js
+++ b/src/components/Documentation/Layout/SearchForm/styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { media } from '../../styles'
+import { media } from '../../../../styles'
 
 export const SearchArea = styled.div`
   box-sizing: border-box;
diff --git a/src/components/Documentation/Layout/index.js b/src/components/Documentation/Layout/index.js
index abd03e5f2d..a55a87a3e0 100644
--- a/src/components/Documentation/Layout/index.js
+++ b/src/components/Documentation/Layout/index.js
@@ -1,8 +1,8 @@
 import React, { useCallback, useState } from 'react'
 import PropTypes from 'prop-types'
 import MainLayout, { LayoutModifiers } from '../../MainLayout'
-import Hamburger from '../../Hamburger'
-import SearchForm from '../../SearchForm'
+import HamburgerIcon from '../../HamburgerIcon'
+import SearchForm from './SearchForm'
 import SidebarMenu from './SidebarMenu'
 
 import { Container, Backdrop, Side, SideToggle } from './styles'
@@ -25,7 +25,7 @@ function Layout({ children, ...restProps }) {
         <Backdrop onClick={toggleMenu} visible={isMenuOpen} />
 
         <SideToggle onClick={toggleMenu} isMenuOpen={isMenuOpen}>
-          <Hamburger />
+          <HamburgerIcon />
         </SideToggle>
 
         <Side isOpen={isMenuOpen}>
diff --git a/src/components/FeaturesHero/index.js b/src/components/Features/FeaturesHero/index.js
similarity index 100%
rename from src/components/FeaturesHero/index.js
rename to src/components/Features/FeaturesHero/index.js
diff --git a/src/components/FeaturesHero/styles.js b/src/components/Features/FeaturesHero/styles.js
similarity index 100%
rename from src/components/FeaturesHero/styles.js
rename to src/components/Features/FeaturesHero/styles.js
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
index b762bbebca..a45b7d0577 100644
--- a/src/components/Features/index.js
+++ b/src/components/Features/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import Hero from '../Hero'
-import FeaturesHero from '../FeaturesHero'
+import HeroSection from '../HeroSection'
+import FeaturesHero from './FeaturesHero'
 import TrySection from '../TrySection'
 
 import { Container, Description, Feature, Features, Icon, Name } from './styles'
@@ -9,9 +9,9 @@ import { Container, Description, Feature, Features, Icon, Name } from './styles'
 export default function FeaturesPage() {
   return (
     <>
-      <Hero>
+      <HeroSection>
         <FeaturesHero />
-      </Hero>
+      </HeroSection>
       <Container>
         <Features>
           <Feature>
diff --git a/src/components/Hamburger/index.tsx b/src/components/HamburgerIcon/index.tsx
similarity index 85%
rename from src/components/Hamburger/index.tsx
rename to src/components/HamburgerIcon/index.tsx
index edb16148f3..3c282963d0 100644
--- a/src/components/Hamburger/index.tsx
+++ b/src/components/HamburgerIcon/index.tsx
@@ -7,7 +7,7 @@ interface IHamburgetProps {
   opened: boolean
 }
 
-export default function Hamburger({ opened }: IHamburgetProps) {
+export default function HamburgerIcon({ opened }: IHamburgetProps) {
   return (
     <div className={cn(styles.wrapper, opened && styles.opened)}>
       <div className={cn(styles.line, styles.first)} />
diff --git a/src/components/Hamburger/styles.module.css b/src/components/HamburgerIcon/styles.module.css
similarity index 100%
rename from src/components/Hamburger/styles.module.css
rename to src/components/HamburgerIcon/styles.module.css
diff --git a/src/components/HamburgerMenu/index.tsx b/src/components/HamburgerMenu/index.tsx
index 1cf412660c..c87a231273 100644
--- a/src/components/HamburgerMenu/index.tsx
+++ b/src/components/HamburgerMenu/index.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import React, { useCallback, useState, useEffect } from 'react'
 
-import Hamburger from '../Hamburger'
+import HamburgerIcon from '../HamburgerIcon'
 import Link from '../Link'
 
 import { logEvent } from '../../utils/ga'
@@ -44,7 +44,7 @@ function HamburgerMenu() {
         onClick={toggleMobileMenu}
         onKeyDown={openOnEnterKey}
       >
-        <Hamburger opened={isOpened} />
+        <HamburgerIcon opened={isOpened} />
       </button>
 
       <div className={cn(styles.wrapper, isOpened && styles.opened)}>
diff --git a/src/components/Hero/index.js b/src/components/HeroSection/index.js
similarity index 75%
rename from src/components/Hero/index.js
rename to src/components/HeroSection/index.js
index ba7ab7d285..aed299dca0 100644
--- a/src/components/Hero/index.js
+++ b/src/components/HeroSection/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { Container, Wrapper } from './styles'
 
-export default function Hero({ children }) {
+export default function HeroSection({ children }) {
   return (
     <Wrapper>
       <Container>{children}</Container>
@@ -11,6 +11,6 @@ export default function Hero({ children }) {
   )
 }
 
-Hero.propTypes = {
+HeroSection.propTypes = {
   children: PropTypes.node.isRequired
 }
diff --git a/src/components/Hero/styles.js b/src/components/HeroSection/styles.js
similarity index 100%
rename from src/components/Hero/styles.js
rename to src/components/HeroSection/styles.js
diff --git a/src/components/Diagram/index.js b/src/components/Home/Diagram/index.js
similarity index 98%
rename from src/components/Diagram/index.js
rename to src/components/Home/Diagram/index.js
index a59448f958..c260b5253f 100644
--- a/src/components/Diagram/index.js
+++ b/src/components/Home/Diagram/index.js
@@ -8,9 +8,9 @@ import Slider from 'react-slick'
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
 
-import Link from '../Link'
+import Link from '../../Link'
 
-import { OnlyDesktop, OnlyMobile } from '../../styles'
+import { OnlyDesktop, OnlyMobile } from '../../../styles'
 
 import {
   Abstract,
diff --git a/src/components/Diagram/styles.js b/src/components/Home/Diagram/styles.js
similarity index 97%
rename from src/components/Diagram/styles.js
rename to src/components/Home/Diagram/styles.js
index 34ab734608..6eff3415f3 100644
--- a/src/components/Diagram/styles.js
+++ b/src/components/Home/Diagram/styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { column, columns, container, media } from '../../styles'
+import { column, columns, container, media } from '../../../styles'
 
 export const Diagram = styled.section`
   padding-top: 80px;
diff --git a/src/components/GithubLine/index.js b/src/components/Home/LandingHero/GithubLine/index.js
similarity index 95%
rename from src/components/GithubLine/index.js
rename to src/components/Home/LandingHero/GithubLine/index.js
index f9ca7dddaa..9c57b74562 100644
--- a/src/components/GithubLine/index.js
+++ b/src/components/Home/LandingHero/GithubLine/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import Link from '../Link'
+import Link from '../../../Link'
 
 import { Count, Github, Link as LinkSC, Star, Wrapper } from './styles'
 
diff --git a/src/components/GithubLine/styles.js b/src/components/Home/LandingHero/GithubLine/styles.js
similarity index 100%
rename from src/components/GithubLine/styles.js
rename to src/components/Home/LandingHero/GithubLine/styles.js
diff --git a/src/components/LandingHero/index.js b/src/components/Home/LandingHero/index.js
similarity index 93%
rename from src/components/LandingHero/index.js
rename to src/components/Home/LandingHero/index.js
index e71c64ef32..4fa9710ad6 100644
--- a/src/components/LandingHero/index.js
+++ b/src/components/Home/LandingHero/index.js
@@ -1,12 +1,12 @@
 import React, { Component } from 'react'
 import { scroller } from 'react-scroll'
 
-import DownloadButton from '../DownloadButton'
-import GithubLine from '../GithubLine'
+import DownloadButton from '../../DownloadButton'
+import GithubLine from './GithubLine'
 
-import { logEvent } from '../../utils/ga'
+import { logEvent } from '../../../utils/ga'
 
-import { OnlyDesktop, OnlyMobile } from '../../styles'
+import { OnlyDesktop, OnlyMobile } from '../../../styles'
 import {
   Wrapper,
   About,
diff --git a/src/components/LandingHero/styles.js b/src/components/Home/LandingHero/styles.js
similarity index 98%
rename from src/components/LandingHero/styles.js
rename to src/components/Home/LandingHero/styles.js
index 4f86fb770d..4bebd09ad1 100644
--- a/src/components/LandingHero/styles.js
+++ b/src/components/Home/LandingHero/styles.js
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 
-import { media } from '../../styles'
+import { media } from '../../../styles'
 
 export const Wrapper = styled.div`
   padding-top: 136px;
diff --git a/src/components/LearnMore/index.js b/src/components/Home/LearnMore/index.js
similarity index 92%
rename from src/components/LearnMore/index.js
rename to src/components/Home/LearnMore/index.js
index 60f6084c55..efbb200165 100644
--- a/src/components/LearnMore/index.js
+++ b/src/components/Home/LearnMore/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { scroller } from 'react-scroll'
 
-import { logEvent } from '../../utils/ga'
+import { logEvent } from '../../../utils/ga'
 
 import { Wrapper, Icon, Caption } from './styles'
 
diff --git a/src/components/LearnMore/styles.js b/src/components/Home/LearnMore/styles.js
similarity index 96%
rename from src/components/LearnMore/styles.js
rename to src/components/Home/LearnMore/styles.js
index 73bb565cd2..ea7fd8a65a 100644
--- a/src/components/LearnMore/styles.js
+++ b/src/components/Home/LearnMore/styles.js
@@ -1,6 +1,6 @@
 import styled, { keyframes } from 'styled-components'
 
-import { media } from '../../styles'
+import { media } from '../../../styles'
 
 export const Wrapper = styled.a`
   display: flex;
diff --git a/src/components/PromoSection/index.js b/src/components/Home/PromoSection/index.js
similarity index 92%
rename from src/components/PromoSection/index.js
rename to src/components/Home/PromoSection/index.js
index 74ed013ddd..d882a27872 100644
--- a/src/components/PromoSection/index.js
+++ b/src/components/Home/PromoSection/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import Link from '../Link'
+import Link from '../../Link'
 
-import { logEvent } from '../../utils/ga'
+import { logEvent } from '../../../utils/ga'
 
 import { Button, Buttons, Container, Glyph, Title, Wrapper } from './styles'
 
diff --git a/src/components/PromoSection/styles.js b/src/components/Home/PromoSection/styles.js
similarity index 98%
rename from src/components/PromoSection/styles.js
rename to src/components/Home/PromoSection/styles.js
index 9191df8453..176b05c876 100644
--- a/src/components/PromoSection/styles.js
+++ b/src/components/Home/PromoSection/styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { media } from '../../styles'
+import { media } from '../../../styles'
 
 export const Wrapper = styled.section`
   position: relative;
diff --git a/src/components/TextCollapse/index.js b/src/components/Home/UseCases/TextCollapse/index.js
similarity index 100%
rename from src/components/TextCollapse/index.js
rename to src/components/Home/UseCases/TextCollapse/index.js
diff --git a/src/components/TextCollapse/styles.js b/src/components/Home/UseCases/TextCollapse/styles.js
similarity index 100%
rename from src/components/TextCollapse/styles.js
rename to src/components/Home/UseCases/TextCollapse/styles.js
diff --git a/src/components/Video/index.js b/src/components/Home/UseCases/Video/index.js
similarity index 97%
rename from src/components/Video/index.js
rename to src/components/Home/UseCases/Video/index.js
index 63df5d1016..9810369ef4 100644
--- a/src/components/Video/index.js
+++ b/src/components/Home/UseCases/Video/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import { logEvent } from '../../utils/ga'
+import { logEvent } from '../../../../utils/ga'
 
 import {
   Button,
diff --git a/src/components/Video/styles.js b/src/components/Home/UseCases/Video/styles.js
similarity index 100%
rename from src/components/Video/styles.js
rename to src/components/Home/UseCases/Video/styles.js
diff --git a/src/components/UseCases/index.js b/src/components/Home/UseCases/index.js
similarity index 95%
rename from src/components/UseCases/index.js
rename to src/components/Home/UseCases/index.js
index fe173cbc9b..00a8e810c2 100644
--- a/src/components/UseCases/index.js
+++ b/src/components/Home/UseCases/index.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Element } from 'react-scroll'
 
-import { default as YoutubeVideo } from '../Video'
-import TextCollapse from '../TextCollapse'
+import { default as YoutubeVideo } from './Video'
+import TextCollapse from './TextCollapse'
 
-import { OnlyDesktop, OnlyMobile } from '../../styles'
+import { OnlyDesktop, OnlyMobile } from '../../../styles'
 
 import {
   Case,
diff --git a/src/components/UseCases/styles.js b/src/components/Home/UseCases/styles.js
similarity index 96%
rename from src/components/UseCases/styles.js
rename to src/components/Home/UseCases/styles.js
index e57b256827..d82e0bc923 100644
--- a/src/components/UseCases/styles.js
+++ b/src/components/Home/UseCases/styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { container, media } from '../../styles'
+import { container, media } from '../../../styles'
 
 export const Wrapper = styled.section`
   padding-top: 80px;
diff --git a/src/components/Home/index.js b/src/components/Home/index.js
index 331a2affc5..1d60fd4c68 100644
--- a/src/components/Home/index.js
+++ b/src/components/Home/index.js
@@ -1,29 +1,29 @@
 import React from 'react'
 
-import LearnMore from '../LearnMore'
-import Hero from '../Hero'
-import LandingHero from '../LandingHero'
-import Diagram from '../Diagram'
-import PromoSection from '../PromoSection'
-import UseCases from '../UseCases'
-import Subscribe from '../Subscribe'
+import LearnMore from './LearnMore'
+import HeroSection from '../HeroSection'
+import LandingHero from './LandingHero'
+import Diagram from './Diagram'
+import PromoSection from './PromoSection'
+import UseCases from './UseCases'
+import SubscribeSection from '../SubscribeSection'
 
 import { LearnMoreSection } from './styles'
 
 export default function HomePage() {
   return (
     <>
-      <Hero>
+      <HeroSection>
         <LandingHero />
         <LearnMoreSection>
           <LearnMore />
         </LearnMoreSection>
         <span name="nextSlide" style={{ marginTop: `-58px` }} />
-      </Hero>
+      </HeroSection>
       <Diagram />
       <PromoSection />
       <UseCases />
-      <Subscribe />
+      <SubscribeSection />
     </>
   )
 }
diff --git a/src/components/Nav/index.tsx b/src/components/LayoutHeader/Nav/index.tsx
similarity index 94%
rename from src/components/Nav/index.tsx
rename to src/components/LayoutHeader/Nav/index.tsx
index 664d1b922f..feb8eca2e7 100644
--- a/src/components/Nav/index.tsx
+++ b/src/components/LayoutHeader/Nav/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import cn from 'classnames'
 
-import Link from '../Link'
-import PseudoButton from '../PseudoButton'
+import Link from '../../Link'
+import PseudoButton from '../../PseudoButton'
 
-import { logEvent } from '../../utils/ga'
-import { getFirstPage } from '../../utils/sidebar'
+import { logEvent } from '../../../utils/ga'
+import { getFirstPage } from '../../../utils/sidebar'
 
 const docsPage = getFirstPage()
 
diff --git a/src/components/Nav/styles.module.css b/src/components/LayoutHeader/Nav/styles.module.css
similarity index 100%
rename from src/components/Nav/styles.module.css
rename to src/components/LayoutHeader/Nav/styles.module.css
diff --git a/src/components/LayoutHeader/index.tsx b/src/components/LayoutHeader/index.tsx
index 4d4b4e6656..470a73dc93 100644
--- a/src/components/LayoutHeader/index.tsx
+++ b/src/components/LayoutHeader/index.tsx
@@ -5,7 +5,7 @@ import { useWindowScroll } from 'react-use'
 import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
 import LayoutWidthContainer from '../LayoutWidthContainer'
 import Link from '../Link'
-import Nav from '../Nav'
+import Nav from './Nav'
 
 import { ReactComponent as LogoSVG } from '../../../static/img/logo.svg'
 import styles from './styles.module.css'
diff --git a/src/components/Subscribe/form/index.tsx b/src/components/SubscribeSection/Form/index.tsx
similarity index 100%
rename from src/components/Subscribe/form/index.tsx
rename to src/components/SubscribeSection/Form/index.tsx
diff --git a/src/components/Subscribe/form/styles.module.css b/src/components/SubscribeSection/Form/styles.module.css
similarity index 100%
rename from src/components/Subscribe/form/styles.module.css
rename to src/components/SubscribeSection/Form/styles.module.css
diff --git a/src/components/Subscribe/glyph-1.svg b/src/components/SubscribeSection/glyph-1.svg
similarity index 100%
rename from src/components/Subscribe/glyph-1.svg
rename to src/components/SubscribeSection/glyph-1.svg
diff --git a/src/components/Subscribe/glyph-2.svg b/src/components/SubscribeSection/glyph-2.svg
similarity index 100%
rename from src/components/Subscribe/glyph-2.svg
rename to src/components/SubscribeSection/glyph-2.svg
diff --git a/src/components/Subscribe/index.tsx b/src/components/SubscribeSection/index.tsx
similarity index 90%
rename from src/components/Subscribe/index.tsx
rename to src/components/SubscribeSection/index.tsx
index 9efdae5f16..52bb7b11c5 100644
--- a/src/components/Subscribe/index.tsx
+++ b/src/components/SubscribeSection/index.tsx
@@ -6,9 +6,9 @@ import styles from './styles.module.css'
 import { default as Glyph1Src } from './glyph-1.svg'
 import { default as Glyph2Src } from './glyph-2.svg'
 
-import SubscribeForm from './form'
+import SubscribeForm from './Form'
 
-export default function Subscribe() {
+export default function SubscribeSection() {
   return (
     <div className={styles.wrapper} id="subscribe">
       <img
diff --git a/src/components/Subscribe/styles.module.css b/src/components/SubscribeSection/styles.module.css
similarity index 100%
rename from src/components/Subscribe/styles.module.css
rename to src/components/SubscribeSection/styles.module.css
diff --git a/src/components/Popover/index.js b/src/components/Support/Popover/index.js
similarity index 100%
rename from src/components/Popover/index.js
rename to src/components/Support/Popover/index.js
diff --git a/src/components/Popover/styles.js b/src/components/Support/Popover/styles.js
similarity index 100%
rename from src/components/Popover/styles.js
rename to src/components/Support/Popover/styles.js
diff --git a/src/components/Support/index.js b/src/components/Support/index.js
index 8f09af43a6..4ae9b0433a 100644
--- a/src/components/Support/index.js
+++ b/src/components/Support/index.js
@@ -1,8 +1,8 @@
 import React from 'react'
 
-import Hero from '../Hero'
+import HeroSection from '../HeroSection'
 import TrySection from '../TrySection'
-import Popover from '../Popover'
+import Popover from './Popover'
 import Link from '../Link'
 
 import { Mark, OnlyDesktop } from '../../styles'
@@ -26,11 +26,11 @@ import {
 export default function SupportPage() {
   return (
     <>
-      <Hero>
+      <HeroSection>
         <SupportHero>
           <Heading>Questions, feedback, or just need to get in touch?</Heading>
         </SupportHero>
-      </Hero>
+      </HeroSection>
       <Container>
         <Features>
           <Feature>
diff --git a/src/components/TextRotate/index.js b/src/components/TextRotate/index.js
deleted file mode 100644
index a4c4f1a50b..0000000000
--- a/src/components/TextRotate/index.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import { Cursor, Wrapper } from './styles'
-
-export default class TextRotate extends Component {
-  static defaultProps = {
-    words: [],
-    delay: 80,
-    wordDelay: 1000,
-    textBefore: ``,
-    textAfter: ``
-  }
-
-  state = {
-    ready: false,
-    currentWordIndex: 0,
-    pos: 1,
-    length: 0,
-    grow: true,
-    timer: null
-  }
-
-  componentDidMount() {
-    this.initTimer()
-    this.setState({
-      grow: true,
-      ready: true
-    })
-  }
-
-  componentWillUnmount() {
-    this.deinitTimer()
-  }
-
-  initTimer() {
-    const word = this.props.words[this.state.currentWordIndex]
-
-    this.setState({
-      pos: word.length,
-      grow: false
-    })
-
-    setTimeout(() => {
-      const timer = setInterval(this.animate, this.props.delay)
-      this.setState({
-        timer
-      })
-    }, this.props.wordDelay)
-  }
-
-  deinitTimer() {
-    clearTimeout(this.state.timer)
-  }
-
-  animate = () => {
-    if (
-      this.state.pos === this.props.words[this.state.currentWordIndex].length
-    ) {
-      this.setState(
-        prevState => ({
-          grow: !prevState.grow
-        }),
-        () => {
-          if (!this.state.grow) {
-            clearInterval(this.state.timer)
-            this.initTimer()
-          }
-        }
-      )
-    }
-
-    if (!this.state.grow && this.state.pos === 0) {
-      return this.nextWord()
-    }
-
-    if (this.state.grow) {
-      this.setState(prevState => ({
-        pos: prevState.pos + 1
-      }))
-    } else {
-      this.setState(prevState => ({
-        pos: prevState.pos - 1
-      }))
-    }
-  }
-
-  nextWord = () => {
-    let nextWordIndex = this.state.currentWordIndex + 1
-    if (nextWordIndex > this.props.words.length - 1) {
-      nextWordIndex = 0
-    }
-
-    this.setState(() => ({
-      currentWordIndex: nextWordIndex,
-      pos: 0,
-      grow: true
-    }))
-  }
-
-  getCurrentWord() {
-    const currentWord = this.props.words[this.state.currentWordIndex]
-
-    if (!this.state.ready) return currentWord
-
-    return currentWord.slice(0, this.state.pos + 1)
-  }
-
-  render() {
-    const { textBefore, textAfter } = this.props
-    const word = this.getCurrentWord()
-
-    return (
-      <Wrapper>
-        <p>{textBefore}</p>{' '}
-        <p>
-          {word}
-          <Cursor>|</Cursor>{' '}
-        </p>
-        <p>{textAfter}</p>
-      </Wrapper>
-    )
-  }
-}
-
-TextRotate.propTypes = {
-  textBefore: PropTypes.string.isRequired,
-  textAfter: PropTypes.string.isRequired,
-  delay: PropTypes.number.isRequired,
-  words: PropTypes.arrayOf(PropTypes.string).isRequired,
-  wordDelay: PropTypes.number.isRequired
-}
diff --git a/src/components/TextRotate/styles.js b/src/components/TextRotate/styles.js
deleted file mode 100644
index a2f9d74350..0000000000
--- a/src/components/TextRotate/styles.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components'
-
-export const Wrapper = styled.span``
-
-export const Cursor = styled.span`
-  vertical-align: 4px;
-`
diff --git a/src/components/Modal/index.js b/src/components/Tooltip/MobileView/Modal/index.js
similarity index 100%
rename from src/components/Modal/index.js
rename to src/components/Tooltip/MobileView/Modal/index.js
diff --git a/src/components/Tooltip/MobileView/index.js b/src/components/Tooltip/MobileView/index.js
index 37f106b407..b12d8ef243 100644
--- a/src/components/Tooltip/MobileView/index.js
+++ b/src/components/Tooltip/MobileView/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import ReactMarkdown from 'react-markdown'
 import PropTypes from 'prop-types'
 
-import Modal from '../../Modal'
+import Modal from './Modal'
 
 import {
   CloseContainer,

From 421dae74f643658b85db79fae8c148e4e7164dbd Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 1 Apr 2020 17:25:24 +0300
Subject: [PATCH 03/51] Allow to scroll smoothly in the scrollIntoLayout util
 function

---
 package.json        |  2 ++
 src/typings.ts      | 24 ++++++++++++++++++++++++
 src/utils/scroll.ts | 25 +++++++++++++++++++++++--
 yarn.lock           | 10 ++++++++++
 4 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 316479f009..f00e56aae4 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "compression": "^1.7.4",
     "date-fns": "^2.8.1",
     "docsearch.js": "^2.6.3",
+    "ease-component": "^1.0.0",
     "express": "^4.17.1",
     "fs-extra": "^9.0.0",
     "gatsby": "^2.20.2",
@@ -79,6 +80,7 @@
     "rehype-react": "^4.0.1",
     "request": "^2.88.0",
     "s3-client": "^4.4.2",
+    "scroll": "^3.0.1",
     "serve-handler": "^6.1.2",
     "slick-carousel": "^1.8.1",
     "styled-components": "^4.4.1",
diff --git a/src/typings.ts b/src/typings.ts
index 4ca841c123..ad8acd1c1d 100644
--- a/src/typings.ts
+++ b/src/typings.ts
@@ -21,3 +21,27 @@ declare module '*.svg' {
   const svg: IReactSVGR
   export = svg
 }
+
+declare module 'scroll' {
+  type ScrollTo = (
+    node: HTMLElement,
+    position: number,
+    options: {},
+    cb?: (err: Error | null, position: number) => void
+  ) => () => void
+  type ScrollModule = {
+    left: ScrollTo
+    top: ScrollTo
+  }
+  const scroll: ScrollModule
+  export = scroll
+}
+
+declare module 'ease-component' {
+  type EaseFunction = (value: number) => number
+  type EaseModule = {
+    [key: string]: EaseFunction
+  }
+  const ease: EaseModule
+  export = ease
+}
diff --git a/src/utils/scroll.ts b/src/utils/scroll.ts
index 5c296c6760..bc4bf6af3d 100644
--- a/src/utils/scroll.ts
+++ b/src/utils/scroll.ts
@@ -1,4 +1,15 @@
-export const scrollIntoLayout = (node: Element | null) => {
+import scroll from 'scroll'
+export { default as ease } from 'ease-component'
+
+export const scrollIntoLayout = (
+  node: Element | null,
+  opts?: {
+    smooth: true
+    offset?: number
+    duration?: number
+    ease?: (value: number) => number
+  }
+) => {
   if (!node) {
     return
   }
@@ -6,6 +17,16 @@ export const scrollIntoLayout = (node: Element | null) => {
   const htmlNode = document.documentElement
   const headerHeight = document.getElementById('header')?.clientHeight || 0
   const nodeOffset = node.getBoundingClientRect()
+  const position =
+    htmlNode.scrollTop + nodeOffset.top - headerHeight + (opts?.offset || 0)
+
+  if (!opts?.smooth) {
+    htmlNode.scrollTop = position
+    return
+  }
 
-  htmlNode.scrollTop = htmlNode.scrollTop + nodeOffset.top - headerHeight
+  scroll.top(htmlNode, position, {
+    duration: opts?.duration,
+    ease: opts?.ease
+  })
 }
diff --git a/yarn.lock b/yarn.lock
index e1d492e8a9..dbd632e57f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5319,6 +5319,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+ease-component@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ease-component/-/ease-component-1.0.0.tgz#b375726db0b5b04595b77440396fec7daa5d77c9"
+  integrity sha1-s3VybbC1sEWVt3RAOW/sfapdd8k=
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -14359,6 +14364,11 @@ scroll-behavior@^0.9.12:
     dom-helpers "^3.4.0"
     invariant "^2.2.4"
 
+scroll@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/scroll/-/scroll-3.0.1.tgz#d5afb59fb3592ee3df31c89743e78b39e4cd8a26"
+  integrity sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg==
+
 section-matter@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"

From 06ad93a4ae8e18590b0290ff2dc66ab72ae5a8eb Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 1 Apr 2020 17:27:45 +0300
Subject: [PATCH 04/51] Replace styled-reset to reset-css. Merge global styles.
 Use local classNames instead of global in few components

---
 package.json                                  |  2 +-
 src/components/HamburgerMenu/index.tsx        |  2 +-
 .../HamburgerMenu/styles.module.css           |  4 ++
 src/components/Page/base.css                  | 30 +++++++-----
 src/components/Page/index.tsx                 |  3 +-
 src/components/Page/styles.module.css         |  5 ++
 src/components/Page/utils.ts                  |  4 +-
 src/styles.js                                 | 48 +------------------
 yarn.lock                                     | 10 ++--
 9 files changed, 38 insertions(+), 70 deletions(-)

diff --git a/package.json b/package.json
index f00e56aae4..234e13518a 100644
--- a/package.json
+++ b/package.json
@@ -80,11 +80,11 @@
     "rehype-react": "^4.0.1",
     "request": "^2.88.0",
     "s3-client": "^4.4.2",
+    "reset-css": "^5.0.1",
     "scroll": "^3.0.1",
     "serve-handler": "^6.1.2",
     "slick-carousel": "^1.8.1",
     "styled-components": "^4.4.1",
-    "styled-reset": "^4.0.8",
     "unist-util-visit": "2.0.2"
   },
   "devDependencies": {
diff --git a/src/components/HamburgerMenu/index.tsx b/src/components/HamburgerMenu/index.tsx
index c87a231273..99fa1edf4b 100644
--- a/src/components/HamburgerMenu/index.tsx
+++ b/src/components/HamburgerMenu/index.tsx
@@ -34,7 +34,7 @@ function HamburgerMenu() {
   useEffect(() => {
     const method = isOpened ? 'add' : 'remove'
 
-    document.body.classList[method]('noScroll')
+    document.body.classList[method](styles.hiddenScrollbar)
   }, [isOpened])
 
   return (
diff --git a/src/components/HamburgerMenu/styles.module.css b/src/components/HamburgerMenu/styles.module.css
index 705e6c6c54..91ebfa6f54 100644
--- a/src/components/HamburgerMenu/styles.module.css
+++ b/src/components/HamburgerMenu/styles.module.css
@@ -1,3 +1,7 @@
+.hiddenScrollbar {
+  overflow-y: hidden;
+}
+
 .wrapper {
   display: block;
   padding: 25px 15px 15px;
diff --git a/src/components/Page/base.css b/src/components/Page/base.css
index a7fe1e81c0..31e16e5015 100644
--- a/src/components/Page/base.css
+++ b/src/components/Page/base.css
@@ -21,26 +21,16 @@
   --layout-header-height-scrolled: calc(var(--layout-header-height) - 20px);
 }
 
-:global {
-  .bodySmoothScrolling {
-    scroll-behavior: smooth;
-    will-change: scroll-position;
-  }
-
-  .noScroll {
-    overflow-y: hidden;
-  }
-}
-
 html {
-  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizelegibility;
 }
 
 body {
-  margin: 0;
   font-family: var(--font-brandon);
+  font-weight: 400;
+  line-height: 1.5;
   color: var(--color-black);
 }
 
@@ -48,4 +38,18 @@ body {
 * {
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+/* TODO: check it later */
+img + em,
+.gatsby-highlight + p > em:only-child {
+  color: #6a737d;
+  font-size: 0.9em;
+  display: block;
+  margin-top: -6px;
+  text-align: center;
 }
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index f5c6150950..b178f5d5c5 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { GlobalStyle } from '../../styles'
 
 import MainLayout, { LayoutComponent } from '../MainLayout'
 import DefaultSEO from './DefaultSEO'
@@ -8,6 +7,7 @@ import Layout from '../Blog/Layout'
 
 import { useRedirects, useAnchorNavigation, useSmoothScroll } from './utils'
 
+import 'reset-css'
 import './base.css'
 import './fonts/fonts.css'
 import styles from './styles.module.css'
@@ -46,7 +46,6 @@ const Page: React.SFC<IPageProps> = props => {
 
   return (
     <>
-      <GlobalStyle />
       <DefaultSEO />
       <LayoutComponent {...props} />
       <div id="modal-root" className={styles.modalRoot} />
diff --git a/src/components/Page/styles.module.css b/src/components/Page/styles.module.css
index 77387a8924..72dc2483a7 100644
--- a/src/components/Page/styles.module.css
+++ b/src/components/Page/styles.module.css
@@ -4,3 +4,8 @@
   top: 0;
   left: 0;
 }
+
+.smoothScrolling {
+  scroll-behavior: smooth;
+  will-change: scroll-position;
+}
diff --git a/src/components/Page/utils.ts b/src/components/Page/utils.ts
index 48900e8ce5..f5edac27ba 100644
--- a/src/components/Page/utils.ts
+++ b/src/components/Page/utils.ts
@@ -5,6 +5,8 @@ import { handleFrontRedirect } from '../../utils/redirects'
 import { allImagesLoadedInContainer } from '../../utils/images'
 import { scrollIntoLayout } from '../../utils/scroll'
 
+import styles from './styles.module.css'
+
 export const useAnchorNavigation = () => {
   const location = useLocation()
 
@@ -35,6 +37,6 @@ export const useSmoothScroll = (enable: boolean) => {
   useEffect(() => {
     const method = enable ? 'add' : 'remove'
 
-    document.body.classList[method]('bodySmoothScrolling')
+    document.body.classList[method](styles.smoothScrolling)
   }, [enable])
 }
diff --git a/src/styles.js b/src/styles.js
index b30a539477..e904dc9b41 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -1,51 +1,5 @@
-import styled, { css, createGlobalStyle } from 'styled-components'
-import reset from 'styled-reset'
-
-const global = `
-  html {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased !important;
-    font-smoothing: antialiased;
-    font-weight: 400;
-    text-rendering: optimizeLegibility !important;
-  }
-
-  @-moz-document url-prefix() {
-    body {
-      font-weight: lighter !important;
-    }
-  }
-
-  body {
-    padding: 0px;
-    font-family: BrandonGrotesque, Tahoma, Arial;
-    font-weight: normal;
-    -webkit-font-smoothing: antialiased;
-    line-height: 1.5;
-
-    // IE flex min-height fix https://stackoverflow.com/a/40491316
-    display: flex;
-    flex-direction: column;
-  }
+import styled, { css } from 'styled-components'
 
-  *:focus {
-    outline: 0;
-  }
-
-  img + em,
-  .gatsby-highlight + p > em:only-child {
-    color: #6a737d;
-    font-size: 0.9em;
-    display: block;
-    margin-top: -6px;
-    text-align: center;
-  }
-`
-
-export const GlobalStyle = createGlobalStyle`
-  ${reset}
-  ${global}
-`
 const maxWidth = 1005
 
 export const sizes = {
diff --git a/yarn.lock b/yarn.lock
index dbd632e57f..3f96d3ff36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13997,6 +13997,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reset-css@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/reset-css/-/reset-css-5.0.1.tgz#1ced0604fdb6836567e40d82de3537afaf3bb4c8"
+  integrity sha512-VyuJdNFfp5x/W6e5wauJM59C02Vs0P22sxzZGhQMPaqu/NGTeFxlBFOOw3eq9vQd19gIDdZp7zi89ylyKOJ33Q==
+
 resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -15444,11 +15449,6 @@ styled-components@^4.4.1:
     stylis-rule-sheet "^0.0.10"
     supports-color "^5.5.0"
 
-styled-reset@^4.0.8:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/styled-reset/-/styled-reset-4.1.2.tgz#f04f4d84bb939f41fc1477d808fdc57448a63fc7"
-  integrity sha512-Z/4YQPICbMWSBTfD0yvoQXLaxoPw9/IOYBWYix0VosjonORSmAuS7xmNF9G1hvU/laGEysWCGcCrqt+SYpvbKQ==
-
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"

From f069e219fa82e42363b8f52a37150936421cb53b Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Thu, 2 Apr 2020 15:18:51 +0300
Subject: [PATCH 05/51] Refactor Home page components to TS

---
 config/postcss/mixins.js                      |  27 +++
 package.json                                  |   3 +-
 src/components/HeroSection/index.js           |  16 --
 src/components/HeroSection/index.tsx          |  19 ++
 src/components/HeroSection/styles.js          |  12 -
 src/components/HeroSection/styles.module.css  |   3 +
 src/components/Home/Diagram/index.js          | 165 --------------
 src/components/Home/Diagram/index.tsx         | 159 +++++++++++++
 src/components/Home/Diagram/styles.js         | 187 ----------------
 src/components/Home/Diagram/styles.module.css | 195 ++++++++++++++++
 .../Home/LandingHero/GithubLine/index.js      |  30 ---
 .../Home/LandingHero/GithubLine/index.tsx     |  33 +++
 .../Home/LandingHero/GithubLine/styles.js     |  39 ----
 .../LandingHero/GithubLine/styles.module.css  |  41 ++++
 src/components/Home/LandingHero/index.js      | 120 ----------
 src/components/Home/LandingHero/index.tsx     | 118 ++++++++++
 .../{styles.js => styles.module.css}          | 208 +++++++++---------
 src/components/Home/LearnMore/index.js        |  27 ---
 src/components/Home/LearnMore/index.tsx       |  33 +++
 src/components/Home/LearnMore/styles.js       |  63 ------
 .../Home/LearnMore/styles.module.css          |  74 +++++++
 src/components/Home/PromoSection/index.js     |  34 ---
 src/components/Home/PromoSection/styles.js    | 126 -----------
 .../Home/UseCases/CollapsibleText/index.tsx   |  38 ++++
 .../CollapsibleText/styles.module.css         |  16 ++
 .../Home/UseCases/TextCollapse/index.js       |  35 ---
 .../Home/UseCases/TextCollapse/styles.js      |  18 --
 src/components/Home/UseCases/Video/index.js   | 100 ---------
 src/components/Home/UseCases/Video/index.tsx  |  51 +++++
 .../Video/{styles.js => styles.module.css}    |  87 +++-----
 src/components/Home/UseCases/index.js         | 130 -----------
 src/components/Home/UseCases/index.tsx        | 130 +++++++++++
 src/components/Home/UseCases/styles.js        | 101 ---------
 .../Home/UseCases/styles.module.css           |  89 ++++++++
 src/components/Home/index.js                  |  29 ---
 src/components/Home/index.tsx                 |  52 +++++
 src/components/Home/styles.js                 |   9 -
 src/components/Home/styles.module.css         |   3 +
 src/components/Page/base.css                  |   7 +-
 src/components/PromoSection/index.tsx         |  42 ++++
 src/components/PromoSection/styles.module.css | 101 +++++++++
 src/components/ShowOnly/index.tsx             |  16 ++
 src/components/ShowOnly/styles.module.css     |  15 ++
 yarn.lock                                     |  24 +-
 44 files changed, 1414 insertions(+), 1411 deletions(-)
 delete mode 100644 src/components/HeroSection/index.js
 create mode 100644 src/components/HeroSection/index.tsx
 delete mode 100644 src/components/HeroSection/styles.js
 create mode 100644 src/components/HeroSection/styles.module.css
 delete mode 100644 src/components/Home/Diagram/index.js
 create mode 100644 src/components/Home/Diagram/index.tsx
 delete mode 100644 src/components/Home/Diagram/styles.js
 create mode 100644 src/components/Home/Diagram/styles.module.css
 delete mode 100644 src/components/Home/LandingHero/GithubLine/index.js
 create mode 100644 src/components/Home/LandingHero/GithubLine/index.tsx
 delete mode 100644 src/components/Home/LandingHero/GithubLine/styles.js
 create mode 100644 src/components/Home/LandingHero/GithubLine/styles.module.css
 delete mode 100644 src/components/Home/LandingHero/index.js
 create mode 100644 src/components/Home/LandingHero/index.tsx
 rename src/components/Home/LandingHero/{styles.js => styles.module.css} (57%)
 delete mode 100644 src/components/Home/LearnMore/index.js
 create mode 100644 src/components/Home/LearnMore/index.tsx
 delete mode 100644 src/components/Home/LearnMore/styles.js
 create mode 100644 src/components/Home/LearnMore/styles.module.css
 delete mode 100644 src/components/Home/PromoSection/index.js
 delete mode 100644 src/components/Home/PromoSection/styles.js
 create mode 100644 src/components/Home/UseCases/CollapsibleText/index.tsx
 create mode 100644 src/components/Home/UseCases/CollapsibleText/styles.module.css
 delete mode 100644 src/components/Home/UseCases/TextCollapse/index.js
 delete mode 100644 src/components/Home/UseCases/TextCollapse/styles.js
 delete mode 100644 src/components/Home/UseCases/Video/index.js
 create mode 100644 src/components/Home/UseCases/Video/index.tsx
 rename src/components/Home/UseCases/Video/{styles.js => styles.module.css} (57%)
 delete mode 100644 src/components/Home/UseCases/index.js
 create mode 100644 src/components/Home/UseCases/index.tsx
 delete mode 100644 src/components/Home/UseCases/styles.js
 create mode 100644 src/components/Home/UseCases/styles.module.css
 delete mode 100644 src/components/Home/index.js
 create mode 100644 src/components/Home/index.tsx
 delete mode 100644 src/components/Home/styles.js
 create mode 100644 src/components/Home/styles.module.css
 create mode 100644 src/components/PromoSection/index.tsx
 create mode 100644 src/components/PromoSection/styles.module.css
 create mode 100644 src/components/ShowOnly/index.tsx
 create mode 100644 src/components/ShowOnly/styles.module.css

diff --git a/config/postcss/mixins.js b/config/postcss/mixins.js
index 7ef3403a25..93d333560f 100644
--- a/config/postcss/mixins.js
+++ b/config/postcss/mixins.js
@@ -1,3 +1,5 @@
+const { customMedia } = require('./media')
+
 const focus = {
   '&:focus': {
     color: 'var(--color-orange)',
@@ -75,6 +77,31 @@ module.exports = {
       'font-size': '16px',
       'line-height': '25px'
     },
+    columns: {
+      display: 'flex',
+      'flex-direction': 'row',
+      'flex-flow': 'wrap',
+      'justify-content': 'space-between',
+
+      [`@media ${customMedia['--sm-scr']}`]: {
+        'flex-direction': 'row'
+      },
+
+      [`@media ${customMedia['--xs-scr']}`]: {
+        'justify-content': 'center'
+      }
+    },
+    column: {
+      'flex-basis': '33.3%',
+
+      [`@media ${customMedia['--sm-scr']}`]: {
+        'flex-basis': '50%'
+      },
+
+      [`@media ${customMedia['--xs-scr']}`]: {
+        'flex-basis': '100%'
+      }
+    },
     link: {
       'text-decoration': 'none',
       color: 'var(--color-blue)',
diff --git a/package.json b/package.json
index 234e13518a..8f215c6af4 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,6 @@
     "react-helmet": "^5.2.1",
     "react-markdown": "^4.2.2",
     "react-popover": "^0.5.10",
-    "react-scroll": "^1.7.13",
     "react-slick": "^0.25.2",
     "react-use": "^13.27.0",
     "rehype-react": "^4.0.1",
@@ -92,7 +91,9 @@
     "@svgr/webpack": "^5.2.0",
     "@types/classnames": "^2.2.10",
     "@types/isomorphic-fetch": "^0.0.35",
+    "@types/react-collapse": "^5.0.0",
     "@types/react-helmet": "^5.0.15",
+    "@types/react-slick": "^0.23.4",
     "@types/vfile-message": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
     "@typescript-eslint/parser": "^2.24.0",
diff --git a/src/components/HeroSection/index.js b/src/components/HeroSection/index.js
deleted file mode 100644
index aed299dca0..0000000000
--- a/src/components/HeroSection/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Container, Wrapper } from './styles'
-
-export default function HeroSection({ children }) {
-  return (
-    <Wrapper>
-      <Container>{children}</Container>
-    </Wrapper>
-  )
-}
-
-HeroSection.propTypes = {
-  children: PropTypes.node.isRequired
-}
diff --git a/src/components/HeroSection/index.tsx b/src/components/HeroSection/index.tsx
new file mode 100644
index 0000000000..fb672b5417
--- /dev/null
+++ b/src/components/HeroSection/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import cn from 'classnames'
+
+import LayoutWidthContainer from '../LayoutWidthContainer'
+
+import styles from './styles.module.css'
+
+interface IHeroSectionProps {
+  className?: string
+  children: React.ReactNode
+}
+
+const HeroSection: React.SFC<IHeroSectionProps> = ({ className, children }) => (
+  <div className={cn(styles.heroSection, className)}>
+    <LayoutWidthContainer>{children}</LayoutWidthContainer>
+  </div>
+)
+
+export default HeroSection
diff --git a/src/components/HeroSection/styles.js b/src/components/HeroSection/styles.js
deleted file mode 100644
index 7751cffcd1..0000000000
--- a/src/components/HeroSection/styles.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components'
-
-import { container } from '../../styles'
-
-export const Wrapper = styled.section`
-  position: relative;
-  background-color: #eef4f8;
-`
-
-export const Container = styled.div`
-  ${container};
-`
diff --git a/src/components/HeroSection/styles.module.css b/src/components/HeroSection/styles.module.css
new file mode 100644
index 0000000000..31f10d75f0
--- /dev/null
+++ b/src/components/HeroSection/styles.module.css
@@ -0,0 +1,3 @@
+.heroSection {
+  background-color: var(--color-light-blue);
+}
diff --git a/src/components/Home/Diagram/index.js b/src/components/Home/Diagram/index.js
deleted file mode 100644
index c260b5253f..0000000000
--- a/src/components/Home/Diagram/index.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/* eslint jsx-a11y/anchor-is-valid: off */
-
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { Element } from 'react-scroll'
-import Slider from 'react-slick'
-
-import 'slick-carousel/slick/slick.css'
-import 'slick-carousel/slick/slick-theme.css'
-
-import Link from '../../Link'
-
-import { OnlyDesktop, OnlyMobile } from '../../../styles'
-
-import {
-  Abstract,
-  Caption,
-  Column,
-  Columns,
-  Container,
-  Description,
-  Diagram,
-  Graphic,
-  LearnMoreArea,
-  Slide,
-  SliderDots,
-  SliderWrapper,
-  Title
-} from './styles'
-
-const LearnMore = ({ href }) => (
-  <LearnMoreArea>
-    <Link href={href}>
-      <span>Learn&nbsp;more</span>
-      <img src="/img/learn_more_arrow.svg" width={18} height={18} alt="" />
-    </Link>
-  </LearnMoreArea>
-)
-
-LearnMore.propTypes = {
-  href: PropTypes.string.isRequired
-}
-
-const ColumnOne = () => (
-  <Column>
-    <Caption text={`#945dd6`}>ML project version control</Caption>
-    <Description fullWidth>
-      <p>
-        Version control machine learning models, data sets and intermediate
-        files. DVC connects them with code, and uses Amazon S3, Microsoft Azure
-        Blob Storage, Google Drive, Google Cloud Storage, Aliyun OSS, SSH/SFTP,
-        HDFS, HTTP, network-attached storage, or disc to store file contents.
-      </p>
-      <p>
-        Full code and data provenance help track the complete evolution of every
-        ML model. This guarantees reproducibility and makes it easy to switch
-        back and forth between experiments.
-      </p>
-    </Description>
-    <LearnMore href={'/features'} />
-  </Column>
-)
-
-const ColumnTwo = () => (
-  <Column>
-    <Caption text={`#13adc7`}>ML experiment management</Caption>
-    <Description fullWidth>
-      <p>
-        Harness the full power of Git branches to try different ideas instead of
-        sloppy file suffixes and comments in code. Use automatic metric-tracking
-        to navigate instead of paper and pencil.
-      </p>
-      <p>
-        DVC was designed to keep branching as simple and fast as in Git — no
-        matter the data file size. Along with first-class citizen metrics and ML
-        pipelines, it means that a project has cleaner structure. It&#39;s easy
-        to compare ideas and pick the best. Iterations become faster with
-        intermediate artifact caching.
-      </p>
-    </Description>
-    <LearnMore href={'/features'} />
-  </Column>
-)
-
-const ColumnThree = () => (
-  <Column>
-    <Caption text={`#f46837`}>Deployment & Collaboration</Caption>
-    <Description fullWidth>
-      <p>
-        Instead of ad-hoc scripts, use push/pull commands to move consistent
-        bundles of ML models, data, and code into production, remote machines,
-        or a colleague&#39;s computer.
-      </p>
-      <p>
-        DVC introduces lightweight pipelines as a first-class citizen mechanism
-        in Git. They are language-agnostic and connect multiple steps into a
-        DAG. These pipelines are used to remove friction from getting code into
-        production.
-      </p>
-    </Description>
-    <LearnMore href={'/features'} />
-  </Column>
-)
-
-export default class DiagramSection extends Component {
-  render() {
-    const imagesSliderProps = {
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      initialSlide: 1,
-      infinite: true,
-      speed: 600,
-      buttons: true,
-      dots: true,
-      appendDots: dots => <SliderDots>{dots}</SliderDots>
-    }
-
-    return (
-      <Diagram>
-        <Element name="diagram-section" />
-        <Container>
-          <Title>DVC tracks ML models and data sets</Title>
-          <Abstract>
-            DVC is built to make ML models shareable and reproducible. It is
-            designed to handle large files, data sets, machine learning models,
-            and metrics as well as code.
-          </Abstract>
-
-          <OnlyDesktop>
-            <Graphic>
-              <img src="/img/graphic.png" alt="" />
-            </Graphic>
-            <Columns>
-              <ColumnOne />
-              <ColumnTwo />
-              <ColumnThree />
-            </Columns>
-          </OnlyDesktop>
-
-          <OnlyMobile>
-            <SliderWrapper>
-              <Slider {...imagesSliderProps}>
-                <Slide>
-                  <img
-                    src="/img/experiments.png"
-                    alt="ML project version control"
-                  />
-                  <ColumnOne fullWidth />
-                </Slide>
-                <Slide>
-                  <img src="/img/graph.png" alt="ML experiment management" />
-                  <ColumnTwo fullWidth />
-                </Slide>
-                <Slide>
-                  <img src="/img/result.png" alt="Deployment & Collaboration" />
-                  <ColumnThree fullWidth />
-                </Slide>
-              </Slider>
-            </SliderWrapper>
-          </OnlyMobile>
-        </Container>
-      </Diagram>
-    )
-  }
-}
diff --git a/src/components/Home/Diagram/index.tsx b/src/components/Home/Diagram/index.tsx
new file mode 100644
index 0000000000..c6c1026cb1
--- /dev/null
+++ b/src/components/Home/Diagram/index.tsx
@@ -0,0 +1,159 @@
+import React, { forwardRef } from 'react'
+import Slider from 'react-slick'
+import cn from 'classnames'
+
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import ShowOnly from '../../ShowOnly'
+import Link from '../../Link'
+
+import 'slick-carousel/slick/slick.css'
+import 'slick-carousel/slick/slick-theme.css'
+import styles from './styles.module.css'
+
+const LearnMore: React.SFC<{ href: string }> = ({ href }) => (
+  <div className={styles.learnMoreContainer}>
+    <Link className={styles.learnMoreLink} href={href}>
+      <span>Learn&nbsp;more</span>
+      <img
+        className={styles.learnMoreLinkIcon}
+        src="/img/learn_more_arrow.svg"
+        alt=""
+      />
+    </Link>
+  </div>
+)
+
+const ColumnOne = () => (
+  <div className={styles.column}>
+    <h3 className={cn(styles.columnCaption, styles.purple)}>
+      ML project version control
+    </h3>
+    <div className={styles.columnDescriptionContainer}>
+      <p className={styles.columnDescription}>
+        Version control machine learning models, data sets and intermediate
+        files. DVC connects them with code, and uses Amazon S3, Microsoft Azure
+        Blob Storage, Google Drive, Google Cloud Storage, Aliyun OSS, SSH/SFTP,
+        HDFS, HTTP, network-attached storage, or disc to store file contents.
+      </p>
+      <p className={styles.columnDescription}>
+        Full code and data provenance help track the complete evolution of every
+        ML model. This guarantees reproducibility and makes it easy to switch
+        back and forth between experiments.
+      </p>
+    </div>
+    <LearnMore href={'/features'} />
+  </div>
+)
+
+const ColumnTwo = () => (
+  <div className={styles.column}>
+    <h3 className={cn(styles.columnCaption, styles.azure)}>
+      ML experiment management
+    </h3>
+    <div className={styles.columnDescriptionContainer}>
+      <p className={styles.columnDescription}>
+        Harness the full power of Git branches to try different ideas instead of
+        sloppy file suffixes and comments in code. Use automatic metric-tracking
+        to navigate instead of paper and pencil.
+      </p>
+      <p className={styles.columnDescription}>
+        DVC was designed to keep branching as simple and fast as in Git — no
+        matter the data file size. Along with first-class citizen metrics and ML
+        pipelines, it means that a project has cleaner structure. It&#39;s easy
+        to compare ideas and pick the best. Iterations become faster with
+        intermediate artifact caching.
+      </p>
+    </div>
+    <LearnMore href={'/features'} />
+  </div>
+)
+
+const ColumnThree = () => (
+  <div className={styles.column}>
+    <h3 className={cn(styles.columnCaption, styles.orange)}>
+      Deployment & Collaboration
+    </h3>
+    <div className={styles.columnDescriptionContainer}>
+      <p className={styles.columnDescription}>
+        Instead of ad-hoc scripts, use push/pull commands to move consistent
+        bundles of ML models, data, and code into production, remote machines,
+        or a colleague&#39;s computer.
+      </p>
+      <p className={styles.columnDescription}>
+        DVC introduces lightweight pipelines as a first-class citizen mechanism
+        in Git. They are language-agnostic and connect multiple steps into a
+        DAG. These pipelines are used to remove friction from getting code into
+        production.
+      </p>
+    </div>
+    <LearnMore href={'/features'} />
+  </div>
+)
+
+const DiagramSection: React.ForwardRefRenderFunction<HTMLElement> = (
+  _,
+  ref
+) => (
+  <section className={styles.diagramSection} ref={ref}>
+    <LayoutWidthContainer>
+      <h2 className={styles.title}>DVC tracks ML models and data sets</h2>
+      <p className={styles.description}>
+        DVC is built to make ML models shareable and reproducible. It is
+        designed to handle large files, data sets, machine learning models, and
+        metrics as well as code.
+      </p>
+
+      <ShowOnly on="desktop">
+        <div className={styles.desktopChartContainer}>
+          <img className={styles.desktopChart} src="/img/graphic.png" alt="" />
+        </div>
+        <div className={styles.columns}>
+          <ColumnOne />
+          <ColumnTwo />
+          <ColumnThree />
+        </div>
+      </ShowOnly>
+
+      <ShowOnly on="mobile">
+        <div className={styles.sliderContainer}>
+          <Slider
+            slidesToShow={1}
+            slidesToScroll={1}
+            initialSlide={1}
+            infinite
+            speed={600}
+            dots
+            appendDots={dots => <ul className={styles.sliderDots}>{dots}</ul>}
+          >
+            <div className={styles.slide}>
+              <img
+                className={styles.slideImage}
+                src="/img/experiments.png"
+                alt="ML project version control"
+              />
+              <ColumnOne />
+            </div>
+            <div className={styles.slide}>
+              <img
+                className={styles.slideImage}
+                src="/img/graph.png"
+                alt="ML experiment management"
+              />
+              <ColumnTwo />
+            </div>
+            <div className={styles.slide}>
+              <img
+                className={styles.slideImage}
+                src="/img/result.png"
+                alt="Deployment & Collaboration"
+              />
+              <ColumnThree />
+            </div>
+          </Slider>
+        </div>
+      </ShowOnly>
+    </LayoutWidthContainer>
+  </section>
+)
+
+export default forwardRef<HTMLElement>(DiagramSection)
diff --git a/src/components/Home/Diagram/styles.js b/src/components/Home/Diagram/styles.js
deleted file mode 100644
index 6eff3415f3..0000000000
--- a/src/components/Home/Diagram/styles.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import styled from 'styled-components'
-
-import { column, columns, container, media } from '../../../styles'
-
-export const Diagram = styled.section`
-  padding-top: 80px;
-  padding-bottom: 91px;
-`
-
-export const Container = styled.div`
-  ${container};
-`
-
-export const Title = styled.div`
-  font-family: BrandonGrotesque;
-  max-width: 550px;
-  min-height: 44px;
-  font-size: 30px;
-  font-weight: 500;
-  text-align: center;
-  color: #40364d;
-  margin: 0px auto;
-`
-
-export const Abstract = styled.div`
-  margin: 0px auto;
-  padding-top: 10px;
-  max-width: 590px;
-  min-height: 50px;
-  font-size: 16px;
-  text-align: center;
-  color: #5f6c72;
-  line-height: 1.5;
-`
-
-export const Graphic = styled.section`
-  width: 100%;
-  margin-top: 49px;
-
-  img {
-    width: 100%;
-    max-width: 900px;
-    max-height: 445px;
-  }
-
-  ${media.phablet`
-    overflow-x: scroll;
-    overflow-y: hidden;
-  `};
-
-  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-    overflow-x: scroll;
-    overflow-y: hidden;
-  }
-`
-
-export const Columns = styled.div`
-  ${columns};
-  margin-top: 10px;
-  flex-direction: row;
-  justify-content: center;
-  align-items: flex-start;
-  ${media.tablet`flex-direction: column;`};
-`
-
-export const Column = styled.div`
-  ${column};
-  max-width: 33.3%;
-  display: block;
-  margin-top: 49px;
-  padding: 0 10px;
-  box-sizing: border-box;
-
-  ${media.tablet`
-    margin-right: 0px;
-    flex-basis: auto;
-    max-width: 100%;
-  `};
-
-  ${media.phablet`
-    margin-top: 20px;
-    flex-basis: auto;
-    max-width: 100%;
-  `};
-`
-
-export const Caption = styled.h3`
-  font-family: BrandonGrotesque;
-  margin-bottom: 12px;
-  font-size: 20px;
-  font-weight: 500;
-  color: ${props => props.text};
-`
-
-export const Description = styled.div`
-  max-width: ${props => (props.fullWidth ? '100%' : '311px')};
-  font-size: 16px;
-  color: #5f6c72;
-
-  p {
-    margin-bottom: 24px;
-
-    ${media.tablet`
-      margin-bottom: 12px;
-    `};
-  }
-`
-
-export const LearnMoreArea = styled.div`
-  font-family: BrandonGrotesque;
-  line-height: 28px;
-  font-size: 20px;
-  font-weight: 500;
-  color: #945dd6;
-
-  img {
-    margin-left: 19px;
-    margin-top: 3px;
-  }
-
-  a {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: #945dd6;
-  }
-
-  a:hover {
-    color: #745cb7;
-  }
-
-  a:visited {
-    color: #945dd6;
-  }
-
-  a:visited:hover {
-    color: #745cb7;
-  }
-`
-
-export const SliderWrapper = styled.div`
-  .slick-next,
-  .slick-prev {
-    height: 30px;
-    width: 30px;
-    z-index: 3;
-  }
-
-  .slick-next {
-    right: -25px;
-  }
-
-  .slick-prev {
-    left: -25px;
-  }
-
-  .slick-next:before,
-  .slick-prev:before {
-    font-size: 30px;
-    line-height: 1;
-    opacity: 0.35;
-    color: #40364d;
-  }
-
-  img {
-    pointer-events: none;
-  }
-`
-
-export const Slide = styled.div`
-  width: 100%;
-  img {
-    padding-top: 20px;
-    padding-bottom: 20px;
-    width: 100%;
-    max-width: 380px;
-    margin: 0 auto;
-  }
-`
-
-export const SliderDots = styled.ul`
-  margin-bottom: -20px;
-
-  li button::before {
-    font-size: 8px;
-  }
-`
diff --git a/src/components/Home/Diagram/styles.module.css b/src/components/Home/Diagram/styles.module.css
new file mode 100644
index 0000000000..9c3e1aefb9
--- /dev/null
+++ b/src/components/Home/Diagram/styles.module.css
@@ -0,0 +1,195 @@
+.diagramSection {
+  padding-top: 80px;
+  padding-bottom: 91px;
+}
+
+.title {
+  @mixin h2-desktop;
+
+  max-width: 550px;
+  min-height: 44px;
+  margin: 0 auto;
+  font-family: var(--font-brandon);
+  text-align: center;
+  color: var(--color-gray-hover);
+}
+
+.description {
+  @mixin text-secondary;
+
+  max-width: 590px;
+  min-height: 50px;
+  margin: 0 auto;
+  padding-top: 10px;
+  text-align: center;
+  color: var(--color-gray-dark);
+}
+
+.desktopChartContainer {
+  width: 100%;
+  margin-top: 49px;
+
+  @media (--md-scr) {
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+}
+
+.desktopChart {
+  width: 100%;
+  max-width: 900px;
+  max-height: 445px;
+}
+
+.columns {
+  @mixin columns;
+
+  margin-top: 10px;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+
+  @media (--sm-scr) {
+    flex-direction: column;
+  }
+}
+
+.column {
+  @mixin column;
+
+  box-sizing: border-box;
+  display: block;
+  max-width: 33.3%;
+  margin-top: 49px;
+  padding: 0 10px;
+
+  @media (--sm-scr) {
+    margin-right: 0;
+    flex-basis: auto;
+    max-width: 100%;
+  }
+
+  @media (--xs-scr) {
+    margin-top: 20px;
+    flex-basis: auto;
+    max-width: 100%;
+  }
+}
+
+.columnCaption {
+  margin-bottom: 12px;
+  font-family: var(--font-brandon);
+  font-size: 20px;
+  font-weight: 500;
+
+  &.purple {
+    color: var(--color-purple);
+  }
+
+  &.azure {
+    color: var(--color-azure);
+  }
+
+  &.orange {
+    color: var(--color-orange-bright);
+  }
+}
+
+.columnDescriptionContainer {
+  max-width: 100%;
+  font-size: 16px;
+  color: var(--color-gray-dark);
+}
+
+.columnDescription {
+  margin-bottom: 24px;
+
+  @media (--sm-scr) {
+    margin-bottom: 12px;
+  }
+}
+
+.learnMoreContainer {
+  font-family: var(--font-brandon);
+  line-height: 28px;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--color-purple);
+}
+
+.learnMoreLink {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--color-purple);
+
+  &:hover {
+    color: var(--color-purple-hover);
+  }
+
+  &:visited {
+    color: var(--color-purple);
+  }
+
+  &:visited:hover {
+    color: var(--color-purple-hover);
+  }
+}
+
+.learnMoreLinkIcon {
+  width: 18px;
+  height: 18px;
+  margin-left: 19px;
+  margin-top: 3px;
+}
+
+.sliderContainer {
+  :global {
+    .slick-next,
+    .slick-prev {
+      height: 30px;
+      width: 30px;
+      z-index: 3;
+    }
+
+    .slick-next {
+      right: -25px;
+    }
+
+    .slick-prev {
+      left: -25px;
+    }
+
+    .slick-next::before,
+    .slick-prev::before {
+      font-size: 30px;
+      line-height: 1;
+      opacity: 0.35;
+      color: #40364d;
+    }
+
+    img {
+      pointer-events: none;
+    }
+  }
+}
+
+.slide {
+  width: 100%;
+}
+
+.slideImage {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  width: 100%;
+  max-width: 380px;
+  margin: 0 auto;
+}
+
+.sliderDots {
+  margin-bottom: -20px;
+
+  li button::before {
+    font-size: 8px;
+  }
+}
diff --git a/src/components/Home/LandingHero/GithubLine/index.js b/src/components/Home/LandingHero/GithubLine/index.js
deleted file mode 100644
index 9c57b74562..0000000000
--- a/src/components/Home/LandingHero/GithubLine/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import Link from '../../../Link'
-
-import { Count, Github, Link as LinkSC, Star, Wrapper } from './styles'
-
-const repo = `iterative/dvc`
-const gh = `https://github.com/${repo}`
-const api = `https://api.github.com/repos/${repo}`
-
-export default function GithubLine() {
-  const [count, setCount] = useState('–––')
-
-  useEffect(() => {
-    fetch(api).then(res => {
-      res.json().then(data => setCount(data.stargazers_count))
-    })
-  }, [count, setCount])
-
-  return (
-    <Wrapper>
-      <Github src="/img/github_small.png" width="20" height="20" />
-      We’re on
-      <Link href={gh} as={LinkSC}>
-        GitHub
-      </Link>
-      <Star src="/img/star_small.svg" width="11.74" height="11.74" />{' '}
-      <Count>{count}</Count>
-    </Wrapper>
-  )
-}
diff --git a/src/components/Home/LandingHero/GithubLine/index.tsx b/src/components/Home/LandingHero/GithubLine/index.tsx
new file mode 100644
index 0000000000..6280833ff1
--- /dev/null
+++ b/src/components/Home/LandingHero/GithubLine/index.tsx
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react'
+import fetch from 'isomorphic-fetch'
+import Link from '../../../Link'
+
+import styles from './styles.module.css'
+
+const repo = `iterative/dvc`
+const gh = `https://github.com/${repo}`
+const api = `https://api.github.com/repos/${repo}`
+
+const GithubLine: React.SFC = () => {
+  const [count, setCount] = useState('–––')
+
+  useEffect(() => {
+    fetch(api)
+      .then(res => res.json())
+      .then(data => setCount(data.stargazers_count))
+  }, [count, setCount])
+
+  return (
+    <div className={styles.container}>
+      <img className={styles.githubLogo} src="/img/github_small.png" alt="" />
+      We’re on
+      <Link href={gh} className={styles.link}>
+        GitHub
+      </Link>
+      <img className={styles.starIcon} src="/img/star_small.svg" alt="" />
+      <span className={styles.count}>{count}</span>
+    </div>
+  )
+}
+
+export default GithubLine
diff --git a/src/components/Home/LandingHero/GithubLine/styles.js b/src/components/Home/LandingHero/GithubLine/styles.js
deleted file mode 100644
index cc09e0e8d1..0000000000
--- a/src/components/Home/LandingHero/GithubLine/styles.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import styled from 'styled-components'
-
-export const Wrapper = styled.div`
-  font-family: BrandonGrotesque;
-  font-weight: 500;
-  line-height: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-`
-
-export const Link = styled.a`
-  font-family: BrandonGrotesque;
-  font-weight: 500;
-  color: #40364d;
-  margin-left: 0.3em;
-
-  &:focus,
-  &:hover,
-  &:visited {
-    color: #40364d;
-  }
-`
-
-export const Github = styled.img`
-  font-family: BrandonGrotesque;
-  font-weight: 500;
-  margin-right: 9px;
-`
-
-export const Star = styled.img`
-  margin-left: 7px;
-`
-
-export const Count = styled.span`
-  font-family: BrandonGrotesque;
-  font-weight: 500;
-  margin-left: 6.3px;
-`
diff --git a/src/components/Home/LandingHero/GithubLine/styles.module.css b/src/components/Home/LandingHero/GithubLine/styles.module.css
new file mode 100644
index 0000000000..4638428491
--- /dev/null
+++ b/src/components/Home/LandingHero/GithubLine/styles.module.css
@@ -0,0 +1,41 @@
+.container {
+  display: flex;
+  align-items: center;
+  font-family: var(--font-brandon);
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.link {
+  margin-left: 0.3em;
+  font-family: var(--font-brandon);
+  font-weight: 500;
+  color: var(--color-gray-hover);
+
+  &:focus,
+  &:hover,
+  &:visited {
+    color: var(--color-gray-hover);
+  }
+}
+
+.githubLogo {
+  width: 20px;
+  height: 20px;
+  margin-right: 9px;
+  font-family: var(--font-brandon);
+  font-weight: 500;
+}
+
+.starIcon {
+  width: 11px;
+  height: 11px;
+  margin-top: -1px;
+  margin-left: 7px;
+}
+
+.count {
+  margin-left: 7px;
+  font-family: var(--font-brandon);
+  font-weight: 500;
+}
diff --git a/src/components/Home/LandingHero/index.js b/src/components/Home/LandingHero/index.js
deleted file mode 100644
index 4fa9710ad6..0000000000
--- a/src/components/Home/LandingHero/index.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, { Component } from 'react'
-import { scroller } from 'react-scroll'
-
-import DownloadButton from '../../DownloadButton'
-import GithubLine from './GithubLine'
-
-import { logEvent } from '../../../utils/ga'
-
-import { OnlyDesktop, OnlyMobile } from '../../../styles'
-import {
-  Wrapper,
-  About,
-  Title,
-  Buttons,
-  GetStartedButton,
-  WatchButton,
-  Action,
-  ActionIcon,
-  ActionInner,
-  Description,
-  Github,
-  Command,
-  Commands,
-  Line
-} from './styles'
-
-export default class LandingHero extends Component {
-  state = {
-    activeCommand: 0
-  }
-
-  componentDidMount() {
-    this.commandsFadeInterval = setInterval(() => {
-      this.setState(prevState => ({
-        activeCommand: (prevState.activeCommand + 1) % 4
-      }))
-    }, 3000)
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.commandsFadeInterval)
-  }
-
-  getStarted = () => {
-    window.location = '/doc/tutorials/get-started'
-  }
-
-  scrollToVideo = () => {
-    logEvent('button', 'how-it-works')
-    scroller.scrollTo('how-it-works', {
-      duration: 800,
-      offset: -75,
-      delay: 0,
-      smooth: 'easeInOut'
-    })
-  }
-
-  render() {
-    const { activeCommand } = this.state
-
-    return (
-      <Wrapper>
-        <About>
-          <Title>
-            Open-source
-            <br />
-            Version Control System
-            <br />
-            for Machine Learning Projects
-          </Title>
-          <Buttons>
-            <OnlyMobile>
-              <GetStartedButton onClick={this.getStarted}>
-                Get started
-              </GetStartedButton>
-            </OnlyMobile>
-            <OnlyDesktop>
-              <DownloadButton />
-            </OnlyDesktop>
-            <WatchButton onClick={this.scrollToVideo}>
-              <ActionIcon>
-                <img
-                  src="/img/play-icon.svg"
-                  alt="Watch video"
-                  width={20}
-                  height={20}
-                />
-              </ActionIcon>
-              <ActionInner>
-                <Action>Watch video</Action>
-                <Description>How it works</Description>
-              </ActionInner>
-            </WatchButton>
-          </Buttons>
-
-          <Github>
-            <GithubLine />
-          </Github>
-        </About>
-
-        <OnlyDesktop>
-          <Commands>
-            <Command active={activeCommand === 0}>
-              <Line>$ dvc add images</Line>
-            </Command>
-            <Command active={activeCommand === 1}>
-              <Line>$ dvc run -d images -o model.p cnn.py</Line>
-            </Command>
-            <Command active={activeCommand === 2}>
-              <Line>$ dvc remote add -d myrepo s3://mybucket</Line>
-            </Command>
-            <Command active={activeCommand === 3}>
-              <Line>$ dvc push</Line>
-            </Command>
-          </Commands>
-        </OnlyDesktop>
-      </Wrapper>
-    )
-  }
-}
diff --git a/src/components/Home/LandingHero/index.tsx b/src/components/Home/LandingHero/index.tsx
new file mode 100644
index 0000000000..877e9e5344
--- /dev/null
+++ b/src/components/Home/LandingHero/index.tsx
@@ -0,0 +1,118 @@
+import React, { useEffect, useCallback, useState } from 'react'
+import cn from 'classnames'
+
+import ShowOnly from '../../ShowOnly'
+import Link from '../../Link'
+import DownloadButton from '../../DownloadButton'
+import GithubLine from './GithubLine'
+import { scrollIntoLayout, ease } from '../../../utils/scroll'
+import { logEvent } from '../../../utils/ga'
+
+import styles from './styles.module.css'
+
+interface ILandingHeroProps {
+  scrollToRef: React.RefObject<HTMLElement>
+}
+
+const LandingHero: React.SFC<ILandingHeroProps> = ({ scrollToRef }) => {
+  const [activeCommand, setActiveCommand] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(
+      () => setActiveCommand(prev => (prev + 1) % 4),
+      3000
+    )
+
+    return () => clearInterval(interval)
+  }, [])
+
+  const scrollToUseCases = useCallback(() => {
+    logEvent('button', 'how-it-works')
+    scrollIntoLayout(scrollToRef?.current, {
+      smooth: true,
+      duration: 800,
+      offset: 20,
+      ease: ease.inOutCube
+    })
+  }, [scrollToRef?.current])
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.about}>
+        <h1 className={styles.title}>
+          Open-source
+          <br />
+          Version Control System
+          <br />
+          for Machine Learning Projects
+        </h1>
+        <div className={styles.buttonsContainer}>
+          <ShowOnly on="mobile">
+            <Link
+              className={cn(styles.actionButton, styles.getStartedButton)}
+              href="/doc/tutorials/get-started"
+            >
+              Get started
+            </Link>
+          </ShowOnly>
+          <ShowOnly on="desktop">
+            <DownloadButton />
+          </ShowOnly>
+          <button
+            className={cn(styles.actionButton, styles.watchVideoButton)}
+            onClick={scrollToUseCases}
+          >
+            <img
+              className={styles.actionButtonIcon}
+              src="/img/play-icon.svg"
+              alt="Watch video"
+              width={20}
+              height={20}
+            />
+            <span>
+              <span className={styles.actionButtonMainText}>Watch video</span>
+              <span className={styles.actionButtonDescription}>
+                How it works
+              </span>
+            </span>
+          </button>
+        </div>
+
+        <div className={styles.github}>
+          <GithubLine />
+        </div>
+      </div>
+
+      <ShowOnly on="desktop">
+        <div className={styles.commands}>
+          <div
+            className={cn(styles.command, activeCommand === 0 && styles.active)}
+          >
+            <span className={styles.line}>$ dvc add images</span>
+          </div>
+          <div
+            className={cn(styles.command, activeCommand === 1 && styles.active)}
+          >
+            <span className={styles.line}>
+              $ dvc run -d images -o model.p cnn.py
+            </span>
+          </div>
+          <div
+            className={cn(styles.command, activeCommand === 2 && styles.active)}
+          >
+            <span className={styles.line}>
+              $ dvc remote add -d myrepo s3://mybucket
+            </span>
+          </div>
+          <div
+            className={cn(styles.command, activeCommand === 3 && styles.active)}
+          >
+            <span className={styles.line}>$ dvc push</span>
+          </div>
+        </div>
+      </ShowOnly>
+    </div>
+  )
+}
+
+export default LandingHero
diff --git a/src/components/Home/LandingHero/styles.js b/src/components/Home/LandingHero/styles.module.css
similarity index 57%
rename from src/components/Home/LandingHero/styles.js
rename to src/components/Home/LandingHero/styles.module.css
index 4bebd09ad1..c7e9110c24 100644
--- a/src/components/Home/LandingHero/styles.js
+++ b/src/components/Home/LandingHero/styles.module.css
@@ -1,200 +1,196 @@
-import styled, { css } from 'styled-components'
-
-import { media } from '../../../styles'
-
-export const Wrapper = styled.div`
-  padding-top: 136px;
-  padding-bottom: 146px;
-
+.container {
   display: flex;
   justify-content: space-between;
+  padding-top: 136px;
+  padding-bottom: 146px;
 
-  ${media.tablet`
+  @media (--sm-scr) {
     flex-direction: column;
     padding-top: 46px;
     padding-bottom: 86px;
-  `};
-`
+  }
+}
 
-export const About = styled.div`
-  ${media.tablet`
+.about {
+  @media (--sm-scr) {
     max-width: 412px;
     width: 100%;
-    margin: 0px auto;
-  `};
-`
+    margin: 0 auto;
+  }
+}
 
-export const Title = styled.h1`
+.title {
+  padding-right: 2em;
+  font-family: var(--font-brandon);
   font-size: 40px;
   font-weight: 500;
-  color: #40364d;
-  font-family: BrandonGrotesque;
-  padding-right: 2em;
+  color: var(--color-gray-hover);
 
-  ${media.tablet`
+  @media (--sm-scr) {
     padding-right: 0;
     font-size: 36px;
-  `};
+  }
 
-  ${media.phablet`
+  @media (--xs-scr) {
+    padding: 0;
     font-size: 32px;
-    padding: 0px;
-  `};
+  }
 
   @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+    padding: 0;
     font-size: 34px;
-    padding: 0px;
   }
-`
+}
 
-export const Buttons = styled.div`
-  margin-top: 28px;
+.buttonsContainer {
   display: flex;
+  margin-top: 28px;
 
-  ${media.phablet`
+  @media (--xs-scr) {
     flex-direction: column;
-  `};
+  }
 
   @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
     justify-content: flex-start;
   }
-`
+}
 
-const ActionButton = css`
-  cursor: pointer;
+.actionButton {
+  display: flex;
+  flex-direction: row;
   align-items: center;
   min-width: 186px;
+  padding: 0;
   border-radius: 4px;
   border: none;
+  cursor: pointer;
 
-  display: flex;
-  flex-direction: row;
-  padding: 0px;
-
-  ${media.phablet`
-    margin: 0px;
-    margin-bottom: 12px;
-    max-width: none;
-    min-height: 60px;
-  `};
-`
+  &.actionButton {
+    @media (--xs-scr) {
+      max-width: none;
+      min-height: 60px;
+      margin: 0;
+      margin-bottom: 12px;
+    }
+  }
+}
 
-export const ActionIcon = styled.div`
+.actionButtonIcon {
   flex-basis: 48px;
-
   text-align: center;
-`
-
-export const ActionInner = styled.div``
+}
 
-export const Action = styled.h6`
-  font-family: BrandonGrotesque;
+.actionButtonMainText {
+  display: block;
+  font-family: var(--font-brandon);
   font-weight: 500;
   font-size: 20px;
   line-height: 0.9;
-`
-export const Description = styled.p`
-  font-family: BrandonGrotesque;
+}
+
+.actionButtonDescription {
+  display: block;
+  font-family: var(--font-brandon);
   font-weight: normal;
   font-size: 14px;
   text-align: left;
-`
+}
 
-export const WatchButton = styled.a`
-  ${ActionButton};
-  height: 56px;
+.watchVideoButton {
   text-decoration: none;
-  color: #40364d;
-  background-color: #eef4f8;
+  color: var(--color-gray-hover);
+  background-color: var(--color-light-blue);
   margin-left: 15px;
   border: solid 2px rgba(176, 184, 197, 0.47);
   transition: 0.2s background-color ease-out;
 
   &:hover {
-    background-color: #e4eaee;
-  }
-
-  ${ActionIcon} {
-    padding-top: 6px;
+    background-color: var(--color-light-blue-hover);
   }
-`
+}
 
-export const GetStartedButton = styled.a`
-  ${ActionButton};
-  text-decoration: none;
-  background-color: #13adc7;
+.getStartedButton {
   display: flex;
-  padding: 0px 0px 0px 20px;
+  border: solid 2px transparent;
+  padding: 0 0 0 20px;
+  background-color: var(--color-azure);
+  text-decoration: none;
   font-size: 20px;
+  line-height: 0.9;
   font-weight: 500;
   color: #fff;
-  line-height: 0.9;
-  border: solid 2px transparent;
   transition: 0.2s background-color ease-out;
 
   &:hover {
-    background-color: #13a3bd;
+    background-color: var(--color-azure-hover);
   }
-`
+}
 
-export const Command = styled.div`
-  width: 100%;
-  height: 57px;
-  border-radius: 8px;
-  background-color: #ffffff;
-  border: solid 1px ${({ active }) => (active ? '#945dd6' : 'transparent')};
-  margin-bottom: 13px;
-  color: ${({ active }) => (active ? '#40364d' : '#b4b9c4')};
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
-  transform: translateZ(0);
+.commands {
   display: flex;
-  align-items: center;
-  opacity: ${({ active }) => (active ? 1 : 0.3)};
-  transition: opacity 3s, border 0.5s, color 1s;
-`
-
-export const Commands = styled.div`
   flex: 1 1 auto;
-  max-width: 412px;
-  display: flex;
   flex-direction: column;
   align-items: flex-end;
+  max-width: 412px;
   padding-top: 10px;
-  font-family: monospace, monospace;
+  margin-left: 20px;
+  font-family: var(--font-mono);
 
-  ${media.tablet`
+  @media (--sm-scr) {
     align-items: center;
-    padding-top: 24px;
     margin: 30px auto 0;
-  `};
+    padding-top: 24px;
+  }
 
   @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
     align-items: center;
     padding-top: 24px;
   }
-`
+}
 
-export const Line = styled.span`
+.command {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 57px;
+  margin-bottom: 13px;
+  border-radius: 8px;
+  border: solid 1px transparent;
+  background-color: #fff;
+  color: #b4b9c4;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  transform: translateZ(0);
+  opacity: 0.3;
+  transition: opacity 3s, border 0.5s, color 1s;
+
+  &.active {
+    border-color: var(--color-purple);
+    color: var(--color-gray-hover);
+    opacity: 1;
+  }
+}
+
+.line {
+  padding: 0 10px 0 12px;
   font-size: 15px;
   font-weight: 700;
-  padding: 0px 10px 0px 12px;
-`
+}
 
-export const Github = styled.div`
+.github {
   margin-top: 51px;
   font-size: 14px;
   font-weight: 500;
   color: #b0b8c5;
 
-  ${media.tablet`
+  @media (--sm-scr) {
     align-items: center;
     margin-top: 24px;
     font-size: 18px;
-  `};
+  }
 
   @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
     align-items: center;
     margin-top: 24px;
     font-size: 18px;
   }
-`
+}
diff --git a/src/components/Home/LearnMore/index.js b/src/components/Home/LearnMore/index.js
deleted file mode 100644
index efbb200165..0000000000
--- a/src/components/Home/LearnMore/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { scroller } from 'react-scroll'
-
-import { logEvent } from '../../../utils/ga'
-
-import { Wrapper, Icon, Caption } from './styles'
-
-const scrollToDiagram = () => {
-  logEvent('hero', 'learn-more')
-  scroller.scrollTo('diagram-section', {
-    duration: 800,
-    offset: -75,
-    delay: 0,
-    smooth: 'easeInOut'
-  })
-}
-
-export default function LearnMore() {
-  return (
-    <Wrapper onClick={scrollToDiagram}>
-      <Icon>
-        <img src="/img/learn-more.svg" alt="Learn More" />
-      </Icon>
-      <Caption>Learn more</Caption>
-    </Wrapper>
-  )
-}
diff --git a/src/components/Home/LearnMore/index.tsx b/src/components/Home/LearnMore/index.tsx
new file mode 100644
index 0000000000..187d8a5090
--- /dev/null
+++ b/src/components/Home/LearnMore/index.tsx
@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react'
+
+import { logEvent } from '../../../utils/ga'
+import { scrollIntoLayout, ease } from '../../../utils/scroll'
+
+import styles from './styles.module.css'
+
+interface ILearnMoreProps {
+  scrollToRef: React.RefObject<HTMLElement>
+}
+
+const LearnMore: React.SFC<ILearnMoreProps> = ({ scrollToRef }) => {
+  const onClick = useCallback(() => {
+    logEvent('hero', 'learn-more')
+    scrollIntoLayout(scrollToRef?.current, {
+      smooth: true,
+      duration: 800,
+      offset: 20,
+      ease: ease.inOutCube
+    })
+  }, [scrollToRef?.current])
+
+  return (
+    <button className={styles.button} onClick={onClick}>
+      <span className={styles.icon}>
+        <img src="/img/learn-more.svg" alt="Learn More" />
+      </span>
+      <span className={styles.caption}>Learn more</span>
+    </button>
+  )
+}
+
+export default LearnMore
diff --git a/src/components/Home/LearnMore/styles.js b/src/components/Home/LearnMore/styles.js
deleted file mode 100644
index ea7fd8a65a..0000000000
--- a/src/components/Home/LearnMore/styles.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import styled, { keyframes } from 'styled-components'
-
-import { media } from '../../../styles'
-
-export const Wrapper = styled.a`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-decoration: none;
-  cursor: pointer;
-`
-
-export const bounce = keyframes`
-  0%, 30%, 45%, 65%, 100% {
-    transform: translateY(0);
-  }
-
-  40% {
-    transform: translateY(-13px);
-  }
-
-  60% {
-    transform: translateY(-5px);
-  }
-`
-
-export const bounceMobile = keyframes`
-  0%, 30%, 50%, 70%, 100% {
-    transform: translateY(0);
-  }
-
-  40% {
-    transform: translateY(-13px);
-  }
-
-  60% {
-    transform: translateY(-5px);
-  }
-`
-
-export const Icon = styled.div`
-  width: 11px;
-  height: 19px;
-  will-change: transform;
-  animation: ${bounce} 3s infinite;
-
-  ${media.phone`animation: ${bounceMobile} 3s infinite;`};
-  ${media.phablet`animation: ${bounceMobile} 3s infinite;`};
-`
-
-export const Caption = styled.p`
-  font-family: BrandonGrotesque;
-  line-height: 23px;
-  font-size: 16px;
-  font-weight: 500;
-  color: #b0b8c5;
-  display: initial;
-  ${media.giant`display: initial;`};
-  ${media.desktop`display: initial;`};
-  ${media.tablet`display: initial;`};
-  ${media.phablet`display: none;`};
-  ${media.phone`display: none;`};
-`
diff --git a/src/components/Home/LearnMore/styles.module.css b/src/components/Home/LearnMore/styles.module.css
new file mode 100644
index 0000000000..f6d21882bb
--- /dev/null
+++ b/src/components/Home/LearnMore/styles.module.css
@@ -0,0 +1,74 @@
+@keyframes bounce {
+  0%,
+  30%,
+  45%,
+  65%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-13px);
+  }
+
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes bounceMobile {
+  0%,
+  30%,
+  50%,
+  70%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-13px);
+  }
+
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+.button {
+  position: absolute;
+  z-index: 2;
+  transform: translate(-50%, 0%);
+  left: 50%;
+  bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.icon {
+  width: 11px;
+  height: 19px;
+  will-change: transform;
+  animation: bounce 3s infinite;
+
+  @media (--xs-scr) {
+    animation-name: bounceMobile;
+  }
+}
+
+.caption {
+  font-family: var(--font-brandon);
+  font-size: 16px;
+  line-height: 23px;
+  font-weight: 500;
+  color: #b0b8c5;
+  display: initial;
+
+  @media (--xs-scr) {
+    display: none;
+  }
+}
diff --git a/src/components/Home/PromoSection/index.js b/src/components/Home/PromoSection/index.js
deleted file mode 100644
index d882a27872..0000000000
--- a/src/components/Home/PromoSection/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import Link from '../../Link'
-
-import { logEvent } from '../../../utils/ga'
-
-import { Button, Buttons, Container, Glyph, Title, Wrapper } from './styles'
-
-const goToDocGetStarted = () => logEvent('promo', 'get-started')
-const goToFeatures = () => logEvent('promo', 'features')
-
-export default function PromoSection() {
-  return (
-    <Wrapper>
-      <Container id="video">
-        <Glyph src="/img/glyph-3.svg" gid={'topleft'} />
-        <Title>For data scientists, by data scientists</Title>
-        <Buttons>
-          <Link
-            href="/doc/tutorials/get-started"
-            as={Button}
-            first
-            onClick={goToDocGetStarted}
-          >
-            Get Started
-          </Link>
-          <Link as={Button} href="/features" onClick={goToFeatures}>
-            Full Features
-          </Link>
-        </Buttons>
-        <Glyph src="/img/glyph-4.svg" gid={'rigthbottom'} />
-      </Container>
-    </Wrapper>
-  )
-}
diff --git a/src/components/Home/PromoSection/styles.js b/src/components/Home/PromoSection/styles.js
deleted file mode 100644
index 176b05c876..0000000000
--- a/src/components/Home/PromoSection/styles.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import styled from 'styled-components'
-
-import { media } from '../../../styles'
-
-export const Wrapper = styled.section`
-  position: relative;
-  height: 278px;
-  background-color: #945dd6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-export const Container = styled.div`
-  width: 100%;
-  max-width: 1035px;
-`
-
-export const Title = styled.h3`
-  font-family: BrandonGrotesque;
-  max-width: 438px;
-  min-height: 44px;
-  font-size: 30px;
-  font-weight: 500;
-  text-align: center;
-  color: #ffffff;
-  margin: 0px auto;
-`
-
-export const Buttons = styled.div`
-  display: flex;
-  max-width: 386px;
-  margin: 0px auto;
-  margin-top: 20px;
-  align-items: center;
-  flex-direction: row;
-  ${media.phablet`
-    flex-direction: column;
-  `};
-`
-
-export const Button = styled.a`
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-
-  min-width: 186px;
-  height: 60px;
-  padding: 0px 21px;
-  border-radius: 4px;
-  border: solid 2px rgba(255, 255, 255, 0.3);
-
-  font-family: BrandonGrotesque;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 0.9;
-  text-decoration: none;
-  text-align: left;
-  color: #ffffff;
-
-  background-color: #945dd6;
-  background: url('/img/arrow_right_white.svg') right center no-repeat;
-  background-position-x: 147px;
-  transition: 0.2s background-color ease-out;
-
-  &:hover {
-    background-color: #885ccb;
-  }
-
-  ${props =>
-    props.first &&
-    `
-    color: #945dd6;
-    margin-right: 14px;
-    border-radius: 4px;
-    background-color: #ffffff;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21);
-
-    background-image: url('/img/arrow_right_dark.svg');
-    transition: 0.2s background-color ease-out;
-
-    &:hover {
-      background-color: #F5F5F5
-    }
-
-     ${media.phablet`
-      margin-right: 0px;
-   `}
-  `};
-
-  ${media.phablet`
-    margin-bottom: 12px;
-    margin-right: 0px !important;
-  `};
-`
-
-export const Glyph = styled.img`
-  position: absolute;
-  z-index: 0;
-  width: 158px;
-  height: auto;
-
-  ${media.tablet`
-    width: 110px;
-  `};
-
-  object-fit: contain;
-
-  ${props =>
-    props.gid === 'topleft' &&
-    `
-    top: -25px;
-    left: 40px;
-  `}
-
-  ${props =>
-    props.gid === 'rigthbottom' &&
-    `
-    bottom: -60px;
-    right: 30px;
-  `};
-
-  ${media.phablet`
-    display: none;
-  `};
-`
diff --git a/src/components/Home/UseCases/CollapsibleText/index.tsx b/src/components/Home/UseCases/CollapsibleText/index.tsx
new file mode 100644
index 0000000000..758228faab
--- /dev/null
+++ b/src/components/Home/UseCases/CollapsibleText/index.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import { Collapse } from 'react-collapse'
+
+import styles from './styles.module.css'
+
+interface ICollapsibleTextProps {
+  children: React.ReactNode
+  header: React.ReactNode
+}
+
+const CollapsibleText: React.SFC<ICollapsibleTextProps> = ({
+  header,
+  children
+}) => {
+  const [isOpened, setOpened] = useState(false)
+  const toggle = () => setOpened(prev => !prev)
+  const toggleFromKB = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.which === 13 || e.which === 32) {
+      toggle()
+    }
+  }
+
+  return (
+    <div
+      className={styles.container}
+      onClick={toggle}
+      onKeyPress={toggleFromKB}
+      role="button"
+      tabIndex={0}
+    >
+      {header}
+      <Collapse isOpened={isOpened}>{children}</Collapse>
+      {!isOpened && <div className={styles.moreText}>More...</div>}
+    </div>
+  )
+}
+
+export default CollapsibleText
diff --git a/src/components/Home/UseCases/CollapsibleText/styles.module.css b/src/components/Home/UseCases/CollapsibleText/styles.module.css
new file mode 100644
index 0000000000..c2bc48bdb0
--- /dev/null
+++ b/src/components/Home/UseCases/CollapsibleText/styles.module.css
@@ -0,0 +1,16 @@
+.container {
+  border: none;
+  background: none;
+  font-family: var(--font-brandon);
+  text-align: left;
+  appearance: none;
+
+  :global(.ReactCollapse--collapse) {
+    transition: height 500ms;
+  }
+}
+
+.moreText {
+  color: var(--color-azure);
+  font-size: 16px;
+}
diff --git a/src/components/Home/UseCases/TextCollapse/index.js b/src/components/Home/UseCases/TextCollapse/index.js
deleted file mode 100644
index 5e419295c3..0000000000
--- a/src/components/Home/UseCases/TextCollapse/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { Collapse } from 'react-collapse'
-
-import { MoreText, Wrapper } from './styles'
-
-export default class TextCollapse extends Component {
-  state = {
-    isOpened: false
-  }
-
-  toggleCollapsed = () => {
-    this.setState(prevState => ({
-      isOpened: !prevState.isOpened
-    }))
-  }
-
-  render() {
-    const { children, header } = this.props
-    const { isOpened } = this.state
-
-    return (
-      <Wrapper onClick={this.toggleCollapsed}>
-        {header}
-        <Collapse isOpened={isOpened}>{children}</Collapse>
-        {!isOpened && <MoreText>More...</MoreText>}
-      </Wrapper>
-    )
-  }
-}
-
-TextCollapse.propTypes = {
-  children: PropTypes.node.isRequired,
-  header: PropTypes.node.isRequired
-}
diff --git a/src/components/Home/UseCases/TextCollapse/styles.js b/src/components/Home/UseCases/TextCollapse/styles.js
deleted file mode 100644
index 884ee0c856..0000000000
--- a/src/components/Home/UseCases/TextCollapse/styles.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import styled from 'styled-components'
-
-export const Wrapper = styled.button`
-  text-align: left;
-  border: none;
-  appearance: none;
-  background: none;
-  font-family: BrandonGrotesque, Tahoma, Arial;
-
-  .ReactCollapse--collapse {
-    transition: height 500ms;
-  }
-`
-
-export const MoreText = styled.div`
-  color: #13adc7;
-  font-size: 16px;
-`
diff --git a/src/components/Home/UseCases/Video/index.js b/src/components/Home/UseCases/Video/index.js
deleted file mode 100644
index 9810369ef4..0000000000
--- a/src/components/Home/UseCases/Video/index.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import { logEvent } from '../../../../utils/ga'
-
-import {
-  Button,
-  ButtonIcon,
-  ButtonInner,
-  Action,
-  Description,
-  Overflow,
-  Box,
-  Wrapper,
-  Handler
-} from './styles'
-
-const WatchButton = ({ onClick, disabled }) => (
-  <Button onClick={onClick} disabled={disabled}>
-    <ButtonIcon>
-      <img
-        src="/img/watch_white.svg"
-        alt="Watch video"
-        width={20}
-        height={20}
-      />
-    </ButtonIcon>
-    <ButtonInner>
-      <Action>Watch video</Action>
-      <Description>How it works</Description>
-    </ButtonInner>
-  </Button>
-)
-
-WatchButton.propTypes = {
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func.isRequired
-}
-
-export default class Video extends Component {
-  state = {
-    ready: false,
-    watching: false
-  }
-
-  componentDidMount() {
-    this.setState({
-      ready: true
-    })
-  }
-
-  watch = () => {
-    logEvent('button', 'video')
-    this.setState({ watching: true })
-  }
-
-  onPause = () => {
-    this.setState({ watching: false })
-  }
-
-  renderOverflow() {
-    const { ready } = this.state
-
-    return (
-      <Overflow>
-        <Box>
-          <WatchButton onClick={this.watch} disabled={!ready} />
-        </Box>
-      </Overflow>
-    )
-  }
-
-  render() {
-    const { id } = this.props
-    const { watching } = this.state
-
-    const playing = watching ? `&autoplay=1` : ''
-
-    return (
-      <Wrapper>
-        <Handler>
-          {!watching && this.renderOverflow()}
-          <iframe
-            title="Video"
-            width="560"
-            height="315"
-            src={`https://www.youtube.com/embed/${id}?rel=0&amp;controls=0&amp;showinfo=0;${playing}`}
-            frameBorder="0"
-            allow="autoplay; encrypted-media"
-            allowFullScreen
-          />
-        </Handler>
-      </Wrapper>
-    )
-  }
-}
-
-Video.propTypes = {
-  id: PropTypes.string.isRequired
-}
diff --git a/src/components/Home/UseCases/Video/index.tsx b/src/components/Home/UseCases/Video/index.tsx
new file mode 100644
index 0000000000..975636c8fd
--- /dev/null
+++ b/src/components/Home/UseCases/Video/index.tsx
@@ -0,0 +1,51 @@
+import React, { useState, useCallback } from 'react'
+
+import { logEvent } from '../../../../utils/ga'
+
+import styles from './styles.module.css'
+
+const Video: React.SFC<{ id: string }> = ({ id }) => {
+  const [isWatching, setWatching] = useState(false)
+
+  const watchVideo = useCallback(() => {
+    logEvent('button', 'video')
+    setWatching(true)
+  }, [])
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.handler}>
+        {!isWatching && (
+          <div className={styles.overlay}>
+            <button className={styles.button} onClick={watchVideo}>
+              <img
+                className={styles.buttonIcon}
+                src="/img/watch_white.svg"
+                alt="Watch video"
+                width={20}
+                height={20}
+              />
+              <span>
+                <span className={styles.buttonText}>Watch video</span>
+                <span className={styles.buttonDescription}>How it works</span>
+              </span>
+            </button>
+          </div>
+        )}
+        <iframe
+          title="Video"
+          width="560"
+          height="315"
+          src={`https://www.youtube.com/embed/${id}?rel=0&amp;controls=0&amp;showinfo=0;${
+            isWatching ? `&autoplay=1` : ''
+          }`}
+          frameBorder="0"
+          allow="autoplay; encrypted-media"
+          allowFullScreen
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Video
diff --git a/src/components/Home/UseCases/Video/styles.js b/src/components/Home/UseCases/Video/styles.module.css
similarity index 57%
rename from src/components/Home/UseCases/Video/styles.js
rename to src/components/Home/UseCases/Video/styles.module.css
index 27a04f7e0a..e9534e549d 100644
--- a/src/components/Home/UseCases/Video/styles.js
+++ b/src/components/Home/UseCases/Video/styles.module.css
@@ -1,21 +1,13 @@
-import styled from 'styled-components'
-
-export const Wrapper = styled.div`
+.container {
   width: 100%;
-`
+}
 
-export const Handler = styled.div`
+.handler {
   position: relative;
   overflow: hidden;
+  height: 0;
   border-radius: 12px;
-  overflow: hidden;
-  background: #000;
-
-  position: relative;
   padding-bottom: 56.25%;
-  height: 0;
-  overflow: hidden;
-
   background-color: rgba(23, 23, 23, 0.59);
 
   @media (max-width: 768px) {
@@ -36,74 +28,65 @@ export const Handler = styled.div`
       position: absolute;
     }
   }
-`
+}
 
-export const Overflow = styled.div`
+.overlay {
   position: absolute;
   z-index: 1;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  background-color: rgba(23, 23, 23, 0.59);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-`
-
-export const Box = styled.div`
-  width: 186px;
-  height: 60px;
-`
+  background-color: rgba(23, 23, 23, 0.59);
+}
 
-export const Button = styled.button`
-  cursor: pointer;
+.button {
+  display: flex;
   align-items: center;
-  width: 100%;
+  flex-direction: row;
+  width: 186px;
   height: 60px;
+  padding: 0;
   border-radius: 4px;
   border: none;
-
-  display: flex;
-  flex-direction: row;
-  padding: 0px;
-
   text-decoration: none;
-  color: #ffffff;
-  border: none;
-  background-color: #13adc7;
+  color: #fff;
+  background-color: var(--color-azure);
+  cursor: pointer;
 
   &:hover {
-    background-color: #13a3bd;
+    background-color: var(--color-azure-hover);
   }
 
-  ${props =>
-    props.disabled &&
-    `
+  &.disabled {
     background-color: #b0b8c5;
+
     &:hover {
       background-color: #b0b8c5;
     }
-  `};
-`
+  }
+}
 
-export const ButtonIcon = styled.div`
+.buttonIcon {
   flex-basis: 48px;
-
   text-align: center;
+  width: 20px;
+  height: 20px;
   padding-top: 4px;
-`
-
-export const ButtonInner = styled.div``
+}
 
-export const Action = styled.h6`
-  font-family: BrandonGrotesque, Tahoma, Arial;
+.buttonText {
+  font-family: var(--font-brandon);
   font-size: 20px;
   font-weight: 500;
   line-height: 0.9;
-`
-export const Description = styled.p`
+}
+
+.buttonDescription {
   font-size: 12px;
   text-align: left;
   line-height: 1.29;
-`
+}
diff --git a/src/components/Home/UseCases/index.js b/src/components/Home/UseCases/index.js
deleted file mode 100644
index 00a8e810c2..0000000000
--- a/src/components/Home/UseCases/index.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React from 'react'
-import { Element } from 'react-scroll'
-
-import { default as YoutubeVideo } from './Video'
-import TextCollapse from './TextCollapse'
-
-import { OnlyDesktop, OnlyMobile } from '../../../styles'
-
-import {
-  Case,
-  Cases,
-  Container,
-  Description,
-  FlexWrap,
-  Heading,
-  Icon,
-  Right,
-  Title,
-  Top,
-  Video,
-  Wrapper
-} from './styles'
-
-const Heading1 = () => (
-  <Top>
-    <Icon>
-      <img src="/img/save-reprro.svg" width={30} height={30} alt="" />
-    </Icon>
-    <Title>Save and reproduce your experiments</Title>
-  </Top>
-)
-
-const Heading2 = () => (
-  <Top>
-    <Icon>
-      <img src="/img/git-icon.svg" width={30} height={30} alt="" />
-    </Icon>
-    <Title>Version control models and data</Title>
-  </Top>
-)
-
-const Heading3 = () => (
-  <Top>
-    <Icon>
-      <img src="/img/share.svg" width={30} height={31} alt="" />
-    </Icon>
-    <Title>Establish workflow for deployment & collaboration</Title>
-  </Top>
-)
-
-const Description1 = () => (
-  <Description>
-    At any time, fetch the full context about any experiment you or your
-    colleagues have run. DVC guarantees that all files and metrics will be
-    consistent and in the right place to reproduce the experiment or use it as a
-    baseline for a new iteration.
-  </Description>
-)
-
-const Description2 = () => (
-  <Description>
-    DVC keeps metafiles in Git instead of Google Docs to describe and version
-    control your data sets and models. DVC supports a variety of external
-    storage types as a remote cache for large files.
-  </Description>
-)
-
-const Description3 = () => (
-  <Description>
-    DVC defines rules and processes for working effectively and consistently as
-    a team. It serves as a protocol for collaboration, sharing results, and
-    getting and running a finished model in a production environment.
-  </Description>
-)
-
-export default function UseCases() {
-  return (
-    <Wrapper>
-      <Element name="how-it-works" />
-
-      <Container>
-        <Heading>Use cases</Heading>
-        <FlexWrap>
-          <Video>
-            <YoutubeVideo id={`4h6I9_xeYA4`} />
-          </Video>
-
-          <Right>
-            <OnlyDesktop>
-              <Cases>
-                <Case>
-                  <Heading1 />
-                  <Description1 />
-                </Case>
-                <Case>
-                  <Heading2 />
-                  <Description2 />
-                </Case>
-                <Case>
-                  <Heading3 />
-                  <Description3 />
-                </Case>
-              </Cases>
-            </OnlyDesktop>
-
-            <OnlyMobile>
-              <Cases>
-                <Case>
-                  <TextCollapse header={<Heading1 />}>
-                    <Description1 />
-                  </TextCollapse>
-                </Case>
-                <Case>
-                  <TextCollapse header={<Heading2 />}>
-                    <Description2 />
-                  </TextCollapse>
-                </Case>
-                <Case>
-                  <TextCollapse header={<Heading3 />}>
-                    <Description3 />
-                  </TextCollapse>
-                </Case>
-              </Cases>
-            </OnlyMobile>
-          </Right>
-        </FlexWrap>
-      </Container>
-    </Wrapper>
-  )
-}
diff --git a/src/components/Home/UseCases/index.tsx b/src/components/Home/UseCases/index.tsx
new file mode 100644
index 0000000000..399fb4a749
--- /dev/null
+++ b/src/components/Home/UseCases/index.tsx
@@ -0,0 +1,130 @@
+import React, { forwardRef } from 'react'
+import YoutubeVideo from './Video'
+import CollapsibleText from './CollapsibleText'
+
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import ShowOnly from '../../ShowOnly'
+
+import styles from './styles.module.css'
+
+const Heading1 = () => (
+  <div className={styles.caseHeader}>
+    <img
+      className={styles.caseIcon}
+      src="/img/save-reprro.svg"
+      width={30}
+      height={30}
+      alt=""
+    />
+    <h3 className={styles.caseTitle}>Save and reproduce your experiments</h3>
+  </div>
+)
+
+const Heading2 = () => (
+  <div className={styles.caseHeader}>
+    <img
+      className={styles.caseIcon}
+      src="/img/git-icon.svg"
+      width={30}
+      height={30}
+      alt=""
+    />
+    <h3 className={styles.caseTitle}>Version control models and data</h3>
+  </div>
+)
+
+const Heading3 = () => (
+  <div className={styles.caseHeader}>
+    <img
+      className={styles.caseIcon}
+      src="/img/share.svg"
+      width={30}
+      height={31}
+      alt=""
+    />
+    <h3 className={styles.caseTitle}>
+      Establish workflow for deployment & collaboration
+    </h3>
+  </div>
+)
+
+const Description1 = () => (
+  <div className={styles.caseDescription}>
+    At any time, fetch the full context about any experiment you or your
+    colleagues have run. DVC guarantees that all files and metrics will be
+    consistent and in the right place to reproduce the experiment or use it as a
+    baseline for a new iteration.
+  </div>
+)
+
+const Description2 = () => (
+  <div className={styles.caseDescription}>
+    DVC keeps metafiles in Git instead of Google Docs to describe and version
+    control your data sets and models. DVC supports a variety of external
+    storage types as a remote cache for large files.
+  </div>
+)
+
+const Description3 = () => (
+  <div className={styles.caseDescription}>
+    DVC defines rules and processes for working effectively and consistently as
+    a team. It serves as a protocol for collaboration, sharing results, and
+    getting and running a finished model in a production environment.
+  </div>
+)
+
+const UseCases: React.ForwardRefRenderFunction<HTMLElement> = (_, ref) => {
+  return (
+    <section className={styles.container} ref={ref}>
+      <LayoutWidthContainer>
+        <h2 className={styles.heading}>Use cases</h2>
+        <div className={styles.wrapper}>
+          <div className={styles.videoContainer}>
+            <YoutubeVideo id={`4h6I9_xeYA4`} />
+          </div>
+
+          <div className={styles.rightColumn}>
+            <ShowOnly on="desktop">
+              <div className={styles.cases}>
+                <div className={styles.case}>
+                  <Heading1 />
+                  <Description1 />
+                </div>
+                <div className={styles.case}>
+                  <Heading2 />
+                  <Description2 />
+                </div>
+                <div className={styles.case}>
+                  <Heading3 />
+                  <Description3 />
+                </div>
+              </div>
+            </ShowOnly>
+
+            <ShowOnly on="mobile">
+              <div className={styles.cases}>
+                <div className={styles.case}>
+                  <CollapsibleText header={<Heading1 />}>
+                    <Description1 />
+                  </CollapsibleText>
+                </div>
+                <div className={styles.case}>
+                  <CollapsibleText header={<Heading2 />}>
+                    <Description2 />
+                  </CollapsibleText>
+                </div>
+                <div className={styles.case}>
+                  <CollapsibleText header={<Heading3 />}>
+                    <Description3 />
+                  </CollapsibleText>
+                </div>
+              </div>
+            </ShowOnly>
+          </div>
+        </div>
+      </LayoutWidthContainer>
+    </section>
+  )
+}
+
+export default forwardRef<HTMLElement>(UseCases)
diff --git a/src/components/Home/UseCases/styles.js b/src/components/Home/UseCases/styles.js
deleted file mode 100644
index d82e0bc923..0000000000
--- a/src/components/Home/UseCases/styles.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import styled from 'styled-components'
-
-import { container, media } from '../../../styles'
-
-export const Wrapper = styled.section`
-  padding-top: 80px;
-  padding-bottom: 57px;
-`
-
-export const Container = styled.div`
-  ${container};
-`
-
-export const FlexWrap = styled.div`
-  display: flex;
-  justify-content: space-between;
-
-  ${media.tablet`
-    flex-direction: column;
-  `};
-
-  ${media.phablet`
-    flex-direction: column-reverse;
-  `};
-`
-
-export const Video = styled.div`
-  display: flex;
-  flex: 1 2 60%;
-  flex-direction: column;
-  width: 100%;
-  align-self: center;
-  margin-right: 10%;
-
-  ${media.tablet`
-    margin-bottom: 20px;
-    margin-right: 0;
-    flex: auto;
-  `};
-
-  ${media.phablet`
-    margin: 0;
-  `};
-`
-
-export const Right = styled.div`
-  flex: 1 1 40%;
-
-  ${media.tablet`
-    flex: auto;
-  `};
-
-  ${media.phablet`
-    flex: auto;
-  `};
-`
-
-export const Heading = styled.div`
-  font-family: BrandonGrotesque;
-  min-height: 50px;
-  font-size: 30px;
-  font-weight: 500;
-  text-align: center;
-  color: #40364d;
-
-  ${media.tablet`
-    text-align: left;
-  `};
-`
-
-export const Cases = styled.div`
-  margin-top: 15px;
-`
-
-export const Case = styled.div`
-  margin-bottom: 18px;
-`
-
-export const Top = styled.div`
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`
-
-export const Icon = styled.div`
-  margin-right: 8px;
-`
-
-export const Title = styled.h3`
-  font-family: BrandonGrotesque;
-  font-size: 16px;
-  font-weight: 500;
-  color: #40364d;
-`
-
-export const Description = styled.div`
-  padding-top: 15px;
-  font-size: 16px;
-  color: #5f6c72;
-`
diff --git a/src/components/Home/UseCases/styles.module.css b/src/components/Home/UseCases/styles.module.css
new file mode 100644
index 0000000000..c430a2eb27
--- /dev/null
+++ b/src/components/Home/UseCases/styles.module.css
@@ -0,0 +1,89 @@
+.container {
+  padding-top: 80px;
+  padding-bottom: 57px;
+}
+
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+
+  @media (--sm-scr) {
+    flex-direction: column;
+  }
+
+  @media (--xs-scr) {
+    flex-direction: column-reverse;
+  }
+}
+
+.videoContainer {
+  display: flex;
+  flex: 1 2 60%;
+  flex-direction: column;
+  align-self: center;
+  width: 100%;
+  margin-right: 10%;
+
+  @media (--sm-scr) {
+    flex: auto;
+    margin-bottom: 20px;
+    margin-right: 0;
+  }
+
+  @media (--xs-scr) {
+    margin: 0;
+  }
+}
+
+.heading {
+  @mixin h2-desktop;
+
+  min-height: 50px;
+  font-family: var(--font-brandon);
+  text-align: center;
+  color: var(--color-gray-hover);
+
+  @media (--sm-scr) {
+    text-align: left;
+  }
+}
+
+.cases {
+  margin-top: 15px;
+}
+
+.case {
+  margin-bottom: 18px;
+}
+
+.rightColumn {
+  flex: 1 1 40%;
+
+  @media (--sm-scr) {
+    flex: auto;
+  }
+}
+
+.caseHeader {
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.caseIcon {
+  margin-right: 8px;
+}
+
+.caseTitle {
+  font-family: var(--font-brandon);
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--color-gray-hover);
+}
+
+.caseDescription {
+  padding-top: 15px;
+  font-size: 16px;
+  color: var(--color-gray-dark);
+}
diff --git a/src/components/Home/index.js b/src/components/Home/index.js
deleted file mode 100644
index 1d60fd4c68..0000000000
--- a/src/components/Home/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-
-import LearnMore from './LearnMore'
-import HeroSection from '../HeroSection'
-import LandingHero from './LandingHero'
-import Diagram from './Diagram'
-import PromoSection from './PromoSection'
-import UseCases from './UseCases'
-import SubscribeSection from '../SubscribeSection'
-
-import { LearnMoreSection } from './styles'
-
-export default function HomePage() {
-  return (
-    <>
-      <HeroSection>
-        <LandingHero />
-        <LearnMoreSection>
-          <LearnMore />
-        </LearnMoreSection>
-        <span name="nextSlide" style={{ marginTop: `-58px` }} />
-      </HeroSection>
-      <Diagram />
-      <PromoSection />
-      <UseCases />
-      <SubscribeSection />
-    </>
-  )
-}
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
new file mode 100644
index 0000000000..a432af9ace
--- /dev/null
+++ b/src/components/Home/index.tsx
@@ -0,0 +1,52 @@
+import React, { useRef, useCallback } from 'react'
+
+import HeroSection from '../HeroSection'
+import SubscribeSection from '../SubscribeSection'
+import PromoSection from '../PromoSection'
+import Link from '../Link'
+import LearnMore from './LearnMore'
+import LandingHero from './LandingHero'
+import Diagram from './Diagram'
+import UseCases from './UseCases'
+import { logEvent } from '../../utils/ga'
+
+import styles from './styles.module.css'
+
+const Home: React.SFC = () => {
+  const diagramSectionRef = useRef<HTMLElement>(null)
+  const useCasesSectionRef = useRef<HTMLElement>(null)
+  const goToDocGetStarted = useCallback(
+    () => logEvent('promo', 'get-started'),
+    []
+  )
+  const goToFeatures = useCallback(() => logEvent('promo', 'features'), [])
+
+  return (
+    <>
+      <HeroSection className={styles.heroSection}>
+        <LandingHero scrollToRef={useCasesSectionRef} />
+        <LearnMore scrollToRef={diagramSectionRef} />
+      </HeroSection>
+      <Diagram ref={diagramSectionRef} />
+      <PromoSection
+        title="For data scientists, by data scientists"
+        buttons={[
+          <Link
+            href="/doc/tutorials/get-started"
+            onClick={goToDocGetStarted}
+            key="get-started"
+          >
+            Get Started
+          </Link>,
+          <Link href="/features" onClick={goToFeatures} key="features">
+            Full Features
+          </Link>
+        ]}
+      />
+      <UseCases ref={useCasesSectionRef} />
+      <SubscribeSection />
+    </>
+  )
+}
+
+export default Home
diff --git a/src/components/Home/styles.js b/src/components/Home/styles.js
deleted file mode 100644
index 1904903dcc..0000000000
--- a/src/components/Home/styles.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from 'styled-components'
-
-export const LearnMoreSection = styled.div`
-  z-index: 2;
-  position: absolute;
-  transform: translate(-50%, 0%);
-  left: 50%;
-  bottom: 16px;
-`
diff --git a/src/components/Home/styles.module.css b/src/components/Home/styles.module.css
new file mode 100644
index 0000000000..837394e960
--- /dev/null
+++ b/src/components/Home/styles.module.css
@@ -0,0 +1,3 @@
+.heroSection {
+  position: relative;
+}
diff --git a/src/components/Page/base.css b/src/components/Page/base.css
index 31e16e5015..e298ff50fd 100644
--- a/src/components/Page/base.css
+++ b/src/components/Page/base.css
@@ -1,17 +1,20 @@
 :root {
   --color-black: #24292e;
   --color-gray: #838d93;
+  --color-gray-dark: #5f6c72;
   --color-gray-opaque: rgba(131, 141, 147, 0.5);
   --color-gray-hover: #40364d;
   --color-light-gray: #d9e2e8;
   --color-azure: #13adc7;
+  --color-azure-hover: #13a3bd;
   --color-blue: #0366d6;
   --color-lighter-blue: #dde7ee;
   --color-light-blue: #eef4f8;
+  --color-light-blue-hover: #e4eaee;
   --color-purple: #945dd6;
   --color-purple-hover: #745cb7;
   --color-orange: #e37046;
-  --color-orange-opaque: rgba(22, 112, 70, 0.5);
+  --color-orange-bright: #f46837;
   --font-brandon: 'BrandonGrotesque', 'Tahoma', 'Arial', sans-serif;
   --font-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo',
     'Courier', monospace;
@@ -24,7 +27,7 @@
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizelegibility;
+  text-rendering: optimizeLegibility;
 }
 
 body {
diff --git a/src/components/PromoSection/index.tsx b/src/components/PromoSection/index.tsx
new file mode 100644
index 0000000000..1417a8461d
--- /dev/null
+++ b/src/components/PromoSection/index.tsx
@@ -0,0 +1,42 @@
+import React, { cloneElement } from 'react'
+import cn from 'classnames'
+
+import LayoutWidthContainer from '../LayoutWidthContainer'
+
+import styles from './styles.module.css'
+
+interface IPromoSectionProps {
+  title: string
+  buttons: Array<React.ReactElement>
+}
+
+const PromoSection: React.SFC<IPromoSectionProps> = ({ title, buttons }) => (
+  <section className={styles.container}>
+    <LayoutWidthContainer>
+      <img
+        className={cn(styles.bgGlyph, styles.topLeft)}
+        src="/img/glyph-3.svg"
+        alt=""
+      />
+      <h3 className={styles.title}>{title}</h3>
+      <div className={styles.buttonsContainer}>
+        {buttons.map((button, index) =>
+          cloneElement(button, {
+            className: cn(
+              button.props.className,
+              styles.button,
+              index === 0 && styles.first
+            )
+          })
+        )}
+      </div>
+      <img
+        className={cn(styles.bgGlyph, styles.rightBottom)}
+        src="/img/glyph-4.svg"
+        alt=""
+      />
+    </LayoutWidthContainer>
+  </section>
+)
+
+export default PromoSection
diff --git a/src/components/PromoSection/styles.module.css b/src/components/PromoSection/styles.module.css
new file mode 100644
index 0000000000..49e1c177af
--- /dev/null
+++ b/src/components/PromoSection/styles.module.css
@@ -0,0 +1,101 @@
+.container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 278px;
+  background-color: var(--color-purple);
+}
+
+.bgGlyph {
+  position: absolute;
+  z-index: 0;
+  width: 158px;
+  height: auto;
+  object-fit: contain;
+
+  &.topLeft {
+    top: -25px;
+    left: 40px;
+  }
+
+  &.rightBottom {
+    bottom: -60px;
+    right: 30px;
+  }
+
+  @media (--sm-scr) {
+    width: 110px;
+  }
+
+  @media (--xs-scr) {
+    display: none;
+  }
+}
+
+.title {
+  font-family: var(--font-brandon);
+  max-width: 438px;
+  min-height: 44px;
+  margin: 0 auto;
+  font-size: 30px;
+  font-weight: 500;
+  text-align: center;
+  color: #fff;
+}
+
+.buttonsContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 20px auto 0;
+
+  @media (--xs-scr) {
+    flex-direction: column;
+  }
+}
+
+.button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  min-width: 186px;
+  height: 60px;
+  padding: 0 21px;
+  border-radius: 4px;
+  border: solid 2px rgba(255, 255, 255, 0.3);
+  font-family: var(--font-brandon);
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 0.9;
+  text-decoration: none;
+  text-align: left;
+  color: #fff;
+  background: var(--color-purple) url('/img/arrow_right_white.svg') right center
+    no-repeat;
+  background-position-x: 147px;
+  transition: 0.2s background-color ease-out;
+
+  & + & {
+    margin-left: 14px;
+  }
+
+  &.first {
+    color: var(--color-purple);
+    border-radius: 4px;
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21);
+    background-image: url('/img/arrow_right_dark.svg');
+    transition: 0.2s background-color ease-out;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+
+  @media (--xs-scr) {
+    margin-bottom: 12px;
+    margin-right: 0 !important;
+  }
+}
diff --git a/src/components/ShowOnly/index.tsx b/src/components/ShowOnly/index.tsx
new file mode 100644
index 0000000000..7eb5ee3823
--- /dev/null
+++ b/src/components/ShowOnly/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import cn from 'classnames'
+
+import styles from './styles.module.css'
+
+interface IShowOnlyProps {
+  on: 'mobile' | 'desktop'
+  className?: string
+  children: React.ReactNode
+}
+
+const ShowOnly: React.SFC<IShowOnlyProps> = ({ on, className, children }) => (
+  <div className={cn(styles[on], className)}>{children}</div>
+)
+
+export default ShowOnly
diff --git a/src/components/ShowOnly/styles.module.css b/src/components/ShowOnly/styles.module.css
new file mode 100644
index 0000000000..1ab7295a38
--- /dev/null
+++ b/src/components/ShowOnly/styles.module.css
@@ -0,0 +1,15 @@
+.mobile {
+  display: none;
+
+  @media (--xs-scr) {
+    display: initial;
+  }
+}
+
+.desktop {
+  display: initial;
+
+  @media (--xs-scr) {
+    display: none;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 3f96d3ff36..6a04fcfef9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1951,6 +1951,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-collapse@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-collapse/-/react-collapse-5.0.0.tgz#ffe6173db457b4b147319e1bd522b5b9d3d68fac"
+  integrity sha512-iM5QPtS0JVbL5TWm8vilaG4iYiQIFSSqXDHcRUA50qBLSgC0GURk7VZYmgo6u4YF0LnpvKBQYRhPv1ut9DukIg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-helmet@^5.0.15":
   version "5.0.15"
   resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-5.0.15.tgz#af0370617307e9f062c6aee0f1f5588224ce646e"
@@ -1966,6 +1973,13 @@
   version "0.0.0"
   uid ""
 
+"@types/react-slick@^0.23.4":
+  version "0.23.4"
+  resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.4.tgz#c97e2a9e7e3d1933c68593b8e82752fab1e8ce53"
+  integrity sha512-vXoIy4GUfB7/YgqubR4H7RALo+pRdMYCeLgWwV3MPwl5pggTlEkFBTF19R7u+LJc85uMqC7RfsbkqPLMQ4ab+A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "16.9.25"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.25.tgz#6ae2159b40138c792058a23c3c04fd3db49e929e"
@@ -12941,7 +12955,7 @@ prompts@^2.0.1, prompts@^2.3.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -13343,14 +13357,6 @@ react-refresh@^0.7.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.7.2.tgz#f30978d21eb8cac6e2f2fde056a7d04f6844dd50"
   integrity sha512-u5l7fhAJXecWUJzVxzMRU2Zvw8m4QmDNHlTrT5uo3KBlYBhmChd7syAakBoay1yIiVhx/8Fi7a6v6kQZfsw81Q==
 
-react-scroll@^1.7.13:
-  version "1.7.16"
-  resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.7.16.tgz#814f0b97ed171aad1f27e45dad16a8444817fec8"
-  integrity sha512-f4M5AdL+3cw3MJ7c/T0hPMY2iHCeQLDXV13lRanAFQ6JIt9xyAdHCpTH9mLUQt9SQh4pRarD+Qc7KhU6qMx3Yg==
-  dependencies:
-    lodash.throttle "^4.1.1"
-    prop-types "^15.5.8"
-
 react-side-effect@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.2.0.tgz#0e940c78faba0c73b9b0eba9cd3dda8dfb7e7dae"

From c9922da7027177dc1ae48fd3cb4f254eb0096095 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Thu, 2 Apr 2020 15:47:31 +0300
Subject: [PATCH 06/51] Remove duplicated component - TrySection and replace it
 with PromoSection

---
 src/components/Features/index.js    |  12 +++-
 src/components/Support/index.js     |  11 ++-
 src/components/TrySection/index.js  |  28 --------
 src/components/TrySection/styles.js | 106 ----------------------------
 4 files changed, 19 insertions(+), 138 deletions(-)
 delete mode 100644 src/components/TrySection/index.js
 delete mode 100644 src/components/TrySection/styles.js

diff --git a/src/components/Features/index.js b/src/components/Features/index.js
index a45b7d0577..124396d56e 100644
--- a/src/components/Features/index.js
+++ b/src/components/Features/index.js
@@ -2,7 +2,8 @@ import React from 'react'
 
 import HeroSection from '../HeroSection'
 import FeaturesHero from './FeaturesHero'
-import TrySection from '../TrySection'
+import Link from '../Link'
+import PromoSection from '../PromoSection'
 
 import { Container, Description, Feature, Features, Icon, Name } from './styles'
 
@@ -150,7 +151,14 @@ export default function FeaturesPage() {
           </Feature>
         </Features>
       </Container>
-      <TrySection title="Ready to give it a try?" />
+      <PromoSection
+        title="Ready to give it a try?"
+        buttons={[
+          <Link href="/doc/tutorials/get-started" key="get-started">
+            Get Started
+          </Link>
+        ]}
+      />
     </>
   )
 }
diff --git a/src/components/Support/index.js b/src/components/Support/index.js
index 4ae9b0433a..f6fca53784 100644
--- a/src/components/Support/index.js
+++ b/src/components/Support/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import HeroSection from '../HeroSection'
-import TrySection from '../TrySection'
+import PromoSection from '../PromoSection'
 import Popover from './Popover'
 import Link from '../Link'
 
@@ -124,7 +124,14 @@ export default function SupportPage() {
           </Feature>
         </Features>
       </Container>
-      <TrySection title="Don't know where to start?" buttonText="Get Started" />
+      <PromoSection
+        title="Don't know where to start?"
+        buttons={[
+          <Link href="/doc/tutorials/get-started" key="get-started">
+            Get Started
+          </Link>
+        ]}
+      />
     </>
   )
 }
diff --git a/src/components/TrySection/index.js b/src/components/TrySection/index.js
deleted file mode 100644
index d6726f6988..0000000000
--- a/src/components/TrySection/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Link from '../Link'
-
-import { Button, Buttons, Container, Glyph, Title, Wrapper } from './styles'
-
-export default function TrySection({ title, buttonText = 'Get Started' }) {
-  return (
-    <Wrapper>
-      <Container>
-        <Glyph src="/img/glyph-3.svg" gid={'topleft'} />
-        <Title>{title}</Title>
-        <Buttons>
-          <Link href="/doc/tutorials/get-started" as={Button} first="true">
-            {buttonText}
-          </Link>
-        </Buttons>
-        <Glyph src="/img/glyph-4.svg" gid={'rigthbottom'} />
-      </Container>
-    </Wrapper>
-  )
-}
-
-TrySection.propTypes = {
-  title: PropTypes.string.isRequired,
-  buttonText: PropTypes.string
-}
diff --git a/src/components/TrySection/styles.js b/src/components/TrySection/styles.js
deleted file mode 100644
index 242915efe5..0000000000
--- a/src/components/TrySection/styles.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import styled from 'styled-components'
-
-import { container, media } from '../../styles'
-
-export const Wrapper = styled.section`
-  position: relative;
-  height: 278px;
-  background-color: #945dd6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-export const Container = styled.div`
-  ${container};
-  width: 100%;
-`
-
-export const Glyph = styled.img`
-  position: absolute;
-  z-index: 0;
-
-  width: 158px;
-  height: 192px;
-
-  object-fit: contain;
-
-  ${props =>
-    props.gid === 'topleft' &&
-    `
-    top: -25px;
-    left: 40px;
-  `}
-
-  ${props =>
-    props.gid === 'rigthbottom' &&
-    `
-    bottom: -60px;
-    right: 30px;
-  `};
-
-  ${media.phablet`
-    display: none;
-  `};
-`
-
-export const Title = styled.h3`
-  font-family: BrandonGrotesque;
-  max-width: 600px;
-  min-height: 44px;
-  font-size: 30px;
-  font-weight: 500;
-  text-align: center;
-  color: #ffffff;
-  margin: 0px auto;
-`
-
-export const Buttons = styled.div`
-  max-width: 386px;
-  margin: 0px auto;
-  margin-top: 20px;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-`
-
-export const Button = styled.a`
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-
-  min-width: 186px;
-  height: 60px;
-  padding: 0 50px 0 20px;
-  border-radius: 4px;
-  border: solid 2px rgba(255, 255, 255, 0.3);
-
-  font-family: BrandonGrotesque;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 0.9;
-  text-align: left;
-  text-decoration: none;
-  color: #ffffff;
-
-  background-color: #945dd6;
-  background: url('/img/arrow_right_white.svg') right center no-repeat;
-  background-position-x: calc(100% - 15px);
-  transition: 0.2s background-color ease-out;
-
-  &:hover {
-    background-color: #f5f5f5;
-  }
-
-  ${props =>
-    props.first &&
-    `
-    color: #945dd6;
-    margin-right: 14px;
-    border-radius: 4px;
-    background-color: #ffffff;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21);
-
-    background-image: url('/img/arrow_right_dark.svg');
-  `};
-`

From 22da0917ddf9b55fb9b9221c1283bcf4c8f77630 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Thu, 2 Apr 2020 16:13:18 +0300
Subject: [PATCH 07/51] Refactor SubscribeSection to get rid of linter warning

---
 package.json                                  |  1 +
 .../SubscribeSection/Form/index.tsx           | 43 +++++++++--------
 src/components/SubscribeSection/index.tsx     | 47 +++++++++----------
 yarn.lock                                     |  5 ++
 4 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/package.json b/package.json
index 8f215c6af4..0d5b1d1595 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "lodash.startcase": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "lodash.topairs": "^4.3.0",
+    "nanoid": "^3.0.2",
     "node-cache": "^5.1.0",
     "perfect-scrollbar": "^1.4.0",
     "prismjs": "^1.19.0",
diff --git a/src/components/SubscribeSection/Form/index.tsx b/src/components/SubscribeSection/Form/index.tsx
index 402b5e4a7e..db6df77f2b 100644
--- a/src/components/SubscribeSection/Form/index.tsx
+++ b/src/components/SubscribeSection/Form/index.tsx
@@ -1,26 +1,24 @@
-import React, { FormEvent } from 'react'
+import React, { useCallback, useRef } from 'react'
+import { nanoid } from 'nanoid'
 
 import { logEvent } from '../../../utils/ga'
 
 import styles from './styles.module.css'
 
-const honeyPot = 'b_a08bf93caae4063c4e6a351f6_24c0ecc49a'
-
-interface IFormElements {
-  [honeyPot]: HTMLFormElement
-}
-
-const sendGAEvent = ({ target: form }: FormEvent<HTMLFormElement>) => {
-  const formElements: IFormElements = (form as any).elements
-  if (formElements[honeyPot].value) {
-    // It's a bot.
-    return
-  }
-
-  logEvent('subscribe-form', 'subscribe')
-}
-
-export default function Form() {
+const Form: React.SFC = () => {
+  const hiddenInputRef = useRef<HTMLInputElement>(null)
+  const honeypotNameRef = useRef(nanoid())
+  const sendGAEvent = useCallback(
+    e => {
+      if (hiddenInputRef.current?.value) {
+        // It's a bot.
+        return e.preventDefault()
+      }
+
+      logEvent('subscribe-form', 'subscribe')
+    },
+    [hiddenInputRef?.current]
+  )
   return (
     <form
       className={styles.form}
@@ -42,7 +40,12 @@ export default function Form() {
 
       {/*real people should not fill this in and expect good things - do not remove this or risk form bot signups*/}
       <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
-        <input type="text" name={honeyPot} tabIndex={-1} />
+        <input
+          type="text"
+          name={honeypotNameRef.current}
+          ref={hiddenInputRef}
+          tabIndex={-1}
+        />
       </div>
 
       <button
@@ -56,3 +59,5 @@ export default function Form() {
     </form>
   )
 }
+
+export default Form
diff --git a/src/components/SubscribeSection/index.tsx b/src/components/SubscribeSection/index.tsx
index 52bb7b11c5..93466fe324 100644
--- a/src/components/SubscribeSection/index.tsx
+++ b/src/components/SubscribeSection/index.tsx
@@ -1,34 +1,29 @@
-import cn from 'classnames'
 import React from 'react'
+import cn from 'classnames'
 
-import styles from './styles.module.css'
-
+import SubscribeForm from './Form'
 import { default as Glyph1Src } from './glyph-1.svg'
 import { default as Glyph2Src } from './glyph-2.svg'
 
-import SubscribeForm from './Form'
+import styles from './styles.module.css'
 
-export default function SubscribeSection() {
-  return (
-    <div className={styles.wrapper} id="subscribe">
-      <img
-        src={Glyph1Src}
-        className={cn(styles.glyph, styles.topleft)}
-        alt=""
-      />
-      <div className={styles.container}>
-        <div className={styles.title}>
-          Subscribe for updates. We won&#39;t spam you.
-        </div>
-        <div className={styles.subscribeContainer}>
-          <SubscribeForm />
-        </div>
+const SubscribeSection: React.SFC = () => (
+  <div className={styles.wrapper} id="subscribe">
+    <img src={Glyph1Src} className={cn(styles.glyph, styles.topleft)} alt="" />
+    <div className={styles.container}>
+      <div className={styles.title}>
+        Subscribe for updates. We won&#39;t spam you.
+      </div>
+      <div className={styles.subscribeContainer}>
+        <SubscribeForm />
       </div>
-      <img
-        src={Glyph2Src}
-        className={cn(styles.glyph, styles.rigthbottom)}
-        alt=""
-      />
     </div>
-  )
-}
+    <img
+      src={Glyph2Src}
+      className={cn(styles.glyph, styles.rigthbottom)}
+      alt=""
+    />
+  </div>
+)
+
+export default SubscribeSection
diff --git a/yarn.lock b/yarn.lock
index 6a04fcfef9..e2f8c50377 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11131,6 +11131,11 @@ nano-css@^5.2.1:
     stacktrace-js "^2.0.0"
     stylis "3.5.0"
 
+nanoid@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.0.2.tgz#37e91e6f5277ce22335be473e2a5db1bd96dd026"
+  integrity sha512-WOjyy/xu3199NlQiQWlx7VbspSFlGtOxa1bRX9ebmXOnp1fje4bJfjPs1wLQ8jZbJUfD+yceJmw879ZSaVJkdQ==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"

From ab5712afe0ffad8ea5c7ad1f4c3632771d856a0b Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Thu, 2 Apr 2020 17:08:39 +0300
Subject: [PATCH 08/51] Extend scroll utils

---
 .../Documentation/Layout/SearchForm/styles.js |  2 +-
 .../Layout/SidebarMenu/styles.js              |  4 +-
 src/components/Documentation/Layout/index.js  |  2 +-
 .../Documentation/RightPanel/styles.js        |  2 +-
 src/components/Home/LandingHero/index.tsx     |  1 -
 src/components/Home/LearnMore/index.tsx       |  1 -
 src/components/LayoutHeader/index.tsx         | 22 +++++------
 src/components/LayoutHeader/styles.module.css | 12 +++---
 src/components/MainLayout/index.tsx           |  2 +-
 src/components/Page/base.css                  |  2 +-
 src/components/Page/utils.ts                  |  1 +
 src/utils/customProperties.ts                 | 31 +++++++++++++++
 src/utils/scroll.ts                           | 39 ++++++++++++++++---
 13 files changed, 89 insertions(+), 32 deletions(-)
 create mode 100644 src/utils/customProperties.ts

diff --git a/src/components/Documentation/Layout/SearchForm/styles.js b/src/components/Documentation/Layout/SearchForm/styles.js
index 9852258104..7fa70fd931 100644
--- a/src/components/Documentation/Layout/SearchForm/styles.js
+++ b/src/components/Documentation/Layout/SearchForm/styles.js
@@ -15,7 +15,7 @@ export const SearchArea = styled.div`
   );
   z-index: 10;
   position: sticky;
-  top: var(--layout-header-height-scrolled);
+  top: var(--layout-header-height-collapsed);
 
   ${media.phablet`
     position: relative;
diff --git a/src/components/Documentation/Layout/SidebarMenu/styles.js b/src/components/Documentation/Layout/SidebarMenu/styles.js
index 2253caaa33..794e5ca8a0 100644
--- a/src/components/Documentation/Layout/SidebarMenu/styles.js
+++ b/src/components/Documentation/Layout/SidebarMenu/styles.js
@@ -4,8 +4,8 @@ import { media } from '../../../../styles'
 
 export const Menu = styled.div`
   position: sticky;
-  top: calc(var(--layout-header-height-scrolled) + 60px);
-  height: calc(100vh - var(--layout-header-height-scrolled) - 60px);
+  top: calc(var(--layout-header-height-collapsed) + 60px);
+  height: calc(100vh - var(--layout-header-height-collapsed) - 60px);
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
 
diff --git a/src/components/Documentation/Layout/index.js b/src/components/Documentation/Layout/index.js
index a55a87a3e0..76bc4f0f35 100644
--- a/src/components/Documentation/Layout/index.js
+++ b/src/components/Documentation/Layout/index.js
@@ -19,7 +19,7 @@ function Layout({ children, ...restProps }) {
   return (
     <MainLayout
       {...restProps}
-      modifiers={[LayoutModifiers.Wide, LayoutModifiers.Scrolled]}
+      modifiers={[LayoutModifiers.Wide, LayoutModifiers.Collapsed]}
     >
       <Container>
         <Backdrop onClick={toggleMenu} visible={isMenuOpen} />
diff --git a/src/components/Documentation/RightPanel/styles.js b/src/components/Documentation/RightPanel/styles.js
index e53b03b49d..39e5845b3e 100644
--- a/src/components/Documentation/RightPanel/styles.js
+++ b/src/components/Documentation/RightPanel/styles.js
@@ -8,7 +8,7 @@ export const Wrapper = styled.div`
   font-size: 16px;
   height: calc(100vh - 78px);
   position: sticky;
-  top: var(--layout-header-height-scrolled);
+  top: var(--layout-header-height-collapsed);
 
   @media only screen and (max-width: 1200px) {
     display: none;
diff --git a/src/components/Home/LandingHero/index.tsx b/src/components/Home/LandingHero/index.tsx
index 877e9e5344..da362eae0e 100644
--- a/src/components/Home/LandingHero/index.tsx
+++ b/src/components/Home/LandingHero/index.tsx
@@ -31,7 +31,6 @@ const LandingHero: React.SFC<ILandingHeroProps> = ({ scrollToRef }) => {
     scrollIntoLayout(scrollToRef?.current, {
       smooth: true,
       duration: 800,
-      offset: 20,
       ease: ease.inOutCube
     })
   }, [scrollToRef?.current])
diff --git a/src/components/Home/LearnMore/index.tsx b/src/components/Home/LearnMore/index.tsx
index 187d8a5090..7961e64e90 100644
--- a/src/components/Home/LearnMore/index.tsx
+++ b/src/components/Home/LearnMore/index.tsx
@@ -15,7 +15,6 @@ const LearnMore: React.SFC<ILearnMoreProps> = ({ scrollToRef }) => {
     scrollIntoLayout(scrollToRef?.current, {
       smooth: true,
       duration: 800,
-      offset: 20,
       ease: ease.inOutCube
     })
   }, [scrollToRef?.current])
diff --git a/src/components/LayoutHeader/index.tsx b/src/components/LayoutHeader/index.tsx
index 470a73dc93..9600d1c0f4 100644
--- a/src/components/LayoutHeader/index.tsx
+++ b/src/components/LayoutHeader/index.tsx
@@ -1,38 +1,36 @@
 import cn from 'classnames'
 import React from 'react'
-import { useWindowScroll } from 'react-use'
 
 import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
 import LayoutWidthContainer from '../LayoutWidthContainer'
 import Link from '../Link'
 import Nav from './Nav'
 
+import { useHeaderIsScrolled } from '../../utils/scroll'
 import { ReactComponent as LogoSVG } from '../../../static/img/logo.svg'
 import styles from './styles.module.css'
 
 const LayoutHeader: React.SFC<Required<ILayoutModifiable>> = ({
   modifiers
 }) => {
-  const hasScrolledModifier = modifiers.includes(LayoutModifiers.Scrolled)
-  const scrolled =
-    hasScrolledModifier ||
-    (() => {
-      const { y } = useWindowScroll()
-
-      return y > 25
-    })()
+  const hasCollapsedModifier = modifiers.includes(LayoutModifiers.Collapsed)
+  const collapsed = hasCollapsedModifier || useHeaderIsScrolled()
 
   return (
-    <header className={styles.wrapper} id="header">
+    <header
+      className={styles.wrapper}
+      id="header"
+      data-collapsed={hasCollapsedModifier}
+    >
       <div
         className={cn(
           styles.placeholder,
-          hasScrolledModifier && styles.scrolled
+          hasCollapsedModifier && styles.collapsed
         )}
       />
       <div className={styles.header}>
         <LayoutWidthContainer
-          className={cn(styles.container, scrolled && styles.scrolled)}
+          className={cn(styles.container, collapsed && styles.collapsed)}
           wide={modifiers.includes(LayoutModifiers.Wide)}
         >
           <Link href="/" className={styles.logoLink} title="DVC">
diff --git a/src/components/LayoutHeader/styles.module.css b/src/components/LayoutHeader/styles.module.css
index 2abec1dc62..6d3814a006 100644
--- a/src/components/LayoutHeader/styles.module.css
+++ b/src/components/LayoutHeader/styles.module.css
@@ -1,12 +1,12 @@
 .placeholder {
   height: var(--layout-header-height);
 
-  &.scrolled {
-    height: var(--layout-header-height-scrolled);
+  &.collapsed {
+    height: var(--layout-header-height-collapsed);
   }
 
   @media (--xs-scr) {
-    height: var(--layout-header-height-scrolled);
+    height: var(--layout-header-height-collapsed);
   }
 }
 
@@ -33,8 +33,8 @@
   transition: height 0.2s linear;
   will-change: height;
 
-  &.scrolled {
-    height: var(--layout-header-height-scrolled);
+  &.collapsed {
+    height: var(--layout-header-height-collapsed);
   }
 
   @media (--md-scr) {
@@ -42,7 +42,7 @@
   }
 
   @media (--xs-scr) {
-    height: var(--layout-header-height-scrolled);
+    height: var(--layout-header-height-collapsed);
   }
 }
 
diff --git a/src/components/MainLayout/index.tsx b/src/components/MainLayout/index.tsx
index afef9ec145..0e7eb5456a 100644
--- a/src/components/MainLayout/index.tsx
+++ b/src/components/MainLayout/index.tsx
@@ -9,7 +9,7 @@ import styles from './styles.module.css'
 
 export enum LayoutModifiers {
   Wide,
-  Scrolled
+  Collapsed
 }
 
 export interface ILayoutModifiable {
diff --git a/src/components/Page/base.css b/src/components/Page/base.css
index e298ff50fd..09f39728a0 100644
--- a/src/components/Page/base.css
+++ b/src/components/Page/base.css
@@ -21,7 +21,7 @@
   --layout-width: 1005px;
   --layout-width-wide: 1200px;
   --layout-header-height: 98px;
-  --layout-header-height-scrolled: calc(var(--layout-header-height) - 20px);
+  --layout-header-height-collapsed: 78px;
 }
 
 html {
diff --git a/src/components/Page/utils.ts b/src/components/Page/utils.ts
index f5edac27ba..a98c21322b 100644
--- a/src/components/Page/utils.ts
+++ b/src/components/Page/utils.ts
@@ -15,6 +15,7 @@ export const useAnchorNavigation = () => {
       const node = document.querySelector(location.hash)
 
       if (node) {
+        scrollIntoLayout(node)
         allImagesLoadedInContainer(document.body).then(() =>
           scrollIntoLayout(node)
         )
diff --git a/src/utils/customProperties.ts b/src/utils/customProperties.ts
new file mode 100644
index 0000000000..1f0eeefd39
--- /dev/null
+++ b/src/utils/customProperties.ts
@@ -0,0 +1,31 @@
+const getCustomProperties = (() => {
+  let cssDecl: CSSStyleDeclaration
+
+  return () => {
+    if (!cssDecl) {
+      cssDecl = getComputedStyle(document.documentElement, null)
+    }
+
+    return cssDecl
+  }
+})()
+
+export const getCustomProperty = (() => {
+  const IS_PX_VALUE = /px$/
+  const cachedValues: { [key: string]: number | string } = {}
+
+  return (name: string) => {
+    if (!cachedValues[name]) {
+      const all = getCustomProperties()
+      const value = all.getPropertyValue(name).trim()
+
+      if (IS_PX_VALUE.test(value)) {
+        return parseInt(value, 10)
+      }
+
+      cachedValues[name] = value
+    }
+
+    return cachedValues[name]
+  }
+})()
diff --git a/src/utils/scroll.ts b/src/utils/scroll.ts
index bc4bf6af3d..70479fa5d4 100644
--- a/src/utils/scroll.ts
+++ b/src/utils/scroll.ts
@@ -1,6 +1,35 @@
 import scroll from 'scroll'
+import { useWindowScroll } from 'react-use'
 export { default as ease } from 'ease-component'
 
+import { getCustomProperty } from './customProperties'
+
+const COLLAPSE_HEADER_AFTER = 25
+
+const headerIsCollapsedAt = (scrollPosition: number) =>
+  scrollPosition > COLLAPSE_HEADER_AFTER
+
+export const getHeaderHeightAt = (scrollPosition?: number) => {
+  let header = getCustomProperty('--layout-header-height')
+
+  if (
+    document.getElementById('header')?.dataset.collapsed ||
+    (scrollPosition !== undefined && headerIsCollapsedAt(scrollPosition))
+  ) {
+    header = getCustomProperty('--layout-header-height-collapsed')
+  }
+
+  return header as number
+}
+
+export const getHeaderHeight = () => getHeaderHeightAt()
+
+export const useHeaderIsScrolled = () => {
+  const { y } = useWindowScroll()
+
+  return headerIsCollapsedAt(y)
+}
+
 export const scrollIntoLayout = (
   node: Element | null,
   opts?: {
@@ -15,17 +44,17 @@ export const scrollIntoLayout = (
   }
 
   const htmlNode = document.documentElement
-  const headerHeight = document.getElementById('header')?.clientHeight || 0
   const nodeOffset = node.getBoundingClientRect()
-  const position =
-    htmlNode.scrollTop + nodeOffset.top - headerHeight + (opts?.offset || 0)
+  const position = htmlNode.scrollTop + nodeOffset.top + (opts?.offset || 0)
+  const headerHeight = getHeaderHeightAt(position)
+  const scrollTo = position - headerHeight
 
   if (!opts?.smooth) {
-    htmlNode.scrollTop = position
+    htmlNode.scrollTop = scrollTo
     return
   }
 
-  scroll.top(htmlNode, position, {
+  scroll.top(htmlNode, scrollTo, {
     duration: opts?.duration,
     ease: opts?.ease
   })

From 625cdc717ec856c9b1020058fd910d6a103e7edf Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Thu, 2 Apr 2020 19:39:03 +0300
Subject: [PATCH 09/51] Create one common component for buttons with two rows:
 TwoRowButton. Use it everywhere on main page. Refactor DownloadButton
 component

---
 src/components/DownloadButton/index.js        | 199 ------------------
 src/components/DownloadButton/index.tsx       | 180 ++++++++++++++++
 src/components/DownloadButton/styles.js       | 144 -------------
 .../DownloadButton/styles.module.css          |  68 ++++++
 src/components/Home/LandingHero/index.tsx     |  31 ++-
 .../Home/LandingHero/styles.module.css        |  61 +-----
 .../Home/LearnMore/styles.module.css          |   2 +-
 src/components/Home/UseCases/Video/index.tsx  |  27 +--
 .../Home/UseCases/Video/styles.module.css     |  43 ----
 src/components/Page/base.css                  |   1 +
 src/components/TwoRowsButton/index.tsx        |  49 +++++
 .../TwoRowsButton/styles.module.css           |  87 ++++++++
 12 files changed, 420 insertions(+), 472 deletions(-)
 delete mode 100644 src/components/DownloadButton/index.js
 create mode 100644 src/components/DownloadButton/index.tsx
 delete mode 100644 src/components/DownloadButton/styles.js
 create mode 100644 src/components/DownloadButton/styles.module.css
 create mode 100644 src/components/TwoRowsButton/index.tsx
 create mode 100644 src/components/TwoRowsButton/styles.module.css

diff --git a/src/components/DownloadButton/index.js b/src/components/DownloadButton/index.js
deleted file mode 100644
index e7b93691b9..0000000000
--- a/src/components/DownloadButton/index.js
+++ /dev/null
@@ -1,199 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import isClient from '../../utils/isClient'
-import { logEvent } from '../../utils/ga'
-
-import Link from '../Link'
-
-import {
-  Action,
-  Button,
-  Delimiter,
-  Description,
-  DownloadInput,
-  DownloadLink,
-  Handler,
-  Icon,
-  Inner,
-  Links,
-  Popup,
-  Triangle
-} from './styles'
-
-const VERSION = `0.92.0`
-const OSX = `osx`
-const WINDOWS = `win`
-const LINUX = `linux`
-const LINUX_RPM = `linux_rpm`
-const UNKNOWN = `...`
-const LINE = `line`
-
-const links = {
-  [OSX]: {
-    title: 'Mac OS',
-    url: `https://github.com/iterative/dvc/releases/download/${VERSION}/dvc-${VERSION}.pkg`,
-    download: true
-  },
-  [WINDOWS]: {
-    title: 'Windows',
-    url: `https://github.com/iterative/dvc/releases/download/${VERSION}/dvc-${VERSION}.exe`,
-    download: true
-  },
-  [LINUX]: {
-    title: 'Linux Deb',
-    url: `https://github.com/iterative/dvc/releases/download/${VERSION}/dvc_${VERSION}_amd64.deb`,
-    download: true
-  },
-  [LINUX_RPM]: {
-    title: 'Linux RPM',
-    url: `https://github.com/iterative/dvc/releases/download/${VERSION}/dvc-${VERSION}-1.x86_64.rpm`,
-    download: true
-  },
-  [LINE]: {
-    line: true
-  },
-  [UNKNOWN]: {
-    title: 'pip, conda, brew',
-    url: `/doc/install`,
-    download: false
-  }
-}
-
-export default class DownloadButton extends Component {
-  state = {
-    os: UNKNOWN,
-    open: false,
-    clicked: false
-  }
-
-  constructor() {
-    super()
-
-    this.handleClickOutside = this.handleClickOutside.bind(this)
-  }
-
-  componentDidMount() {
-    const os = this.getSystemOS()
-    this.setState({ os })
-
-    document.addEventListener('mousedown', this.handleClickOutside)
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside)
-  }
-
-  setRef = ref => (this.ref = ref)
-
-  handleClickOutside = event => {
-    if (this.ref && !this.ref.contains(event.target)) {
-      if (this.state.open) {
-        this.close()
-      }
-    }
-  }
-
-  getSystemOS = () => {
-    let OSName = UNKNOWN
-    if (!isClient) return OSName
-
-    if (navigator.userAgent.indexOf('Win') !== -1) OSName = WINDOWS
-    if (navigator.userAgent.indexOf('Mac') !== -1) OSName = OSX
-    if (navigator.userAgent.indexOf('Linux') !== -1) OSName = LINUX
-
-    return OSName
-  }
-
-  close = () => this.setState({ open: false })
-
-  toggle = () => {
-    if (!this.state.clicked) {
-      logEvent('button', 'download')
-    }
-    this.setState(prevState => ({
-      open: !prevState.open,
-      clicked: true
-    }))
-  }
-
-  download = id => {
-    this.close()
-    logEvent('download', id)
-  }
-
-  renderLinks = () => (
-    <Links>
-      {[UNKNOWN, LINE, OSX, WINDOWS, LINUX, LINUX_RPM].map(id => {
-        const link = links[id]
-
-        if (link.line) {
-          return <Delimiter key={id} />
-        }
-
-        if (!link.url) {
-          return (
-            <DownloadInput
-              readOnly
-              key={id}
-              value={link.title}
-              onClick={function(e) {
-                e.target.select()
-                e.stopPropagation()
-              }}
-            />
-          )
-        }
-
-        return (
-          <Link
-            download={link.download}
-            key={id}
-            as={DownloadLink}
-            href={link.url}
-            onClick={() => this.download(id)}
-            active={id === this.state.os}
-          >
-            {link.title}
-          </Link>
-        )
-      })}
-    </Links>
-  )
-
-  render() {
-    const { openTop } = this.props
-    const { os, open } = this.state
-    const currentOS = links[os]
-
-    return (
-      <Handler onClick={this.toggle} ref={this.setRef}>
-        <Button open={open}>
-          <Icon>
-            <img
-              src="/img/download-arrow.svg"
-              alt="Download"
-              width={14}
-              height={20}
-            />
-          </Icon>
-          <Inner>
-            <div>
-              <Action>Download</Action>
-              <Description>({currentOS.title})</Description>
-            </div>
-
-            <Triangle open={open}>
-              <img src="/img/triangle.svg" alt="" />
-            </Triangle>
-          </Inner>
-        </Button>
-        {open && <Popup openTop={openTop}>{this.renderLinks()}</Popup>}
-      </Handler>
-    )
-  }
-}
-
-DownloadButton.propTypes = {
-  openTop: PropTypes.bool
-}
diff --git a/src/components/DownloadButton/index.tsx b/src/components/DownloadButton/index.tsx
new file mode 100644
index 0000000000..41f4588f69
--- /dev/null
+++ b/src/components/DownloadButton/index.tsx
@@ -0,0 +1,180 @@
+import React, { useRef, useEffect, useCallback, useState } from 'react'
+import cn from 'classnames'
+
+import TwoRowsButton from '../TwoRowsButton'
+import Link from '../Link'
+
+import isClient from '../../utils/isClient'
+import { logEvent } from '../../utils/ga'
+
+import styles from './styles.module.css'
+
+const VERSION = `0.92.0`
+
+enum OS {
+  UNKNOWN = '...',
+  OSX = 'osx',
+  WINDOWS = 'win',
+  LINUX = 'linux',
+  LINUX_RPM = 'linux_rpm'
+}
+
+const itemsByOs = {
+  [OS.UNKNOWN]: {
+    title: 'pip, conda, brew',
+    url: `/doc/install`,
+    download: false
+  },
+  [OS.OSX]: {
+    title: 'Mac OS',
+    url: `https://github.com/iterative/dvc/releases/download/${VERSION}/dvc-${VERSION}.pkg`,
+    download: true
+  },
+  [OS.WINDOWS]: {
+    title: 'Windows',
+    url: `https://github.com/iterative/dvc/releases/download/${VERSION}/dvc-${VERSION}.exe`,
+    download: true
+  },
+  [OS.LINUX]: {
+    title: 'Linux Deb',
+    url: `https://github.com/iterative/dvc/releases/download/${VERSION}/dvc_${VERSION}_amd64.deb`,
+    download: true
+  },
+  [OS.LINUX_RPM]: {
+    title: 'Linux RPM',
+    url: `https://github.com/iterative/dvc/releases/download/${VERSION}/dvc-${VERSION}-1.x86_64.rpm`,
+    download: true
+  }
+}
+const dropdownItems = [
+  OS.UNKNOWN,
+  null,
+  OS.OSX,
+  OS.WINDOWS,
+  OS.LINUX,
+  OS.LINUX_RPM
+]
+
+interface IDownloadButtonDropdownItemsProps {
+  userOS: OS
+  onClick: (os: OS) => void
+}
+
+interface IDownloadButtonProps {
+  openTop?: boolean
+}
+
+const userAgentIs = (value: string) => navigator.userAgent.indexOf(value) !== -1
+
+const getUserOS = (): OS => {
+  let OSName = OS.UNKNOWN
+
+  if (!isClient) return OSName
+  if (userAgentIs('Win')) OSName = OS.WINDOWS
+  if (userAgentIs('Mac')) OSName = OS.OSX
+  if (userAgentIs('Linux')) OSName = OS.LINUX
+
+  return OSName
+}
+
+const DownloadButtonDropdownItems: React.SFC<IDownloadButtonDropdownItemsProps> = ({
+  onClick,
+  userOS
+}) => {
+  return (
+    <div className={styles.links}>
+      {dropdownItems.map((os, index) => {
+        if (os === null) {
+          return (
+            <div
+              className={styles.dropdownDelimiter}
+              key={`delimiter-${index}`}
+            />
+          )
+        }
+
+        const item = itemsByOs[os]
+
+        return (
+          <Link
+            download={item.download}
+            key={os}
+            className={cn(styles.dropdownItem, os === userOS && styles.active)}
+            href={item.url}
+            onClick={() => onClick(os)}
+          >
+            {item.title}
+          </Link>
+        )
+      })}
+    </div>
+  )
+}
+
+const DownloadButton: React.SFC<IDownloadButtonProps> = ({ openTop }) => {
+  const userOS = useRef(getUserOS())
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isOpened, setOpened] = useState(false)
+  const [isClicked, setClicked] = useState(false)
+  const currentOS = itemsByOs[userOS.current]
+  const toggle = useCallback(
+    () =>
+      setOpened(prev => {
+        if (!isClicked) {
+          setClicked(true)
+          logEvent('button', 'download')
+        }
+
+        return !prev
+      }),
+    [isOpened, isClicked]
+  )
+  const download = (os: OS) => {
+    setOpened(false)
+    logEvent('download', os)
+  }
+
+  useEffect(() => {
+    const onOutsideClick = (e: MouseEvent) => {
+      if (isOpened && !containerRef.current?.contains(e.target as Node)) {
+        setOpened(false)
+      }
+    }
+
+    document.addEventListener('mousedown', onOutsideClick)
+
+    return () => document.removeEventListener('mousedown', onOutsideClick)
+  }, [isOpened, containerRef.current])
+
+  return (
+    <span className={styles.container} ref={containerRef}>
+      <TwoRowsButton
+        mode="purple"
+        className={cn(styles.button, isOpened && styles.opened)}
+        title="Download"
+        active={isOpened}
+        description={`(${currentOS.title})`}
+        icon={
+          <img
+            className={styles.buttonIcon}
+            src="/img/download-arrow.svg"
+            alt="Download"
+          />
+        }
+        onClick={toggle}
+      >
+        <img className={styles.triangle} src="/img/triangle.svg" alt="" />
+      </TwoRowsButton>
+      {isOpened && (
+        <div className={cn(styles.dropdown, openTop && styles.openTop)}>
+          <DownloadButtonDropdownItems
+            onClick={download}
+            userOS={userOS.current}
+          />
+        </div>
+      )}
+    </span>
+  )
+}
+
+export default DownloadButton
diff --git a/src/components/DownloadButton/styles.js b/src/components/DownloadButton/styles.js
deleted file mode 100644
index 9659166e97..0000000000
--- a/src/components/DownloadButton/styles.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const Handler = styled.span`
-  position: relative;
-  display: inline-block;
-  width: 186px;
-  height: 60px;
-`
-
-export const Button = styled.button`
-  position: relative;
-  width: 186px;
-  height: 60px;
-  border: none;
-  border-radius: 4px;
-  background-color: #945dd6;
-
-  padding: 0px;
-  color: #ffffff;
-
-  cursor: pointer;
-  z-index: 9;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  transition: 0.2s background-color ease-out;
-
-  ${props =>
-    props.open &&
-    `
-    background-color: #885CCB;
-  `} &:hover {
-    background-color: #885ccb;
-  }
-`
-
-export const Icon = styled.div`
-  flex-basis: 48px;
-
-  text-align: center;
-`
-
-export const Inner = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex: 1;
-`
-
-export const Action = styled.h6`
-  font-family: BrandonGrotesque;
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 0.9;
-`
-
-export const Description = styled.p`
-  font-family: BrandonGrotesque;
-  font-size: 14px;
-  text-align: left;
-`
-
-export const Triangle = styled.div`
-  margin-right: 19px;
-  align-items: center;
-  display: flex;
-
-  transition: left 300ms linear;
-
-  ${props =>
-    props.open &&
-    `
-    transition: left 300ms linear;
-    transform: rotate(-180deg);
-  `};
-`
-
-export const Popup = styled.div`
-  position: absolute;
-  left: 0px;
-  right: 0px;
-  top: calc(100% + 3px);
-  background-color: #ffffff;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-
-  ${props =>
-    props.openTop &&
-    `
-    bottom: calc(100% + 3px);
-    top: auto;
-  `};
-`
-
-export const Links = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-const Item = css`
-  font-family: BrandonGrotesque;
-  display: block;
-  min-height: 36px;
-  line-height: 1.29;
-  padding: 0px 17px;
-
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-
-  color: #b0b8c5;
-`
-
-export const Delimiter = styled.div`
-  background-color: rgba(0, 0, 0, 0.1);
-  height: 1px;
-`
-
-export const DownloadInput = styled.input`
-  ${Item};
-  border: none !important;
-  font-family: Monospace;
-  font-weight: bold;
-
-  ${props =>
-    props.active &&
-    `
-    color: #40364d;
-  `};
-`
-
-export const DownloadLink = styled.a`
-  ${Item};
-  color: #b0b8c5;
-
-  &:hover {
-    color: #40364d;
-  }
-
-  ${props =>
-    props.active &&
-    `
-    color: #40364d;
-  `};
-`
diff --git a/src/components/DownloadButton/styles.module.css b/src/components/DownloadButton/styles.module.css
new file mode 100644
index 0000000000..2f389194f7
--- /dev/null
+++ b/src/components/DownloadButton/styles.module.css
@@ -0,0 +1,68 @@
+.container {
+  position: relative;
+  display: inline-block;
+}
+
+.button.button {
+  padding-right: 55px;
+}
+
+.buttonIcon {
+  position: relative;
+  top: -2px;
+  width: 14px;
+  height: 20px;
+}
+
+.triangle {
+  position: absolute;
+  right: 15px;
+  align-items: center;
+  display: flex;
+  transition: left 300ms linear;
+
+  .button.opened & {
+    transition: left 300ms linear;
+    transform: rotate(-180deg);
+  }
+}
+
+.dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 3px);
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
+
+  &.openTop {
+    bottom: calc(100% + 3px);
+    top: auto;
+  }
+}
+
+.dropdownItem {
+  font-family: var(--font-brandon);
+  min-height: 36px;
+  line-height: 1.29;
+  padding: 0 17px;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--color-gray-light);
+
+  &.active {
+    color: var(--color-gray-hover);
+  }
+
+  &:hover {
+    color: var(--color-gray-hover);
+  }
+}
+
+.dropdownDelimiter {
+  background-color: rgba(0, 0, 0, 0.1);
+  height: 1px;
+}
diff --git a/src/components/Home/LandingHero/index.tsx b/src/components/Home/LandingHero/index.tsx
index da362eae0e..66841e1908 100644
--- a/src/components/Home/LandingHero/index.tsx
+++ b/src/components/Home/LandingHero/index.tsx
@@ -4,6 +4,7 @@ import cn from 'classnames'
 import ShowOnly from '../../ShowOnly'
 import Link from '../../Link'
 import DownloadButton from '../../DownloadButton'
+import TwoRowsButton from '../../TwoRowsButton'
 import GithubLine from './GithubLine'
 import { scrollIntoLayout, ease } from '../../../utils/scroll'
 import { logEvent } from '../../../utils/ga'
@@ -57,24 +58,20 @@ const LandingHero: React.SFC<ILandingHeroProps> = ({ scrollToRef }) => {
           <ShowOnly on="desktop">
             <DownloadButton />
           </ShowOnly>
-          <button
-            className={cn(styles.actionButton, styles.watchVideoButton)}
+          <TwoRowsButton
+            mode="outline"
+            className={cn(styles.actionButton, styles.watchVideo)}
+            title="Watch video"
+            description="How it works"
+            icon={
+              <img
+                className={styles.actionButtonIcon}
+                src="/img/play-icon.svg"
+                alt="Watch video"
+              />
+            }
             onClick={scrollToUseCases}
-          >
-            <img
-              className={styles.actionButtonIcon}
-              src="/img/play-icon.svg"
-              alt="Watch video"
-              width={20}
-              height={20}
-            />
-            <span>
-              <span className={styles.actionButtonMainText}>Watch video</span>
-              <span className={styles.actionButtonDescription}>
-                How it works
-              </span>
-            </span>
-          </button>
+          />
         </div>
 
         <div className={styles.github}>
diff --git a/src/components/Home/LandingHero/styles.module.css b/src/components/Home/LandingHero/styles.module.css
index c7e9110c24..0556e7448c 100644
--- a/src/components/Home/LandingHero/styles.module.css
+++ b/src/components/Home/LandingHero/styles.module.css
@@ -56,74 +56,25 @@
 }
 
 .actionButton {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   min-width: 186px;
-  padding: 0;
-  border-radius: 4px;
-  border: none;
-  cursor: pointer;
 
   &.actionButton {
     @media (--xs-scr) {
-      max-width: none;
+      /* max-width: none;
       min-height: 60px;
       margin: 0;
-      margin-bottom: 12px;
+      margin-bottom: 12px; */
     }
   }
 }
 
 .actionButtonIcon {
-  flex-basis: 48px;
-  text-align: center;
-}
-
-.actionButtonMainText {
-  display: block;
-  font-family: var(--font-brandon);
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 0.9;
-}
-
-.actionButtonDescription {
-  display: block;
-  font-family: var(--font-brandon);
-  font-weight: normal;
-  font-size: 14px;
-  text-align: left;
+  width: 20px;
+  height: 20px;
 }
 
-.watchVideoButton {
-  text-decoration: none;
-  color: var(--color-gray-hover);
-  background-color: var(--color-light-blue);
+.watchVideo {
   margin-left: 15px;
-  border: solid 2px rgba(176, 184, 197, 0.47);
-  transition: 0.2s background-color ease-out;
-
-  &:hover {
-    background-color: var(--color-light-blue-hover);
-  }
-}
-
-.getStartedButton {
-  display: flex;
-  border: solid 2px transparent;
-  padding: 0 0 0 20px;
-  background-color: var(--color-azure);
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 0.9;
-  font-weight: 500;
-  color: #fff;
-  transition: 0.2s background-color ease-out;
-
-  &:hover {
-    background-color: var(--color-azure-hover);
-  }
 }
 
 .commands {
@@ -180,7 +131,7 @@
   margin-top: 51px;
   font-size: 14px;
   font-weight: 500;
-  color: #b0b8c5;
+  color: var(--color-gray-light);
 
   @media (--sm-scr) {
     align-items: center;
diff --git a/src/components/Home/LearnMore/styles.module.css b/src/components/Home/LearnMore/styles.module.css
index f6d21882bb..e343436544 100644
--- a/src/components/Home/LearnMore/styles.module.css
+++ b/src/components/Home/LearnMore/styles.module.css
@@ -65,7 +65,7 @@
   font-size: 16px;
   line-height: 23px;
   font-weight: 500;
-  color: #b0b8c5;
+  color: var(--color-gray-light);
   display: initial;
 
   @media (--xs-scr) {
diff --git a/src/components/Home/UseCases/Video/index.tsx b/src/components/Home/UseCases/Video/index.tsx
index 975636c8fd..9745d6074c 100644
--- a/src/components/Home/UseCases/Video/index.tsx
+++ b/src/components/Home/UseCases/Video/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react'
 
+import TwoRowsButton from '../../../TwoRowsButton'
 import { logEvent } from '../../../../utils/ga'
 
 import styles from './styles.module.css'
@@ -17,19 +18,19 @@ const Video: React.SFC<{ id: string }> = ({ id }) => {
       <div className={styles.handler}>
         {!isWatching && (
           <div className={styles.overlay}>
-            <button className={styles.button} onClick={watchVideo}>
-              <img
-                className={styles.buttonIcon}
-                src="/img/watch_white.svg"
-                alt="Watch video"
-                width={20}
-                height={20}
-              />
-              <span>
-                <span className={styles.buttonText}>Watch video</span>
-                <span className={styles.buttonDescription}>How it works</span>
-              </span>
-            </button>
+            <TwoRowsButton
+              mode="azure"
+              title="Watch video"
+              description="How it works"
+              icon={
+                <img
+                  className={styles.buttonIcon}
+                  src="/img/watch_white.svg"
+                  alt="Watch video"
+                />
+              }
+              onClick={watchVideo}
+            />
           </div>
         )}
         <iframe
diff --git a/src/components/Home/UseCases/Video/styles.module.css b/src/components/Home/UseCases/Video/styles.module.css
index e9534e549d..3fc610e5ba 100644
--- a/src/components/Home/UseCases/Video/styles.module.css
+++ b/src/components/Home/UseCases/Video/styles.module.css
@@ -43,50 +43,7 @@
   background-color: rgba(23, 23, 23, 0.59);
 }
 
-.button {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  width: 186px;
-  height: 60px;
-  padding: 0;
-  border-radius: 4px;
-  border: none;
-  text-decoration: none;
-  color: #fff;
-  background-color: var(--color-azure);
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--color-azure-hover);
-  }
-
-  &.disabled {
-    background-color: #b0b8c5;
-
-    &:hover {
-      background-color: #b0b8c5;
-    }
-  }
-}
-
 .buttonIcon {
-  flex-basis: 48px;
-  text-align: center;
   width: 20px;
   height: 20px;
-  padding-top: 4px;
-}
-
-.buttonText {
-  font-family: var(--font-brandon);
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 0.9;
-}
-
-.buttonDescription {
-  font-size: 12px;
-  text-align: left;
-  line-height: 1.29;
 }
diff --git a/src/components/Page/base.css b/src/components/Page/base.css
index 09f39728a0..41e178e93d 100644
--- a/src/components/Page/base.css
+++ b/src/components/Page/base.css
@@ -1,5 +1,6 @@
 :root {
   --color-black: #24292e;
+  --color-gray-light: #b0b8c5;
   --color-gray: #838d93;
   --color-gray-dark: #5f6c72;
   --color-gray-opaque: rgba(131, 141, 147, 0.5);
diff --git a/src/components/TwoRowsButton/index.tsx b/src/components/TwoRowsButton/index.tsx
new file mode 100644
index 0000000000..0eb3c37eaa
--- /dev/null
+++ b/src/components/TwoRowsButton/index.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import cn from 'classnames'
+
+import styles from './styles.module.css'
+
+type ITwoRowsButtonProps = {
+  mode: 'azure' | 'purple' | 'outline'
+  className?: string
+  title: string
+  description: string
+  icon?: React.ReactNode
+  children?: React.ReactNode
+  active?: boolean
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+const TwoRowsButton: React.SFC<ITwoRowsButtonProps> = ({
+  className,
+  icon,
+  title,
+  description,
+  children,
+  mode,
+  type,
+  active,
+  ...props
+}) => {
+  return (
+    <button
+      className={cn(
+        styles.button,
+        styles[mode],
+        active && styles.active,
+        icon && styles.withIcon,
+        className
+      )}
+      type={type || 'button'}
+      {...props}
+    >
+      {icon && <span className={styles.icon}>{icon}</span>}
+      <span className={styles.text}>
+        <span className={styles.title}>{title}</span>
+        <span className={styles.description}>{description}</span>
+      </span>
+      {children}
+    </button>
+  )
+}
+
+export default TwoRowsButton
diff --git a/src/components/TwoRowsButton/styles.module.css b/src/components/TwoRowsButton/styles.module.css
new file mode 100644
index 0000000000..e90e87697d
--- /dev/null
+++ b/src/components/TwoRowsButton/styles.module.css
@@ -0,0 +1,87 @@
+.button {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  border: solid 2px;
+  padding: 8px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: 0.2s background-color ease-out;
+
+  &:disabled {
+    background-color: var(--color-gray-light);
+
+    &:hover {
+      background-color: var(--color-gray-light);
+    }
+  }
+
+  &.withIcon {
+    padding-right: 40px;
+  }
+
+  &.azure {
+    background-color: var(--color-azure);
+    border-color: var(--color-azure);
+    color: #fff;
+
+    &.active,
+    &:hover {
+      background-color: var(--color-azure-hover);
+      border-color: var(--color-azure-hover);
+    }
+  }
+
+  &.purple {
+    background-color: var(--color-purple);
+    border-color: var(--color-purple);
+    color: #fff;
+
+    &.active,
+    &:hover {
+      background-color: var(--color-purple-hover);
+      border-color: var(--color-purple-hover);
+    }
+  }
+
+  &.outline {
+    border-color: rgba(176, 184, 197, 0.47);
+    color: var(--color-gray-hover);
+    background-color: var(--color-light-blue);
+
+    &.active,
+    &:hover {
+      background-color: var(--color-light-blue-hover);
+    }
+  }
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-family: var(--font-brandon);
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 0.9;
+  white-space: nowrap;
+}
+
+.description {
+  font-size: 14px;
+  line-height: 21px;
+  white-space: nowrap;
+}

From dacaf6600a892532662128fd0ba82f680b48b79c Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Thu, 2 Apr 2020 21:09:11 +0300
Subject: [PATCH 10/51] Refactor Support page components to TS

---
 package.json                                  |   2 +
 postcss.config.js                             |   4 +
 .../LayoutWidthContainer/styles.module.css    |  10 +-
 src/components/Support/Popover/index.js       |  54 -----
 src/components/Support/Popover/index.tsx      |  29 +++
 src/components/Support/Popover/styles.js      |  17 --
 .../Support/Popover/styles.module.css         |  14 ++
 src/components/Support/index.js               | 137 -----------
 src/components/Support/index.tsx              | 136 +++++++++++
 src/components/Support/styles.js              | 138 -----------
 src/components/Support/styles.module.css      | 214 ++++++++++++++++++
 yarn.lock                                     |  35 +++
 12 files changed, 436 insertions(+), 354 deletions(-)
 delete mode 100644 src/components/Support/Popover/index.js
 create mode 100644 src/components/Support/Popover/index.tsx
 delete mode 100644 src/components/Support/Popover/styles.js
 create mode 100644 src/components/Support/Popover/styles.module.css
 delete mode 100644 src/components/Support/index.js
 create mode 100644 src/components/Support/index.tsx
 delete mode 100644 src/components/Support/styles.js
 create mode 100644 src/components/Support/styles.module.css

diff --git a/package.json b/package.json
index 0d5b1d1595..af03bc585b 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
     "@types/isomorphic-fetch": "^0.0.35",
     "@types/react-collapse": "^5.0.0",
     "@types/react-helmet": "^5.0.15",
+    "@types/react-popover": "^0.5.3",
     "@types/react-slick": "^0.23.4",
     "@types/vfile-message": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
@@ -140,6 +141,7 @@
     "husky": "^4.0.10",
     "jest": "^24.9.0",
     "lint-staged": "^10.0.0",
+    "postcss-color-mod-function": "^3.0.3",
     "postcss-custom-media": "^7.0.8",
     "postcss-custom-properties": "^9.1.1",
     "postcss-mixins": "^6.2.3",
diff --git a/postcss.config.js b/postcss.config.js
index 86c3e1ba36..ca842e4956 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,6 +3,7 @@ const autoprefixer = require('autoprefixer')
 const customMedia = require('postcss-custom-media')
 const customProperties = require('postcss-custom-properties')
 const mixins = require('postcss-mixins')
+const colorMod = require('postcss-color-mod-function')
 
 const mediaConfig = require('./config/postcss/media')
 const mixinsConfig = require('./config/postcss/mixins')
@@ -16,6 +17,9 @@ module.exports = function postcssConfig() {
         importFrom: ['src/components/Page/base.css']
       }),
       nested,
+      colorMod({
+        importFrom: ['src/components/Page/base.css']
+      }),
       autoprefixer
     ]
   }
diff --git a/src/components/LayoutWidthContainer/styles.module.css b/src/components/LayoutWidthContainer/styles.module.css
index d07c8f5e62..d95700c8f0 100644
--- a/src/components/LayoutWidthContainer/styles.module.css
+++ b/src/components/LayoutWidthContainer/styles.module.css
@@ -7,18 +7,12 @@
     max-width: var(--layout-width-wide);
   }
 
-  @media (--sm-scr) {
+  @media (--md-scr) {
+    max-width: 100%;
     padding: 0 61px 0 67px;
-    max-width: auto;
   }
 
   @media (--xs-scr) {
     padding: 0 31px 0 31px;
-    max-width: auto;
-  }
-
-  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-    padding: 0 61px 0 67px;
-    max-width: auto;
   }
 }
diff --git a/src/components/Support/Popover/index.js b/src/components/Support/Popover/index.js
deleted file mode 100644
index de07d50cce..0000000000
--- a/src/components/Support/Popover/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import ReactPopover from 'react-popover'
-
-import { GlobalStyle } from './styles'
-
-export default class Popover extends Component {
-  constructor() {
-    super()
-    this.state = {
-      isOpen: false
-    }
-  }
-
-  componentDidMount() {
-    if (this.trigger) {
-      this.trigger.addEventListener('click', this.togglePopover)
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.trigger) {
-      this.trigger.removeEventListener('click', this.togglePopover)
-    }
-  }
-
-  togglePopover = () => {
-    this.setState(prevState => ({ isOpen: !prevState.isOpen }))
-  }
-
-  closePopover = () => this.setState({ isOpen: false })
-
-  render() {
-    const { children, ...rest } = this.props
-    const { isOpen } = this.state
-
-    return (
-      <>
-        <GlobalStyle />
-        <ReactPopover
-          isOpen={isOpen}
-          onOuterAction={this.closePopover}
-          {...rest}
-        >
-          <div ref={ref => (this.trigger = ref)}>{children}</div>
-        </ReactPopover>
-      </>
-    )
-  }
-}
-
-Popover.propTypes = {
-  children: PropTypes.node.isRequired
-}
diff --git a/src/components/Support/Popover/index.tsx b/src/components/Support/Popover/index.tsx
new file mode 100644
index 0000000000..672f27219d
--- /dev/null
+++ b/src/components/Support/Popover/index.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+import ReactPopover, { PopoverProps } from 'react-popover'
+
+import './styles.module.css'
+
+type IPopoverProps = {
+  children: React.ReactNode
+} & PopoverProps
+
+const Popover: React.SFC<IPopoverProps> = ({ children, ...restProps }) => {
+  const [isOpened, setOpened] = useState(false)
+  const toggle = () => setOpened(prev => !prev)
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.which === 13 || e.which === 32) {
+      toggle()
+    }
+  }
+  const close = () => setOpened(false)
+
+  return (
+    <ReactPopover isOpen={isOpened} onOuterAction={close} {...restProps}>
+      <div onClick={toggle} role="button" onKeyDown={onKeyDown} tabIndex={0}>
+        {children}
+      </div>
+    </ReactPopover>
+  )
+}
+
+export default Popover
diff --git a/src/components/Support/Popover/styles.js b/src/components/Support/Popover/styles.js
deleted file mode 100644
index 199d4e2c9c..0000000000
--- a/src/components/Support/Popover/styles.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createGlobalStyle } from 'styled-components'
-
-export const GlobalStyle = createGlobalStyle`
-  .Popover {
-    
-    .Popover-body {
-      box-shadow: rgba(0,0,0,0.14) 0px 0px 4px, rgba(0,0,0,0.28) 0px 4px 8px;
-      padding: 5px 15px;
-      background: white;
-      color: black;
-    }
-
-    .Popover-tip {
-      display: none;
-    }
-  }
-`
diff --git a/src/components/Support/Popover/styles.module.css b/src/components/Support/Popover/styles.module.css
new file mode 100644
index 0000000000..f313b70c1a
--- /dev/null
+++ b/src/components/Support/Popover/styles.module.css
@@ -0,0 +1,14 @@
+:global {
+  .Popover {
+    .Popover-body {
+      box-shadow: rgba(0, 0, 0, 0.14) 0 0 4px, rgba(0, 0, 0, 0.28) 0 4px 8px;
+      padding: 5px 15px;
+      background: white;
+      color: black;
+    }
+
+    .Popover-tip {
+      display: none;
+    }
+  }
+}
diff --git a/src/components/Support/index.js b/src/components/Support/index.js
deleted file mode 100644
index f6fca53784..0000000000
--- a/src/components/Support/index.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from 'react'
-
-import HeroSection from '../HeroSection'
-import PromoSection from '../PromoSection'
-import Popover from './Popover'
-import Link from '../Link'
-
-import { Mark, OnlyDesktop } from '../../styles'
-
-import {
-  Button,
-  Container,
-  Description,
-  DiscrodWidget,
-  Feature,
-  Features,
-  FeatureHeading,
-  FlexRow,
-  Heading,
-  Icon,
-  Link as LinkSC,
-  Name,
-  SupportHero
-} from './styles'
-
-export default function SupportPage() {
-  return (
-    <>
-      <HeroSection>
-        <SupportHero>
-          <Heading>Questions, feedback, or just need to get in touch?</Heading>
-        </SupportHero>
-      </HeroSection>
-      <Container>
-        <Features>
-          <Feature>
-            <FeatureHeading>
-              <Icon url="/img/support/chat.svg" color="#945dd6" />
-              <Name>Slack-like Chat</Name>
-            </FeatureHeading>
-            <Description>
-              Join data science practitioners in our welcoming{' '}
-              <Mark text={'#945dd6'} bg={'#FFFFFF'}>
-                DVC community
-              </Mark>
-              . It’s the fastest way to ask for a help.
-            </Description>
-            <FlexRow>
-              <Link href="/chat" target="_blank">
-                <Button color="#945dd6">Discord Chat</Button>
-              </Link>
-              <OnlyDesktop>
-                <Popover
-                  body={
-                    <iframe
-                      title="Discord Members Online"
-                      src="https://discordapp.com/widget?id=485586884165107732&theme=light"
-                      width="350"
-                      height="500"
-                      allowTransparency="true"
-                      frameBorder="0"
-                    />
-                  }
-                  enterExitTransitionDurationMs={200}
-                >
-                  <DiscrodWidget />
-                </Popover>
-              </OnlyDesktop>
-            </FlexRow>
-          </Feature>
-          <Feature>
-            <FeatureHeading>
-              <Icon url="/img/support/bug.svg" color="#13adc7" />
-              <Name>Bugs & Features</Name>
-            </FeatureHeading>
-            <Description>
-              Found an issue or have an idea? Check our GitHub{' '}
-              <Mark text={'#13adc7'} bg={'#FFFFFF'}>
-                issues tracker
-              </Mark>{' '}
-              to see if there is already a fix or report a new one.
-            </Description>
-            <Link
-              as={LinkSC}
-              href="https://github.com/iterative/dvc/issues"
-              target="_blank"
-            >
-              <Button color="#13adc7">Open GitHub</Button>
-            </Link>
-          </Feature>
-          <Feature>
-            <FeatureHeading>
-              <Icon url="/img/support/forum.svg" color="#f46837" />
-              <Name>Forum</Name>
-            </FeatureHeading>
-            <Description>
-              Discuss your ideas or{' '}
-              <Mark text={'#f46837'} bg={'#FFFFFF'}>
-                best practices
-              </Mark>{' '}
-              in the DVC forum.
-            </Description>
-            <Link as={LinkSC} href="https://discuss.dvc.org" target="_blank">
-              <Button color="#f46837">Go To Forum</Button>
-            </Link>
-          </Feature>
-          <Feature>
-            <FeatureHeading>
-              <Icon url="/img/support/email.svg" color="#945dd6" />
-              <Name>Email</Name>
-            </FeatureHeading>
-            <Description>
-              Don’t hesitate to shoot us an email at{' '}
-              <Link as={LinkSC} href="mailto:support@dvc.org">
-                <Mark text={'#945dd6'} bg={'#FFFFFF'}>
-                  support@dvc.org
-                </Mark>
-              </Link>{' '}
-              with any questions.
-            </Description>
-            <Link as={LinkSC} href="mailto:support@dvc.org">
-              <Button color="#945dd6">Drop Us a Line</Button>
-            </Link>
-          </Feature>
-        </Features>
-      </Container>
-      <PromoSection
-        title="Don't know where to start?"
-        buttons={[
-          <Link href="/doc/tutorials/get-started" key="get-started">
-            Get Started
-          </Link>
-        ]}
-      />
-    </>
-  )
-}
diff --git a/src/components/Support/index.tsx b/src/components/Support/index.tsx
new file mode 100644
index 0000000000..1f3e2e2858
--- /dev/null
+++ b/src/components/Support/index.tsx
@@ -0,0 +1,136 @@
+import React from 'react'
+import cn from 'classnames'
+
+import PageContent from '../PageContent'
+import LayoutWidthContainer from '../LayoutWidthContainer'
+import ShowOnly from '../ShowOnly'
+import HeroSection from '../HeroSection'
+import PromoSection from '../PromoSection'
+import Link from '../Link'
+import Popover from './Popover'
+
+import styles from './styles.module.css'
+
+const SupportPage: React.SFC = () => (
+  <>
+    <PageContent>
+      <HeroSection className={styles.supportHero}>
+        <h1 className={styles.heading}>
+          Questions, feedback, or just need to get in touch?
+        </h1>
+      </HeroSection>
+      <LayoutWidthContainer>
+        <div className={styles.features}>
+          <div className={cn(styles.feature, styles.chat)}>
+            <div className={styles.featureHeader}>
+              <div className={styles.featureIcon} />
+              <h3 className={styles.featureName}>Slack-like Chat</h3>
+            </div>
+            <div className={styles.featureDescription}>
+              Join data science practitioners in our welcoming{' '}
+              <span className={styles.accent}>DVC community</span>. It’s the
+              fastest way to ask for a help.
+            </div>
+            <div className={styles.featureFooter}>
+              <Link
+                className={styles.featureButton}
+                href="/chat"
+                target="_blank"
+              >
+                Discord Chat
+              </Link>
+              <ShowOnly on="desktop">
+                <Popover
+                  body={
+                    <iframe
+                      title="Discord Members Online"
+                      src="https://discordapp.com/widget?id=485586884165107732&theme=light"
+                      width="350"
+                      height="500"
+                      allowTransparency
+                      frameBorder="0"
+                    />
+                  }
+                  enterExitTransitionDurationMs={200}
+                >
+                  <div className={styles.discordWidget} />
+                </Popover>
+              </ShowOnly>
+            </div>
+          </div>
+          <div className={cn(styles.feature, styles.bugs)}>
+            <div className={styles.featureHeader}>
+              <div className={styles.featureIcon} />
+              <h3 className={styles.featureName}>Bugs & Features</h3>
+            </div>
+            <div className={styles.featureDescription}>
+              Found an issue or have an idea? Check our GitHub{' '}
+              <span className={styles.accent}>issues tracker</span> to see if
+              there is already a fix or report a new one.
+            </div>
+            <div className={styles.featureFooter}>
+              <Link
+                className={styles.featureButton}
+                href="https://github.com/iterative/dvc/issues"
+                target="_blank"
+              >
+                Open GitHub
+              </Link>
+            </div>
+          </div>
+          <div className={cn(styles.feature, styles.forum)}>
+            <div className={styles.featureHeader}>
+              <div className={styles.featureIcon} />
+              <h3 className={styles.featureName}>Forum</h3>
+            </div>
+            <div className={styles.featureDescription}>
+              Discuss your ideas or{' '}
+              <span className={styles.accent}>best practices</span> in the DVC
+              forum.
+            </div>
+            <div className={styles.featureFooter}>
+              <Link
+                className={styles.featureButton}
+                href="https://discuss.dvc.org"
+                target="_blank"
+              >
+                Go To Forum
+              </Link>
+            </div>
+          </div>
+          <div className={cn(styles.feature, styles.email)}>
+            <div className={styles.featureHeader}>
+              <div className={styles.featureIcon} />
+              <h3 className={styles.featureName}>Email</h3>
+            </div>
+            <div className={styles.featureDescription}>
+              Don’t hesitate to shoot us an email at{' '}
+              <Link className={styles.accent} href="mailto:support@dvc.org">
+                support@dvc.org
+              </Link>{' '}
+              with any questions.
+            </div>
+            <div className={styles.featureFooter}>
+              <Link
+                className={styles.featureButton}
+                href="mailto:support@dvc.org"
+              >
+                Drop Us a Line
+              </Link>
+            </div>
+          </div>
+        </div>
+      </LayoutWidthContainer>
+    </PageContent>
+    <PromoSection
+      title="Don't know where to start?"
+      buttons={[
+        <Link href="/doc/tutorials/get-started" key="get-started">
+          Get Started
+        </Link>
+      ]}
+    />
+  </>
+)
+
+export default SupportPage
diff --git a/src/components/Support/styles.js b/src/components/Support/styles.js
deleted file mode 100644
index fe5ce5ec3e..0000000000
--- a/src/components/Support/styles.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import styled from 'styled-components'
-import color from 'color'
-
-import { container, media } from '../../styles'
-
-export const SupportHero = styled.div`
-  padding-top: 70px;
-  padding-bottom: 70px;
-  overflow: hidden;
-`
-
-export const Heading = styled.h1`
-  font-family: BrandonGrotesque;
-  margin: 0px auto;
-  max-width: 610px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.4;
-  text-align: center;
-  color: #40364d;
-`
-
-export const Container = styled.div`
-  ${container};
-`
-
-export const Features = styled.div`
-  display: flex;
-  flex-flow: row;
-  flex-wrap: wrap;
-  padding-top: 80px;
-  padding-bottom: 70px;
-  max-width: 800px;
-  margin: 0 auto;
-
-  ${media.phablet`
-    padding-top: 70px;
-    padding-bottom: 50px;
-  `};
-`
-
-export const Feature = styled.div`
-  flex: 1 0 300px;
-  margin: 0 20px 60px;
-  padding: 10px;
-`
-
-export const FeatureHeading = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-`
-
-export const Icon = styled.div`
-  height: 50px;
-  width: 50px;
-  border-radius: 50%;
-  background-color: ${props =>
-    color(props.color)
-      .alpha(0.15)
-      .string()};
-  margin-right: 10px;
-
-  &::after {
-    content: ' ';
-    display: block;
-    width: 50px;
-    height: 50px;
-    opacity: 1;
-    mask-image: url(${props => props.url});
-    mask-repeat: no-repeat;
-    mask-position: center;
-    background-color: ${props => props.color};
-    transform: translate(-10px, 0);
-  }
-`
-
-export const Name = styled.h3`
-  font-family: BrandonGrotesque;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  font-size: 22px;
-  font-weight: 500;
-  color: #40364d;
-  min-height: 28px;
-`
-
-export const Description = styled.div`
-  font-size: 20px;
-  color: #5f6c72;
-`
-
-export const FlexRow = styled.div`
-  display: flex;
-  align-items: center;
-`
-
-export const Link = styled.a`
-  text-decoration: none;
-`
-
-export const Button = styled.button`
-  text-decoration: none;
-  margin-top: 20px;
-  border-radius: 4px;
-  background-color: white;
-  border: 2px solid ${props => props.color};
-  color: ${props => props.color};
-  font-family: BrandonGrotesque, Tahoma, Arial;
-  height: 42px;
-  font-weight: 500;
-  font-size: 18px;
-  cursor: pointer;
-  transition: 0.2s background-color ease-out;
-  padding: 5px 20px;
-
-  &:hover {
-    background-color: ${props => props.color};
-    color: white;
-  }
-`
-
-export const DiscrodWidget = styled.img`
-  display: block;
-  margin-top: 20px;
-  margin-left: 20px;
-  width: 50px;
-  height: 50px;
-  cursor: pointer;
-  mask-image: url('/img/support/discord.svg');
-  mask-repeat: no-repeat;
-  mask-position: center;
-  background-color: #b88eeb;
-
-  &:hover {
-    opacity: 0.7;
-  }
-`
diff --git a/src/components/Support/styles.module.css b/src/components/Support/styles.module.css
new file mode 100644
index 0000000000..f8967c4f1f
--- /dev/null
+++ b/src/components/Support/styles.module.css
@@ -0,0 +1,214 @@
+.supportHero {
+  padding-top: 70px;
+  padding-bottom: 70px;
+  overflow: hidden;
+}
+
+.heading {
+  max-width: 610px;
+  margin: 0 auto;
+  font-family: var(--font-brandon);
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-align: center;
+  color: var(--color-gray-hover);
+}
+
+.features {
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+  max-width: 800px;
+  margin: 0 auto;
+  padding-top: 80px;
+
+  @media (--sm-scr) {
+    padding-top: 70px;
+  }
+
+  @media (--xs-scr) {
+    padding-top: 50px;
+  }
+}
+
+.feature {
+  box-sizing: border-box;
+  flex: 1 0 calc(50% - 40px);
+  margin: 0 20px 60px;
+  padding: 10px;
+
+  @media (--sm-scr) {
+    flex-basis: 100%;
+    margin: 0 0 40px;
+    padding: 10px 0;
+  }
+
+  &.chat,
+  &.email {
+    .featureIcon {
+      background-color: color-mod(var(--color-purple) a(15%));
+
+      &::after {
+        background-color: var(--color-purple);
+      }
+    }
+
+    .accent {
+      color: var(--color-purple);
+    }
+
+    .featureButton {
+      border-color: var(--color-purple);
+      color: var(--color-purple);
+
+      &:hover {
+        background-color: var(--color-purple);
+      }
+    }
+  }
+
+  &.chat .featureIcon::after {
+    mask-image: url('/img/support/chat.svg');
+  }
+
+  &.email .featureIcon::after {
+    mask-image: url('/img/support/email.svg');
+  }
+
+  &.bugs {
+    .featureIcon {
+      background-color: color-mod(var(--color-azure) a(15%));
+
+      &::after {
+        background-color: var(--color-azure);
+        mask-image: url('/img/support/bug.svg');
+      }
+    }
+
+    .accent {
+      color: var(--color-azure);
+    }
+
+    .featureButton {
+      border-color: var(--color-azure);
+      color: var(--color-azure);
+
+      &:hover {
+        background-color: var(--color-azure);
+      }
+    }
+  }
+
+  &.forum {
+    .featureIcon {
+      background-color: color-mod(var(--color-orange-bright) a(15%));
+
+      &::after {
+        background-color: var(--color-orange-bright);
+        mask-image: url('/img/support/forum.svg');
+      }
+    }
+
+    .accent {
+      color: var(--color-orange-bright);
+    }
+
+    .featureButton {
+      border-color: var(--color-orange-bright);
+      color: var(--color-orange-bright);
+
+      &:hover {
+        background-color: var(--color-orange-bright);
+      }
+    }
+  }
+}
+
+.featureHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.featureIcon {
+  height: 50px;
+  width: 50px;
+  margin-right: 10px;
+  border-radius: 50%;
+
+  &::after {
+    content: ' ';
+    display: block;
+    width: 50px;
+    height: 50px;
+    opacity: 1;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    transform: translate(-10px, 0);
+  }
+}
+
+.featureName {
+  min-height: 28px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-family: var(--font-brandon);
+  font-size: 22px;
+  font-weight: 500;
+  color: var(--color-gray-hover);
+}
+
+.featureDescription {
+  font-size: 20px;
+  color: var(--color-gray-dark);
+}
+
+.accent {
+  padding-left: 2px;
+  padding-right: 2px;
+  text-decoration: none;
+}
+
+.featureFooter {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.featureButton {
+  box-sizing: border-box;
+  padding: 0 20px;
+  border: 2px solid;
+  border-radius: 4px;
+  font-family: var(--font-brandon);
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 38px;
+  background-color: white;
+  text-decoration: none;
+  transition: 0.2s background-color ease-out;
+  cursor: pointer;
+
+  &.featureButton:hover {
+    color: #fff;
+  }
+}
+
+.discordWidget {
+  position: relative;
+  top: 2px;
+  display: block;
+  margin-left: 20px;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+  mask-image: url('/img/support/discord.svg');
+  mask-repeat: no-repeat;
+  mask-position: center;
+  background-color: #b88eeb;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index e2f8c50377..dd728607ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -912,6 +912,11 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@csstools/convert-colors@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
+  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
+
 "@emotion/is-prop-valid@^0.8.1":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@@ -1973,6 +1978,13 @@
   version "0.0.0"
   uid ""
 
+"@types/react-popover@^0.5.3":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@types/react-popover/-/react-popover-0.5.3.tgz#5bee27490d2fd81f891b87799c39dbc520e5d1b7"
+  integrity sha512-xfmnFHRKMXtGdWuSwEg4XiHxODKlN/bPEXfretBpojI7cNoeAtnmpyTmFk4UNcO+ys3W2SOsMXzcaqCNPyYP2g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-slick@^0.23.4":
   version "0.23.4"
   resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.4.tgz#c97e2a9e7e3d1933c68593b8e82752fab1e8ce53"
@@ -6507,6 +6519,11 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
   integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
 
+flatten@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
+  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -12344,6 +12361,15 @@ postcss-calc@^7.0.1:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.0.2"
 
+postcss-color-mod-function@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+  integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
 postcss-colormin@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
@@ -12791,6 +12817,15 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.0.3:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz#651ff4593aa9eda8d5d0d66593a2417aeaeb325d"
   integrity sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==
 
+postcss-values-parser@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
+  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-values-parser@^3.0.5:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-3.1.1.tgz#487111a0446117d3463d2d429a380788f1365f69"

From d05da296be11ce61eed79b257f1de9e437437859 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Fri, 3 Apr 2020 10:36:54 +0300
Subject: [PATCH 11/51] Fix scroll for no-hash links

---
 src/components/Link/index.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index 02a6b1c444..e7ade5b392 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -62,12 +62,12 @@ const Link: React.SFC<ILinkProps> = ({
     ) {
       e.preventDefault()
 
-      if (location.hash) {
-        if (currentLocation.hash !== location.hash) {
-          navigate(href)
-        } else {
-          scrollIntoLayout(document.querySelector(location.hash))
-        }
+      if (currentLocation.hash !== location.hash) {
+        navigate(href)
+      } else if (location.hash) {
+        scrollIntoLayout(document.querySelector(location.hash))
+      } else {
+        document.documentElement.scrollTop = 0
       }
     }
 

From b47d227bb612eb33a0f7b8450d4d06eced2fe334 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Fri, 3 Apr 2020 12:24:57 +0300
Subject: [PATCH 12/51] Disable trailing slash redirects for dev mode

---
 src/server/middleware/redirects/index.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/server/middleware/redirects/index.js b/src/server/middleware/redirects/index.js
index a2ef46c992..8bc96686fb 100644
--- a/src/server/middleware/redirects/index.js
+++ b/src/server/middleware/redirects/index.js
@@ -20,6 +20,17 @@ module.exports = (req, res, next) => {
     dev: !isProduction
   })
 
+  // Disable trailing slash redirect for development mode.
+  // Because it leads to infinite loops as Gatsby in dev mode redirects to urls with trailing slashes
+  if (
+    !isProduction &&
+    location &&
+    location.startsWith('/') &&
+    parsedUrl.pathname === `${location}/`
+  ) {
+    return next()
+  }
+
   if (location) {
     // HTTP redirects
     let redirectLocation = location

From 63e46e1227c4bd88d420384050e6812166182492 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Fri, 3 Apr 2020 12:53:12 +0300
Subject: [PATCH 13/51] Refactor Features page components to TS

---
 src/components/Features/FeaturesHero/index.js |  14 --
 .../Features/FeaturesHero/styles.js           |  19 --
 src/components/Features/index.js              | 164 -----------------
 src/components/Features/index.tsx             | 169 ++++++++++++++++++
 src/components/Features/styles.js             |  54 ------
 src/components/Features/styles.module.css     |  58 ++++++
 src/components/PageContent/styles.module.css  |   4 +
 7 files changed, 231 insertions(+), 251 deletions(-)
 delete mode 100644 src/components/Features/FeaturesHero/index.js
 delete mode 100644 src/components/Features/FeaturesHero/styles.js
 delete mode 100644 src/components/Features/index.js
 create mode 100644 src/components/Features/index.tsx
 delete mode 100644 src/components/Features/styles.js
 create mode 100644 src/components/Features/styles.module.css

diff --git a/src/components/Features/FeaturesHero/index.js b/src/components/Features/FeaturesHero/index.js
deleted file mode 100644
index 45dc328401..0000000000
--- a/src/components/Features/FeaturesHero/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-
-import { Heading, Wrapper } from './styles'
-
-export default function FeaturesHero() {
-  return (
-    <Wrapper>
-      <Heading>
-        DVC brings agility, reproducibility, and collaboration into your
-        existing data science workflow
-      </Heading>
-    </Wrapper>
-  )
-}
diff --git a/src/components/Features/FeaturesHero/styles.js b/src/components/Features/FeaturesHero/styles.js
deleted file mode 100644
index 0217fad826..0000000000
--- a/src/components/Features/FeaturesHero/styles.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from 'styled-components'
-
-export const Wrapper = styled.div`
-  padding-top: 70px;
-  padding-bottom: 70px;
-  overflow: hidden;
-`
-
-export const Heading = styled.h1`
-  font-family: BrandonGrotesque;
-  margin: 0px auto;
-  max-width: 610px;
-  min-height: 185px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.4;
-  text-align: center;
-  color: #40364d;
-`
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
deleted file mode 100644
index 124396d56e..0000000000
--- a/src/components/Features/index.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import React from 'react'
-
-import HeroSection from '../HeroSection'
-import FeaturesHero from './FeaturesHero'
-import Link from '../Link'
-import PromoSection from '../PromoSection'
-
-import { Container, Description, Feature, Features, Icon, Name } from './styles'
-
-export default function FeaturesPage() {
-  return (
-    <>
-      <HeroSection>
-        <FeaturesHero />
-      </HeroSection>
-      <Container>
-        <Features>
-          <Feature>
-            <Icon>
-              <img
-                src="/img/features/icons/git-icon.svg"
-                alt="Git compatible"
-              />
-            </Icon>
-            <Name>Git-compatible</Name>
-            <Description>
-              DVC runs on top of any Git repository and is compatible with any
-              standard Git server or provider (GitHub, GitLab, etc). Data file
-              contents can be shared by network-accessible storage or any
-              supported cloud solution. DVC offers all the advantages of a
-              distributed version control system — lock-free, local branching,
-              and versioning.
-            </Description>
-          </Feature>
-          <Feature>
-            <Icon>
-              <img
-                src="/img/features/icons/storage-icon.svg"
-                alt="Storage agnostic"
-              />
-            </Icon>
-            <Name>Storage agnostic</Name>
-            <Description>
-              Use Amazon S3, Microsoft Azure Blob Storage, Google Drive, Google
-              Cloud Storage, Aliyun OSS, SSH/SFTP, HDFS, HTTP, network-attached
-              storage, or disc to store data. The list of supported remote
-              storage is constantly expanding.
-            </Description>
-          </Feature>
-          <Feature>
-            <Icon>
-              <img src="/img/features/icons/repro.svg" alt="Reproducibility" />
-            </Icon>
-            <Name>Reproducible</Name>
-            <Description>
-              The single &#39;dvc repro&#39; command reproduces experiments
-              end-to-end. DVC guarantees reproducibility by consistently
-              maintaining a combination of input data, configuration, and the
-              code that was initially used to run an experiment.
-            </Description>
-          </Feature>
-          <Feature>
-            <Icon>
-              <img
-                src="/img/features/icons/branching.svg"
-                alt="Low-friction branching"
-              />
-            </Icon>
-            <Name>Low friction branching</Name>
-            <Description>
-              DVC fully supports instantaneous Git branching, even with large
-              files. Branches beautifully reflect the non-linear structure and
-              highly iterative nature of a ML process. Data is not duplicated —
-              one file version can belong to dozens of experiments. Create as
-              many experiments as you want, instantaneously switch back and
-              forth, and save a history of all attempts.
-            </Description>
-          </Feature>
-          <Feature>
-            <Icon>
-              <img src="/img/features/icons/storage-icon.svg" alt="" />
-            </Icon>
-            <Name>Metric tracking</Name>
-            <Description>
-              Metrics are first-class citizens in DVC. DVC includes a command to
-              list all branches, along with metric values, to track the progress
-              or pick the best version.
-            </Description>
-          </Feature>
-          <Feature>
-            <Icon>
-              <img
-                src="/img/features/icons/ml-pipe.svg"
-                alt="ML pipelines framework"
-              />
-            </Icon>
-            <Name>ML pipeline framework</Name>
-            <Description>
-              DVC has a built-in way to connect ML steps into a DAG and run the
-              full pipeline end-to-end. DVC handles caching of intermediate
-              results and does not run a step again if input data or code are
-              the same.
-            </Description>
-          </Feature>
-          <Feature>
-            <Icon>
-              <img
-                src="/img/features/icons/languages-icon.svg"
-                alt="Language & framework agnostic"
-              />
-            </Icon>
-            <Name>Language- & framework-agnostic</Name>
-            <Description>
-              No matter which programming language or libraries are in use or
-              how code is structured, reproducibility and pipelines are based on
-              input and output files or directories. Python, R, Julia, Scala
-              Spark, custom binary, Notebooks, flatfiles/TensorFlow, PyTorch,
-              etc. are all supported.
-            </Description>
-          </Feature>
-          <Feature>
-            <Icon>
-              <img
-                src="/img/features/icons/cluster.svg"
-                alt="HDFS, Hive & Apache Spark"
-              />
-            </Icon>
-            <Name>HDFS, Hive & Apache Spark</Name>
-            <Description>
-              Include Spark and Hive jobs in the DVC data versioning cycle along
-              with local ML modeling steps or manage Spark and Hive jobs with
-              DVC end-to-end. Drastically decrease a feedback loop by
-              decomposing a heavy cluster job into smaller DVC pipeline steps.
-              Iterate on the steps independently with respect to dependencies.
-            </Description>
-          </Feature>
-          <Feature>
-            <Icon>
-              <img
-                src="/img/features/icons/failures.svg"
-                alt="Failure tracking"
-              />
-            </Icon>
-            <Name>Track failures</Name>
-            <Description>
-              Bad ideas can sometimes spark more ideas among colleagues than
-              successful ones. Retaining knowledge of failed attempts can save
-              time in the future. DVC is built to track everything in a
-              reproducible and easily accessible way.
-            </Description>
-          </Feature>
-        </Features>
-      </Container>
-      <PromoSection
-        title="Ready to give it a try?"
-        buttons={[
-          <Link href="/doc/tutorials/get-started" key="get-started">
-            Get Started
-          </Link>
-        ]}
-      />
-    </>
-  )
-}
diff --git a/src/components/Features/index.tsx b/src/components/Features/index.tsx
new file mode 100644
index 0000000000..2d16367c3b
--- /dev/null
+++ b/src/components/Features/index.tsx
@@ -0,0 +1,169 @@
+import React from 'react'
+
+import PageContent from '../PageContent'
+import LayoutWidthContainer from '../LayoutWidthContainer'
+import HeroSection from '../HeroSection'
+import Link from '../Link'
+import PromoSection from '../PromoSection'
+
+import styles from './styles.module.css'
+
+const FeaturesPage: React.SFC = () => (
+  <>
+    <PageContent>
+      <HeroSection className={styles.heroContainer}>
+        <h1 className={styles.heroHeading}>
+          DVC brings agility, reproducibility, and collaboration into your
+          existing data science workflow
+        </h1>
+      </HeroSection>
+      <LayoutWidthContainer>
+        <div className={styles.features}>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/git-icon.svg"
+              alt="Git compatible"
+            />
+            <h3 className={styles.featureName}>Git-compatible</h3>
+            <div className={styles.featureDescription}>
+              DVC runs on top of any Git repository and is compatible with any
+              standard Git server or provider (GitHub, GitLab, etc). Data file
+              contents can be shared by network-accessible storage or any
+              supported cloud solution. DVC offers all the advantages of a
+              distributed version control system — lock-free, local branching,
+              and versioning.
+            </div>
+          </div>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/storage-icon.svg"
+              alt="Storage agnostic"
+            />
+            <h3 className={styles.featureName}>Storage agnostic</h3>
+            <div className={styles.featureDescription}>
+              Use Amazon S3, Microsoft Azure Blob Storage, Google Drive, Google
+              Cloud Storage, Aliyun OSS, SSH/SFTP, HDFS, HTTP, network-attached
+              storage, or disc to store data. The list of supported remote
+              storage is constantly expanding.
+            </div>
+          </div>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/repro.svg"
+              alt="Reproducibility"
+            />
+            <h3 className={styles.featureName}>Reproducible</h3>
+            <div className={styles.featureDescription}>
+              The single &#39;dvc repro&#39; command reproduces experiments
+              end-to-end. DVC guarantees reproducibility by consistently
+              maintaining a combination of input data, configuration, and the
+              code that was initially used to run an experiment.
+            </div>
+          </div>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/branching.svg"
+              alt="Low-friction branching"
+            />
+            <h3 className={styles.featureName}>Low friction branching</h3>
+            <div className={styles.featureDescription}>
+              DVC fully supports instantaneous Git branching, even with large
+              files. Branches beautifully reflect the non-linear structure and
+              highly iterative nature of a ML process. Data is not duplicated —
+              one file version can belong to dozens of experiments. Create as
+              many experiments as you want, instantaneously switch back and
+              forth, and save a history of all attempts.
+            </div>
+          </div>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/storage-icon.svg"
+              alt=""
+            />
+            <h3 className={styles.featureName}>Metric tracking</h3>
+            <div className={styles.featureDescription}>
+              Metrics are first-class citizens in DVC. DVC includes a command to
+              list all branches, along with metric values, to track the progress
+              or pick the best version.
+            </div>
+          </div>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/ml-pipe.svg"
+              alt="ML pipelines framework"
+            />
+            <h3 className={styles.featureName}>ML pipeline framework</h3>
+            <div className={styles.featureDescription}>
+              DVC has a built-in way to connect ML steps into a DAG and run the
+              full pipeline end-to-end. DVC handles caching of intermediate
+              results and does not run a step again if input data or code are
+              the same.
+            </div>
+          </div>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/languages-icon.svg"
+              alt="Language & framework agnostic"
+            />
+            <h3 className={styles.featureName}>
+              Language- & framework-agnostic
+            </h3>
+            <div className={styles.featureDescription}>
+              No matter which programming language or libraries are in use or
+              how code is structured, reproducibility and pipelines are based on
+              input and output files or directories. Python, R, Julia, Scala
+              Spark, custom binary, Notebooks, flatfiles/TensorFlow, PyTorch,
+              etc. are all supported.
+            </div>
+          </div>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/cluster.svg"
+              alt="HDFS, Hive & Apache Spark"
+            />
+            <h3 className={styles.featureName}>HDFS, Hive & Apache Spark</h3>
+            <div className={styles.featureDescription}>
+              Include Spark and Hive jobs in the DVC data versioning cycle along
+              with local ML modeling steps or manage Spark and Hive jobs with
+              DVC end-to-end. Drastically decrease a feedback loop by
+              decomposing a heavy cluster job into smaller DVC pipeline steps.
+              Iterate on the steps independently with respect to dependencies.
+            </div>
+          </div>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/failures.svg"
+              alt="Failure tracking"
+            />
+            <h3 className={styles.featureName}>Track failures</h3>
+            <div className={styles.featureDescription}>
+              Bad ideas can sometimes spark more ideas among colleagues than
+              successful ones. Retaining knowledge of failed attempts can save
+              time in the future. DVC is built to track everything in a
+              reproducible and easily accessible way.
+            </div>
+          </div>
+        </div>
+      </LayoutWidthContainer>
+    </PageContent>
+    <PromoSection
+      title="Ready to give it a try?"
+      buttons={[
+        <Link href="/doc/tutorials/get-started" key="get-started">
+          Get Started
+        </Link>
+      ]}
+    />
+  </>
+)
+
+export default FeaturesPage
diff --git a/src/components/Features/styles.js b/src/components/Features/styles.js
deleted file mode 100644
index c2133c1e24..0000000000
--- a/src/components/Features/styles.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import styled from 'styled-components'
-
-import { container, media } from '../../styles'
-
-export const Container = styled.div`
-  ${container};
-`
-
-export const Features = styled.div`
-  display: flex;
-  flex-flow: row;
-  flex-wrap: wrap;
-  padding-top: 110px;
-  padding-bottom: 90px;
-
-  ${media.phablet`
-    padding-top: 70px;
-    padding-bottom: 50px;
-  `};
-`
-
-export const Feature = styled.div`
-  flex: 33.3%;
-  flex-basis: 311px;
-  margin-bottom: 63px;
-`
-
-export const Icon = styled.div`
-  height: 48px;
-
-  img {
-    width: 48px;
-    height: 48px;
-  }
-`
-
-export const Name = styled.h3`
-  font-family: BrandonGrotesque;
-  margin-top: 10px;
-  margin-bottom: 10px;
-
-  font-size: 20px;
-  font-weight: 500;
-  color: #40364d;
-
-  min-height: 28px;
-`
-
-export const Description = styled.div`
-  max-width: 311px;
-
-  font-size: 16px;
-  color: #5f6c72;
-`
diff --git a/src/components/Features/styles.module.css b/src/components/Features/styles.module.css
new file mode 100644
index 0000000000..1e15de0718
--- /dev/null
+++ b/src/components/Features/styles.module.css
@@ -0,0 +1,58 @@
+.heroContainer {
+  padding-top: 70px;
+  padding-bottom: 70px;
+  overflow: hidden;
+}
+
+.heroHeading {
+  max-width: 610px;
+  min-height: 185px;
+  margin: 0 auto;
+  font-family: var(--font-brandon);
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-align: center;
+  color: var(--color-gray-hover);
+}
+
+.features {
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+  padding-top: 110px;
+  margin: 0 -10px;
+
+  @media (--xs-scr) {
+    padding-top: 70px;
+    padding-bottom: 50px;
+  }
+}
+
+.feature {
+  flex: 33.3%;
+  flex-basis: 311px;
+  padding: 0 10px;
+  margin-bottom: 63px;
+}
+
+.featureIcon {
+  display: block;
+  width: 48px;
+  height: 48px;
+}
+
+.featureName {
+  min-height: 28px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-family: var(--font-brandon);
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--color-gray-hover);
+}
+
+.featureDescription {
+  font-size: 16px;
+  color: var(--color-gray-dark);
+}
diff --git a/src/components/PageContent/styles.module.css b/src/components/PageContent/styles.module.css
index 52567ba951..760e328328 100644
--- a/src/components/PageContent/styles.module.css
+++ b/src/components/PageContent/styles.module.css
@@ -1,3 +1,7 @@
 .pageContent {
   padding-bottom: 50px;
+
+  @media (--xs-scr) {
+    padding-bottom: 0;
+  }
 }

From da284d1630ac660f2b2146c4c5629b3a40a324f5 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Fri, 3 Apr 2020 16:34:15 +0300
Subject: [PATCH 14/51] Refactor Community page components to TS

---
 config/postcss/media.js                       |   1 +
 package.json                                  |   3 +-
 src/components/Community/Block/index.js       |  28 --
 src/components/Community/Block/index.tsx      |  30 ++
 .../Block/{styles.js => styles.module.css}    |  67 ++---
 .../Contribute/{index.js => index.tsx}        |  80 +++--
 src/components/Community/Events/index.js      | 121 --------
 src/components/Community/Events/index.tsx     | 126 ++++++++
 src/components/Community/Events/styles.js     |  17 --
 .../Community/Events/styles.module.css        |  13 +
 src/components/Community/Hero/index.js        |  29 --
 src/components/Community/Hero/index.tsx       |  45 +++
 src/components/Community/Hero/styles.js       |  23 --
 .../Community/Hero/styles.module.css          |  16 +
 src/components/Community/Learn/index.js       | 264 -----------------
 src/components/Community/Learn/index.tsx      | 274 ++++++++++++++++++
 .../Learn/{styles.js => styles.module.css}    |   6 +-
 src/components/Community/Meet/index.js        | 255 ----------------
 src/components/Community/Meet/index.tsx       | 248 ++++++++++++++++
 .../Meet/{styles.js => styles.module.css}     |  40 ++-
 src/components/Community/Section/index.js     |  83 ------
 src/components/Community/Section/index.tsx    |  99 +++++++
 src/components/Community/Section/styles.js    | 106 -------
 .../Community/Section/styles.module.css       | 107 +++++++
 src/components/Community/index.js             |  32 --
 src/components/Community/index.tsx            |  38 +++
 src/components/Community/styles.js            | 143 ---------
 src/components/Community/styles.module.css    | 135 +++++++++
 .../LayoutWidthContainer/styles.module.css    |   1 -
 src/components/PageContent/index.tsx          |  12 +-
 src/utils/api.ts                              |  10 +-
 tsconfig.json                                 |   1 +
 yarn.lock                                     |   5 -
 33 files changed, 1238 insertions(+), 1220 deletions(-)
 delete mode 100644 src/components/Community/Block/index.js
 create mode 100644 src/components/Community/Block/index.tsx
 rename src/components/Community/Block/{styles.js => styles.module.css} (59%)
 rename src/components/Community/Contribute/{index.js => index.tsx} (68%)
 delete mode 100644 src/components/Community/Events/index.js
 create mode 100644 src/components/Community/Events/index.tsx
 delete mode 100644 src/components/Community/Events/styles.js
 create mode 100644 src/components/Community/Events/styles.module.css
 delete mode 100644 src/components/Community/Hero/index.js
 create mode 100644 src/components/Community/Hero/index.tsx
 delete mode 100644 src/components/Community/Hero/styles.js
 create mode 100644 src/components/Community/Hero/styles.module.css
 delete mode 100644 src/components/Community/Learn/index.js
 create mode 100644 src/components/Community/Learn/index.tsx
 rename src/components/Community/Learn/{styles.js => styles.module.css} (55%)
 delete mode 100644 src/components/Community/Meet/index.js
 create mode 100644 src/components/Community/Meet/index.tsx
 rename src/components/Community/Meet/{styles.js => styles.module.css} (54%)
 delete mode 100644 src/components/Community/Section/index.js
 create mode 100644 src/components/Community/Section/index.tsx
 delete mode 100644 src/components/Community/Section/styles.js
 create mode 100644 src/components/Community/Section/styles.module.css
 delete mode 100644 src/components/Community/index.js
 create mode 100644 src/components/Community/index.tsx
 delete mode 100644 src/components/Community/styles.js
 create mode 100644 src/components/Community/styles.module.css

diff --git a/config/postcss/media.js b/config/postcss/media.js
index 31d785fc05..1e30babccc 100644
--- a/config/postcss/media.js
+++ b/config/postcss/media.js
@@ -7,6 +7,7 @@ const screens = {
 }
 
 module.exports = {
+  screens,
   customMedia: {
     '--xxs-scr': `(max-width: ${screens.phone}px)`,
     '--xs-scr': `(max-width: ${screens.phablet}px)`,
diff --git a/package.json b/package.json
index af03bc585b..426a2a91c9 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,6 @@
     "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
     "github-markdown-css": "^3.0.1",
     "isomorphic-fetch": "^2.2.1",
-    "lodash.fill": "^3.4.0",
     "lodash.includes": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "^4.4.0",
@@ -79,8 +78,8 @@
     "react-use": "^13.27.0",
     "rehype-react": "^4.0.1",
     "request": "^2.88.0",
-    "s3-client": "^4.4.2",
     "reset-css": "^5.0.1",
+    "s3-client": "^4.4.2",
     "scroll": "^3.0.1",
     "serve-handler": "^6.1.2",
     "slick-carousel": "^1.8.1",
diff --git a/src/components/Community/Block/index.js b/src/components/Community/Block/index.js
deleted file mode 100644
index 3aea85cd9d..0000000000
--- a/src/components/Community/Block/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Action, Content, Icon, Header, Wrapper } from './styles'
-
-export default function Block({ action, children, icon, title }) {
-  const hasAction = !!action
-
-  return (
-    <Wrapper>
-      {title && (
-        <Header>
-          {title}
-          {icon && <Icon src={icon} />}
-        </Header>
-      )}
-      <Content>{children}</Content>
-      {hasAction && <Action>{action}</Action>}
-    </Wrapper>
-  )
-}
-
-Block.propTypes = {
-  action: PropTypes.node,
-  children: PropTypes.node,
-  icon: PropTypes.string,
-  title: PropTypes.node
-}
diff --git a/src/components/Community/Block/index.tsx b/src/components/Community/Block/index.tsx
new file mode 100644
index 0000000000..0762cc2928
--- /dev/null
+++ b/src/components/Community/Block/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+
+import styles from './styles.module.css'
+
+interface ICommunityBlockProps {
+  children: React.ReactNode
+  title?: React.ReactNode
+  action?: React.ReactNode
+  icon?: string
+}
+
+const Block: React.SFC<ICommunityBlockProps> = ({
+  title,
+  children,
+  action,
+  icon
+}) => (
+  <div className={styles.container}>
+    {title && (
+      <div className={styles.header}>
+        {title}
+        {icon && <img className={styles.icon} src={icon} alt="" />}
+      </div>
+    )}
+    <div className={styles.content}>{children}</div>
+    {action && <div className={styles.action}>{action}</div>}
+  </div>
+)
+
+export default Block
diff --git a/src/components/Community/Block/styles.js b/src/components/Community/Block/styles.module.css
similarity index 59%
rename from src/components/Community/Block/styles.js
rename to src/components/Community/Block/styles.module.css
index f0b65fbd75..9b5c865b31 100644
--- a/src/components/Community/Block/styles.js
+++ b/src/components/Community/Block/styles.module.css
@@ -1,53 +1,50 @@
-import styled from 'styled-components'
-import { media } from '../../../styles'
-
-export const Action = styled.div`
-  margin-top: 20px;
-`
-
-export const Content = styled.div`
-  flex-grow: 1;
-  font-size: 16px;
-  line-height: 24px;
-  color: #838d93;
-`
+.container {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  width: 100%;
+  padding: 10px 20px 20px;
+  border-radius: 20px;
+  background: var(--color-light-blue);
+}
 
-export const Header = styled.div`
+.header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 15px;
   padding-bottom: 10px;
   border-bottom: 1px solid #d8dfe3;
-  font-family: BrandonGrotesque;
+  font-family: var(--font-brandon);
   font-size: 24px;
   font-weight: 500;
   line-height: 34px;
-  color: #24292e;
+  color: var(--color-black);
 
-  ${media.tablet`
+  @media (--sm-scr) {
     margin: 0;
     border: none;
     font-size: 20px;
     line-height: 30px;
-  `}
-`
+  }
+}
 
-export const Icon = styled.img`
+.action {
+  margin-top: 20px;
+}
+
+.content {
+  flex-grow: 1;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-gray);
+}
+
+.icon {
   margin: 0 -2px 0 0;
 
-  ${media.tablet`
+  @media (--sm-scr) {
     display: none;
-  `}
-`
-
-export const Wrapper = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
-  width: 100%;
-  padding: 10px 20px 20px;
-  border-radius: 20px;
-  background: #eef4f8;
-`
+  }
+}
diff --git a/src/components/Community/Contribute/index.js b/src/components/Community/Contribute/index.tsx
similarity index 68%
rename from src/components/Community/Contribute/index.js
rename to src/components/Community/Contribute/index.tsx
index ea3323df83..09361fe9d0 100644
--- a/src/components/Community/Contribute/index.js
+++ b/src/components/Community/Contribute/index.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-
-import { logEvent } from '../../../utils/ga'
 
+import { ICommunitySectionTheme } from '../'
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import Link from '../../Link'
 import CommunityBlock from '../Block'
 import CommunitySection from '../Section'
+import { logEvent } from '../../../utils/ga'
 
-import data from '../data'
-
-import { Button, Item, Items, Wrapper } from '../styles'
+import data from '../data.json'
+import sharedStyles from '../styles.module.css'
 
 const { description, mobileDescription, title } = data.section.contribute
 
@@ -17,9 +17,11 @@ const logBlogpost = () => logEvent('community', 'contribute-blogpost')
 const logTalk = () => logEvent('community', 'contribute-talk')
 const logAmbassador = () => logEvent('community', 'contribute-ambassador')
 
-export default function CommunityContribute({ theme }) {
+const Contribute: React.SFC<{ theme: ICommunitySectionTheme }> = ({
+  theme
+}) => {
   return (
-    <Wrapper>
+    <LayoutWidthContainer className={sharedStyles.wrapper}>
       <CommunitySection
         anchor="contribute"
         background="/img/community/contribute_bg.jpg"
@@ -29,93 +31,87 @@ export default function CommunityContribute({ theme }) {
         mobileDescription={mobileDescription}
         title={title}
       >
-        <Items>
-          <Item>
+        <div className={sharedStyles.items}>
+          <div className={sharedStyles.item}>
             <CommunityBlock
               title="Make a PR"
               action={
-                <Button
-                  theme={theme}
+                <Link
+                  className={sharedStyles.button}
+                  style={theme}
                   href="https://github.com/iterative/dvc"
                   target="_blank"
-                  rel="noreferrer noopener"
                   onClick={logPR}
                 >
                   Go to Github
-                </Button>
+                </Link>
               }
             >
               Let&apos;s build something great together. Become a DVC
               contributor!.
             </CommunityBlock>
-          </Item>
-          <Item>
+          </div>
+          <div className={sharedStyles.item}>
             <CommunityBlock
               title="Write a blogpost"
               action={
-                <Button
-                  theme={theme}
+                <Link
+                  className={sharedStyles.button}
+                  style={theme}
                   href="mailto:info@dvc.org?subject=I want to write a blogpost!"
                   target="_blank"
-                  rel="noreferrer noopener"
                   onClick={logBlogpost}
                 >
                   Let’s talk!
-                </Button>
+                </Link>
               }
             >
               We&apos;re always interested in guest writers for our blog. If you
               have something to share, please reach out!
             </CommunityBlock>
-          </Item>
-          <Item>
+          </div>
+          <div className={sharedStyles.item}>
             <CommunityBlock
               title="Give a talk"
               action={
-                <Button
-                  theme={theme}
+                <Link
+                  className={sharedStyles.button}
+                  style={theme}
                   href="mailto:info@dvc.org?subject=I want to give a talk!"
                   target="_blank"
-                  rel="noreferrer noopener"
                   onClick={logTalk}
                 >
                   Let’s talk!
-                </Button>
+                </Link>
               }
             >
               We support speakers all over the world and help with preparation,
               speaker training and expenses.
             </CommunityBlock>
-          </Item>
-          <Item>
+          </div>
+          <div className={sharedStyles.item}>
             <CommunityBlock
               title="Be an Ambassador"
               action={
-                <Button
-                  theme={theme}
-                  // eslint-disable-next-line
+                <Link
+                  className={sharedStyles.button}
+                  style={theme}
                   href="mailto:info@dvc.org?subject=I want to become an Ambassador!"
                   target="_blank"
-                  rel="noreferrer noopener"
                   onClick={logAmbassador}
                 >
                   Let’s talk!
-                </Button>
+                </Link>
               }
             >
               Get perks and benefits for contributing to the code base, writing
               blog posts, or hosting meetups.
             </CommunityBlock>
-          </Item>
-        </Items>
+          </div>
+        </div>
       </CommunitySection>
-    </Wrapper>
+    </LayoutWidthContainer>
   )
 }
 
-CommunityContribute.propTypes = {
-  theme: PropTypes.shape({
-    backgroundColor: PropTypes.string,
-    color: PropTypes.string
-  })
-}
+export default Contribute
diff --git a/src/components/Community/Events/index.js b/src/components/Community/Events/index.js
deleted file mode 100644
index 5e3396a7a7..0000000000
--- a/src/components/Community/Events/index.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { useCallback } from 'react'
-import PropTypes from 'prop-types'
-import format from 'date-fns/format'
-import fill from 'lodash.fill'
-
-import { logEvent } from '../../../utils/ga'
-
-import CommunityBlock from '../Block'
-import CommunitySection from '../Section'
-import Link from '../../Link'
-
-import data from '../data'
-
-import { Button, Item, Items, Line, Link as LinkSC, Wrapper } from '../styles'
-
-import { Image, ImageWrapper, Meta } from './styles'
-
-const { description, mobileDescription, title } = data.section.events
-const { events } = data
-
-const modifiedEvents = events.length > 3 ? events.slice(0, 3) : events
-const eventPlaceholders = fill(new Array(3 - modifiedEvents.length), Item)
-
-function CommunityEvent({
-  theme,
-  city,
-  date,
-  description,
-  pictureUrl,
-  title,
-  url
-}) {
-  const logEventClick = useCallback(
-    () => logEvent('community', 'event', title),
-    [title]
-  )
-
-  return (
-    <Item>
-      <CommunityBlock
-        action={
-          <Link
-            as={Button}
-            href={url}
-            theme={theme}
-            target="_blank"
-            onClick={logEventClick}
-          >
-            Event Info
-          </Link>
-        }
-      >
-        <ImageWrapper href={url} target="_blank" onClick={logEventClick}>
-          <Image
-            src={pictureUrl || '/img/community/event-placeholder.svg'}
-            alt=""
-          />
-        </ImageWrapper>
-
-        <Link
-          color={theme.color}
-          as={LinkSC}
-          href={url}
-          target="_blank"
-          onClick={logEventClick}
-        >
-          {title}
-        </Link>
-        <Meta>
-          <Line>{description}</Line>
-          <Line>
-            {city}, {format(new Date(date), 'MMMM d')}
-          </Line>
-        </Meta>
-      </CommunityBlock>
-    </Item>
-  )
-}
-
-CommunityEvent.propTypes = {
-  theme: PropTypes.object,
-  city: PropTypes.string,
-  date: PropTypes.string,
-  description: PropTypes.string,
-  pictureUrl: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string
-}
-
-export default function CommunityEvents({ theme }) {
-  if (!events.length) return ''
-
-  return (
-    <Wrapper>
-      <CommunitySection
-        anchor="events"
-        color={theme.color}
-        description={description}
-        icon="/img/community/events.svg"
-        mobileDescription={mobileDescription}
-        title={title}
-      >
-        <Items>
-          {modifiedEvents.map(event => (
-            <CommunityEvent {...event} theme={theme} key={event.url} />
-          ))}
-          {eventPlaceholders.map((Component, key) => (
-            <Component key={key} />
-          ))}
-        </Items>
-      </CommunitySection>
-    </Wrapper>
-  )
-}
-
-CommunityEvents.propTypes = {
-  theme: PropTypes.shape({
-    backgroundColor: PropTypes.string,
-    color: PropTypes.string
-  })
-}
diff --git a/src/components/Community/Events/index.tsx b/src/components/Community/Events/index.tsx
new file mode 100644
index 0000000000..6e1e39324b
--- /dev/null
+++ b/src/components/Community/Events/index.tsx
@@ -0,0 +1,126 @@
+import React, { useCallback } from 'react'
+import cn from 'classnames'
+import format from 'date-fns/format'
+
+import { ICommunitySectionTheme } from '../'
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import Link from '../../Link'
+import Block from '../Block'
+import Section from '../Section'
+import { logEvent } from '../../../utils/ga'
+
+import data from '../data.json'
+import sharedStyles from '../styles.module.css'
+import styles from './styles.module.css'
+
+interface IEvent {
+  theme: ICommunitySectionTheme
+  city: string
+  date: string
+  description: string
+  pictureUrl?: string
+  title: string
+  url: string
+}
+
+const { description, mobileDescription, title } = data.section.events
+const { events } = data
+const eventsItems = (() => {
+  const items: Array<IEvent | null> = events.slice(0, 3) as Array<IEvent>
+  const itemLength = items.length
+
+  for (let i = itemLength; i < 3; i++) {
+    items.push(null)
+  }
+
+  return items
+})()
+
+const Event: React.SFC<IEvent> = ({
+  theme,
+  city,
+  date,
+  description,
+  pictureUrl,
+  title,
+  url
+}) => {
+  const logEventClick = useCallback(
+    () => logEvent('community', 'event', title),
+    [title]
+  )
+
+  return (
+    <Block
+      action={
+        <Link
+          className={sharedStyles.button}
+          style={theme}
+          href={url}
+          target="_blank"
+          onClick={logEventClick}
+        >
+          Event Info
+        </Link>
+      }
+    >
+      <Link
+        className={styles.imageWrapper}
+        href={url}
+        target="_blank"
+        onClick={logEventClick}
+      >
+        <img
+          className={styles.image}
+          src={pictureUrl || '/img/community/event-placeholder.svg'}
+          alt=""
+        />
+      </Link>
+
+      <Link
+        className={sharedStyles.link}
+        style={{ color: theme.color }}
+        href={url}
+        target="_blank"
+        onClick={logEventClick}
+      >
+        {title}
+      </Link>
+      <div className={cn(sharedStyles.meta, styles.meta)}>
+        <div className={sharedStyles.line}>{description}</div>
+        <div className={sharedStyles.line}>
+          {city}, {format(new Date(date), 'MMMM d')}
+        </div>
+      </div>
+    </Block>
+  )
+}
+
+const Events: React.SFC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
+  if (!events.length) {
+    return null
+  }
+
+  return (
+    <LayoutWidthContainer className={sharedStyles.wrapper}>
+      <Section
+        anchor="events"
+        color={theme.color}
+        description={description}
+        icon="/img/community/events.svg"
+        mobileDescription={mobileDescription}
+        title={title}
+      >
+        <div className={sharedStyles.items}>
+          {eventsItems.map((event, key) => (
+            <div className={sharedStyles.item} key={key}>
+              {event && <Event {...event} theme={theme} key={event.url} />}
+            </div>
+          ))}
+        </div>
+      </Section>
+    </LayoutWidthContainer>
+  )
+}
+
+export default Events
diff --git a/src/components/Community/Events/styles.js b/src/components/Community/Events/styles.js
deleted file mode 100644
index bea64fab3a..0000000000
--- a/src/components/Community/Events/styles.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'styled-components'
-
-import { Meta as ParentMeta } from '../styles'
-
-export const Image = styled.img`
-  width: 100%;
-  border-radius: 20px 20px 0 0;
-`
-
-export const ImageWrapper = styled.a`
-  display: block;
-  margin: -10px -20px 0;
-`
-
-export const Meta = styled(ParentMeta)`
-  margin-top: 10px;
-`
diff --git a/src/components/Community/Events/styles.module.css b/src/components/Community/Events/styles.module.css
new file mode 100644
index 0000000000..4226e85a24
--- /dev/null
+++ b/src/components/Community/Events/styles.module.css
@@ -0,0 +1,13 @@
+.meta {
+  margin-top: 10px;
+}
+
+.image {
+  width: 100%;
+  border-radius: 20px 20px 0 0;
+}
+
+.imageWrapper {
+  display: block;
+  margin: -10px -20px 0;
+}
diff --git a/src/components/Community/Hero/index.js b/src/components/Community/Hero/index.js
deleted file mode 100644
index f9a011b693..0000000000
--- a/src/components/Community/Hero/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-
-import Link from '../../Link'
-
-import { logEvent } from '../../../utils/ga'
-
-import { OnlyDesktop, OnlyMobile } from '../../../styles'
-import { Link as LinkSC, Picture, Wrapper } from './styles'
-
-import data from '../data.json'
-
-const logHero = () => logEvent('community', 'hero')
-
-export default function CommunityHero() {
-  if (!data.hero) return ''
-
-  return (
-    <Wrapper>
-      <Link as={LinkSC} href={data.hero.url} target="_blank" onClick={logHero}>
-        <OnlyDesktop>
-          <Picture src={data.hero.pictureDesktop} alt="" />
-        </OnlyDesktop>
-        <OnlyMobile>
-          <Picture src={data.hero.pictureMobile} alt="" />
-        </OnlyMobile>
-      </Link>
-    </Wrapper>
-  )
-}
diff --git a/src/components/Community/Hero/index.tsx b/src/components/Community/Hero/index.tsx
new file mode 100644
index 0000000000..086b796635
--- /dev/null
+++ b/src/components/Community/Hero/index.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import ShowOnly from '../../ShowOnly'
+import Link from '../../Link'
+import { logEvent } from '../../../utils/ga'
+
+import data from '../data.json'
+import styles from './styles.module.css'
+
+const logHero = () => logEvent('community', 'hero')
+
+const Hero: React.SFC = () => {
+  if (!data.hero) {
+    return null
+  }
+
+  return (
+    <LayoutWidthContainer className={styles.container}>
+      <Link
+        className={styles.link}
+        href={data.hero.url}
+        target="_blank"
+        onClick={logHero}
+      >
+        <ShowOnly on="desktop">
+          <img
+            className={styles.picture}
+            src={data.hero.pictureDesktop}
+            alt=""
+          />
+        </ShowOnly>
+        <ShowOnly on="mobile">
+          <img
+            className={styles.picture}
+            src={data.hero.pictureMobile}
+            alt=""
+          />
+        </ShowOnly>
+      </Link>
+    </LayoutWidthContainer>
+  )
+}
+
+export default Hero
diff --git a/src/components/Community/Hero/styles.js b/src/components/Community/Hero/styles.js
deleted file mode 100644
index 3f007e8291..0000000000
--- a/src/components/Community/Hero/styles.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import styled from 'styled-components'
-import { media } from '../../../styles'
-
-export const Wrapper = styled.div`
-  margin: 0 auto;
-  padding: 40px 0 20px;
-  max-width: 1000px;
-
-  ${media.tablet`
-    padding: 0 0 10px;
-  `}
-`
-
-export const Link = styled.a`
-  &:hover {
-    opacity: 0.7;
-  }
-`
-
-export const Picture = styled.img`
-  max-width: 1000px;
-  width: 100%;
-`
diff --git a/src/components/Community/Hero/styles.module.css b/src/components/Community/Hero/styles.module.css
new file mode 100644
index 0000000000..dafea88e10
--- /dev/null
+++ b/src/components/Community/Hero/styles.module.css
@@ -0,0 +1,16 @@
+.container {
+  padding: 40px 0 20px;
+}
+
+.link {
+  display: block;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.picture {
+  max-width: 100%;
+  width: 100%;
+}
diff --git a/src/components/Community/Learn/index.js b/src/components/Community/Learn/index.js
deleted file mode 100644
index 308c49ad6c..0000000000
--- a/src/components/Community/Learn/index.js
+++ /dev/null
@@ -1,264 +0,0 @@
-import React, { useCallback } from 'react'
-import PropTypes from 'prop-types'
-import format from 'date-fns/format'
-
-import Link from '../../Link'
-
-import { logEvent } from '../../../utils/ga'
-import { getFirstPage } from '../../../utils/sidebar'
-
-import CommunityBlock from '../Block'
-import CommunitySection from '../Section'
-
-import { useCommentsCount } from '../../../utils/api'
-import getPosts from '../../../queries/posts'
-import { pluralizeComments } from '../../../utils/i18n'
-
-import {
-  Button,
-  Comments,
-  HeaderLink,
-  ImageLine,
-  Item,
-  Items,
-  Line,
-  Link as LinkSC,
-  Meta,
-  NbspWrapper,
-  TextWrapper,
-  Wrapper
-} from '../styles'
-
-import { Image } from './styles'
-
-import data from '../data'
-
-const docsPage = getFirstPage()
-const { description, mobileDescription, title } = data.section.learn
-const { documentation, userContent } = data
-
-const logPostAll = () => logEvent('community', 'blog', 'all')
-const logDocumentationAll = () => logEvent('community', 'documentation', 'all')
-
-function CommunityBlogPost({
-  url,
-  title,
-  date,
-  color,
-  commentsUrl,
-  pictureUrl
-}) {
-  const logPost = useCallback(() => logEvent('community', 'blog', title), [
-    title
-  ])
-  const { error, ready, result } = useCommentsCount(commentsUrl)
-
-  return (
-    <ImageLine key={url}>
-      {pictureUrl && (
-        <Link href={url} target="_blank" onClick={logPost}>
-          <Image src={pictureUrl} alt="" />
-        </Link>
-      )}
-      <TextWrapper>
-        <Link
-          as={LinkSC}
-          color={color}
-          href={url}
-          target="_blank"
-          onClick={logPost}
-        >
-          {title}
-        </Link>
-        <Meta>
-          {ready && !error && (
-            <>
-              <Comments
-                href={commentsUrl}
-                target="_blank"
-                rel="noreferrer noopener"
-              >
-                {pluralizeComments(result)}
-              </Comments>
-              {' • '}
-            </>
-          )}
-          <NbspWrapper>{format(new Date(date), 'MMM, d')}</NbspWrapper>
-        </Meta>
-      </TextWrapper>
-    </ImageLine>
-  )
-}
-
-CommunityBlogPost.propTypes = {
-  color: PropTypes.string,
-  commentsUrl: PropTypes.string,
-  pictureUrl: PropTypes.string,
-  date: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string
-}
-
-function CommunityUserContent({ url, title, author, date, color, pictureUrl }) {
-  const logUserContent = useCallback(
-    () => logEvent('community', 'user-content', title),
-    [title]
-  )
-
-  return (
-    <ImageLine key={url}>
-      {pictureUrl && (
-        <Link href={url} as={LinkSC} target="_blank" onClick={logUserContent}>
-          <Image src={pictureUrl} alt="" />
-        </Link>
-      )}
-      <TextWrapper>
-        <Link
-          color={color}
-          href={url}
-          as={LinkSC}
-          target="_blank"
-          onClick={logUserContent}
-        >
-          {title}
-        </Link>
-        <Meta>
-          {author} •{' '}
-          <NbspWrapper>{format(new Date(date), 'MMM, d')}</NbspWrapper>
-        </Meta>
-      </TextWrapper>
-    </ImageLine>
-  )
-}
-
-CommunityUserContent.propTypes = {
-  author: PropTypes.string,
-  color: PropTypes.string,
-  date: PropTypes.string,
-  pictureUrl: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string
-}
-
-function CommunityDocumentation({ url, title, description, color }) {
-  const logDocumentation = useCallback(
-    () => logEvent('community', 'documentation', title),
-    [title]
-  )
-
-  return (
-    <Line key={url}>
-      <Link
-        href={url}
-        as={LinkSC}
-        color={color}
-        large="true"
-        onClick={logDocumentation}
-      >
-        {title}
-      </Link>
-      <Meta>{description}</Meta>
-    </Line>
-  )
-}
-
-CommunityDocumentation.propTypes = {
-  color: PropTypes.string,
-  description: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string
-}
-
-export default function CommunityLearn({ theme }) {
-  const posts = getPosts()
-
-  return (
-    <Wrapper>
-      <CommunitySection
-        anchor="learn"
-        background="/img/community/learn_bg.jpg"
-        color={theme.color}
-        description={description}
-        icon="/img/community/learn.svg"
-        mobileDescription={mobileDescription}
-        title={title}
-      >
-        <Items>
-          <Item>
-            <CommunityBlock
-              title={
-                <Link
-                  href={docsPage}
-                  as={HeaderLink}
-                  onClick={logDocumentationAll}
-                >
-                  Documentation
-                </Link>
-              }
-              action={
-                <Link
-                  href={docsPage}
-                  as={Button}
-                  theme={theme}
-                  onClick={logDocumentationAll}
-                >
-                  See all docs
-                </Link>
-              }
-            >
-              {documentation.map(documentation => (
-                <CommunityDocumentation
-                  {...documentation}
-                  key={documentation.url}
-                  color={theme.color}
-                />
-              ))}
-            </CommunityBlock>
-          </Item>
-          <Item>
-            <CommunityBlock
-              title={
-                <HeaderLink href="/blog" onClick={logPostAll}>
-                  DVC Blog
-                </HeaderLink>
-              }
-              action={
-                posts && (
-                  <Button theme={theme} href="/blog" onClick={logPostAll}>
-                    See all Posts
-                  </Button>
-                )
-              }
-            >
-              {posts.map(post => (
-                <CommunityBlogPost
-                  {...post}
-                  key={post.url}
-                  color={theme.color}
-                />
-              ))}
-            </CommunityBlock>
-          </Item>
-          <Item>
-            <CommunityBlock title="User Content">
-              {userContent.map(userContent => (
-                <CommunityUserContent
-                  {...userContent}
-                  key={userContent.url}
-                  color={theme.color}
-                />
-              ))}
-            </CommunityBlock>
-          </Item>
-        </Items>
-      </CommunitySection>
-    </Wrapper>
-  )
-}
-
-CommunityLearn.propTypes = {
-  theme: PropTypes.shape({
-    backgroundColor: PropTypes.string,
-    color: PropTypes.string
-  })
-}
diff --git a/src/components/Community/Learn/index.tsx b/src/components/Community/Learn/index.tsx
new file mode 100644
index 0000000000..ad6fbcc653
--- /dev/null
+++ b/src/components/Community/Learn/index.tsx
@@ -0,0 +1,274 @@
+import React, { useCallback } from 'react'
+import cn from 'classnames'
+import format from 'date-fns/format'
+
+import { ICommunitySectionTheme } from '../'
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import Link from '../../Link'
+import Block from '../Block'
+import Section from '../Section'
+
+import { logEvent } from '../../../utils/ga'
+import { getFirstPage } from '../../../utils/sidebar'
+import { useCommentsCount } from '../../../utils/api'
+import getPosts from '../../../queries/posts'
+import { pluralizeComments } from '../../../utils/i18n'
+
+import data from '../data.json'
+import sharedStyles from '../styles.module.css'
+import styles from './styles.module.css'
+
+const docsPage = getFirstPage()
+const { description, mobileDescription, title } = data.section.learn
+const { documentation, userContent } = data
+
+const logPostAll = () => logEvent('community', 'blog', 'all')
+const logDocumentationAll = () => logEvent('community', 'documentation', 'all')
+
+interface ICommunityBlogPost {
+  color: string
+  commentsUrl?: string
+  pictureUrl: string | null
+  date: string
+  title: string
+  url: string
+}
+
+const BlogPost: React.SFC<ICommunityBlogPost> = ({
+  url,
+  title,
+  date,
+  color,
+  commentsUrl,
+  pictureUrl
+}) => {
+  if (!commentsUrl) {
+    return null
+  }
+
+  const logPost = useCallback(() => logEvent('community', 'blog', title), [
+    title
+  ])
+
+  const { error, ready, result } = useCommentsCount(commentsUrl)
+
+  return (
+    <div className={cn(sharedStyles.line, sharedStyles.image)} key={url}>
+      {pictureUrl && (
+        <Link href={url} target="_blank" onClick={logPost}>
+          <img className={styles.image} src={pictureUrl} alt="" />
+        </Link>
+      )}
+      <div>
+        <Link
+          className={sharedStyles.link}
+          style={{ color }}
+          href={url}
+          target="_blank"
+          onClick={logPost}
+        >
+          {title}
+        </Link>
+        <div className={sharedStyles.meta}>
+          {ready && !error && (
+            <>
+              <Link
+                className={sharedStyles.commentsLink}
+                href={commentsUrl}
+                target="_blank"
+              >
+                {pluralizeComments(result)}
+              </Link>
+              {' • '}
+            </>
+          )}
+          <span className={sharedStyles.nbsp}>
+            {format(new Date(date), 'MMM, d')}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface ICommunityUserContentProps {
+  author: string
+  color: string
+  date: string
+  pictureUrl: string
+  title: string
+  url: string
+}
+
+const UserContent: React.SFC<ICommunityUserContentProps> = ({
+  url,
+  title,
+  author,
+  date,
+  color,
+  pictureUrl
+}) => {
+  const logUserContent = useCallback(
+    () => logEvent('community', 'user-content', title),
+    [title]
+  )
+
+  return (
+    <div className={cn(sharedStyles.line, sharedStyles.image)} key={url}>
+      {pictureUrl && (
+        <Link
+          className={sharedStyles.link}
+          href={url}
+          target="_blank"
+          onClick={logUserContent}
+        >
+          <img className={styles.image} src={pictureUrl} alt="" />
+        </Link>
+      )}
+      <div>
+        <Link
+          className={sharedStyles.link}
+          style={{ color }}
+          href={url}
+          target="_blank"
+          onClick={logUserContent}
+        >
+          {title}
+        </Link>
+        <div className={sharedStyles.meta}>
+          {author} •{' '}
+          <span className={sharedStyles.nbsp}>
+            {format(new Date(date), 'MMM, d')}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface ICommunityDocumentationProps {
+  color: string
+  description: string
+  title: string
+  url: string
+}
+
+const Documentation: React.SFC<ICommunityDocumentationProps> = ({
+  url,
+  title,
+  description,
+  color
+}) => {
+  const logDocumentation = useCallback(
+    () => logEvent('community', 'documentation', title),
+    [title]
+  )
+
+  return (
+    <div className={sharedStyles.line} key={url}>
+      <Link
+        className={cn(sharedStyles.link, sharedStyles.large)}
+        style={{ color }}
+        href={url}
+        onClick={logDocumentation}
+      >
+        {title}
+      </Link>
+      <div className={sharedStyles.meta}>{description}</div>
+    </div>
+  )
+}
+
+const Learn: React.SFC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
+  const posts = getPosts()
+
+  return (
+    <LayoutWidthContainer className={sharedStyles.wrapper}>
+      <Section
+        anchor="learn"
+        background="/img/community/learn_bg.jpg"
+        color={theme.color}
+        description={description}
+        icon="/img/community/learn.svg"
+        mobileDescription={mobileDescription}
+        title={title}
+      >
+        <div className={sharedStyles.items}>
+          <div className={sharedStyles.item}>
+            <Block
+              title={
+                <Link
+                  className={sharedStyles.headerLink}
+                  href={docsPage}
+                  onClick={logDocumentationAll}
+                >
+                  Documentation
+                </Link>
+              }
+              action={
+                <Link
+                  className={sharedStyles.button}
+                  style={theme}
+                  href={docsPage}
+                  onClick={logDocumentationAll}
+                >
+                  See all docs
+                </Link>
+              }
+            >
+              {documentation.map(documentation => (
+                <Documentation
+                  {...documentation}
+                  key={documentation.url}
+                  color={theme.color}
+                />
+              ))}
+            </Block>
+          </div>
+          <div className={sharedStyles.item}>
+            <Block
+              title={
+                <Link
+                  className={sharedStyles.headerLink}
+                  href="/blog"
+                  onClick={logPostAll}
+                >
+                  DVC Blog
+                </Link>
+              }
+              action={
+                posts && (
+                  <Link
+                    className={sharedStyles.button}
+                    style={theme}
+                    href="/blog"
+                    onClick={logPostAll}
+                  >
+                    See all Posts
+                  </Link>
+                )
+              }
+            >
+              {posts.map(post => (
+                <BlogPost {...post} key={post.url} color={theme.color} />
+              ))}
+            </Block>
+          </div>
+          <div className={sharedStyles.item}>
+            <Block title="User Content">
+              {userContent.map(userContent => (
+                <UserContent
+                  {...userContent}
+                  key={userContent.url}
+                  color={theme.color}
+                />
+              ))}
+            </Block>
+          </div>
+        </div>
+      </Section>
+    </LayoutWidthContainer>
+  )
+}
+
+export default Learn
diff --git a/src/components/Community/Learn/styles.js b/src/components/Community/Learn/styles.module.css
similarity index 55%
rename from src/components/Community/Learn/styles.js
rename to src/components/Community/Learn/styles.module.css
index 6479afc7fd..7f2cf87340 100644
--- a/src/components/Community/Learn/styles.js
+++ b/src/components/Community/Learn/styles.module.css
@@ -1,9 +1,7 @@
-import styled from 'styled-components'
-
-export const Image = styled.img`
+.image {
   width: 80px;
   height: 80px;
   border-radius: 5px;
   float: left;
   margin: 5px 10px 0 0;
-`
+}
diff --git a/src/components/Community/Meet/index.js b/src/components/Community/Meet/index.js
deleted file mode 100644
index 3384f57360..0000000000
--- a/src/components/Community/Meet/index.js
+++ /dev/null
@@ -1,255 +0,0 @@
-import React, { useCallback } from 'react'
-import PropTypes from 'prop-types'
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
-
-import CommunityBlock from '../Block'
-import CommunitySection from '../Section'
-import Link from '../../Link'
-
-import { pluralizeComments } from '../../../utils/i18n'
-import { logEvent } from '../../../utils/ga'
-import { useIssues, useTopics } from '../../../utils/api'
-
-import data from '../data'
-
-const { description, mobileDescription, title } = data.section.meet
-
-import { Stats, StatLabel, StatLine, StatValue } from './styles'
-
-import {
-  Button,
-  Comments,
-  HeaderLink,
-  Item,
-  Items,
-  Line,
-  Link as LinkSC,
-  Meta,
-  Placeholder,
-  Wrapper
-} from '../styles'
-
-const logIssueAll = () => logEvent('community', 'issue', 'all')
-const logTopicAll = () => logEvent('community', 'topic', 'all')
-const logDiscord = () => logEvent('community', 'discord')
-
-function CommunityTopic({ url, title, date, comments, color }) {
-  const logTopic = useCallback(() => logEvent('community', 'forum', title), [
-    title
-  ])
-
-  return (
-    <Line>
-      <Link
-        as={LinkSC}
-        color={color}
-        href={url}
-        target="_blank"
-        onClick={logTopic}
-      >
-        {title}
-      </Link>
-      <Meta>
-        <Comments href={url} target="_blank" onClick={logTopic}>
-          {pluralizeComments(comments)}
-        </Comments>{' '}
-        • last activity {formatDistanceToNow(new Date(date), 'MMM, d') + ' '}
-        ago
-      </Meta>
-    </Line>
-  )
-}
-
-CommunityTopic.propTypes = {
-  url: PropTypes.string,
-  title: PropTypes.string,
-  date: PropTypes.string,
-  comments: PropTypes.number,
-  color: PropTypes.string
-}
-
-function CommunityIssue({ url, title, date, comments, color }) {
-  const logIssue = useCallback(() => logEvent('community', 'issue', title), [
-    title
-  ])
-
-  return (
-    <Line>
-      <Link
-        as={LinkSC}
-        color={color}
-        href={url}
-        target="_black"
-        onClick={logIssue}
-      >
-        {title}
-      </Link>
-      <Meta>
-        <Link href={url} target="_black" as={Comments} onClick={logIssue}>
-          {pluralizeComments(comments)}
-        </Link>
-        {' •'} opened {formatDistanceToNow(new Date(date), 'MMM, d')} ago
-      </Meta>
-    </Line>
-  )
-}
-
-CommunityIssue.propTypes = {
-  url: PropTypes.string,
-  title: PropTypes.string,
-  date: PropTypes.string,
-  comments: PropTypes.number,
-  color: PropTypes.string
-}
-
-export default function CommunityMeet({ theme }) {
-  const { erorr: issuesError, ready: issuesReady, result: issues } = useIssues()
-  const { erorr: topicsError, ready: topicsReady, result: topics } = useTopics()
-
-  return (
-    <Wrapper>
-      <CommunitySection
-        anchor="meet"
-        background="/img/community/meet_bg.jpg"
-        color={theme.color}
-        contentVisible={true}
-        description={description}
-        icon="/img/community/meet.svg"
-        mobileDescription={mobileDescription}
-        title={title}
-      >
-        <Items>
-          <Item>
-            <CommunityBlock
-              title={
-                <Link
-                  href="/chat"
-                  target="_black"
-                  as={HeaderLink}
-                  onClick={logDiscord}
-                >
-                  Join the Dev Chat
-                </Link>
-              }
-              action={
-                <Link
-                  theme={theme}
-                  href="/chat"
-                  target="_black"
-                  as={Button}
-                  onClick={logDiscord}
-                >
-                  Open Chat
-                </Link>
-              }
-              icon="/img/community/discord.svg"
-            >
-              <Meta>
-                Need urgent help? Ask advice from experienced developers online
-              </Meta>
-              <Stats>
-                <StatLine>
-                  <StatValue>{data.stats.users}</StatValue>
-                  <StatLabel>registered developers</StatLabel>
-                </StatLine>
-                <StatLine>
-                  <StatValue>{data.stats.messages}</StatValue>
-                  <StatLabel>messages posted over the past month</StatLabel>
-                </StatLine>
-              </Stats>
-            </CommunityBlock>
-          </Item>
-          <Item>
-            <CommunityBlock
-              title={
-                <Link
-                  href="https://discuss.dvc.org"
-                  target="_black"
-                  as={HeaderLink}
-                  onClick={logTopicAll}
-                >
-                  Ask a Question
-                </Link>
-              }
-              action={
-                topics && (
-                  <Link
-                    theme={theme}
-                    as={Button}
-                    href="https://discuss.dvc.org"
-                    target="_black"
-                    onClick={logTopicAll}
-                  >
-                    Read All Topics
-                  </Link>
-                )
-              }
-              icon="/img/community/discourse.svg"
-            >
-              {!topicsReady && <Placeholder>Loading...</Placeholder>}
-              {topicsError && (
-                <Placeholder>Forum unavailable right now</Placeholder>
-              )}
-              {topics &&
-                topics.map(topic => (
-                  <CommunityTopic
-                    {...topic}
-                    key={topic.url}
-                    color={theme.color}
-                  />
-                ))}
-            </CommunityBlock>
-          </Item>
-          <Item>
-            <CommunityBlock
-              title={
-                <Link
-                  href="https://github.com/iterative/dvc/issues"
-                  target="_black"
-                  as={HeaderLink}
-                  onClick={logIssueAll}
-                >
-                  Post an Issue
-                </Link>
-              }
-              action={
-                issues && (
-                  <Link
-                    theme={theme}
-                    href="https://github.com/iterative/dvc/issues"
-                    target="_black"
-                    as={Button}
-                    onClick={logIssueAll}
-                  >
-                    Read All Issues
-                  </Link>
-                )
-              }
-              icon="/img/community/github.svg"
-            >
-              {!issuesReady && <Placeholder>Loading...</Placeholder>}
-              {issuesError && (
-                <Placeholder>Github unavailable right now</Placeholder>
-              )}
-              {issues &&
-                issues.map(issue => (
-                  <CommunityIssue
-                    {...issue}
-                    key={issue.url}
-                    color={theme.color}
-                  />
-                ))}
-            </CommunityBlock>
-          </Item>
-        </Items>
-      </CommunitySection>
-    </Wrapper>
-  )
-}
-
-CommunityMeet.propTypes = {
-  theme: PropTypes.shape({
-    backgroundColor: PropTypes.string,
-    color: PropTypes.string
-  })
-}
diff --git a/src/components/Community/Meet/index.tsx b/src/components/Community/Meet/index.tsx
new file mode 100644
index 0000000000..cadbed6054
--- /dev/null
+++ b/src/components/Community/Meet/index.tsx
@@ -0,0 +1,248 @@
+import React, { useCallback } from 'react'
+import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+
+import { ICommunitySectionTheme } from '../'
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import Block from '../Block'
+import Section from '../Section'
+import Link from '../../Link'
+import { pluralizeComments } from '../../../utils/i18n'
+import { logEvent } from '../../../utils/ga'
+import {
+  useIssues,
+  useTopics,
+  IGithubIssue,
+  IDiscussTopic
+} from '../../../utils/api'
+
+import data from '../data.json'
+import sharedStyles from '../styles.module.css'
+import styles from './styles.module.css'
+
+const { description, mobileDescription, title } = data.section.meet
+const logIssueAll = () => logEvent('community', 'issue', 'all')
+const logTopicAll = () => logEvent('community', 'topic', 'all')
+const logDiscord = () => logEvent('community', 'discord')
+
+const Topic: React.SFC<{ color: string } & IDiscussTopic> = ({
+  url,
+  title,
+  date,
+  comments,
+  color
+}) => {
+  const logTopic = useCallback(() => logEvent('community', 'forum', title), [
+    title
+  ])
+
+  return (
+    <div className={sharedStyles.line}>
+      <Link
+        className={sharedStyles.link}
+        style={{ color }}
+        href={url}
+        target="_blank"
+        onClick={logTopic}
+      >
+        {title}
+      </Link>
+      <div className={sharedStyles.meta}>
+        <Link
+          className={sharedStyles.commentsLink}
+          href={url}
+          target="_blank"
+          onClick={logTopic}
+        >
+          {pluralizeComments(comments)}
+        </Link>
+        {` • last activity ${formatDistanceToNow(new Date(date))} ago`}
+      </div>
+    </div>
+  )
+}
+
+const Issue: React.SFC<{ color: string } & IGithubIssue> = ({
+  url,
+  title,
+  date,
+  comments,
+  color
+}) => {
+  const logIssue = useCallback(() => logEvent('community', 'issue', title), [
+    title
+  ])
+
+  return (
+    <div className={sharedStyles.line}>
+      <Link
+        className={sharedStyles.link}
+        style={{ color }}
+        href={url}
+        target="_blank"
+        onClick={logIssue}
+      >
+        {title}
+      </Link>
+      <div className={styles.meta}>
+        <Link
+          className={sharedStyles.commentsLink}
+          href={url}
+          target="_blank"
+          onClick={logIssue}
+        >
+          {pluralizeComments(comments)}
+        </Link>
+        {` • opened ${formatDistanceToNow(new Date(date))} ago`}
+      </div>
+    </div>
+  )
+}
+
+const Meet: React.SFC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
+  const { error: issuesError, ready: issuesReady, result: issues } = useIssues()
+  const { error: topicsError, ready: topicsReady, result: topics } = useTopics()
+
+  return (
+    <LayoutWidthContainer className={sharedStyles.wrapper}>
+      <Section
+        anchor="meet"
+        background="/img/community/meet_bg.jpg"
+        color={theme.color}
+        contentVisible={true}
+        description={description}
+        icon="/img/community/meet.svg"
+        mobileDescription={mobileDescription}
+        title={title}
+      >
+        <div className={sharedStyles.items}>
+          <div className={sharedStyles.item}>
+            <Block
+              title={
+                <Link
+                  className={sharedStyles.headerLink}
+                  href="/chat"
+                  target="_blank"
+                  onClick={logDiscord}
+                >
+                  Join the Dev Chat
+                </Link>
+              }
+              action={
+                <Link
+                  className={sharedStyles.button}
+                  style={theme}
+                  href="/chat"
+                  target="_blank"
+                  onClick={logDiscord}
+                >
+                  Open Chat
+                </Link>
+              }
+              icon="/img/community/discord.svg"
+            >
+              <div className={sharedStyles.meta}>
+                Need urgent help? Ask advice from experienced developers online
+              </div>
+              <div className={styles.stats}>
+                <div className={styles.statLine}>
+                  <div className={styles.statValue}>{data.stats.users}</div>
+                  <div className={styles.statLabel}>registered developers</div>
+                </div>
+                <div className={styles.statLine}>
+                  <div className={styles.statValue}>{data.stats.messages}</div>
+                  <div className={styles.statLabel}>
+                    messages posted over the past month
+                  </div>
+                </div>
+              </div>
+            </Block>
+          </div>
+          <div className={sharedStyles.item}>
+            <Block
+              title={
+                <Link
+                  className={sharedStyles.headerLink}
+                  href="https://discuss.dvc.org"
+                  target="_blank"
+                  onClick={logTopicAll}
+                >
+                  Ask a Question
+                </Link>
+              }
+              action={
+                topics && (
+                  <Link
+                    className={sharedStyles.button}
+                    style={theme}
+                    href="https://discuss.dvc.org"
+                    target="_blank"
+                    onClick={logTopicAll}
+                  >
+                    Read All Topics
+                  </Link>
+                )
+              }
+              icon="/img/community/discourse.svg"
+            >
+              {!topicsReady && (
+                <div className={sharedStyles.placeholder}>Loading...</div>
+              )}
+              {topicsError && (
+                <div className={sharedStyles.placeholder}>
+                  Forum unavailable right now
+                </div>
+              )}
+              {topics &&
+                topics.map(topic => (
+                  <Topic {...topic} key={topic.url} color={theme.color} />
+                ))}
+            </Block>
+          </div>
+          <div className={sharedStyles.item}>
+            <Block
+              title={
+                <Link
+                  className={sharedStyles.headerLink}
+                  href="https://github.com/iterative/dvc/issues"
+                  target="_blank"
+                  onClick={logIssueAll}
+                >
+                  Post an Issue
+                </Link>
+              }
+              action={
+                issues && (
+                  <Link
+                    className={sharedStyles.button}
+                    style={theme}
+                    href="https://github.com/iterative/dvc/issues"
+                    target="_blank"
+                    onClick={logIssueAll}
+                  >
+                    Read All Issues
+                  </Link>
+                )
+              }
+              icon="/img/community/github.svg"
+            >
+              {!issuesReady && (
+                <div className={sharedStyles.placeholder}>Loading...</div>
+              )}
+              {issuesError && (
+                <div className={sharedStyles.placeholder}>
+                  Github unavailable right now
+                </div>
+              )}
+              {issues &&
+                issues.map(issue => (
+                  <Issue {...issue} key={issue.url} color={theme.color} />
+                ))}
+            </Block>
+          </div>
+        </div>
+      </Section>
+    </LayoutWidthContainer>
+  )
+}
+
+export default Meet
diff --git a/src/components/Community/Meet/styles.js b/src/components/Community/Meet/styles.module.css
similarity index 54%
rename from src/components/Community/Meet/styles.js
rename to src/components/Community/Meet/styles.module.css
index 37fbe5bf41..f611fd26fa 100644
--- a/src/components/Community/Meet/styles.js
+++ b/src/components/Community/Meet/styles.module.css
@@ -1,26 +1,23 @@
-import styled from 'styled-components'
-import { media } from '../../../styles'
-
-export const Stats = styled.div`
-  ${media.tablet`
+.stats {
+  @media (--sm-scr) {
     display: flex;
     flex-direction: row;
     margin-top: 15px;
-  `}
-`
+  }
+}
 
-export const StatLabel = styled.div`
+.statLabel {
   font-size: 16px;
   line-height: 20px;
-  color: #838d93;
-`
+  color: var(--color-gray);
+}
 
-export const StatLine = styled.div`
+.statLine {
   display: flex;
   align-items: center;
   margin-top: 25px;
 
-  ${media.tablet`
+  @media (--sm-scr) {
     flex-direction: column;
     flex-basis: 50%;
     align-items: flex-start;
@@ -29,23 +26,22 @@ export const StatLine = styled.div`
     & + & {
       margin-left: 25px;
     }
-  `}
-`
+  }
+}
 
-export const StatValue = styled.div`
+.statValue {
   flex: 0 0 124px;
   margin-right: 20px;
+  font-family: var(--font-brandon);
   font-size: 40px;
-  font-family: BrandonGrotesque;
+  line-height: 50px;
   font-weight: 900;
   text-align: right;
-  line-height: 50px;
-  color: #24292e;
+  color: var(--color-black);
 
-  ${media.tablet`
+  @media (--sm-scr) {
     flex: initial;
     font-size: 30px;
-    font-family: BrandonGrotesque;
     line-height: 40px;
-  `}
-`
+  }
+}
diff --git a/src/components/Community/Section/index.js b/src/components/Community/Section/index.js
deleted file mode 100644
index c13a6ff357..0000000000
--- a/src/components/Community/Section/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useCallback, useEffect, useState } from 'react'
-import { useLocation } from '@reach/router'
-import { Collapse } from 'react-collapse'
-import { useWindowSize } from 'react-use'
-
-import {
-  DesktopDescription,
-  Header,
-  Icon,
-  MobileDescription,
-  Picture,
-  Title,
-  Wrapper
-} from './styles'
-
-import { sizes } from '../../../styles'
-
-export default function CommunitySection({
-  anchor,
-  background,
-  color,
-  contentVisible = false,
-  children,
-  description,
-  icon,
-  mobileDescription,
-  title
-}) {
-  const [isTablet, setIsTablet] = useState(false)
-  const [isContentVisible, setIsContentVisible] = useState(contentVisible)
-  const toggleVisibility = useCallback(
-    () => setIsContentVisible(!isContentVisible),
-    [isContentVisible]
-  )
-
-  const { width } = useWindowSize()
-  const location = useLocation()
-
-  useEffect(() => {
-    if (anchor && location.hash === `#${anchor}`) {
-      setIsContentVisible(true)
-    }
-  }, [location.hash])
-
-  useEffect(() => setIsTablet(width <= sizes.tablet), [width])
-
-  return (
-    <Wrapper
-      hasBg={!!background}
-      id={anchor}
-      isContentVisible={isContentVisible}
-    >
-      <Header color={color} onClick={toggleVisibility}>
-        <Icon src={icon} />
-        <div>
-          <Title isContentVisible={isContentVisible}>{title}</Title>
-          <DesktopDescription>{description}</DesktopDescription>
-          <MobileDescription>{mobileDescription}</MobileDescription>
-        </div>
-      </Header>
-      {background && <Picture src={background} />}
-
-      {isTablet ? (
-        <Collapse isOpened={isContentVisible}>{children}</Collapse>
-      ) : (
-        children
-      )}
-    </Wrapper>
-  )
-}
-
-CommunitySection.propTypes = {
-  anchor: PropTypes.string,
-  background: PropTypes.string,
-  color: PropTypes.string,
-  contentVisible: PropTypes.bool,
-  children: PropTypes.node,
-  description: PropTypes.string,
-  icon: PropTypes.string,
-  mobileDescription: PropTypes.string,
-  title: PropTypes.string
-}
diff --git a/src/components/Community/Section/index.tsx b/src/components/Community/Section/index.tsx
new file mode 100644
index 0000000000..908b324602
--- /dev/null
+++ b/src/components/Community/Section/index.tsx
@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import cn from 'classnames'
+import { useLocation } from '@reach/router'
+import { Collapse } from 'react-collapse'
+import { useWindowSize } from 'react-use'
+
+import { screens } from '../../../../config/postcss/media'
+
+import styles from './styles.module.css'
+
+interface ICommunitySection {
+  anchor: string
+  background?: string
+  color: string
+  contentVisible?: boolean
+  children: React.ReactNode
+  description: string
+  icon: string
+  mobileDescription: string
+  title: string
+}
+
+const Section: React.SFC<ICommunitySection> = ({
+  anchor,
+  background,
+  color,
+  contentVisible = false,
+  children,
+  description,
+  icon,
+  mobileDescription,
+  title
+}) => {
+  const [isTablet, setIsTablet] = useState(false)
+  const [isContentVisible, setIsContentVisible] = useState(contentVisible)
+  const toggleVisibility = useCallback(
+    () => setIsContentVisible(!isContentVisible),
+    [isContentVisible]
+  )
+  const toggleFromKeyboard = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.which === 13 || e.which === 32) {
+        toggleVisibility()
+      }
+    },
+    [toggleVisibility]
+  )
+  const { width } = useWindowSize()
+  const location = useLocation()
+
+  useEffect(() => {
+    if (anchor && location.hash === `#${anchor}`) {
+      setIsContentVisible(true)
+    }
+  }, [location.hash])
+
+  useEffect(() => setIsTablet(width <= screens.tablet), [width])
+
+  return (
+    <div
+      className={cn(styles.container, background && styles.hasBg)}
+      id={anchor}
+    >
+      <div
+        className={styles.header}
+        style={{ color }}
+        onClick={toggleVisibility}
+        onKeyDown={toggleFromKeyboard}
+        role="button"
+        tabIndex={0}
+      >
+        <img className={styles.icon} src={icon} alt="" />
+        <div>
+          <div
+            className={cn(
+              styles.title,
+              isContentVisible && styles.isContentVisible
+            )}
+          >
+            {title}
+          </div>
+          <div className={styles.description}>{description}</div>
+          <div className={cn(styles.description, styles.mobile)}>
+            {mobileDescription}
+          </div>
+        </div>
+      </div>
+      {background && <img className={styles.picture} src={background} alt="" />}
+
+      {isTablet ? (
+        <Collapse isOpened={isContentVisible}>{children}</Collapse>
+      ) : (
+        children
+      )}
+    </div>
+  )
+}
+
+export default Section
diff --git a/src/components/Community/Section/styles.js b/src/components/Community/Section/styles.js
deleted file mode 100644
index 2c4b416985..0000000000
--- a/src/components/Community/Section/styles.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import styled from 'styled-components'
-import { media } from '../../../styles'
-
-export const Wrapper = styled.div`
-  position: relative;
-  margin: 50px -50px;
-  padding: ${({ hasBg }) => (hasBg ? '0 50px 260px' : '0 50px')};
-
-  ${media.desktop`
-    padding: ${({ hasBg }) => (hasBg ? '0 65px 260px' : '0 65px')};
-  `}
-
-  ${media.tablet`
-    margin: 0;
-    padding: 20px 0;
-  `}
-
-  .ReactCollapse--collapse {
-    transition: height 500ms;
-  }
-`
-
-export const Header = styled.div`
-  display: flex;
-  color: ${({ color }) => color};
-`
-
-export const Title = styled.div`
-  font-size: 40px;
-  font-family: BrandonGrotesque;
-  font-weight: 500;
-  line-height: 60px;
-
-  ${media.tablet`
-    font-size: 30px;
-    line-height: 35px;
-    cursor: pointer;
-
-    &::after {
-      content: '';
-
-      position: relative;
-      display: inline-block;
-      width: 0;
-      height: 0;
-      margin-left: 10px;
-      border-left: 7px solid transparent;
-      border-right: 7px solid transparent;
-      border-top: 12px solid currentColor;
-      transition: transform 200ms;
-
-      ${({ isContentVisible }) =>
-        isContentVisible &&
-        `transform: rotate(-180deg)
-      `}
-      
-    }
-  `}
-`
-
-export const Icon = styled.img`
-  width: 50px;
-  height: 50px;
-  margin: 5px 10px 0 0;
-`
-
-const Description = styled.div`
-  max-width: 600px;
-  font-size: 16px;
-  line-height: 24px;
-  color: #838d93;
-
-  ${media.tablet`
-    display: none;
-  `};
-`
-
-export const DesktopDescription = styled(Description)`
-  max-width: 600px;
-
-  ${media.tablet`
-    display: none;
-  `};
-`
-
-export const MobileDescription = styled(Description)`
-  display: none;
-
-  ${media.tablet`
-    display: block;
-  `};
-`
-
-export const Picture = styled.img`
-  z-index: -1;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 1100px;
-  height: 450px;
-  margin-left: -550px;
-
-  ${media.tablet`
-    display: none;
-  `}
-`
diff --git a/src/components/Community/Section/styles.module.css b/src/components/Community/Section/styles.module.css
new file mode 100644
index 0000000000..bbecaae494
--- /dev/null
+++ b/src/components/Community/Section/styles.module.css
@@ -0,0 +1,107 @@
+.container {
+  position: relative;
+  margin: 50px -50px;
+  padding: 0 50px;
+
+  &.hasBg {
+    padding: 0 50px 260px;
+  }
+
+  @media (--md-scr) {
+    padding: 0 40px;
+    margin-left: -15px;
+    margin-right: -15px;
+    overflow: hidden;
+
+    &.hasBg {
+      padding: 0 40px 260px;
+    }
+  }
+
+  @media (--sm-scr) {
+    margin: 0;
+    padding: 20px 0;
+
+    &.hasBg {
+      margin: 0;
+      padding: 20px 0;
+    }
+  }
+
+  :global(.ReactCollapse--collapse) {
+    transition: height 500ms;
+  }
+}
+
+.header {
+  display: flex;
+}
+
+.title {
+  font-family: var(--font-brandon);
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 60px;
+
+  @media (--sm-scr) {
+    font-size: 30px;
+    line-height: 35px;
+    cursor: pointer;
+
+    &::after {
+      content: '';
+      position: relative;
+      display: inline-block;
+      width: 0;
+      height: 0;
+      margin-left: 10px;
+      border-left: 7px solid transparent;
+      border-right: 7px solid transparent;
+      border-top: 12px solid currentColor;
+      transition: transform 200ms;
+    }
+
+    &.isContentVisible::after {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+.icon {
+  width: 50px;
+  height: 50px;
+  margin: 5px 10px 0 0;
+}
+
+.description {
+  max-width: 600px;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-gray);
+
+  @media (--sm-scr) {
+    display: none;
+  }
+
+  &.mobile {
+    display: none;
+
+    @media (--sm-scr) {
+      display: block;
+    }
+  }
+}
+
+.picture {
+  position: absolute;
+  z-index: -1;
+  bottom: 0;
+  left: 50%;
+  width: 1100px;
+  height: 450px;
+  margin-left: -550px;
+
+  @media (--sm-scr) {
+    display: none;
+  }
+}
diff --git a/src/components/Community/index.js b/src/components/Community/index.js
deleted file mode 100644
index 9d59fde4f9..0000000000
--- a/src/components/Community/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-
-import SubscribeSection from '../SubscribeSection'
-
-import CommunityContribute from './Contribute'
-import CommunityEvents from './Events'
-import CommunityHero from './Hero'
-import CommunityLearn from './Learn'
-import CommunityMeet from './Meet'
-
-import { PageWrapper } from './styles'
-
-const themes = {
-  green: { backgroundColor: '#C2E6EE', color: '#13ADC7' },
-  orange: { backgroundColor: '#EFD8D1', color: '#F46737' },
-  purple: { backgroundColor: '#DCD6F1', color: '#955DD6' }
-}
-
-export default function Community() {
-  return (
-    <>
-      <PageWrapper>
-        <CommunityHero />
-        <CommunityMeet theme={themes.purple} />
-        <CommunityContribute theme={themes.orange} />
-        <CommunityLearn theme={themes.green} />
-        <CommunityEvents theme={themes.purple} />
-        <SubscribeSection />
-      </PageWrapper>
-    </>
-  )
-}
diff --git a/src/components/Community/index.tsx b/src/components/Community/index.tsx
new file mode 100644
index 0000000000..b299071fb2
--- /dev/null
+++ b/src/components/Community/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import PageContent from '../PageContent'
+
+import SubscribeSection from '../SubscribeSection'
+import Hero from './Hero'
+import Meet from './Meet'
+import Contribute from './Contribute'
+import Learn from './Learn'
+import Events from './Events'
+
+import styles from './styles.module.css'
+
+const themes = {
+  green: { backgroundColor: '#C2E6EE', color: '#13ADC7' },
+  orange: { backgroundColor: '#EFD8D1', color: '#F46737' },
+  purple: { backgroundColor: '#DCD6F1', color: '#955DD6' }
+}
+
+export interface ICommunitySectionTheme {
+  backgroundColor: string
+  color: string
+}
+
+export default function Community() {
+  return (
+    <>
+      <PageContent className={styles.content}>
+        <Hero />
+        <Meet theme={themes.purple} />
+        <Contribute theme={themes.orange} />
+        <Learn theme={themes.green} />
+        <Events theme={themes.purple} />
+      </PageContent>
+      <SubscribeSection />
+    </>
+  )
+}
diff --git a/src/components/Community/styles.js b/src/components/Community/styles.js
deleted file mode 100644
index 8409366018..0000000000
--- a/src/components/Community/styles.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import styled from 'styled-components'
-import { media } from '../../styles'
-
-export const Comments = styled.a`
-  text-decoration: none;
-  color: inherit;
-
-  &:hover {
-    opacity: 0.7;
-  }
-`
-
-export const Item = styled.div`
-  display: flex;
-  flex-grow: 1;
-  flex-basis: 0;
-  align-items: stretch;
-
-  & + & {
-    margin-left: 30px;
-
-    ${media.desktop`
-      margin-left: 15px;
-    `}
-
-    ${media.tablet`
-      display: block;
-      margin: 15px 0 0 0;
-    `}
-  }
-`
-
-export const Items = styled.div`
-  display: flex;
-  align-items: stretch;
-  padding-top: 40px;
-
-  ${media.phablet`
-    padding-top: 20px;
-  `}
-
-  ${media.tablet`
-    display: block;
-  `}
-`
-
-export const Line = styled.div`
-  overflow: hidden;
-
-  & + & {
-    margin-top: 20px;
-  }
-`
-export const ImageLine = styled(Line)`
-  display: flex;
-`
-
-export const Link = styled.a`
-  font-size: ${({ large }) => (large ? '24px' : '16px')};
-  font-family: BrandonGrotesque;
-  font-weight: 600;
-  line-height: ${({ large }) => (large ? '34px' : '18px')};
-  text-decoration: none;
-  word-break: break-word;
-  overflow-wrap: anywhere;
-  color: ${({ color }) => color};
-
-  &:hover {
-    opacity: 0.7;
-  }
-`
-
-export const Meta = styled.div`
-  line-height: 20px;
-`
-
-export const Placeholder = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-`
-
-export const Wrapper = styled.div`
-  max-width: 1000px;
-  margin: 0 auto;
-
-  ${media.tablet`
-    margin: 0 15px;
-
-    & + & {
-      border-top: 1px solid #e6e8e9;
-    }
-  `}
-`
-
-export const TextWrapper = styled.div``
-
-export const NbspWrapper = styled.span`
-  white-space: nowrap;
-`
-
-export const HeaderLink = styled.a`
-  font-family: BrandonGrotesque;
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 34px;
-  color: #24292e;
-  text-decoration: none;
-
-  &:hover {
-    opacity: 0.7;
-  }
-`
-
-export const PageWrapper = styled.div`
-  ${media.tablet`
-    padding-bottom: 30px;
-  `}
-
-  ${media.phablet`
-    padding-bottom: 0;
-  `}
-`
-
-export const Button = styled.a`
-  display: block;
-  height: 38px;
-  border-radius: 4px;
-  font-size: 16px;
-  font-family: BrandonGrotesque;
-  font-weight: 500;
-  line-height: 38px;
-  text-decoration: none;
-  text-align: center;
-  color: ${({ theme: { color } }) => (color ? color : '#999')};
-  background-color: ${({ theme: { backgroundColor } }) =>
-    backgroundColor ? backgroundColor : '#ddd'};
-
-  &:hover {
-    opacity: 0.7;
-  }
-`
diff --git a/src/components/Community/styles.module.css b/src/components/Community/styles.module.css
new file mode 100644
index 0000000000..d7a40ba3d1
--- /dev/null
+++ b/src/components/Community/styles.module.css
@@ -0,0 +1,135 @@
+.content {
+  @media (--xs-scr) {
+    padding-bottom: 0;
+  }
+}
+
+.commentsLink {
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.items {
+  display: flex;
+  align-items: stretch;
+  padding-top: 40px;
+
+  @media (--sm-scr) {
+    display: block;
+  }
+
+  @media (--xs-scr) {
+    padding-top: 20px;
+  }
+}
+
+.item {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: 0;
+  align-items: stretch;
+
+  & + & {
+    margin-left: 30px;
+
+    @media (--md-scr) {
+      margin-left: 15px;
+    }
+
+    @media (--sm-scr) {
+      display: block;
+      margin: 15px 0 0 0;
+    }
+  }
+}
+
+.line {
+  overflow: hidden;
+
+  & + & {
+    margin-top: 20px;
+  }
+
+  &.image {
+    display: flex;
+  }
+}
+
+.link {
+  font-family: var(--font-brandon);
+  font-size: 16px;
+  line-height: 18px;
+  font-weight: 600;
+  text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+
+  &.large {
+    font-size: 24px;
+    line-height: 34px;
+  }
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.meta {
+  line-height: 20px;
+}
+
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.wrapper {
+  @media (--sm-scr) {
+    padding: 0 15px;
+
+    & + & {
+      border-top: 1px solid #e6e8e9;
+    }
+  }
+}
+
+.nbsp {
+  white-space: nowrap;
+}
+
+.headerLink {
+  font-family: var(--font-brandon);
+  font-size: 24px;
+  line-height: 34px;
+  font-weight: 500;
+  color: var(--color-black);
+  text-decoration: none;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.button {
+  display: block;
+  height: 38px;
+  border-radius: 4px;
+  font-family: var(--font-brandon);
+  font-size: 16px;
+  line-height: 38px;
+  font-weight: 500;
+  text-decoration: none;
+  text-align: center;
+  color: #999;
+  background-color: #ddd;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
diff --git a/src/components/LayoutWidthContainer/styles.module.css b/src/components/LayoutWidthContainer/styles.module.css
index d95700c8f0..a0fcabfba6 100644
--- a/src/components/LayoutWidthContainer/styles.module.css
+++ b/src/components/LayoutWidthContainer/styles.module.css
@@ -9,7 +9,6 @@
 
   @media (--md-scr) {
     max-width: 100%;
-    padding: 0 61px 0 67px;
   }
 
   @media (--xs-scr) {
diff --git a/src/components/PageContent/index.tsx b/src/components/PageContent/index.tsx
index 3767f0ebb0..dc25cfe53c 100644
--- a/src/components/PageContent/index.tsx
+++ b/src/components/PageContent/index.tsx
@@ -1,9 +1,15 @@
 import React from 'react'
+import cn from 'classnames'
 
 import styles from './styles.module.css'
 
-const PageContent: React.SFC<{ children: React.ReactNode }> = ({
-  children
-}) => <div className={styles.pageContent}>{children}</div>
+interface IPageContentProps {
+  className?: string
+  children: React.ReactNode
+}
+
+const PageContent: React.SFC<IPageContentProps> = ({ className, children }) => (
+  <div className={cn(styles.pageContent, className)}>{children}</div>
+)
 
 export default PageContent
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 3843c84c17..ee60bdf7ab 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -37,14 +37,14 @@ const useAPICall = <R>(url: string) => {
   return { error, ready, result }
 }
 
-interface IGithubIssue {
+export interface IGithubIssue {
   title: string
   url: string
   comments: number
   date: string
 }
 
-interface IGithubIssuesResponse {
+export interface IGithubIssuesResponse {
   issues: Array<IGithubIssue>
 }
 
@@ -54,14 +54,14 @@ export function useIssues() {
   return { ...response, result: response.result?.issues }
 }
 
-interface IDiscussTopic {
+export interface IDiscussTopic {
   title: string
   comments: number
   date: string
   url: string
 }
 
-interface IDiscussTopicsResponse {
+export interface IDiscussTopicsResponse {
   topics: Array<IDiscussTopic>
 }
 
@@ -71,7 +71,7 @@ export function useTopics() {
   return { ...response, result: response.result?.topics }
 }
 
-interface IDiscussCommentsCountResponse {
+export interface IDiscussCommentsCountResponse {
   count: number
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index d3c6e776be..78f0d9e21d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
+    "resolveJsonModule": true,
     "lib": ["dom", "es2015", "es2017"],
     "jsx": "react",
     "sourceMap": true,
diff --git a/yarn.lock b/yarn.lock
index dd728607ff..9eaf10e3b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10239,11 +10239,6 @@ lodash.every@^4.6.0:
   resolved "https://registry.yarnpkg.com/lodash.every/-/lodash.every-4.6.0.tgz#eb89984bebc4364279bb3aefbbd1ca19bfa6c6a7"
   integrity sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc=
 
-lodash.fill@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.fill/-/lodash.fill-3.4.0.tgz#a3c74ae640d053adf0dc2079f8720788e8bfef85"
-  integrity sha1-o8dK5kDQU63w3CB5+HIHiOi/74U=
-
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"

From 4664a056dbb4259e216c993678d0db564c7dd30e Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Fri, 3 Apr 2020 18:20:22 +0300
Subject: [PATCH 15/51] Refactor Documentation layout components to TS

---
 package.json                                  |   6 +-
 .../Layout/SearchForm/{index.js => index.tsx} |  27 +++--
 .../{styles.js => styles.module.css}          |  33 +++---
 .../SidebarMenu/{index.js => index.tsx}       | 109 ++++++++++--------
 .../{styles.js => styles.module.css}          | 101 ++++++++--------
 src/components/Documentation/Layout/index.js  |  53 ---------
 src/components/Documentation/Layout/index.tsx |  52 +++++++++
 .../Layout/{styles.js => styles.module.css}   |  98 ++++++++--------
 .../Documentation/Markdown/styles.js          |   3 +-
 src/components/HamburgerIcon/index.tsx        |   2 +-
 src/components/LayoutFooter/index.tsx         |   3 +-
 src/components/LayoutHeader/index.tsx         |   5 +-
 src/components/Page/index.tsx                 |   4 +-
 yarn.lock                                     |  14 ++-
 14 files changed, 266 insertions(+), 244 deletions(-)
 rename src/components/Documentation/Layout/SearchForm/{index.js => index.tsx} (70%)
 rename src/components/Documentation/Layout/SearchForm/{styles.js => styles.module.css} (71%)
 rename src/components/Documentation/Layout/SidebarMenu/{index.js => index.tsx} (55%)
 rename src/components/Documentation/Layout/SidebarMenu/{styles.js => styles.module.css} (55%)
 delete mode 100644 src/components/Documentation/Layout/index.js
 create mode 100644 src/components/Documentation/Layout/index.tsx
 rename src/components/Documentation/Layout/{styles.js => styles.module.css} (55%)

diff --git a/package.json b/package.json
index 426a2a91c9..622bc08e85 100644
--- a/package.json
+++ b/package.json
@@ -37,8 +37,6 @@
     "@reach/portal": "^0.9.0",
     "@reach/router": "^1.3.1",
     "@reach/tooltip": "^0.9.1",
-    "@types/react": "^16.9.27",
-    "@types/styled-components": "^5.0.1",
     "classnames": "^2.2.6",
     "color": "^3.1.2",
     "compression": "^1.7.4",
@@ -91,10 +89,14 @@
     "@svgr/webpack": "^5.2.0",
     "@types/classnames": "^2.2.10",
     "@types/isomorphic-fetch": "^0.0.35",
+    "@types/lodash.includes": "^4.3.6",
+    "@types/promise-polyfill": "^6.0.3",
+    "@types/react": "^16.9.27",
     "@types/react-collapse": "^5.0.0",
     "@types/react-helmet": "^5.0.15",
     "@types/react-popover": "^0.5.3",
     "@types/react-slick": "^0.23.4",
+    "@types/styled-components": "^5.0.1",
     "@types/vfile-message": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
     "@typescript-eslint/parser": "^2.24.0",
diff --git a/src/components/Documentation/Layout/SearchForm/index.js b/src/components/Documentation/Layout/SearchForm/index.tsx
similarity index 70%
rename from src/components/Documentation/Layout/SearchForm/index.js
rename to src/components/Documentation/Layout/SearchForm/index.tsx
index 265d7581ff..d15aa3a0bf 100644
--- a/src/components/Documentation/Layout/SearchForm/index.js
+++ b/src/components/Documentation/Layout/SearchForm/index.tsx
@@ -2,9 +2,17 @@ import React, { useEffect, useState } from 'react'
 import Promise from 'promise-polyfill'
 import { loadResource } from '../../../../utils/resources'
 
-import { SearchArea, Input, Wrapper } from './styles'
+import styles from './styles.module.css'
 
-export default function SearchForm(props) {
+declare global {
+  // eslint-disable-next-line @typescript-eslint/interface-name-prefix
+  interface Window {
+    define?: { amd: boolean }
+    docsearch?: (opts: object) => void
+  }
+}
+
+const SearchForm: React.SFC = props => {
   const [isLoaded, setLoaded] = useState(false)
 
   useEffect(() => {
@@ -41,15 +49,18 @@ export default function SearchForm(props) {
   }
 
   return (
-    <SearchArea>
-      <Wrapper novalidate>
-        <Input
+    <div className={styles.searchArea}>
+      <div className={styles.container}>
+        <input
+          className={styles.input}
           type="text"
           id="doc-search"
-          placeholder={`Search docs`}
+          placeholder="Search docs"
           {...props}
         />
-      </Wrapper>
-    </SearchArea>
+      </div>
+    </div>
   )
 }
+
+export default SearchForm
diff --git a/src/components/Documentation/Layout/SearchForm/styles.js b/src/components/Documentation/Layout/SearchForm/styles.module.css
similarity index 71%
rename from src/components/Documentation/Layout/SearchForm/styles.js
rename to src/components/Documentation/Layout/SearchForm/styles.module.css
index 7fa70fd931..041818d472 100644
--- a/src/components/Documentation/Layout/SearchForm/styles.js
+++ b/src/components/Documentation/Layout/SearchForm/styles.module.css
@@ -1,8 +1,4 @@
-import styled from 'styled-components'
-
-import { media } from '../../../../styles'
-
-export const SearchArea = styled.div`
+.searchArea {
   box-sizing: border-box;
   height: 60px;
   padding-top: 10px;
@@ -17,38 +13,37 @@ export const SearchArea = styled.div`
   position: sticky;
   top: var(--layout-header-height-collapsed);
 
-  ${media.phablet`
+  @media (--xs-scr) {
     position: relative;
     padding: 10px 20px 0;
     top: 0;
-  `};
+  }
 
-  form {
+  input {
     height: 40px;
   }
-`
+}
 
-export const Wrapper = styled.form`
+.container {
   width: 100%;
   height: 100%;
   display: flex;
-`
+}
 
-export const Input = styled.input`
+.input {
+  box-sizing: border-box;
   display: flex;
   flex: 1;
+  width: 240px;
   height: 100%;
-  border-radius: 200px;
-  background-color: #ffffff;
-  border: solid 1px #dbe4ea;
   padding-left: 48px;
   padding-right: 24px;
+  border: solid 1px var(--color-lighter-blue);
+  border-radius: 200px;
+  background-color: #fff;
   background-image: url('/img/search.svg');
   background-repeat: no-repeat;
   background-position: 15px center;
   font-size: 16px;
   font-weight: 500;
-  width: 240px;
-  box-sizing: border-box;
-  display: block;
-`
+}
diff --git a/src/components/Documentation/Layout/SidebarMenu/index.js b/src/components/Documentation/Layout/SidebarMenu/index.tsx
similarity index 55%
rename from src/components/Documentation/Layout/SidebarMenu/index.js
rename to src/components/Documentation/Layout/SidebarMenu/index.tsx
index f764aaa60c..680d0a14e2 100644
--- a/src/components/Documentation/Layout/SidebarMenu/index.js
+++ b/src/components/Documentation/Layout/SidebarMenu/index.tsx
@@ -1,24 +1,38 @@
 import React, { useEffect, useRef, useState } from 'react'
+import cn from 'classnames'
 import { Collapse } from 'react-collapse'
 import PerfectScrollbar from 'perfect-scrollbar'
-import PropTypes from 'prop-types'
 import includes from 'lodash.includes'
 
-import 'perfect-scrollbar/css/perfect-scrollbar.css'
-
+import ShowOnly from '../../../ShowOnly'
 import DownloadButton from '../../../DownloadButton'
 import Link from '../../../Link'
 
 import {
+  structure,
   getParentsListFromPath,
   getPathWithSoruce
 } from '../../../../utils/sidebar'
 
-import { OnlyDesktop } from '../../../../styles'
-
-import { Menu, SectionLink, SectionLinks, Sections, SideFooter } from './styles'
+import 'perfect-scrollbar/css/perfect-scrollbar.css'
+import styles from './styles.module.css'
+
+interface ISidebarMenuItemProps {
+  children?: Array<{ label: string; path: string; source: boolean | string }>
+  label: string
+  path: string
+  source: boolean | string
+  onClick: (e: React.MouseEvent) => void
+  activePaths?: Array<string>
+}
 
-function SidebarMenuItem({ children, label, path, activePaths, onClick }) {
+const SidebarMenuItem: React.SFC<ISidebarMenuItemProps> = ({
+  children,
+  label,
+  path,
+  activePaths,
+  onClick
+}) => {
   const isActive = activePaths && includes(activePaths, path)
   const isRootParent =
     activePaths && activePaths.length > 1 && activePaths[0] === path
@@ -27,16 +41,18 @@ function SidebarMenuItem({ children, label, path, activePaths, onClick }) {
     <>
       <Link
         href={getPathWithSoruce(path)}
-        as={SectionLink}
         id={path}
-        isActive={isActive}
+        className={cn(
+          styles.sectionLink,
+          isActive && styles.active,
+          isRootParent && 'docSearch-lvl0'
+        )}
         onClick={onClick}
-        className={isRootParent ? 'docSearch-lvl0' : ''}
       >
         {label}
       </Link>
       {children && (
-        <Collapse isOpened={isActive}>
+        <Collapse isOpened={!!isActive}>
           {children.map(item => (
             <SidebarMenuItem
               key={item.path}
@@ -51,37 +67,34 @@ function SidebarMenuItem({ children, label, path, activePaths, onClick }) {
   )
 }
 
-SidebarMenuItem.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.object),
-  label: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
-  source: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
-  onClick: PropTypes.func,
-  activePaths: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.bool
-  ]).isRequired
+interface ISidebarMenuProps {
+  currentPath: string
+  onClick: (e: React.MouseEvent) => void
 }
 
-export default function SidebarMenu({ id, sidebar, currentPath, onClick }) {
-  const psRef = useRef()
+const SidebarMenu: React.SFC<ISidebarMenuProps> = ({
+  currentPath,
+  onClick
+}) => {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const psRef = useRef<PerfectScrollbar | undefined>(undefined)
   const [isScrollHidden, setIsScrollHidden] = useState(false)
   const activePaths = currentPath && getParentsListFromPath(currentPath)
 
   useEffect(() => {
-    if (!psRef.current) {
-      psRef.current = new PerfectScrollbar(`#${id}`, {
+    if (!psRef.current && rootRef.current) {
+      psRef.current = new PerfectScrollbar(rootRef.current, {
         wheelPropagation: true
       })
     }
 
     const node = document.getElementById(currentPath)
-    const parent = document.getElementById(id)
+    const parent = rootRef.current
 
     setIsScrollHidden(true)
 
     const timeout = setTimeout(() => {
-      psRef.current.update()
+      psRef.current?.update()
 
       if (node && parent) {
         const parentHeight = parent.clientHeight
@@ -103,37 +116,37 @@ export default function SidebarMenu({ id, sidebar, currentPath, onClick }) {
 
     return () => {
       clearTimeout(timeout)
-      psRef.current.destroy()
-      psRef.current = null
+      psRef.current?.destroy()
+      psRef.current = undefined
     }
-  }, [currentPath])
+  }, [])
 
   return (
-    <Menu id={id} isScrollHidden={isScrollHidden}>
-      <Sections>
-        <SectionLinks>
-          {sidebar.map(item => (
+    <div
+      className={cn(styles.menu, isScrollHidden && styles.isScrollHidden)}
+      ref={rootRef}
+    >
+      <div className={styles.sections}>
+        <div className={styles.sectionLinks}>
+          {structure.map(item => (
             <SidebarMenuItem
               key={item.path}
-              activePaths={includes(activePaths, item.path) && activePaths}
+              activePaths={
+                includes(activePaths, item.path) ? activePaths : undefined
+              }
               onClick={onClick}
               {...item}
             />
           ))}
-        </SectionLinks>
-      </Sections>
-      <OnlyDesktop>
-        <SideFooter>
+        </div>
+      </div>
+      <ShowOnly on="desktop">
+        <div className={styles.footer}>
           <DownloadButton openTop />
-        </SideFooter>
-      </OnlyDesktop>
-    </Menu>
+        </div>
+      </ShowOnly>
+    </div>
   )
 }
 
-SidebarMenu.propTypes = {
-  id: PropTypes.string.isRequired,
-  sidebar: PropTypes.arrayOf(PropTypes.object).isRequired,
-  currentPath: PropTypes.string,
-  onClick: PropTypes.func
-}
+export default SidebarMenu
diff --git a/src/components/Documentation/Layout/SidebarMenu/styles.js b/src/components/Documentation/Layout/SidebarMenu/styles.module.css
similarity index 55%
rename from src/components/Documentation/Layout/SidebarMenu/styles.js
rename to src/components/Documentation/Layout/SidebarMenu/styles.module.css
index 794e5ca8a0..23764e27d8 100644
--- a/src/components/Documentation/Layout/SidebarMenu/styles.js
+++ b/src/components/Documentation/Layout/SidebarMenu/styles.module.css
@@ -1,99 +1,88 @@
-import styled from 'styled-components'
-
-import { media } from '../../../../styles'
-
-export const Menu = styled.div`
+.menu {
   position: sticky;
   top: calc(var(--layout-header-height-collapsed) + 60px);
   height: calc(100vh - var(--layout-header-height-collapsed) - 60px);
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
 
-  .ReactCollapse--collapse {
-    padding-left: 20px;
-    transition: height 250ms;
+  &.isScrollHidden {
+    .ps__rail-y {
+      opacity: 0;
+      overflow: hidden;
+    }
   }
 
-  ${props =>
-    props.isScrollHidden &&
-    `
-    .ps__rail-y { opacity: 0; overflow: hidden; }
-  `};
-
-  ${media.phablet`
+  @media (--xs-scr) {
     position: relative;
     top: 0;
     height: calc(100% - 60px);
     padding-left: 20px;
-  `};
-`
+  }
 
-export const Sections = styled.div`
+  :global(.ReactCollapse--collapse) {
+    padding-left: 20px;
+    transition: height 250ms;
+  }
+}
+
+.sections {
+  min-width: 280px;
   margin-bottom: 25px;
   margin-top: 10px;
-  min-width: 280px;
 
-  ${media.phablet`
+  @media (--xs-scr) {
     min-width: auto;
-  `}
-`
+  }
+}
 
-export const SectionLinks = styled.div`
-  @media (max-width: 768px) {
+.sectionLinks {
+  @media (--sm-scr) {
     position: relative;
   }
-`
+}
 
-const sectionLinkColor = '#b0b8c5'
-
-export const SectionLink = styled.a`
+.sectionLink {
   display: block;
   position: relative;
-  font-size: 18px;
-  font-weight: 500;
-  color: #b0b8c5;
-  color: ${sectionLinkColor};
-  text-decoration: none;
-  font-weight: 400;
-  line-height: 26px;
   min-height: 26px;
-  padding-bottom: 5px;
-  padding-left: 15px;
   margin: 0 0 0 5px;
+  padding-left: 15px;
+  padding-bottom: 5px;
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 400;
+  text-decoration: none;
+  color: var(--color-gray-light);
 
-  ${props =>
-    props.isActive &&
-    `
-    color: #40364d;
-  `};
+  &.active {
+    color: var(--color-gray-hover);
+  }
 
   &:hover {
     color: #3c3937;
 
-    ${media.phablet`
-      color: ${sectionLinkColor};
-    `}
+    @media (--xs-scr) {
+      color: var(--color-gray-light);
+    }
   }
 
   &::before {
     content: '';
-    display: block;
     position: absolute;
-    width: 8px;
+    left: 0;
+    top: 10px;
+    display: block;
     height: 5px;
+    width: 8px;
     background: url('/img/triangle_dark.svg') no-repeat center center;
-    left: 0px;
-    top: 10px;
 
-    ${props =>
-      props.isActive &&
-      `
+    &.active {
       transform: rotate(-90deg);
-    `};
+    }
   }
-`
+}
 
-export const SideFooter = styled.div`
+.footer {
   margin-top: 30px;
   padding-bottom: 30px;
-`
+}
diff --git a/src/components/Documentation/Layout/index.js b/src/components/Documentation/Layout/index.js
deleted file mode 100644
index 76bc4f0f35..0000000000
--- a/src/components/Documentation/Layout/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { useCallback, useState } from 'react'
-import PropTypes from 'prop-types'
-import MainLayout, { LayoutModifiers } from '../../MainLayout'
-import HamburgerIcon from '../../HamburgerIcon'
-import SearchForm from './SearchForm'
-import SidebarMenu from './SidebarMenu'
-
-import { Container, Backdrop, Side, SideToggle } from './styles'
-
-import { structure } from '../../../utils/sidebar'
-
-const SIDEBAR_MENU = 'sidebar-menu'
-
-function Layout({ children, ...restProps }) {
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-
-  const toggleMenu = useCallback(() => setIsMenuOpen(!isMenuOpen), [isMenuOpen])
-
-  return (
-    <MainLayout
-      {...restProps}
-      modifiers={[LayoutModifiers.Wide, LayoutModifiers.Collapsed]}
-    >
-      <Container>
-        <Backdrop onClick={toggleMenu} visible={isMenuOpen} />
-
-        <SideToggle onClick={toggleMenu} isMenuOpen={isMenuOpen}>
-          <HamburgerIcon />
-        </SideToggle>
-
-        <Side isOpen={isMenuOpen}>
-          <SearchForm />
-          <SidebarMenu
-            sidebar={structure}
-            currentPath={restProps.location.pathname}
-            id={SIDEBAR_MENU}
-            onClick={toggleMenu}
-          />
-        </Side>
-        {children}
-      </Container>
-    </MainLayout>
-  )
-}
-
-Layout.propTypes = {
-  children: PropTypes.element.isRequired,
-  location: PropTypes.shape({
-    pathname: PropTypes.string.isRequired
-  })
-}
-
-export default Layout
diff --git a/src/components/Documentation/Layout/index.tsx b/src/components/Documentation/Layout/index.tsx
new file mode 100644
index 0000000000..e71c7e36a8
--- /dev/null
+++ b/src/components/Documentation/Layout/index.tsx
@@ -0,0 +1,52 @@
+import React, { useCallback, useState } from 'react'
+import cn from 'classnames'
+
+import MainLayout, { LayoutComponent, LayoutModifiers } from '../../MainLayout'
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import HamburgerIcon from '../../HamburgerIcon'
+import SearchForm from './SearchForm'
+import SidebarMenu from './SidebarMenu'
+
+import styles from './styles.module.css'
+
+const Layout: LayoutComponent = ({ children, ...restProps }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const toggleMenu = useCallback(() => setIsMenuOpen(!isMenuOpen), [isMenuOpen])
+
+  return (
+    <MainLayout
+      {...restProps}
+      modifiers={[LayoutModifiers.Wide, LayoutModifiers.Collapsed]}
+    >
+      <LayoutWidthContainer className={styles.container} wide>
+        {/* eslint-disable jsx-a11y/no-static-element-interactions */}
+        {/* eslint-disable jsx-a11y/click-events-have-key-events */}
+        <div
+          className={cn(styles.backdrop, isMenuOpen && styles.opened)}
+          onClick={toggleMenu}
+        />
+        {/* eslint-enable jsx-a11y/no-static-element-interactions */}
+        {/* eslint-enable jsx-a11y/click-events-have-key-events */}
+
+        <button
+          className={cn(styles.sideToggle, isMenuOpen && styles.opened)}
+          onClick={toggleMenu}
+        >
+          <HamburgerIcon />
+        </button>
+
+        <div className={cn(styles.side, isMenuOpen && styles.opened)}>
+          <SearchForm />
+          <SidebarMenu
+            currentPath={restProps.location.pathname}
+            onClick={toggleMenu}
+          />
+        </div>
+        <div className={styles.content}>{children}</div>
+      </LayoutWidthContainer>
+    </MainLayout>
+  )
+}
+
+export default Layout
diff --git a/src/components/Documentation/Layout/styles.js b/src/components/Documentation/Layout/styles.module.css
similarity index 55%
rename from src/components/Documentation/Layout/styles.js
rename to src/components/Documentation/Layout/styles.module.css
index 10c4c7ff7e..35db25ed3f 100644
--- a/src/components/Documentation/Layout/styles.js
+++ b/src/components/Documentation/Layout/styles.module.css
@@ -1,64 +1,59 @@
-import styled from 'styled-components'
-
-import { media } from '../../../styles'
-
-export const Container = styled.div`
+.container {
   display: flex;
   flex-direction: row;
-  max-width: 1200px;
-  margin: 0 auto;
-  background: white;
   z-index: 2;
 
-  &:before {
+  @media (--xs-scr) {
+    padding: 0 15px;
+  }
+
+  &::before {
     content: '';
     display: block;
     position: fixed;
+    z-index: -1;
     top: 0;
     left: 0;
     bottom: 0;
     width: 50%;
-    background-color: #eef4f8;
-    z-index: -1;
     pointer-events: none;
+    background-color: var(--color-light-blue);
+
+    @media (--xs-scr) {
+      display: none;
+    }
   }
-`
+}
 
-export const Backdrop = styled.div`
+.backdrop {
   display: none;
 
-  ${media.phablet`
+  @media (--xs-scr) {
     display: block;
     opacity: 0;
     pointer-events: none;
-    transition: opacity .3s linear;
+    transition: opacity 0.3s linear;
 
-    ${props =>
-      props.visible &&
-      `
+    &.opened {
       content: '';
       position: fixed;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
-      background-color: rgba(0, 0, 0, 0.4);
       z-index: 1;
       opacity: 1;
       pointer-events: all;
-    `}
-  `};
-`
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+}
 
-export const Side = styled.div`
+.side {
   width: 280px;
-  background-color: #eef4f8;
-
-  @media only screen and (max-width: 1200px) {
-    padding-left: 15px;
-  }
+  background-color: var(--color-light-blue);
 
-  ${media.phablet`
+  @media (--xs-scr) {
     position: fixed;
     display: block;
     z-index: 2;
@@ -66,44 +61,47 @@ export const Side = styled.div`
     bottom: 0;
     left: 0;
     right: 60px;
-    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 4px, rgba(0, 0, 0, 0.28) 0px 4px 8px;
+    box-shadow: rgba(0, 0, 0, 0.14) 0 0 4px, rgba(0, 0, 0, 0.28) 0 4px 8px;
     transform: translateX(-110%);
-    transition: transform .35s ease;
+    transition: transform 0.35s ease;
 
-    ${props =>
-      props.isOpen &&
-      `
+    &.opened {
       transform: translateX(0);
-    `}
-  `};
-`
+    }
+  }
+}
 
-export const SideToggle = styled.div`
+.sideToggle {
   display: none;
+  justify-content: center;
+  align-items: center;
   position: fixed;
   z-index: 2;
   left: 8px;
   bottom: 20px;
   width: 45px;
   height: 45px;
+  border: none;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 0px 9px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
   transition: transform 0.3s ease;
-  justify-content: center;
-  align-items: center;
 
-  ${media.phablet`
+  &.opened {
+    transform: translateX(calc(100vw - 60px));
+  }
+
+  @media (--xs-scr) {
     display: flex;
 
-    > div {
+    > * {
       transform: scale(0.75);
     }
-  `};
+  }
+}
 
-  ${({ isMenuOpen }) =>
-    isMenuOpen &&
-    `
-    transform: translateX(calc(100vw - 60px));
-  `};
-`
+.content {
+  display: flex;
+  flex-direction: row;
+  background-color: #fff;
+}
diff --git a/src/components/Documentation/Markdown/styles.js b/src/components/Documentation/Markdown/styles.js
index a5972137cb..4c3d7dd8d2 100644
--- a/src/components/Documentation/Markdown/styles.js
+++ b/src/components/Documentation/Markdown/styles.js
@@ -8,9 +8,10 @@ export const Content = styled.article`
   min-width: 200px;
   margin: 30px;
   flex: 1;
+  background-color: #fff;
 
   ${media.phablet`
-    margin: 20px;
+    margin: 15px 0;
   `};
 
   ul {
diff --git a/src/components/HamburgerIcon/index.tsx b/src/components/HamburgerIcon/index.tsx
index 3c282963d0..17e031aa1b 100644
--- a/src/components/HamburgerIcon/index.tsx
+++ b/src/components/HamburgerIcon/index.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import styles from './styles.module.css'
 
 interface IHamburgetProps {
-  opened: boolean
+  opened?: boolean
 }
 
 export default function HamburgerIcon({ opened }: IHamburgetProps) {
diff --git a/src/components/LayoutFooter/index.tsx b/src/components/LayoutFooter/index.tsx
index 3d9f15d067..6b7f88c3fa 100644
--- a/src/components/LayoutFooter/index.tsx
+++ b/src/components/LayoutFooter/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import cn from 'classnames'
+import includes from 'lodash.includes'
 
 import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
 import LayoutWidthContainer from '../LayoutWidthContainer'
@@ -19,7 +20,7 @@ const LayoutFooter: React.SFC<Required<ILayoutModifiable>> = ({
   <footer className={styles.wrapper}>
     <LayoutWidthContainer
       className={cn(styles.container)}
-      wide={modifiers.includes(LayoutModifiers.Wide)}
+      wide={includes(modifiers, LayoutModifiers.Wide)}
     >
       <div className={styles.top}>
         <Link className={styles.logo} href="/" title="dvc.org">
diff --git a/src/components/LayoutHeader/index.tsx b/src/components/LayoutHeader/index.tsx
index 9600d1c0f4..85d1ed66f0 100644
--- a/src/components/LayoutHeader/index.tsx
+++ b/src/components/LayoutHeader/index.tsx
@@ -1,5 +1,6 @@
 import cn from 'classnames'
 import React from 'react'
+import includes from 'lodash.includes'
 
 import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
 import LayoutWidthContainer from '../LayoutWidthContainer'
@@ -13,7 +14,7 @@ import styles from './styles.module.css'
 const LayoutHeader: React.SFC<Required<ILayoutModifiable>> = ({
   modifiers
 }) => {
-  const hasCollapsedModifier = modifiers.includes(LayoutModifiers.Collapsed)
+  const hasCollapsedModifier = includes(modifiers, LayoutModifiers.Collapsed)
   const collapsed = hasCollapsedModifier || useHeaderIsScrolled()
 
   return (
@@ -31,7 +32,7 @@ const LayoutHeader: React.SFC<Required<ILayoutModifiable>> = ({
       <div className={styles.header}>
         <LayoutWidthContainer
           className={cn(styles.container, collapsed && styles.collapsed)}
-          wide={modifiers.includes(LayoutModifiers.Wide)}
+          wide={includes(modifiers, LayoutModifiers.Wide)}
         >
           <Link href="/" className={styles.logoLink} title="DVC">
             <LogoSVG className={styles.logo} />
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index b178f5d5c5..8244987329 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import MainLayout, { LayoutComponent } from '../MainLayout'
+import MainLayout from '../MainLayout'
 import DefaultSEO from './DefaultSEO'
 import DocumentationLayout from '../Documentation/Layout'
 import Layout from '../Blog/Layout'
@@ -38,7 +38,7 @@ const Page: React.SFC<IPageProps> = props => {
 
   if (!props.pageContext.is404) {
     if (props.pageContext.isDocs) {
-      LayoutComponent = DocumentationLayout as LayoutComponent
+      LayoutComponent = DocumentationLayout
     } else if (props.pageContext.isBlog) {
       LayoutComponent = Layout
     }
diff --git a/yarn.lock b/yarn.lock
index 9eaf10e3b1..b7ea29ea5c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1889,7 +1889,14 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
   integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==
 
-"@types/lodash@^4.14.92":
+"@types/lodash.includes@^4.3.6":
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.includes/-/lodash.includes-4.3.6.tgz#47a806f9dd6ad5ebe35cfd46096db348420c3fb0"
+  integrity sha512-YzujoN0s409VTzdsQc7JYa7jHGV9YuYhGWIhzuEaZNSCKFuJD636tghbjq7R9xdjjbTnmiDeV/DnCurVSxVVxQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.92":
   version "4.14.149"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
   integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==
@@ -1938,6 +1945,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/promise-polyfill@^6.0.3":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@types/promise-polyfill/-/promise-polyfill-6.0.3.tgz#e2f38fcd244a9e0df2cc7528e0711abcbc707b5e"
+  integrity sha512-f/BFgF9a+cgsMseC7rpv9+9TAE3YNjhfYrtwCo/pIeCDDfQtE6PY0b5bao2eIIEpZCBUy8Y5ToXd4ObjPSJuFw==
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"

From 1bdb86a34ed2e8d061641c30b29dbc98f429fc1b Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Mon, 6 Apr 2020 21:34:24 +0300
Subject: [PATCH 16/51] Refactor remaining Documentation components to TS

---
 package.json                                  |   5 +
 .../Documentation/Layout/styles.module.css    |   6 +
 .../Markdown/Tooltip/DesktopView/index.tsx    | 133 +++++++
 .../Tooltip/DesktopView/styles.module.css     |  68 ++++
 .../Markdown/Tooltip/MobileView/index.tsx     |  79 ++++
 .../Tooltip/MobileView/styles.module.css      |  45 +++
 .../Markdown/Tooltip/Portal/index.tsx         |   9 +
 .../Documentation/Markdown/Tooltip/index.tsx  |  59 +++
 .../Markdown/Tooltip/styles.module.css        |   3 +
 .../Documentation/Markdown/index.js           | 150 --------
 .../Documentation/Markdown/index.tsx          | 141 +++++++
 .../Documentation/Markdown/styles.js          | 345 ------------------
 .../Documentation/Markdown/styles.module.css  | 327 +++++++++++++++++
 .../Documentation/RightPanel/index.js         | 162 --------
 .../Documentation/RightPanel/index.tsx        | 175 +++++++++
 .../Documentation/RightPanel/styles.js        |  79 ----
 .../RightPanel/styles.module.css              |  85 +++++
 .../Documentation/Tutorials/index.js          |  40 --
 .../Documentation/Tutorials/styles.js         |  37 --
 .../Documentation/TutorialsLinks/index.tsx    |  46 +++
 .../TutorialsLinks/styles.module.css          |  21 ++
 .../Documentation/{index.js => index.tsx}     |  24 +-
 src/components/Documentation/styles.js        |  31 --
 .../Documentation/styles.module.css           |  32 ++
 src/components/Page/index.tsx                 |   2 +-
 src/components/Page/styles.module.css         |   2 +-
 src/components/ShowOnly/styles.module.css     |   8 +-
 src/components/Tooltip/DesktopView/index.js   | 170 ---------
 src/components/Tooltip/DesktopView/styles.js  |  58 ---
 .../Tooltip/MobileView/Modal/index.js         |  11 -
 src/components/Tooltip/MobileView/index.js    |  67 ----
 src/components/Tooltip/MobileView/styles.js   |  54 ---
 src/components/Tooltip/index.js               |  67 ----
 src/consts.js                                 |   3 -
 yarn.lock                                     |  35 ++
 35 files changed, 1292 insertions(+), 1287 deletions(-)
 create mode 100644 src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
 create mode 100644 src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
 create mode 100644 src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
 create mode 100644 src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css
 create mode 100644 src/components/Documentation/Markdown/Tooltip/Portal/index.tsx
 create mode 100644 src/components/Documentation/Markdown/Tooltip/index.tsx
 create mode 100644 src/components/Documentation/Markdown/Tooltip/styles.module.css
 delete mode 100644 src/components/Documentation/Markdown/index.js
 create mode 100644 src/components/Documentation/Markdown/index.tsx
 delete mode 100644 src/components/Documentation/Markdown/styles.js
 create mode 100644 src/components/Documentation/Markdown/styles.module.css
 delete mode 100644 src/components/Documentation/RightPanel/index.js
 create mode 100644 src/components/Documentation/RightPanel/index.tsx
 delete mode 100644 src/components/Documentation/RightPanel/styles.js
 create mode 100644 src/components/Documentation/RightPanel/styles.module.css
 delete mode 100644 src/components/Documentation/Tutorials/index.js
 delete mode 100644 src/components/Documentation/Tutorials/styles.js
 create mode 100644 src/components/Documentation/TutorialsLinks/index.tsx
 create mode 100644 src/components/Documentation/TutorialsLinks/styles.module.css
 rename src/components/Documentation/{index.js => index.tsx} (68%)
 delete mode 100644 src/components/Documentation/styles.js
 create mode 100644 src/components/Documentation/styles.module.css
 delete mode 100644 src/components/Tooltip/DesktopView/index.js
 delete mode 100644 src/components/Tooltip/DesktopView/styles.js
 delete mode 100644 src/components/Tooltip/MobileView/Modal/index.js
 delete mode 100644 src/components/Tooltip/MobileView/index.js
 delete mode 100644 src/components/Tooltip/MobileView/styles.js
 delete mode 100644 src/components/Tooltip/index.js

diff --git a/package.json b/package.json
index 622bc08e85..167dae970d 100644
--- a/package.json
+++ b/package.json
@@ -90,12 +90,17 @@
     "@types/classnames": "^2.2.10",
     "@types/isomorphic-fetch": "^0.0.35",
     "@types/lodash.includes": "^4.3.6",
+    "@types/lodash.startcase": "^4.4.6",
+    "@types/lodash.throttle": "^4.1.6",
+    "@types/lodash.topairs": "^4.3.6",
     "@types/promise-polyfill": "^6.0.3",
     "@types/react": "^16.9.27",
     "@types/react-collapse": "^5.0.0",
+    "@types/react-dom": "^16.9.6",
     "@types/react-helmet": "^5.0.15",
     "@types/react-popover": "^0.5.3",
     "@types/react-slick": "^0.23.4",
+    "@types/rehype-react": "^4.0.0",
     "@types/styled-components": "^5.0.1",
     "@types/vfile-message": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
diff --git a/src/components/Documentation/Layout/styles.module.css b/src/components/Documentation/Layout/styles.module.css
index 35db25ed3f..5d4c1d2246 100644
--- a/src/components/Documentation/Layout/styles.module.css
+++ b/src/components/Documentation/Layout/styles.module.css
@@ -50,6 +50,7 @@
 }
 
 .side {
+  flex-shrink: 0;
   width: 280px;
   background-color: var(--color-light-blue);
 
@@ -103,5 +104,10 @@
 .content {
   display: flex;
   flex-direction: row;
+  max-width: calc(100% - 280px);
   background-color: #fff;
+
+  @media (--xs-scr) {
+    max-width: 100%;
+  }
 }
diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
new file mode 100644
index 0000000000..92ef98163b
--- /dev/null
+++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
@@ -0,0 +1,133 @@
+import React, { useRef, useState, useEffect } from 'react'
+import cn from 'classnames'
+import ReactMarkdown from 'react-markdown'
+import throttle from 'lodash.throttle'
+
+import Portal from '../Portal'
+import { getHeaderHeight } from '../../../../../utils/scroll'
+import styles from './styles.module.css'
+
+interface IDesktopViewProps {
+  description: string
+  header: string
+  text: React.ReactNode
+}
+
+interface ITooltipPosition {
+  left: number
+  top: number
+  arrow: ['l' | 'r', 't' | 'b']
+}
+
+const ARROW_SIZE = 10
+
+const getPosition = (toggle: Element, tooltip: Element): ITooltipPosition => {
+  const toggleRect = toggle.getBoundingClientRect()
+  const tooltipRect = tooltip.getBoundingClientRect()
+  const windowWidth = document.documentElement.clientWidth
+  const headerHeight = getHeaderHeight()
+  const result: ITooltipPosition = { left: 0, top: 0, arrow: ['l', 'b'] }
+
+  if (windowWidth - tooltipRect.width > toggleRect.left) {
+    result.left = toggleRect.left
+  } else {
+    result.left = toggleRect.left + toggleRect.width - tooltipRect.width
+    result.arrow[0] = 'r'
+  }
+
+  if (toggleRect.top > tooltipRect.height + ARROW_SIZE + headerHeight) {
+    result.top = toggleRect.top - tooltipRect.height - ARROW_SIZE
+  } else {
+    result.top = toggleRect.top + toggleRect.height + ARROW_SIZE
+    result.arrow[1] = 't'
+  }
+
+  return result
+}
+
+const DesktopView: React.SFC<IDesktopViewProps> = ({
+  description,
+  header,
+  text
+}) => {
+  const timeoutRef = useRef<number | undefined>()
+  const toggleRef = useRef<HTMLSpanElement>(null)
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const [tooltipPosition, setPosition] = useState<
+    ITooltipPosition | undefined
+  >()
+  const [isVisible, setVisible] = useState(false)
+  const calcPosition = () => {
+    if (!tooltipRef.current || !toggleRef.current) {
+      return
+    }
+
+    setPosition(getPosition(toggleRef.current, tooltipRef.current))
+  }
+  const throttledCalcPosition = throttle(calcPosition, 50)
+  const show = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = undefined
+    }
+
+    setVisible(true)
+  }
+  const hide = () => {
+    timeoutRef.current = window.setTimeout(() => setVisible(false), 100)
+  }
+
+  useEffect(() => {
+    document.addEventListener('scroll', throttledCalcPosition)
+    window.addEventListener('resize', throttledCalcPosition)
+
+    return () => {
+      document.removeEventListener('scroll', throttledCalcPosition)
+      window.removeEventListener('resize', throttledCalcPosition)
+    }
+  }, [])
+  useEffect(() => {
+    if (!tooltipRef.current) {
+      return
+    }
+
+    calcPosition()
+  }, [isVisible, tooltipRef.current])
+
+  return (
+    <>
+      {isVisible && (
+        <Portal>
+          <div
+            ref={tooltipRef}
+            className={cn(
+              styles.tooltip,
+              tooltipPosition?.arrow && styles.calculated,
+              tooltipPosition?.arrow && styles[tooltipPosition.arrow.join('')]
+            )}
+            style={tooltipPosition}
+            onMouseOver={show}
+            onMouseLeave={hide}
+            onFocus={show}
+            onBlur={hide}
+          >
+            <div className={styles.tooltipHeader}>{header}</div>
+            <ReactMarkdown className="markdown-body" source={description} />
+          </div>
+        </Portal>
+      )}
+      <span
+        ref={toggleRef}
+        className={styles.highlightedText}
+        onMouseOver={show}
+        onMouseLeave={hide}
+        onFocus={show}
+        onBlur={hide}
+      >
+        {text}
+      </span>
+    </>
+  )
+}
+
+export default DesktopView
diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css b/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
new file mode 100644
index 0000000000..05f718ea85
--- /dev/null
+++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
@@ -0,0 +1,68 @@
+.highlightedText {
+  border-bottom: 1px black dotted;
+}
+
+.tooltip {
+  position: absolute;
+  display: none;
+  width: 400px;
+  padding: 8px 10px;
+  border: 1px solid var(--color-lighter-blue);
+  border-radius: 3px;
+  color: var(--color-black);
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  &.calculated {
+    display: block;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    height: 10px;
+    width: 10px;
+    border: none;
+    border-top: 1px solid var(--color-lighter-blue);
+    border-left: 2px solid var(--color-lighter-blue);
+    transform: rotate(90deg);
+    background-color: #fff;
+  }
+
+  &.lt::after,
+  &.rt::after {
+    top: -7px;
+    border-top-width: 2px;
+    border-left-width: 1px;
+    transform: rotate(45deg);
+  }
+
+  &.lt::after {
+    left: 27px;
+  }
+
+  &.rt::after {
+    right: 27px;
+  }
+
+  &.lb::after,
+  &.rb::after {
+    top: 100%;
+    margin-top: -4px;
+    transform: rotate(-135deg);
+  }
+
+  &.lb::after {
+    left: 27px;
+  }
+
+  &.rb::after {
+    right: 27px;
+  }
+}
+
+.tooltipHeader {
+  font-size: 1.3em;
+  font-weight: bold;
+}
diff --git a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
new file mode 100644
index 0000000000..c9124f7220
--- /dev/null
+++ b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import cn from 'classnames'
+import ReactMarkdown from 'react-markdown'
+
+import Portal from '../Portal'
+
+import styles from './styles.module.css'
+
+interface IMobileViewProps {
+  description: string
+  header: string
+  text: React.ReactNode
+}
+
+const MobileView: React.SFC<IMobileViewProps> = ({
+  description,
+  header,
+  text
+}) => {
+  const [isVisible, setVisible] = useState(false)
+  const openTooltip = (e: React.MouseEvent<HTMLSpanElement>) => {
+    e.stopPropagation()
+    setVisible(true)
+  }
+  const onOpenKeyDown = (e: React.KeyboardEvent) => {
+    if (e.which === 13 || e.which === 32) {
+      setVisible(true)
+    }
+  }
+  const closeTooltip = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    setVisible(false)
+  }
+  const onCloseKeyDown = (e: React.KeyboardEvent) => {
+    if (e.which === 13 || e.which === 32) {
+      setVisible(false)
+    }
+  }
+
+  return (
+    <>
+      <span
+        className={styles.highlightedText}
+        onClick={openTooltip}
+        onKeyDown={onOpenKeyDown}
+        role="button"
+        tabIndex={0}
+      >
+        {text}
+      </span>
+      {isVisible && (
+        <Portal>
+          {/* eslint-disable jsx-a11y/no-static-element-interactions*/}
+          {/* eslint-disable jsx-a11y/click-events-have-key-events */}
+          <div className={styles.modalBackground} onClick={closeTooltip}>
+            {/* eslint-enable jsx-a11y/no-static-element-interactions*/}
+            {/* eslint-enable jsx-a11y/click-events-have-key-events */}
+            <div className={styles.modalContent}>
+              <div
+                className={styles.closeContainer}
+                onClick={closeTooltip}
+                onKeyPress={onCloseKeyDown}
+                role="button"
+                tabIndex={0}
+              >
+                <div className={cn(styles.closeLine, styles.first)} />
+                <div className={cn(styles.closeLine, styles.second)} />
+              </div>
+              <h5 className={styles.modalHeader}>{header}</h5>
+              <ReactMarkdown className="markdown-body" source={description} />
+            </div>
+          </div>
+        </Portal>
+      )}
+    </>
+  )
+}
+
+export default MobileView
diff --git a/src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css b/src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css
new file mode 100644
index 0000000000..8f54fa7c65
--- /dev/null
+++ b/src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css
@@ -0,0 +1,45 @@
+.highlightedText {
+  border-bottom: 1px black dotted;
+}
+
+.modalBackground {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.closeContainer {
+  float: right;
+  margin: 2px 10px 0 0;
+}
+
+.closeLine {
+  position: absolute;
+  height: 23px;
+  width: 2px;
+  background-color: black;
+
+  &.first {
+    transform: rotate(-45deg);
+  }
+
+  &.second {
+    transform: rotate(45deg);
+  }
+}
+
+.modalContent {
+  width: 80%;
+  padding: 8px 10px;
+  border: 1px solid var(--color-light-blue);
+  border-radius: 3px;
+  background-color: #fff;
+}
+
+.modalHeader {
+  font-size: 1.3em;
+  font-weight: bold;
+}
diff --git a/src/components/Documentation/Markdown/Tooltip/Portal/index.tsx b/src/components/Documentation/Markdown/Tooltip/Portal/index.tsx
new file mode 100644
index 0000000000..3977ceaed9
--- /dev/null
+++ b/src/components/Documentation/Markdown/Tooltip/Portal/index.tsx
@@ -0,0 +1,9 @@
+import ReactDOM from 'react-dom'
+
+const Portal: React.SFC<{ children: React.ReactNode }> = ({ children }) =>
+  ReactDOM.createPortal(
+    children,
+    document.getElementById('portal') as HTMLElement
+  )
+
+export default Portal
diff --git a/src/components/Documentation/Markdown/Tooltip/index.tsx b/src/components/Documentation/Markdown/Tooltip/index.tsx
new file mode 100644
index 0000000000..ef48d1754a
--- /dev/null
+++ b/src/components/Documentation/Markdown/Tooltip/index.tsx
@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react'
+import includes from 'lodash.includes'
+
+import ShowOnly from '../../../ShowOnly'
+import DesktopView from './DesktopView'
+import MobileView from './MobileView'
+
+import glossary from '../../../../../content/docs/glossary'
+import styles from './styles.module.css'
+
+const Tooltip: React.SFC<{ text: string }> = ({ text }) => {
+  const [state, setState] = useState({
+    description: '',
+    header: '',
+    match: false
+  })
+
+  useEffect(() => {
+    glossary.contents.forEach(glossaryItem => {
+      if (
+        includes(
+          glossaryItem.match.map(word => word.toLowerCase()),
+          text.replace(/\n/g, ' ').toLowerCase()
+        )
+      ) {
+        setState({
+          description: glossaryItem.desc,
+          header: glossaryItem.name,
+          match: true
+        })
+      }
+    })
+  }, [text])
+
+  if (!state.match) {
+    return <span>{text}</span>
+  }
+
+  return (
+    <>
+      <ShowOnly on="desktop" className={styles.inline}>
+        <DesktopView
+          description={state.description}
+          header={state.header}
+          text={text}
+        />
+      </ShowOnly>
+      <ShowOnly on="mobile">
+        <MobileView
+          description={state.description}
+          header={state.header}
+          text={text}
+        />
+      </ShowOnly>
+    </>
+  )
+}
+
+export default Tooltip
diff --git a/src/components/Documentation/Markdown/Tooltip/styles.module.css b/src/components/Documentation/Markdown/Tooltip/styles.module.css
new file mode 100644
index 0000000000..282a76563b
--- /dev/null
+++ b/src/components/Documentation/Markdown/Tooltip/styles.module.css
@@ -0,0 +1,3 @@
+.inline {
+  display: inline;
+}
diff --git a/src/components/Documentation/Markdown/index.js b/src/components/Documentation/Markdown/index.js
deleted file mode 100644
index 3ff1b3f597..0000000000
--- a/src/components/Documentation/Markdown/index.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import rehypeReact from 'rehype-react'
-import PropTypes from 'prop-types'
-import Collapsible from 'react-collapsible'
-
-import 'github-markdown-css/github-markdown.css'
-
-import { navigate } from '@reach/router'
-
-import { getPathWithSoruce } from '../../../utils/sidebar'
-
-import Link from '../../Link'
-import Tooltip from '../../Tooltip'
-
-import Tutorials from '../Tutorials'
-
-import {
-  Button,
-  Content,
-  GithubLink,
-  NavigationButtons,
-  TutorialsWrapper
-} from './styles'
-
-const isInsideCodeBlock = elem => {
-  for (let el = elem; el && el !== document; el = el.parentNode) {
-    if (el.tagName === 'PRE') return true
-    if (el.tagName === 'ARTICLE') return false
-  }
-  return false
-}
-
-function Details({ children }) {
-  const filteredChildren = children.filter(child => child !== '\n')
-
-  const text = filteredChildren[0].props.children[0]
-  return (
-    <Collapsible trigger={text} transitionTime={200}>
-      {filteredChildren.slice(1)}
-    </Collapsible>
-  )
-}
-
-Details.propTypes = {
-  children: PropTypes.node
-}
-
-function ABBR({ children }) {
-  return <Tooltip text={children[0]} />
-}
-
-ABBR.propTypes = {
-  children: PropTypes.node
-}
-
-const renderAst = new rehypeReact({
-  createElement: React.createElement,
-  Fragment: React.Fragment,
-  components: { details: Details, abbr: ABBR, a: Link }
-}).Compiler
-
-export default function Markdown({
-  htmlAst,
-  prev,
-  next,
-  tutorials,
-  githubLink
-}) {
-  const touchstartXRef = useRef(0)
-  const touchendXRef = useRef(0)
-  const isCodeBlockRef = useRef(false)
-
-  const handleSwipeGesture = useCallback(() => {
-    if (isCodeBlockRef.current) return
-
-    if (touchstartXRef.current - touchendXRef.current > 100) {
-      navigate(next)
-    }
-
-    if (touchendXRef.current - touchstartXRef.current > 100) {
-      navigate(prev)
-    }
-  }, [prev, next])
-
-  const onTouchStart = useCallback(e => {
-    isCodeBlockRef.current = isInsideCodeBlock(e.target)
-    touchstartXRef.current = event.changedTouches[0].screenX
-  }, [])
-
-  const onTouchEnd = useCallback(() => {
-    touchendXRef.current = event.changedTouches[0].screenX
-    handleSwipeGesture()
-  }, [])
-
-  useEffect(() => {
-    document.addEventListener('touchstart', onTouchStart, false)
-    document.addEventListener('touchend', onTouchEnd, false)
-
-    return () => {
-      document.removeEventListener('touchstart', onTouchStart)
-      document.removeEventListener('touchend', onTouchEnd)
-    }
-  }, [])
-
-  return (
-    <Content id="markdown-root">
-      {tutorials && (
-        <TutorialsWrapper>
-          <Tutorials tutorials={tutorials} compact={true} />
-        </TutorialsWrapper>
-      )}
-      <GithubLink href={githubLink} target="_blank" rel="noreferrer noopener">
-        <i /> Edit on GitHub
-      </GithubLink>
-      <div className="markdown-body">{renderAst(htmlAst)}</div>
-      <NavigationButtons>
-        {prev ? (
-          <Link href={prev} as={Button}>
-            <i className="prev" />
-            <span>Prev</span>
-          </Link>
-        ) : (
-          <Button disabled={true}>
-            <i className="prev" />
-            <span>Prev</span>
-          </Button>
-        )}
-        {next ? (
-          <Link href={getPathWithSoruce(next)} as={Button}>
-            <span>Next</span>
-            <i className="next" />
-          </Link>
-        ) : (
-          <Button disabled={true}>
-            <span>Next</span>
-            <i className="next" />
-          </Button>
-        )}
-      </NavigationButtons>
-    </Content>
-  )
-}
-
-Markdown.propTypes = {
-  htmlAst: PropTypes.object.isRequired,
-  githubLink: PropTypes.string.isRequired,
-  tutorials: PropTypes.object,
-  prev: PropTypes.string,
-  next: PropTypes.string
-}
diff --git a/src/components/Documentation/Markdown/index.tsx b/src/components/Documentation/Markdown/index.tsx
new file mode 100644
index 0000000000..74cae0395d
--- /dev/null
+++ b/src/components/Documentation/Markdown/index.tsx
@@ -0,0 +1,141 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import cn from 'classnames'
+import { navigate } from '@reach/router'
+import rehypeReact from 'rehype-react'
+import Collapsible from 'react-collapsible'
+
+import Link from '../../Link'
+import Tooltip from './Tooltip'
+import Tutorials from '../TutorialsLinks'
+import { getPathWithSoruce } from '../../../utils/sidebar'
+
+import 'github-markdown-css/github-markdown.css'
+import sharedStyles from '../styles.module.css'
+import styles from './styles.module.css'
+
+const isInsideCodeBlock = (node: Element): boolean => {
+  while (node?.parentNode) {
+    if (node.tagName === 'PRE') {
+      return true
+    }
+
+    if (node.tagName === 'ARTICLE') {
+      return false
+    }
+
+    node = node.parentNode as Element
+  }
+
+  return false
+}
+
+const Details: React.SFC<{
+  children: Array<{ props: { children: Array<string> } } | string>
+}> = ({ children }) => {
+  const filteredChildren = children.filter(child => child !== '\n')
+
+  if (!filteredChildren.length) return null
+  if (typeof filteredChildren[0] === 'string') return null
+
+  const text = filteredChildren[0].props.children[0]
+
+  return (
+    <Collapsible trigger={text} transitionTime={200}>
+      {filteredChildren.slice(1)}
+    </Collapsible>
+  )
+}
+
+const Abbr: React.SFC<{ children: [string] }> = ({ children }) => {
+  return <Tooltip text={children[0]} />
+}
+
+const renderAst = new rehypeReact({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  createElement: React.createElement as any,
+  Fragment: React.Fragment,
+  components: { details: Details, abbr: Abbr, a: Link }
+}).Compiler
+
+interface IMarkdownProps {
+  htmlAst: object
+  githubLink: string
+  tutorials: { [type: string]: string }
+  prev?: string
+  next?: string
+}
+
+const Markdown: React.SFC<IMarkdownProps> = ({
+  htmlAst,
+  prev,
+  next,
+  tutorials,
+  githubLink
+}) => {
+  const touchstartXRef = useRef(0)
+  const touchendXRef = useRef(0)
+  const isCodeBlockRef = useRef(false)
+  const handleSwipeGesture = useCallback(() => {
+    if (isCodeBlockRef.current) return
+
+    if (next && touchstartXRef.current - touchendXRef.current > 100) {
+      navigate(next)
+    }
+
+    if (prev && touchendXRef.current - touchstartXRef.current > 100) {
+      navigate(prev)
+    }
+  }, [prev, next])
+  const onTouchStart = useCallback(e => {
+    isCodeBlockRef.current = isInsideCodeBlock(e.target)
+    touchstartXRef.current = e.changedTouches[0].screenX
+  }, [])
+  const onTouchEnd = useCallback(e => {
+    touchendXRef.current = e.changedTouches[0].screenX
+    handleSwipeGesture()
+  }, [])
+
+  useEffect(() => {
+    document.addEventListener('touchstart', onTouchStart, false)
+    document.addEventListener('touchend', onTouchEnd, false)
+
+    return () => {
+      document.removeEventListener('touchstart', onTouchStart)
+      document.removeEventListener('touchend', onTouchEnd)
+    }
+  }, [])
+
+  return (
+    <div className={styles.content} id="markdown-root">
+      {tutorials && (
+        <div className={styles.tutorialsWrapper}>
+          <Tutorials tutorials={tutorials} compact={true} />
+        </div>
+      )}
+      <Link
+        className={cn(sharedStyles.button, styles.githubLink)}
+        href={githubLink}
+        target="_blank"
+      >
+        <i className={cn(sharedStyles.buttonIcon, styles.githubIcon)} /> Edit on
+        GitHub
+      </Link>
+      <div className="markdown-body">{renderAst(htmlAst)}</div>
+      <div className={styles.navButtons}>
+        <Link className={styles.navButton} href={prev || '#'}>
+          <i className={cn(styles.navButtonIcon, styles.prev)} />
+          <span>Prev</span>
+        </Link>
+        <Link
+          className={styles.navButton}
+          href={next ? getPathWithSoruce(next) : '#'}
+        >
+          <span>Next</span>
+          <i className={cn(styles.navButtonIcon, styles.next)} />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default Markdown
diff --git a/src/components/Documentation/Markdown/styles.js b/src/components/Documentation/Markdown/styles.js
deleted file mode 100644
index 4c3d7dd8d2..0000000000
--- a/src/components/Documentation/Markdown/styles.js
+++ /dev/null
@@ -1,345 +0,0 @@
-import styled from 'styled-components'
-
-import { media } from '../../../styles'
-
-import { LightButton } from '../styles'
-
-export const Content = styled.article`
-  min-width: 200px;
-  margin: 30px;
-  flex: 1;
-  background-color: #fff;
-
-  ${media.phablet`
-    margin: 15px 0;
-  `};
-
-  ul {
-    list-style-type: disc;
-  }
-
-  ol {
-    list-style-type: decimal;
-  }
-
-  em {
-    font-style: italic;
-  }
-
-  .markdown-body {
-    font-family: inherit;
-    font-size: 18px;
-    animation-duration: 1s;
-    animation-fill-mode: both;
-    animation-name: fadeIn;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-weight: 500;
-    }
-
-    a[target='_blank']:after {
-      position: relative;
-      top: 1px;
-      right: 0;
-      width: 12px;
-      height: 12px;
-      margin-left: 1px;
-      content: url(/img/external-link.svg);
-    }
-
-    .anchor {
-      margin-left: -24px;
-    }
-
-    li {
-      margin: 16px 0;
-    }
-
-    pre[class*='language-'] {
-      background: #40354d;
-      color: #ccc;
-
-      .token.line {
-        color: #ddd;
-      }
-
-      .token.comment,
-      .token.block-comment {
-        font-weight: normal;
-        color: #a0a0a0;
-      }
-
-      .token.input {
-        user-select: none;
-      }
-
-      .token.prolog,
-      .token.doctype,
-      .token.cdata {
-        color: #999;
-      }
-
-      .token.url,
-      .token.constant,
-      .token.operator,
-      .token.punctuation {
-        color: #a0a0a0;
-      }
-
-      .token.property,
-      .token.tag,
-      .token.boolean,
-      .token.function-name,
-      .token.symbol,
-      .token.deleted {
-        color: #4badd2;
-      }
-
-      .token.function {
-        color: #ae41bb;
-      }
-
-      .token.number,
-      .token.attr-name,
-      .token.string,
-      .token.char,
-      .token.builtin,
-      .token.inserted {
-        color: #219161;
-      }
-
-      .token.entity,
-      .token.variable {
-        color: #a67f59;
-      }
-
-      .token.class-name {
-        color: #0086b3;
-      }
-
-      .token.dvc {
-        color: #56b1d0;
-        font-weight: bold;
-      }
-
-      .token.usage,
-      .token.git {
-        color: #e9836e;
-      }
-
-      .token.command,
-      .token.selector,
-      .token.atrule,
-      .token.attr-value,
-      .token.keyword {
-        color: #e4b872;
-      }
-
-      .token.regex,
-      .token.important {
-        color: #b68;
-      }
-
-      .token.parameter {
-        color: #a0a0a0;
-      }
-
-      .token.function-variable {
-        color: #7ece42;
-      }
-
-      .token.important {
-        font-weight: normal;
-      }
-
-      .token.bold {
-        font-weight: bold;
-      }
-
-      .token.italic {
-        font-style: italic;
-      }
-
-      .token.entity {
-        cursor: help;
-      }
-
-      .token.namespace {
-        opacity: 0.7;
-      }
-    }
-  }
-
-  .Collapsible {
-    margin-bottom: 10px;
-    background-color: rgba(36, 173, 197, 0.2);
-    border-radius: 15px;
-    -moz-border-radius: 15px;
-    padding: 10px;
-  }
-
-  .Collapsible__trigger {
-    font-family: BrandonGrotesque;
-    font-weight: 500;
-    display: block;
-    position: relative;
-    opacity: 0.9;
-    cursor: pointer;
-
-    &:after {
-      position: absolute;
-      display: inline-block;
-      background-size: 20px 20px;
-      right: 0;
-      width: 20px;
-      height: 20px;
-      background-image: url('/img/click.png');
-      content: '';
-      font-family: monospace;
-      transition: transform 200ms;
-    }
-
-    &.is-open {
-      &:after {
-        opacity: 0.5;
-      }
-    }
-  }
-
-  .Collapsible__contentInner {
-    background-color: rgba(36, 173, 197, 0);
-    border-radius: 15px;
-    -moz-border-radius: 15px;
-    padding: 10px;
-  }
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  details p {
-    font-size: 17px;
-    color: #454e53;
-    margin-left: 20px;
-    margin-right: 10px;
-  }
-
-  details pre {
-    font-size: 14px;
-    color: #454e53;
-    margin-left: 20px;
-    margin-right: 10px;
-  }
-`
-
-export const NavigationButtons = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 40px;
-  font-weight: 600;
-  font-size: 14px;
-`
-
-export const Button = styled.a`
-  text-decoration: none;
-  background: white;
-  padding: 10px 15px;
-  text-transform: uppercase;
-  color: #333;
-  border-bottom: 3px solid #13adc7;
-  display: inline-flex;
-  align-items: center;
-  transition: 0.2s border-color ease-out;
-
-  &:hover {
-    border-bottom: 3px solid #11849b;
-  }
-
-  i {
-    display: inline-block;
-    background-image: url(/img/arrow.svg);
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    width: 1em;
-    height: 1em;
-    line-height: 1;
-    transition: all 0.3s;
-
-    &.next {
-      margin-left: 7px;
-    }
-
-    &.prev {
-      margin-right: 7px;
-      mask-position: center;
-      transform: rotate(180deg);
-      margin-top: 2px;
-    }
-  }
-
-  &[disabled] {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-`
-
-export const TutorialsWrapper = styled.div`
-  position: relative;
-  z-index: 1;
-  float: right;
-  margin: 5px 0 0 10px;
-
-  ${media.tablet`
-    margin: 0 0 15px 0;
-  `}
-
-  @media only screen and (min-width: 1200px) {
-    display: none;
-  }
-`
-
-export const GithubLink = styled(LightButton)`
-  display: none;
-  float: right;
-  margin: 5px 0 10px 10px;
-  z-index: 1;
-  position: relative;
-
-  ${media.tablet`
-    float: none;
-    margin: 0 0 15px 0;
-  `};
-
-  @media only screen and (max-width: 1200px) {
-    display: inline-flex;
-  }
-
-  i {
-    background-image: url(/img/github_icon.svg);
-  }
-`
-
-export const ExternalLink = styled.a`
-  &:after {
-    position: relative;
-    top: 1px;
-    right: 0;
-    width: 12px;
-    height: 12px;
-    margin-left: 1px;
-    content: url(/img/external-link.svg);
-  }
-`
diff --git a/src/components/Documentation/Markdown/styles.module.css b/src/components/Documentation/Markdown/styles.module.css
new file mode 100644
index 0000000000..482a1b3d20
--- /dev/null
+++ b/src/components/Documentation/Markdown/styles.module.css
@@ -0,0 +1,327 @@
+.content {
+  min-width: 200px;
+  margin: 30px;
+  flex: 1;
+  background-color: #fff;
+
+  @media (--xs-scr) {
+    margin: 15px 0;
+  }
+
+  :global {
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    em {
+      font-style: italic;
+    }
+
+    .markdown-body {
+      font-family: inherit;
+      font-size: 18px;
+      animation-duration: 1s;
+      animation-fill-mode: both;
+      animation-name: fadeIn;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-weight: 500;
+      }
+
+      a[target='_blank']::after {
+        position: relative;
+        top: 1px;
+        right: 0;
+        width: 12px;
+        height: 12px;
+        margin-left: 1px;
+        content: url(/img/external-link.svg);
+      }
+
+      .anchor {
+        margin-left: -24px;
+      }
+
+      li {
+        margin: 16px 0;
+      }
+
+      pre[class*='language-'] {
+        background: #40354d;
+        color: #ccc;
+
+        .token.line {
+          color: #ddd;
+        }
+
+        .token.comment,
+        .token.block-comment {
+          font-weight: normal;
+          color: #a0a0a0;
+        }
+
+        .token.input {
+          user-select: none;
+        }
+
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+          color: #999;
+        }
+
+        .token.url,
+        .token.constant,
+        .token.operator,
+        .token.punctuation {
+          color: #a0a0a0;
+        }
+
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.function-name,
+        .token.symbol,
+        .token.deleted {
+          color: #4badd2;
+        }
+
+        .token.function {
+          color: #ae41bb;
+        }
+
+        .token.number,
+        .token.attr-name,
+        .token.string,
+        .token.char,
+        .token.builtin,
+        .token.inserted {
+          color: #219161;
+        }
+
+        .token.entity,
+        .token.variable {
+          color: #a67f59;
+        }
+
+        .token.class-name {
+          color: #0086b3;
+        }
+
+        .token.dvc {
+          color: #56b1d0;
+          font-weight: bold;
+        }
+
+        .token.usage,
+        .token.git {
+          color: #e9836e;
+        }
+
+        .token.command,
+        .token.selector,
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword {
+          color: #e4b872;
+        }
+
+        .token.regex,
+        .token.important {
+          color: #b68;
+        }
+
+        .token.parameter {
+          color: #a0a0a0;
+        }
+
+        .token.function-variable {
+          color: #7ece42;
+        }
+
+        .token.important {
+          font-weight: normal;
+        }
+
+        .token.bold {
+          font-weight: bold;
+        }
+
+        .token.italic {
+          font-style: italic;
+        }
+
+        .token.entity {
+          cursor: help;
+        }
+
+        .token.namespace {
+          opacity: 0.7;
+        }
+      }
+    }
+
+    .Collapsible {
+      margin-bottom: 10px;
+      background-color: rgba(36, 173, 197, 0.2);
+      border-radius: 15px;
+      -moz-border-radius: 15px;
+      padding: 10px;
+    }
+
+    .Collapsible__trigger {
+      font-family: var(--font-brandon);
+      font-weight: 500;
+      display: block;
+      position: relative;
+      opacity: 0.9;
+      cursor: pointer;
+
+      &::after {
+        position: absolute;
+        display: inline-block;
+        background-size: 20px 20px;
+        right: 0;
+        width: 20px;
+        height: 20px;
+        background-image: url('/img/click.png');
+        content: '';
+        font-family: monospace;
+        transition: transform 200ms;
+      }
+
+      &.is-open::after {
+        opacity: 0.5;
+      }
+    }
+
+    .Collapsible__contentInner {
+      background-color: rgba(36, 173, 197, 0);
+      border-radius: 15px;
+      -moz-border-radius: 15px;
+      padding: 10px;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    details p {
+      font-size: 17px;
+      color: var(--color-gray-dark);
+      margin-left: 20px;
+      margin-right: 10px;
+    }
+
+    details pre {
+      font-size: 14px;
+      color: var(--color-gray-dark);
+      margin-left: 20px;
+      margin-right: 10px;
+    }
+  }
+}
+
+.tutorialsWrapper {
+  position: relative;
+  z-index: 1;
+  float: right;
+  margin: 5px 0 0 10px;
+
+  @media (--md-scr) {
+    margin: 0 0 15px 0;
+  }
+
+  @media only screen and (min-width: 1200px) {
+    display: none;
+  }
+}
+
+.githubLink {
+  display: none;
+  float: right;
+  margin: 5px 0 10px 10px;
+  z-index: 1;
+  position: relative;
+
+  @media (--md-scr) {
+    float: none;
+    margin: 0 0 15px 0;
+  }
+
+  @media only screen and (max-width: 1200px) {
+    display: inline-flex;
+  }
+}
+
+.githubIcon {
+  background-image: url(/img/github_icon.svg);
+}
+
+.navButtons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 40px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.navButton {
+  text-decoration: none;
+  background: white;
+  padding: 10px 15px;
+  text-transform: uppercase;
+  color: #333;
+  border-bottom: 3px solid #13adc7;
+  display: inline-flex;
+  align-items: center;
+  transition: 0.2s border-color ease-out;
+
+  &:hover {
+    border-bottom: 3px solid #11849b;
+  }
+
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+.navButtonIcon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  background-image: url(/img/arrow.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: all 0.3s;
+
+  &.next {
+    margin-left: 7px;
+  }
+
+  &.prev {
+    margin-right: 7px;
+    mask-position: center;
+    transform: rotate(180deg);
+    margin-top: 2px;
+  }
+}
diff --git a/src/components/Documentation/RightPanel/index.js b/src/components/Documentation/RightPanel/index.js
deleted file mode 100644
index 0cd9ce5354..0000000000
--- a/src/components/Documentation/RightPanel/index.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import throttle from 'lodash.throttle'
-
-import Link from '../../Link'
-
-import Tutorials from '../Tutorials'
-
-import { allImagesLoadedInContainer } from '../../../utils/images'
-
-import {
-  Description,
-  DiscordButton,
-  GithubButton,
-  Header,
-  HeadingLink,
-  Spacer,
-  Wrapper
-} from './styles'
-
-const MARKDOWN_ROOT = '#markdown-root'
-
-export default class RightPanel extends React.PureComponent {
-  state = {
-    height: 0,
-    coordinates: {},
-    current: undefined
-  }
-  componentDidMount() {
-    this.root = document.documentElement
-
-    if (this.props.headings.length) {
-      this.initHeadingsPosition()
-    }
-
-    document.addEventListener('scroll', this.setCurrentHeader)
-    window.addEventListener('resize', this.updateHeadingsPosition)
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.headings !== prevProps.headings) {
-      this.initHeadingsPosition()
-    }
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('scroll', this.setCurrentHeader)
-    window.removeEventListener('resize', this.updateHeadingsPosition)
-  }
-
-  initHeadingsPosition = () =>
-    allImagesLoadedInContainer(document.querySelector(MARKDOWN_ROOT)).then(
-      this.updateHeadingsPosition
-    )
-
-  updateHeadingsPosition = () => {
-    const coordinates = this.props.headings.reduce((result, { slug }) => {
-      const headingElement = document.getElementById(slug)
-
-      return { ...result, [headingElement && headingElement.offsetTop]: slug }
-    }, {})
-
-    const height = this.root.clientHeight
-
-    this.setState({ coordinates, height }, this.setCurrentHeader)
-  }
-
-  setCurrentHeader = throttle(() => {
-    const { coordinates, height } = this.state
-    const { scrollTop } = this.root
-    const coordinateKeys = Object.keys(coordinates)
-
-    if (!coordinateKeys.length) return
-
-    const filteredKeys = coordinateKeys.filter(
-      top => top <= scrollTop + height / 2
-    )
-
-    const current = filteredKeys.length
-      ? coordinates[filteredKeys[filteredKeys.length - 1]]
-      : undefined
-
-    this.setState({ current })
-  }, 100)
-
-  render() {
-    const { headings, githubLink, tutorials } = this.props
-    const { current } = this.state
-
-    return (
-      <Wrapper>
-        {!headings.length && <Spacer />}
-        {headings.length > 0 && (
-          <>
-            <Header>Content</Header>
-            <hr />
-            {headings.map(({ slug, text }) => (
-              <Link
-                as={HeadingLink}
-                isCurrent={current === slug}
-                level={3}
-                key={`link-${slug}`}
-                href={`#${slug}`}
-              >
-                {text}
-              </Link>
-            ))}
-            <br />
-          </>
-        )}
-        {Object.keys(tutorials || {}).length > 0 && (
-          <>
-            <Description>
-              <span role="img" aria-label="bug">
-                ▶️
-              </span>{' '}
-              It can be run online:
-            </Description>
-            <Tutorials tutorials={tutorials} />
-            <br />
-          </>
-        )}
-        <Description>
-          <span role="img" aria-label="bug">
-            🐛
-          </span>{' '}
-          Found an issue? Let us know! Or fix it:
-        </Description>
-
-        <GithubButton href={githubLink} target="_blank">
-          <i />
-          Edit on GitHub
-        </GithubButton>
-
-        <br />
-        <br />
-        <Description>
-          <span role="img" aria-label="question">
-            ❓
-          </span>{' '}
-          Have a question? Join our chat, we will help you:
-        </Description>
-
-        <DiscordButton href="/chat" target="_blank">
-          <i />
-          Discord Chat
-        </DiscordButton>
-      </Wrapper>
-    )
-  }
-}
-
-RightPanel.propTypes = {
-  headings: PropTypes.arrayOf(
-    PropTypes.shape({
-      slug: PropTypes.string.isRequired,
-      text: PropTypes.string.isRequired
-    })
-  ).isRequired,
-  tutorials: PropTypes.object,
-  githubLink: PropTypes.string.isRequired
-}
diff --git a/src/components/Documentation/RightPanel/index.tsx b/src/components/Documentation/RightPanel/index.tsx
new file mode 100644
index 0000000000..a5a0e3e751
--- /dev/null
+++ b/src/components/Documentation/RightPanel/index.tsx
@@ -0,0 +1,175 @@
+import React, { useState, useEffect } from 'react'
+import cn from 'classnames'
+import throttle from 'lodash.throttle'
+
+import { IHeading } from '../'
+import Link from '../../Link'
+import Tutorials from '../TutorialsLinks'
+
+import { allImagesLoadedInContainer } from '../../../utils/images'
+
+import sharedStyles from '../styles.module.css'
+import styles from './styles.module.css'
+
+interface IRightPanelProps {
+  headings: Array<IHeading>
+  tutorials: { [type: string]: string }
+  githubLink: string
+}
+
+interface IHeadingsCoordinates {
+  [offset: string]: string
+}
+
+const RightPanel: React.SFC<IRightPanelProps> = ({
+  headings,
+  tutorials,
+  githubLink
+}) => {
+  const [height, setHeight] = useState(0)
+  const [headingsOffsets, setHeadingsOffsets] = useState<IHeadingsCoordinates>(
+    {}
+  )
+  const [current, setCurrent] = useState<string | null>(null)
+  const setCurrentHeader = () => {
+    const { scrollTop } = document.documentElement
+    const coordinateKeys = Object.keys(headingsOffsets)
+
+    if (!coordinateKeys.length) return
+
+    const filteredKeys = coordinateKeys.filter(
+      offsetTop => parseInt(offsetTop, 10) <= scrollTop + height / 2
+    )
+
+    const newCurrent = filteredKeys.length
+      ? headingsOffsets[filteredKeys[filteredKeys.length - 1]]
+      : null
+
+    setCurrent(newCurrent)
+  }
+
+  const updateHeadingsPosition = () => {
+    const offsets = headings.reduce(
+      (result: IHeadingsCoordinates, heading: IHeading) => {
+        const headingElement = document.getElementById(heading.slug)
+
+        if (headingElement?.offsetTop) {
+          result[headingElement.offsetTop.toString()] = heading.slug
+        }
+
+        return result
+      },
+      {}
+    )
+
+    setHeadingsOffsets(offsets)
+    setHeight(document.documentElement.clientHeight)
+    requestAnimationFrame(setCurrentHeader)
+  }
+
+  const initHeadingsPosition = () =>
+    allImagesLoadedInContainer(document.querySelector('#markdown-root')).then(
+      updateHeadingsPosition
+    )
+
+  useEffect(() => {
+    const throttledSetCurrentHeader = throttle(setCurrentHeader, 100)
+
+    document.addEventListener('scroll', throttledSetCurrentHeader)
+    window.addEventListener('resize', updateHeadingsPosition)
+
+    return () => {
+      document.removeEventListener('scroll', throttledSetCurrentHeader)
+      window.removeEventListener('resize', updateHeadingsPosition)
+    }
+  }, [setCurrentHeader])
+  useEffect(initHeadingsPosition, [headings])
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.list}>
+        {headings.length > 0 && (
+          <>
+            <h5 className={styles.header}>Content</h5>
+            <hr className={styles.separator} />
+          </>
+        )}
+        {headings.map(({ slug, text }) => (
+          <Link
+            className={cn(
+              styles.headingLink,
+              current === slug && styles.current
+            )}
+            key={`link-${slug}`}
+            href={`#${slug}`}
+          >
+            {text}
+          </Link>
+        ))}
+      </div>
+      {Object.keys(tutorials || {}).length > 0 && (
+        <div className={styles.buttonSection}>
+          <p className={styles.buttonSectionDescription}>
+            <span
+              className={styles.buttonSectionIcon}
+              role="img"
+              aria-label="run"
+            >
+              ▶️
+            </span>{' '}
+            It can be run online:
+          </p>
+          <Tutorials
+            buttonClassName={cn(styles.button, styles.tutorials)}
+            tutorials={tutorials}
+          />
+        </div>
+      )}
+      <div className={styles.buttonSection}>
+        <p className={styles.buttonSectionDescription}>
+          <span
+            className={styles.buttonSectionIcon}
+            role="img"
+            aria-label="bug"
+          >
+            🐛
+          </span>{' '}
+          Found an issue? Let us know! Or fix it:
+        </p>
+
+        <Link
+          className={cn(sharedStyles.button, styles.button)}
+          href={githubLink}
+          target="_blank"
+        >
+          <i className={cn(sharedStyles.buttonIcon, styles.githubIcon)} />
+          Edit on GitHub
+        </Link>
+      </div>
+
+      <div className={styles.buttonSection}>
+        <p className={styles.buttonSectionDescription}>
+          <span
+            className={styles.buttonSectionIcon}
+            role="img"
+            aria-label="question"
+          >
+            ❓
+          </span>{' '}
+          Have a question? Join our chat, we will help you:
+        </p>
+
+        <Link
+          className={cn(sharedStyles.button, styles.button)}
+          href="/chat"
+          target="_blank"
+        >
+          <i className={cn(sharedStyles.buttonIcon, styles.discordIcon)} />
+          Discord Chat
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default RightPanel
diff --git a/src/components/Documentation/RightPanel/styles.js b/src/components/Documentation/RightPanel/styles.js
deleted file mode 100644
index 39e5845b3e..0000000000
--- a/src/components/Documentation/RightPanel/styles.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import styled from 'styled-components'
-
-import { LightButton } from '../styles'
-
-export const Wrapper = styled.div`
-  width: 170px;
-  min-width: 170px;
-  font-size: 16px;
-  height: calc(100vh - 78px);
-  position: sticky;
-  top: var(--layout-header-height-collapsed);
-
-  @media only screen and (max-width: 1200px) {
-    display: none;
-  }
-
-  hr {
-    opacity: 0.5;
-  }
-`
-
-export const Header = styled.p`
-  color: #3c3937;
-  font-size: 14px;
-  text-transform: uppercase;
-  margin-top: 56px;
-`
-
-export const HeadingLink = styled.a`
-  display: block;
-  position: relative;
-  font-size: 16px;
-  font-weight: 500;
-  color: #a0a8a5;
-  text-decoration: none;
-  font-weight: 400;
-  line-height: 26px;
-  min-height: 26px;
-  margin-bottom: 3px;
-  cursor: pointer;
-
-  ${props =>
-    props.isCurrent &&
-    `
-    color: #000;
-  `}
-
-  &:hover {
-    color: #3c3937;
-  }
-`
-
-export const ExternalButton = styled(LightButton)`
-  box-sizing: border-box;
-  min-width: 170px;
-  margin: 10px 0;
-`
-
-export const GithubButton = styled(ExternalButton)`
-  i {
-    background-image: url(/img/github_icon.svg);
-  }
-`
-
-export const DiscordButton = styled(ExternalButton)`
-  i {
-    background-image: url(/img/discord.svg);
-    width: 1.2em;
-    height: 1.2em;
-  }
-`
-
-export const Spacer = styled.div`
-  height: 65px;
-`
-
-export const Description = styled.p`
-  color: #3c3937;
-`
diff --git a/src/components/Documentation/RightPanel/styles.module.css b/src/components/Documentation/RightPanel/styles.module.css
new file mode 100644
index 0000000000..31854d5de1
--- /dev/null
+++ b/src/components/Documentation/RightPanel/styles.module.css
@@ -0,0 +1,85 @@
+.container {
+  position: sticky;
+  top: var(--layout-header-height-collapsed);
+  flex-shrink: 0;
+  width: 170px;
+  height: calc(100vh - 78px);
+  font-size: 16px;
+  overflow-y: auto;
+
+  @media only screen and (max-width: 1200px) {
+    display: none;
+  }
+}
+
+.separator {
+  border: none;
+  border-top: 1px solid var(--color-lighter-blue);
+}
+
+.list {
+  margin-top: 57px;
+  margin-bottom: 25px;
+}
+
+.header {
+  font-size: 14px;
+  text-transform: uppercase;
+  color: var(--color-black);
+}
+
+.headingLink {
+  position: relative;
+  display: block;
+  min-height: 26px;
+  margin-bottom: 3px;
+  color: var(--color-gray);
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  cursor: pointer;
+
+  &.current {
+    color: var(--color-black);
+  }
+
+  &:hover {
+    color: var(--color-black);
+  }
+}
+
+.buttonSection {
+  & + & {
+    margin-top: 25px;
+  }
+}
+
+.buttonSectionIcon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 5px;
+}
+
+.buttonSectionDescription {
+  margin-bottom: 5px;
+  color: var(--color-black);
+}
+
+.button {
+  width: 100%;
+  justify-content: flex-start;
+
+  &.tutorials {
+    white-space: nowrap;
+  }
+}
+
+.githubIcon {
+  background-image: url(/img/github_icon.svg);
+}
+
+.discordIcon {
+  background-image: url(/img/discord.svg);
+}
diff --git a/src/components/Documentation/Tutorials/index.js b/src/components/Documentation/Tutorials/index.js
deleted file mode 100644
index 360575b70c..0000000000
--- a/src/components/Documentation/Tutorials/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import topairs from 'lodash.topairs'
-import startCase from 'lodash.startcase'
-
-import { ExternalButton, KatacodaButton, Wrapper } from './styles'
-
-const icons = {
-  katacoda: KatacodaButton
-}
-
-export default function Tutorials({ compact, tutorials }) {
-  const tutorialsData = topairs(tutorials)
-
-  return (
-    <Wrapper compact={compact}>
-      {tutorialsData.map(([k, value]) => {
-        const ButtonComponent = icons[k] || ExternalButton
-
-        return (
-          <ButtonComponent
-            href={value}
-            key={value}
-            target="_blank"
-            rel="noreferrer noopener"
-            compact={compact}
-          >
-            {icons[k] && <i />}
-            {!compact && `Run in ${startCase(k)}`}
-          </ButtonComponent>
-        )
-      })}
-    </Wrapper>
-  )
-}
-
-Tutorials.propTypes = {
-  compact: PropTypes.bool,
-  tutorials: PropTypes.object
-}
diff --git a/src/components/Documentation/Tutorials/styles.js b/src/components/Documentation/Tutorials/styles.js
deleted file mode 100644
index 9071315bac..0000000000
--- a/src/components/Documentation/Tutorials/styles.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import styled from 'styled-components'
-
-import { LightButton } from '../styles'
-
-export const Wrapper = styled.div``
-
-export const ExternalButton = styled(LightButton)`
-  box-sizing: border-box;
-  min-height: 36px;
-
-  ${({ compact }) =>
-    !compact &&
-    `
-      width: 100%;
-      margin: 10px 0;
-  `}
-
-  ${({ compact }) =>
-    compact &&
-    `
-      margin-left: 5px;
-
-      i {
-        margin-right: 0;
-      }
-  `}
-`
-
-export const KatacodaButton = styled(ExternalButton)`
-  white-space: nowrap;
-
-  i {
-    background-image: url(/img/katacoda_grey_small.png);
-    width: 24px;
-    height: 24px;
-  }
-`
diff --git a/src/components/Documentation/TutorialsLinks/index.tsx b/src/components/Documentation/TutorialsLinks/index.tsx
new file mode 100644
index 0000000000..10f399a0e7
--- /dev/null
+++ b/src/components/Documentation/TutorialsLinks/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import cn from 'classnames'
+import topairs from 'lodash.topairs'
+import startCase from 'lodash.startcase'
+
+import Link from '../../Link'
+
+import sharedStyles from '../styles.module.css'
+import styles from './styles.module.css'
+
+interface ITutorialsLinksProps {
+  compact?: boolean
+  buttonClassName?: string
+  tutorials: { [type: string]: string }
+}
+
+const TutorialsLinks: React.SFC<ITutorialsLinksProps> = ({
+  compact = false,
+  buttonClassName,
+  tutorials
+}) => (
+  <>
+    {topairs(tutorials).map(([type, href]) => {
+      return (
+        <Link
+          href={href}
+          key={href}
+          className={cn(
+            sharedStyles.button,
+            styles.button,
+            buttonClassName,
+            compact && styles.compact
+          )}
+          target="_blank"
+        >
+          {styles[`${type}Icon`] && (
+            <i className={cn(sharedStyles.buttonIcon, styles[`${type}Icon`])} />
+          )}
+          {!compact && `Run in ${startCase(type)}`}
+        </Link>
+      )
+    })}
+  </>
+)
+
+export default TutorialsLinks
diff --git a/src/components/Documentation/TutorialsLinks/styles.module.css b/src/components/Documentation/TutorialsLinks/styles.module.css
new file mode 100644
index 0000000000..efcdabda40
--- /dev/null
+++ b/src/components/Documentation/TutorialsLinks/styles.module.css
@@ -0,0 +1,21 @@
+.button {
+  &:not(.compact) {
+    & + & {
+      margin-top: 10px;
+    }
+  }
+
+  &.compact {
+    margin-left: 5px;
+
+    .katacodaIcon {
+      margin-right: 0;
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+.katacodaIcon {
+  background-image: url(/img/katacoda_grey_small.png);
+}
diff --git a/src/components/Documentation/index.js b/src/components/Documentation/index.tsx
similarity index 68%
rename from src/components/Documentation/index.js
rename to src/components/Documentation/index.tsx
index 6f724e1eb0..e362e36457 100644
--- a/src/components/Documentation/index.js
+++ b/src/components/Documentation/index.tsx
@@ -1,12 +1,26 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import Markdown from './Markdown'
 import RightPanel from './RightPanel'
 
 import { getItemByPath } from '../../utils/sidebar'
 
-export default function Documentation({ htmlAst, path, headings }) {
+export interface IHeading {
+  slug: string
+  text: string
+}
+
+interface IDocumentationProps {
+  path: string
+  headings: Array<IHeading>
+  htmlAst: object
+}
+
+const Documentation: React.SFC<IDocumentationProps> = ({
+  htmlAst,
+  path,
+  headings
+}) => {
   const { source, prev, next, tutorials } = getItemByPath(path)
   const githubLink = `https://github.com/iterative/dvc.org/blob/master/content${source}`
 
@@ -28,8 +42,4 @@ export default function Documentation({ htmlAst, path, headings }) {
   )
 }
 
-Documentation.propTypes = {
-  path: PropTypes.string,
-  headings: PropTypes.array,
-  htmlAst: PropTypes.object
-}
+export default Documentation
diff --git a/src/components/Documentation/styles.js b/src/components/Documentation/styles.js
deleted file mode 100644
index 37bd1b821d..0000000000
--- a/src/components/Documentation/styles.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from 'styled-components'
-
-export const LightButton = styled.a`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  color: #575e64;
-  background-color: white;
-  border: 1px solid #575e64;
-  text-decoration: none;
-  font-weight: 500;
-  line-height: 30px;
-  padding: 2px 16px;
-  border-radius: 3px;
-  cursor: pointer;
-  transition: 0.2s background-color ease-out;
-  z-index: 1;
-
-  &:hover {
-    background-color: #f5f7f9;
-  }
-
-  i {
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 1em;
-    height: 1em;
-    margin-right: 7px;
-  }
-`
diff --git a/src/components/Documentation/styles.module.css b/src/components/Documentation/styles.module.css
new file mode 100644
index 0000000000..5fff8a51a8
--- /dev/null
+++ b/src/components/Documentation/styles.module.css
@@ -0,0 +1,32 @@
+.button {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 36px;
+  padding: 2px 16px;
+  border: 1px solid var(--color-gray-dark);
+  border-radius: 3px;
+  text-decoration: none;
+  font-weight: 500;
+  line-height: 30px;
+  background-color: white;
+  color: var(--color-gray-dark);
+  cursor: pointer;
+  transition: 0.2s background-color ease-out;
+
+  &:hover {
+    background-color: var(--color-light-blue);
+  }
+}
+
+.buttonIcon {
+  width: 1em;
+  height: 1em;
+  margin-right: 7px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index 8244987329..895c6ece54 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -48,7 +48,7 @@ const Page: React.SFC<IPageProps> = props => {
     <>
       <DefaultSEO />
       <LayoutComponent {...props} />
-      <div id="modal-root" className={styles.modalRoot} />
+      <div id="portal" className={styles.portal} />
     </>
   )
 }
diff --git a/src/components/Page/styles.module.css b/src/components/Page/styles.module.css
index 72dc2483a7..330485dcb0 100644
--- a/src/components/Page/styles.module.css
+++ b/src/components/Page/styles.module.css
@@ -1,4 +1,4 @@
-.modalRoot {
+.portal {
   position: fixed;
   z-index: 100000;
   top: 0;
diff --git a/src/components/ShowOnly/styles.module.css b/src/components/ShowOnly/styles.module.css
index 1ab7295a38..2c73891038 100644
--- a/src/components/ShowOnly/styles.module.css
+++ b/src/components/ShowOnly/styles.module.css
@@ -1,15 +1,15 @@
 .mobile {
-  display: none;
+  display: none !important;
 
   @media (--xs-scr) {
-    display: initial;
+    display: initial !important;
   }
 }
 
 .desktop {
-  display: initial;
+  display: initial !important;
 
   @media (--xs-scr) {
-    display: none;
+    display: none !important;
   }
 }
diff --git a/src/components/Tooltip/DesktopView/index.js b/src/components/Tooltip/DesktopView/index.js
deleted file mode 100644
index 8866268cc1..0000000000
--- a/src/components/Tooltip/DesktopView/index.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import ReactMarkdown from 'react-markdown'
-
-import { HEADER } from '../../../consts'
-
-import { HighlightedText, TooltipContainer, TooltipText } from './styles'
-
-export default class DesktopView extends Component {
-  state = {
-    hover: false,
-    margin: -70,
-    pointBorderAfter: 'white transparent transparent transparent',
-    pointBorderBefore: '#d1d5da transparent transparent transparent',
-    pointMargin: -15,
-    pointTop: 100,
-    pointTopAfter: -14,
-    pointTopBefore: 16,
-    top: 'unset',
-    width: 400
-  }
-
-  tooltipPositionEval = () => {
-    const headerHeight = document.getElementById(HEADER).offsetHeight
-    const markdownBody = document.getElementById('markdown-root')
-    const tooltipBoundary = document
-      .getElementById(`tooltip-text-${this.props.id}`)
-      .getBoundingClientRect()
-    const tooltipBoxHeight = document.getElementById(
-      `tooltip-box-${this.props.id}`
-    ).offsetHeight
-    const tooltipHeight = tooltipBoundary.top - tooltipBoxHeight
-    const maxWidth = markdownBody.offsetLeft + markdownBody.clientWidth
-    const container = document.getElementById(
-      `tooltip-container-${this.props.id}`
-    )
-    const tooltipWidth = container.offsetLeft + this.state.width
-    const vertical = tooltipHeight > headerHeight ? 'top' : 'bottom'
-    const horizontal = tooltipWidth > maxWidth ? 'right' : 'left'
-
-    switch (`${horizontal} ${vertical}`) {
-      case 'left top':
-        this.setState({
-          margin: -10,
-          pointBorderAfter: 'white transparent transparent transparent',
-          pointBorderBefore: '#d1d5da transparent transparent transparent',
-          pointMargin: -15,
-          pointTop: 100,
-          pointTopAfter: 'unset',
-          pointTopBefore: 'unset',
-          top: -tooltipBoxHeight - 5
-        })
-        break
-      case 'right top':
-        this.setState({
-          margin: -290,
-          pointBorderAfter: 'white transparent transparent transparent',
-          pointBorderBefore: '#d1d5da transparent transparent transparent',
-          pointMargin: 260,
-          pointTop: 100,
-          pointTopAfter: 'unset',
-          pointTopBefore: 'unset',
-          top: -tooltipBoxHeight - 5
-        })
-        break
-      case 'left bottom':
-        this.setState({
-          margin: -10,
-          pointBorderAfter: 'transparent transparent white transparent',
-          pointBorderBefore: 'transparent transparent #d1d5da transparent',
-          pointMargin: -15,
-          pointTop: -15,
-          pointTopAfter: -20,
-          pointTopBefore: -23,
-          top: 40
-        })
-        break
-      case 'right bottom':
-        this.setState({
-          margin: -290,
-          pointBorderAfter: 'transparent transparent white transparent',
-          pointBorderBefore: 'transparent transparent #d1d5da transparent',
-          pointMargin: 260,
-          pointTop: -15,
-          pointTopAfter: -20,
-          pointTopBefore: -23,
-          top: 40
-        })
-        break
-    }
-  }
-  hoverIn = () => {
-    if (this.state.interval) {
-      clearTimeout(this.state.interval)
-      this.setState(
-        {
-          interval: null,
-          hover: true
-        },
-        this.tooltipPositionEval
-      )
-    } else {
-      this.setState(
-        {
-          hover: true
-        },
-        this.tooltipPositionEval
-      )
-    }
-  }
-
-  hoverOut = () => {
-    this.setState({
-      interval: setTimeout(() => {
-        this.setState({
-          hover: false
-        })
-      }, 100)
-    })
-  }
-
-  render() {
-    return (
-      <>
-        {this.state.hover && (
-          <TooltipContainer
-            id={`tooltip-container-${this.props.id}`}
-            onMouseOver={this.hoverIn}
-            onFocus={this.hoverIn}
-            onMouseLeave={this.hoverOut}
-            onBlur={this.hoverOut}
-          >
-            <TooltipText
-              id={`tooltip-box-${this.props.id}`}
-              margin={this.state.margin}
-              width={this.state.width}
-              pointBorderAfter={this.state.pointBorderAfter}
-              pointBorderBefore={this.state.pointBorderBefore}
-              pointMargin={this.state.pointMargin}
-              pointTop={this.state.pointTop}
-              pointTopBefore={this.state.pointTopBefore}
-              pointTopAfter={this.state.pointTopAfter}
-              top={this.state.top}
-              bottom={this.state.bottom}
-            >
-              <div className="header">{this.props.header}</div>
-              <ReactMarkdown source={this.props.description} />
-            </TooltipText>
-          </TooltipContainer>
-        )}
-        <HighlightedText
-          id={`tooltip-text-${this.props.id}`}
-          onMouseOver={this.hoverIn}
-          onMouseLeave={this.hoverOut}
-          onFocus={this.hoverIn}
-          onBlur={this.hoverOut}
-        >
-          {this.props.text}
-        </HighlightedText>
-      </>
-    )
-  }
-}
-
-DesktopView.propTypes = {
-  description: PropTypes.string.isRequired,
-  header: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  text: PropTypes.node.isRequired
-}
diff --git a/src/components/Tooltip/DesktopView/styles.js b/src/components/Tooltip/DesktopView/styles.js
deleted file mode 100644
index 1de03c0c8e..0000000000
--- a/src/components/Tooltip/DesktopView/styles.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import styled from 'styled-components'
-
-export const HighlightedText = styled.span`
-  border-bottom: 1px black dotted;
-`
-
-export const TooltipContainer = styled.div`
-  position: absolute;
-  display: inline-block;
-  z-index: 300000000;
-  background-color: white;
-`
-
-export const TooltipText = styled.div`
-  color: black;
-  padding: 8px 10px;
-  border: 1px solid #d1d5da;
-  border-radius: 3px;
-  background-color: white;
-  position: absolute;
-  z-index: 1;
-  top: ${props => {
-    if (props.top === 'unset') {
-      return 'unset'
-    } else {
-      return `${props.top}px`
-    }
-  }};
-  margin-left: ${props => props.margin || -70}px;
-  width: ${props => props.width || 400}px;
-
-  &:after,
-  &:before {
-    content: '';
-    position: absolute;
-    top: ${props => props.pointTop}%;
-    border-style: solid;
-    margin-left: ${props => props.pointMargin || -15}px;
-  }
-
-  &:after {
-    top: ${props => props.pointTopAfter}px;
-    left: 10%;
-    border-width: 10px;
-    border-color: ${props => props.pointBorderAfter};
-  }
-  &:before {
-    top: ${props => props.pointTopBefore}px;
-    left: 10%;
-    border-width: 11px;
-    border-color: ${props => props.pointBorderBefore};
-  }
-
-  .header {
-    font-size: 1.3em;
-    font-weight: bold;
-  }
-`
diff --git a/src/components/Tooltip/MobileView/Modal/index.js b/src/components/Tooltip/MobileView/Modal/index.js
deleted file mode 100644
index 67d26494f3..0000000000
--- a/src/components/Tooltip/MobileView/Modal/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types'
-
-const Modal = ({ children }) =>
-  ReactDOM.createPortal(children, document.getElementById('modal-root'))
-
-Modal.propTypes = {
-  children: PropTypes.node.isRequired
-}
-
-export default Modal
diff --git a/src/components/Tooltip/MobileView/index.js b/src/components/Tooltip/MobileView/index.js
deleted file mode 100644
index b12d8ef243..0000000000
--- a/src/components/Tooltip/MobileView/index.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { Component } from 'react'
-import ReactMarkdown from 'react-markdown'
-import PropTypes from 'prop-types'
-
-import Modal from './Modal'
-
-import {
-  CloseContainer,
-  Header,
-  HighlightedText,
-  Line,
-  ModalBackground,
-  ModalContent
-} from './styles'
-
-export default class MobileView extends Component {
-  state = {
-    visible: false
-  }
-
-  openTooltip = e => {
-    e.stopPropagation()
-    this.setState({
-      visible: true
-    })
-  }
-
-  closeTooltip = e => {
-    e.stopPropagation()
-    this.setState({
-      visible: false
-    })
-  }
-
-  render() {
-    return (
-      <>
-        <HighlightedText onClick={this.openTooltip}>
-          {this.props.text}
-        </HighlightedText>
-        {this.state.visible && (
-          <Modal>
-            <ModalBackground onClick={this.closeTooltip}>
-              <ModalContent onClick={this.openTooltip}>
-                <CloseContainer onClick={this.closeTooltip}>
-                  <Line first />
-                  <Line second />
-                </CloseContainer>
-                <Header>{this.props.header}</Header>
-                <ReactMarkdown
-                  className="markdown-body portal-font"
-                  source={this.props.description}
-                />
-              </ModalContent>
-            </ModalBackground>
-          </Modal>
-        )}
-      </>
-    )
-  }
-}
-
-MobileView.propTypes = {
-  description: PropTypes.string.isRequired,
-  header: PropTypes.string.isRequired,
-  text: PropTypes.node.isRequired
-}
diff --git a/src/components/Tooltip/MobileView/styles.js b/src/components/Tooltip/MobileView/styles.js
deleted file mode 100644
index 72b342d310..0000000000
--- a/src/components/Tooltip/MobileView/styles.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import styled from 'styled-components'
-
-export const HighlightedText = styled.span`
-  border-bottom: 1px black dotted;
-`
-
-export const ModalBackground = styled.div`
-  height: 100vh;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.4);
-`
-
-export const CloseContainer = styled.div`
-  float: right;
-  margin: 2px 10px 0 0;
-`
-export const Line = styled.div`
-  position: absolute;
-  height: 23px;
-  width: 2px;
-  background-color: black;
-
-  ${props =>
-    props.first &&
-    `
-      transform: rotate(-45deg);
-  `}
-
-  ${props =>
-    props.second &&
-    `
-      transform: rotate(45deg);
-  `}
-`
-
-export const ModalContent = styled.div`
-  width: 80%;
-  background-color: #ffffff;
-  padding: 8px 10px;
-  border: 1px solid #d1d5da;
-  border-radius: 3px;
-
-  .portal-font {
-    font-family: BrandonGrotesque;
-  }
-`
-
-export const Header = styled.div`
-  font-size: 1.3em;
-  font-weight: bold;
-`
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
deleted file mode 100644
index a43c7b0d57..0000000000
--- a/src/components/Tooltip/index.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import includes from 'lodash.includes'
-
-import DesktopView from './DesktopView'
-import MobileView from './MobileView'
-
-import glossary from '../../../content/docs/glossary'
-
-import { OnlyDesktopInline, OnlyMobileInline } from '../../styles'
-
-class Tooltip extends Component {
-  state = {
-    description: '',
-    header: '',
-    match: false
-  }
-
-  componentDidMount() {
-    glossary.contents.forEach(glossaryItem => {
-      if (
-        includes(
-          glossaryItem.match.map(word => word.toLowerCase()),
-          this.props.text.replace(/\n/g, ' ').toLowerCase()
-        )
-      ) {
-        this.setState({
-          description: glossaryItem.desc,
-          header: glossaryItem.name,
-          match: true
-        })
-      }
-    })
-  }
-
-  render() {
-    if (this.state.match) {
-      return (
-        <>
-          <OnlyDesktopInline>
-            <DesktopView
-              description={this.state.description}
-              header={this.state.header}
-              id={this.props.text}
-              text={this.props.text}
-            />
-          </OnlyDesktopInline>
-          <OnlyMobileInline>
-            <MobileView
-              description={this.state.description}
-              header={this.state.header}
-              text={this.props.text}
-            />
-          </OnlyMobileInline>
-        </>
-      )
-    } else {
-      return <span>{this.props.text}</span>
-    }
-  }
-}
-
-Tooltip.propTypes = {
-  text: PropTypes.node.isRequired
-}
-
-export default Tooltip
diff --git a/src/consts.js b/src/consts.js
index 0cdc99dd0e..181f40907d 100644
--- a/src/consts.js
+++ b/src/consts.js
@@ -1,7 +1,5 @@
 /* eslint-env node */
 
-const HEADER = 'header'
-
 const WEBSITE_HOST = 'dvc.org'
 
 const FORUM_URL = `https://discuss.${WEBSITE_HOST}`
@@ -21,7 +19,6 @@ const BLOG = {
 }
 
 module.exports = {
-  HEADER,
   FORUM_URL,
   BLOG,
   PAGE_DOC
diff --git a/yarn.lock b/yarn.lock
index b7ea29ea5c..ccdf4820d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1896,6 +1896,27 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.startcase@^4.4.6":
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.startcase/-/lodash.startcase-4.4.6.tgz#0e91c90004c87f738ae495a24e7b858cdecf0e2f"
+  integrity sha512-wtUyl30SWGQY08prEd5zdflQKbl/lwKXwLfWaQbTLwnGPFAFkAWOOOI/WYVfK8p61CtfmCbxNHvnTK4vW2idxg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash.throttle@^4.1.6":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz#f5ba2c22244ee42ff6c2c49e614401a870c1009c"
+  integrity sha512-/UIH96i/sIRYGC60NoY72jGkCJtFN5KVPhEMMMTjol65effe1gPn0tycJqV5tlSwMTzX8FqzB5yAj0rfGHTPNg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash.topairs@^4.3.6":
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.topairs/-/lodash.topairs-4.3.6.tgz#6b972d1dfda3646166f1cd659ba085bd3e3770a3"
+  integrity sha512-0nrOtPvP6BUEUpCqPKdtnaPK6z4rcBOIf3rBBPnWhxuYujAToErBiakFKWWWWdosdqI/W/kpaiegxpeheXTNxA==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash@*", "@types/lodash@^4.14.92":
   version "4.14.149"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
@@ -1975,6 +1996,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^16.9.6":
+  version "16.9.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.6.tgz#9e7f83d90566521cc2083be2277c6712dcaf754c"
+  integrity sha512-S6ihtlPMDotrlCJE9ST1fRmYrQNNwfgL61UB4I1W7M6kPulUKx9fXAleW5zpdIjUQ4fTaaog8uERezjsGUj9HQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-helmet@^5.0.15":
   version "5.0.15"
   resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-5.0.15.tgz#af0370617307e9f062c6aee0f1f5588224ce646e"
@@ -2020,6 +2048,13 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/rehype-react@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/rehype-react/-/rehype-react-4.0.0.tgz#55b71cc7329b6effb8f66b8ea08c2d016680db97"
+  integrity sha512-t4fsoAYXRGGUTWesgb+eLdTEjGdFy4d5Cmz9ct2XwgUkmsAns6si9jkQ/FOrxMB/SUQ9ax0ZkKgXmHeIM7XkKg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/rimraf@^2.0.2":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/rimraf/-/rimraf-2.0.4.tgz#403887b0b53c6100a6c35d2ab24f6ccc042fec46"

From 251514de442d95794a90cb718c3e813d56f49f8e Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 11:37:34 +0300
Subject: [PATCH 17/51] Refactor root html file to TS

---
 src/{html.js => html.tsx} | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)
 rename src/{html.js => html.tsx} (68%)

diff --git a/src/html.js b/src/html.tsx
similarity index 68%
rename from src/html.js
rename to src/html.tsx
index b9ba842123..e352767f0d 100644
--- a/src/html.js
+++ b/src/html.tsx
@@ -1,8 +1,16 @@
 /* eslint jsx-a11y/html-has-lang:0 */
 import React from 'react'
-import PropTypes from 'prop-types'
 
-export default function HTML(props) {
+interface IHTMLProps {
+  htmlAttributes: object
+  headComponents: Array<React.ReactNode>
+  bodyAttributes: object
+  preBodyComponents: Array<React.ReactNode>
+  body: string
+  postBodyComponents: Array<React.ReactNode>
+}
+
+const HTML: React.SFC<IHTMLProps> = props => {
   return (
     <html {...props.htmlAttributes}>
       <head>
@@ -27,11 +35,4 @@ export default function HTML(props) {
   )
 }
 
-HTML.propTypes = {
-  htmlAttributes: PropTypes.object,
-  headComponents: PropTypes.array,
-  bodyAttributes: PropTypes.object,
-  preBodyComponents: PropTypes.array,
-  body: PropTypes.string,
-  postBodyComponents: PropTypes.array
-}
+export default HTML

From 113bfba6fdccb50c92a2db574ecb368b07e0ae94 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 11:43:54 +0300
Subject: [PATCH 18/51] Get rid of styled-components

---
 .tmp-empty-package/index.d.ts   |   0
 .tmp-empty-package/package.json |   6 --
 gatsby-config.js                |   1 -
 package.json                    |   7 --
 src/components/Link/index.tsx   |  14 +---
 src/styles.js                   | 129 ------------------------------
 yarn.lock                       | 136 ++------------------------------
 7 files changed, 8 insertions(+), 285 deletions(-)
 delete mode 100644 .tmp-empty-package/index.d.ts
 delete mode 100644 .tmp-empty-package/package.json
 delete mode 100644 src/styles.js

diff --git a/.tmp-empty-package/index.d.ts b/.tmp-empty-package/index.d.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/.tmp-empty-package/package.json b/.tmp-empty-package/package.json
deleted file mode 100644
index 32a2f44040..0000000000
--- a/.tmp-empty-package/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "empty-package",
-  "version": "1.0.0",
-  "main": "index.js",
-  "license": "MIT"
-}
diff --git a/gatsby-config.js b/gatsby-config.js
index 4780c89fd6..f2c1b2266d 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -30,7 +30,6 @@ const plugins = [
     }
   },
   'gatsby-plugin-postcss',
-  'gatsby-plugin-styled-components',
   'gatsby-plugin-react-helmet',
   'gatsby-plugin-sitemap',
   'gatsby-plugin-twitter',
diff --git a/package.json b/package.json
index 167dae970d..6ba0802508 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,6 @@
     "scroll": "^3.0.1",
     "serve-handler": "^6.1.2",
     "slick-carousel": "^1.8.1",
-    "styled-components": "^4.4.1",
     "unist-util-visit": "2.0.2"
   },
   "devDependencies": {
@@ -101,14 +100,12 @@
     "@types/react-popover": "^0.5.3",
     "@types/react-slick": "^0.23.4",
     "@types/rehype-react": "^4.0.0",
-    "@types/styled-components": "^5.0.1",
     "@types/vfile-message": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
     "@typescript-eslint/parser": "^2.24.0",
     "autoprefixer": "^9.7.4",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
-    "babel-plugin-styled-components": "^1.10.7",
     "babel-plugin-transform-define": "^2.0.0",
     "babel-plugin-transform-object-assign": "^6.22.0",
     "eslint": "^6.7.2",
@@ -125,7 +122,6 @@
     "gatsby-plugin-sentry": "^1.0.1",
     "gatsby-plugin-sharp": "^2.5.2",
     "gatsby-plugin-sitemap": "^2.2.27",
-    "gatsby-plugin-styled-components": "^3.1.19",
     "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-plugin-twitter": "^2.2.0",
     "gatsby-plugin-typescript": "^2.2.5",
@@ -161,9 +157,6 @@
     "stylelint-config-standard": "^20.0.0",
     "typescript": "^3.8.3"
   },
-  "resolutions": {
-    "@types/react-native": "link:./.tmp-empty-package"
-  },
   "husky": {
     "hooks": {
       "pre-commit": "yarn lint-staged"
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index e7ade5b392..df465d93cc 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -1,14 +1,12 @@
 import React from 'react'
 import { useLocation, navigate } from '@reach/router'
 import GatsbyLink from 'gatsby-link'
-import { StyledComponentBase } from 'styled-components'
 import { handleFrontRedirect } from '../../utils/redirects'
 import { scrollIntoLayout } from '../../utils/scroll'
 
 export type ILinkProps = {
   children: React.ReactNode
   className?: string
-  as?: StyledComponentBase<React.ComponentClass, {}>
   href: string
   target?: undefined | '_blank'
   state?: unknown
@@ -26,7 +24,6 @@ const getLocation = (href: string) => {
 
 const Link: React.SFC<ILinkProps> = ({
   children,
-  as: SC,
   href,
   target,
   ...restProps
@@ -34,7 +31,6 @@ const Link: React.SFC<ILinkProps> = ({
   const currentLocation = useLocation()
 
   if (!isRelative(href) || target) {
-    const LinkComponent = SC ? SC : 'a'
     let rel = 'noopener noreferrer'
 
     if (restProps.rel) {
@@ -42,9 +38,9 @@ const Link: React.SFC<ILinkProps> = ({
     }
 
     return (
-      <LinkComponent href={href} rel={rel} target={target} {...restProps}>
+      <a href={href} rel={rel} target={target} {...restProps}>
         {children}
-      </LinkComponent>
+      </a>
     )
   }
 
@@ -80,11 +76,7 @@ const Link: React.SFC<ILinkProps> = ({
     href = currentLocation.pathname + href
   }
 
-  return SC ? (
-    <SC to={href} {...restProps} as={GatsbyLink} onClick={onClick}>
-      {children}
-    </SC>
-  ) : (
+  return (
     <GatsbyLink to={href} {...restProps} onClick={onClick}>
       {children}
     </GatsbyLink>
diff --git a/src/styles.js b/src/styles.js
deleted file mode 100644
index e904dc9b41..0000000000
--- a/src/styles.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import styled, { css } from 'styled-components'
-
-const maxWidth = 1005
-
-export const sizes = {
-  giant: 1170,
-  desktop: 992,
-  tablet: 768,
-  phone: 376
-}
-
-sizes.phablet = Math.floor((sizes.tablet + sizes.phone) / 2)
-
-export const media = Object.keys(sizes).reduce((acc, s) => {
-  return Object.assign(acc, {
-    [s]: (...args) => css`
-      @media (max-width: ${sizes[s]}px) {
-        ${css(...args)};
-      }
-    `
-  })
-}, {})
-
-export const container = css`
-  margin: 0 auto;
-  max-width: ${maxWidth}px;
-  padding: 0px 15px;
-
-  ${media.tablet`
-    padding: 0px 61px 0px 67px;
-    max-width: auto;
-  `}
-
-  ${media.phablet`
-    padding: 0px 31px 0px 31px;
-    max-width: auto;
-  `};
-
-  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-    padding: 0px 61px 0px 67px;
-    max-width: auto;
-  }
-`
-
-export const Mark = styled.span`
-  ${props =>
-    props.bg &&
-    `
-    background-color: ${props.bg};
-  `}
-
-  ${props =>
-    props.text &&
-    `
-    color: ${props.text};
-  `}
-  padding-left: 2px;
-  padding-right: 2px;
-`
-
-export const columns = css`
-  display: flex;
-  flex-direction: row;
-  flex-flow: wrap;
-  justify-content: space-between;
-
-  ${media.tablet`
-    flex-direction: row;
-  `};
-
-  ${media.phablet`
-    justify-content: center;
-  `};
-`
-
-export const column = css`
-  flex-basis: 33.3%;
-
-  ${media.tablet`
-    flex-basis: 50%;
-  `};
-
-  ${media.phablet`
-    flex-basis: 100%;
-  `};
-`
-
-export const centered = css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-`
-
-export const OnlyMobile = styled.div`
-  display: none;
-  ${media.giant`display: none;`};
-  ${media.desktop`display: none;`};
-  ${media.tablet`display: none;`};
-  ${media.phablet`display: initial;`};
-  ${media.phone`display: initial;`};
-`
-
-export const OnlyDesktop = styled.div`
-  display: initial;
-  ${media.giant`display: initial;`};
-  ${media.desktop`display: initial;`};
-  ${media.tablet`display: initial;`};
-  ${media.phablet`display: none;`};
-  ${media.phone`display: none;`};
-`
-
-export const OnlyMobileInline = styled.span`
-  display: none;
-  ${media.giant`display: none;`};
-  ${media.desktop`display: none;`};
-  ${media.tablet`display: none;`};
-  ${media.phablet`display: inline-block;`};
-  ${media.phone`display: inline-block;`};
-`
-
-export const OnlyDesktopInline = styled.span`
-  display: inline-block;
-  ${media.giant`display: inline-block;`};
-  ${media.desktop`display: inline-block;`};
-  ${media.tablet`display: inline-block;`};
-  ${media.phablet`display: none;`};
-  ${media.phone`display: none;`};
-`
diff --git a/yarn.lock b/yarn.lock
index ccdf4820d0..8c5b5c13fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -57,7 +57,7 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.8.3":
+"@babel/helper-annotate-as-pure@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
   integrity sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==
@@ -168,7 +168,7 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.8.3":
+"@babel/helper-module-imports@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
   integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==
@@ -880,7 +880,7 @@
     "@babel/parser" "^7.8.6"
     "@babel/types" "^7.8.6"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.0", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.0", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.0.tgz#d3882c2830e513f4fe4cec9fe76ea1cc78747892"
   integrity sha512-jAZQj0+kn4WTHO5dUZkZKhbFrqZE7K5LAQ5JysMnmvGij+wOdr+8lWqPeW0BcF4wFwrEXXtdGO7wcV6YPJcf3w==
@@ -917,23 +917,6 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
-"@emotion/is-prop-valid@^0.8.1":
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
-  dependencies:
-    "@emotion/memoize" "0.7.4"
-
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
-
-"@emotion/unitless@^0.7.0":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1846,14 +1829,6 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"
   integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==
 
-"@types/hoist-non-react-statics@*":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/isomorphic-fetch@^0.0.35":
   version "0.0.35"
   resolved "https://registry.yarnpkg.com/@types/isomorphic-fetch/-/isomorphic-fetch-0.0.35.tgz#c1c0d402daac324582b6186b91f8905340ea3361"
@@ -2010,10 +1985,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-native@*":
-  version "0.0.0"
-  uid ""
-
 "@types/react-native@link:./.tmp-empty-package":
   version "0.0.0"
   uid ""
@@ -2068,16 +2039,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
-"@types/styled-components@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.0.1.tgz#44d210b0a0218a70df998d1a8e1f69c82d9cc68b"
-  integrity sha512-1yRYO1dAE2MGEuYKF1yQFeMdoyerIQn6ZDnFFkxZamcs3rn8RQVn98edPsTROAxbTz81tqnVN4BJ3Qs1cm/tKg==
-  dependencies:
-    "@types/hoist-non-react-statics" "*"
-    "@types/react" "*"
-    "@types/react-native" "*"
-    csstype "^2.2.0"
-
 "@types/tmp@^0.0.33":
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.33.tgz#1073c4bc824754ae3d10cfab88ab0237ba964e4d"
@@ -2966,21 +2927,6 @@ babel-plugin-remove-graphql-queries@^2.8.1:
   resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.8.1.tgz#dde87a8d42a08f87575119a5b88cd5f53107d068"
   integrity sha512-c/JNri17WypqZNnMsX2PweMe8e5hsJcYNO/VnUBX9iUIvmKBjd143RaUQq0xYa6bpQF0kzpTFVR0sOp+cQlBOQ==
 
-"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.7:
-  version "1.10.7"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c"
-  integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.0.0"
-    "@babel/helper-module-imports" "^7.0.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    lodash "^4.17.11"
-
-babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 babel-plugin-transform-define@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-define/-/babel-plugin-transform-define-2.0.0.tgz#79c3536635f899aabaf830b194b25519465675a4"
@@ -3683,11 +3629,6 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelize@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
-  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
-
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -4510,11 +4451,6 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-color-keywords@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
-  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
-
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -4593,15 +4529,6 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.2"
     regexpu-core "^4.6.0"
 
-css-to-react-native@^2.2.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
-  integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==
-  dependencies:
-    camelize "^1.0.0"
-    css-color-keywords "^1.0.0"
-    postcss-value-parser "^3.3.0"
-
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -6944,13 +6871,6 @@ gatsby-plugin-sitemap@^2.2.27:
     pify "^3.0.0"
     sitemap "^1.13.0"
 
-gatsby-plugin-styled-components@^3.1.19:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-3.2.1.tgz#de37983e1c72376f8800b8535f2edb033fd9449f"
-  integrity sha512-JYvKkO/PRWhoha9QeN0f4IUqINUNCWyAuzB+UzxOG2Ef0pD5omi8sFgtSBawiZjOwFMFvxp7vCiEf7N4K3BP7Q==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-
 gatsby-plugin-svgr@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-svgr/-/gatsby-plugin-svgr-2.0.2.tgz#22e08fb67ec63b68aca6ac3e89962af20214e2a5"
@@ -9246,11 +9166,6 @@ is-valid-path@^0.1.1:
   dependencies:
     is-invalid-path "^0.1.0"
 
-is-what@^3.3.1:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.7.1.tgz#a3f810a99f88e9122cf17bf2be7709688970db1a"
-  integrity sha512-IAoapxlqyLSqt0Zr/7ZMT/fjEw9nwxxmz/TlBH+TJjvcXxmmAdRvo41W74uw3XJMGFpbeft97cpkPmLK89lJWw==
-
 is-whitespace-character@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -10756,11 +10671,6 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
-memoize-one@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
-  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
-
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -10810,13 +10720,6 @@ meow@^6.0.1:
     type-fest "^0.8.1"
     yargs-parser "^18.1.1"
 
-merge-anything@^2.2.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.4.tgz#6226b2ac3d3d3fc5fb9e8d23aa400df25f98fdf0"
-  integrity sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==
-  dependencies:
-    is-what "^3.3.1"
-
 merge-deep@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@@ -13390,7 +13293,7 @@ react-hot-loader@^4.12.20:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
+react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -15518,25 +15421,6 @@ style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-components@^4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2"
-  integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@emotion/is-prop-valid" "^0.8.1"
-    "@emotion/unitless" "^0.7.0"
-    babel-plugin-styled-components ">= 1"
-    css-to-react-native "^2.2.2"
-    memoize-one "^5.0.0"
-    merge-anything "^2.2.4"
-    prop-types "^15.5.4"
-    react-is "^16.6.0"
-    stylis "^3.5.0"
-    stylis-rule-sheet "^0.0.10"
-    supports-color "^5.5.0"
-
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -15612,21 +15496,11 @@ stylelint@^13.2.1:
     v8-compile-cache "^2.1.0"
     write-file-atomic "^3.0.3"
 
-stylis-rule-sheet@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-
 stylis@3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"
   integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw==
 
-stylis@^3.5.0:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
-
 sudo-prompt@^8.2.0:
   version "8.2.5"
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e"
@@ -15644,7 +15518,7 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
+supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==

From c826e3ece9993077923c032c9b9b7fde4434abab Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 11:49:36 +0300
Subject: [PATCH 19/51] Add util for handling keyboard events to follow DRY

---
 src/components/Community/Section/index.tsx               | 3 ++-
 .../Documentation/Markdown/Tooltip/MobileView/index.tsx  | 5 +++--
 src/components/Home/UseCases/CollapsibleText/index.tsx   | 4 +++-
 src/components/Support/Popover/index.tsx                 | 4 +++-
 src/utils/keyboard.ts                                    | 9 +++++++++
 5 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/keyboard.ts

diff --git a/src/components/Community/Section/index.tsx b/src/components/Community/Section/index.tsx
index 908b324602..3868f242a3 100644
--- a/src/components/Community/Section/index.tsx
+++ b/src/components/Community/Section/index.tsx
@@ -4,6 +4,7 @@ import { useLocation } from '@reach/router'
 import { Collapse } from 'react-collapse'
 import { useWindowSize } from 'react-use'
 
+import { isTriggeredFromKB } from '../../../utils/keyboard'
 import { screens } from '../../../../config/postcss/media'
 
 import styles from './styles.module.css'
@@ -39,7 +40,7 @@ const Section: React.SFC<ICommunitySection> = ({
   )
   const toggleFromKeyboard = useCallback(
     (e: React.KeyboardEvent) => {
-      if (e.which === 13 || e.which === 32) {
+      if (isTriggeredFromKB(e)) {
         toggleVisibility()
       }
     },
diff --git a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
index c9124f7220..83c8871ebd 100644
--- a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
+++ b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
@@ -3,6 +3,7 @@ import cn from 'classnames'
 import ReactMarkdown from 'react-markdown'
 
 import Portal from '../Portal'
+import { isTriggeredFromKB } from '../../../../../utils/keyboard'
 
 import styles from './styles.module.css'
 
@@ -23,7 +24,7 @@ const MobileView: React.SFC<IMobileViewProps> = ({
     setVisible(true)
   }
   const onOpenKeyDown = (e: React.KeyboardEvent) => {
-    if (e.which === 13 || e.which === 32) {
+    if (isTriggeredFromKB(e)) {
       setVisible(true)
     }
   }
@@ -32,7 +33,7 @@ const MobileView: React.SFC<IMobileViewProps> = ({
     setVisible(false)
   }
   const onCloseKeyDown = (e: React.KeyboardEvent) => {
-    if (e.which === 13 || e.which === 32) {
+    if (isTriggeredFromKB(e)) {
       setVisible(false)
     }
   }
diff --git a/src/components/Home/UseCases/CollapsibleText/index.tsx b/src/components/Home/UseCases/CollapsibleText/index.tsx
index 758228faab..fcbcc10c2a 100644
--- a/src/components/Home/UseCases/CollapsibleText/index.tsx
+++ b/src/components/Home/UseCases/CollapsibleText/index.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
 import { Collapse } from 'react-collapse'
 
+import { isTriggeredFromKB } from '../../../../utils/keyboard'
+
 import styles from './styles.module.css'
 
 interface ICollapsibleTextProps {
@@ -15,7 +17,7 @@ const CollapsibleText: React.SFC<ICollapsibleTextProps> = ({
   const [isOpened, setOpened] = useState(false)
   const toggle = () => setOpened(prev => !prev)
   const toggleFromKB = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.which === 13 || e.which === 32) {
+    if (isTriggeredFromKB(e)) {
       toggle()
     }
   }
diff --git a/src/components/Support/Popover/index.tsx b/src/components/Support/Popover/index.tsx
index 672f27219d..6b486ba5ee 100644
--- a/src/components/Support/Popover/index.tsx
+++ b/src/components/Support/Popover/index.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
 import ReactPopover, { PopoverProps } from 'react-popover'
 
+import { isTriggeredFromKB } from '../../../utils/keyboard'
+
 import './styles.module.css'
 
 type IPopoverProps = {
@@ -11,7 +13,7 @@ const Popover: React.SFC<IPopoverProps> = ({ children, ...restProps }) => {
   const [isOpened, setOpened] = useState(false)
   const toggle = () => setOpened(prev => !prev)
   const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.which === 13 || e.which === 32) {
+    if (isTriggeredFromKB(e)) {
       toggle()
     }
   }
diff --git a/src/utils/keyboard.ts b/src/utils/keyboard.ts
new file mode 100644
index 0000000000..e0c86c65d7
--- /dev/null
+++ b/src/utils/keyboard.ts
@@ -0,0 +1,9 @@
+import React from 'react'
+
+enum KEYS {
+  RETURN = 13,
+  SPACE = 32
+}
+
+export const isTriggeredFromKB = (e: React.KeyboardEvent) =>
+  e.which === KEYS.RETURN || e.which === KEYS.SPACE

From 87153d359de51de58e850f2d229ed5d8491c06a3 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 12:29:47 +0300
Subject: [PATCH 20/51] Remove hack from SearchForm to avoiding loading
 conflict with mailchimp embed script (as it was removed before)

---
 src/components/Documentation/Layout/SearchForm/index.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/Documentation/Layout/SearchForm/index.tsx b/src/components/Documentation/Layout/SearchForm/index.tsx
index d15aa3a0bf..782e8b804c 100644
--- a/src/components/Documentation/Layout/SearchForm/index.tsx
+++ b/src/components/Documentation/Layout/SearchForm/index.tsx
@@ -7,7 +7,6 @@ import styles from './styles.module.css'
 declare global {
   // eslint-disable-next-line @typescript-eslint/interface-name-prefix
   interface Window {
-    define?: { amd: boolean }
     docsearch?: (opts: object) => void
   }
 }
@@ -16,12 +15,6 @@ const SearchForm: React.SFC = props => {
   const [isLoaded, setLoaded] = useState(false)
 
   useEffect(() => {
-    // When mailchimp loads it adds AMD support and docsearch define new AMD
-    // unnamed(!) modules instead of global variable
-    if (window.define) {
-      window.define.amd = false
-    }
-
     Promise.all([
       loadResource(
         'https://cdn.jsdelivr.net/npm/docsearch.js@2.6.2/dist/cdn/docsearch.min.css'

From b2ebdf5c6e023224d6472421d7af9b00245c4bda Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 12:30:27 +0300
Subject: [PATCH 21/51] Refactor front utils to TS

---
 src/components/Blog/Post/index.tsx            |  2 +-
 src/components/Community/Learn/index.tsx      |  2 +-
 .../Documentation/RightPanel/index.tsx        |  9 +--
 src/utils/format.js                           |  7 ---
 src/utils/ga.js                               | 22 -------
 src/utils/ga.ts                               | 46 ++++++++++++++
 src/utils/i18n.js                             | 20 -------
 src/utils/i18n.ts                             | 23 +++++++
 src/utils/{images.js => images.ts}            | 10 ++--
 src/utils/{isClient.js => isClient.ts}        |  0
 src/utils/resources.js                        | 37 ------------
 src/utils/resources.ts                        | 60 +++++++++++++++++++
 12 files changed, 142 insertions(+), 96 deletions(-)
 delete mode 100644 src/utils/format.js
 delete mode 100644 src/utils/ga.js
 create mode 100644 src/utils/ga.ts
 delete mode 100644 src/utils/i18n.js
 create mode 100644 src/utils/i18n.ts
 rename src/utils/{images.js => images.ts} (60%)
 rename src/utils/{isClient.js => isClient.ts} (100%)
 delete mode 100644 src/utils/resources.js
 create mode 100644 src/utils/resources.ts

diff --git a/src/components/Blog/Post/index.tsx b/src/components/Blog/Post/index.tsx
index 5bcb8cc72c..ec3d6477f1 100644
--- a/src/components/Blog/Post/index.tsx
+++ b/src/components/Blog/Post/index.tsx
@@ -111,7 +111,7 @@ const Post: React.SFC<IBlogPostData> = ({
               ))}
             </div>
           )}
-          {commentsUrl && ready && !error && (
+          {commentsUrl && ready && !error && result && (
             <div className={styles.comments}>
               <PseudoButton size="big" href={commentsUrl} target="_blank">
                 Discuss this post
diff --git a/src/components/Community/Learn/index.tsx b/src/components/Community/Learn/index.tsx
index ad6fbcc653..1f72f2ecdf 100644
--- a/src/components/Community/Learn/index.tsx
+++ b/src/components/Community/Learn/index.tsx
@@ -70,7 +70,7 @@ const BlogPost: React.SFC<ICommunityBlogPost> = ({
           {title}
         </Link>
         <div className={sharedStyles.meta}>
-          {ready && !error && (
+          {ready && !error && result && (
             <>
               <Link
                 className={sharedStyles.commentsLink}
diff --git a/src/components/Documentation/RightPanel/index.tsx b/src/components/Documentation/RightPanel/index.tsx
index a5a0e3e751..7276ac4272 100644
--- a/src/components/Documentation/RightPanel/index.tsx
+++ b/src/components/Documentation/RightPanel/index.tsx
@@ -67,10 +67,11 @@ const RightPanel: React.SFC<IRightPanelProps> = ({
     requestAnimationFrame(setCurrentHeader)
   }
 
-  const initHeadingsPosition = () =>
-    allImagesLoadedInContainer(document.querySelector('#markdown-root')).then(
-      updateHeadingsPosition
-    )
+  const initHeadingsPosition = () => {
+    const root = document.querySelector('#markdown-root')
+
+    root && allImagesLoadedInContainer(root).then(updateHeadingsPosition)
+  }
 
   useEffect(() => {
     const throttledSetCurrentHeader = throttle(setCurrentHeader, 100)
diff --git a/src/utils/format.js b/src/utils/format.js
deleted file mode 100644
index ceae7420f4..0000000000
--- a/src/utils/format.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export function formatNumber(number) {
-  try {
-    return number.toLocaleString('en-US')
-  } catch {
-    return number
-  }
-}
diff --git a/src/utils/ga.js b/src/utils/ga.js
deleted file mode 100644
index 57a8d51a90..0000000000
--- a/src/utils/ga.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export const logEvent = (eventCategory, eventAction, eventLabel) => {
-  if (!window.ga) return
-
-  window.ga('send', {
-    hitType: 'event',
-    eventCategory,
-    eventAction,
-    eventLabel
-  })
-}
-
-export const logException = (exDescription = '', exFatal = false) => {
-  if (!window.ga) return
-
-  if (exDescription) {
-    window.ga('send', {
-      hitType: 'exception',
-      exDescription,
-      exFatal
-    })
-  }
-}
diff --git a/src/utils/ga.ts b/src/utils/ga.ts
new file mode 100644
index 0000000000..776fea06ee
--- /dev/null
+++ b/src/utils/ga.ts
@@ -0,0 +1,46 @@
+declare global {
+  interface IGaEvent {
+    hitType: 'event'
+    eventCategory: string
+    eventAction: string
+    eventLabel?: string
+  }
+
+  interface IGaException {
+    hitType: 'exception'
+    exDescription: string
+    exFatal: boolean
+  }
+
+  // eslint-disable-next-line @typescript-eslint/interface-name-prefix
+  interface Window {
+    ga: (command: 'send', data: IGaEvent | IGaException) => void
+  }
+}
+
+export const logEvent = (
+  eventCategory: string,
+  eventAction: string,
+  eventLabel?: string
+) => {
+  if (!window.ga) return
+
+  window.ga('send', {
+    hitType: 'event',
+    eventCategory,
+    eventAction,
+    eventLabel
+  })
+}
+
+export const logException = (exDescription = '', exFatal = false) => {
+  if (!window.ga) return
+
+  if (exDescription) {
+    window.ga('send', {
+      hitType: 'exception',
+      exDescription,
+      exFatal
+    })
+  }
+}
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
deleted file mode 100644
index f95414ae25..0000000000
--- a/src/utils/i18n.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export function pluralize(entry, count) {
-  let key
-
-  if (count === 0 && entry.zero) {
-    key = 'zero'
-  } else if (count === 1) {
-    key = 'one'
-  } else {
-    key = 'other'
-  }
-
-  return entry[key].replace('{count}', count.toString())
-}
-
-export function pluralizeComments(count) {
-  return pluralize(
-    { zero: 'No comments', one: '{count} comment', other: '{count} comments' },
-    count
-  )
-}
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
new file mode 100644
index 0000000000..9af16d3d82
--- /dev/null
+++ b/src/utils/i18n.ts
@@ -0,0 +1,23 @@
+export function pluralize(
+  entry: { zero: string; one: string; other: string },
+  count: number
+) {
+  let selectedEntry
+
+  if (count === 0 && entry.zero) {
+    selectedEntry = entry.zero
+  } else if (count === 1) {
+    selectedEntry = entry.one
+  } else {
+    selectedEntry = entry.other
+  }
+
+  return selectedEntry.replace('{count}', count.toString())
+}
+
+export function pluralizeComments(count: number) {
+  return pluralize(
+    { zero: 'No comments', one: '{count} comment', other: '{count} comments' },
+    count
+  )
+}
diff --git a/src/utils/images.js b/src/utils/images.ts
similarity index 60%
rename from src/utils/images.js
rename to src/utils/images.ts
index 8cafd897a0..809fc4077d 100644
--- a/src/utils/images.js
+++ b/src/utils/images.ts
@@ -1,8 +1,9 @@
 import Promise from 'promise-polyfill'
 
-export const getImages = node => Array.from(node.querySelectorAll('img'))
+export const getImages = (node: Element) =>
+  Array.from(node.querySelectorAll('img'))
 
-export const imageLoaded = imgNode => {
+export const imageLoaded = (imgNode: HTMLImageElement) => {
   if (imgNode.complete && imgNode.naturalWidth !== 0) {
     return Promise.resolve()
   }
@@ -19,7 +20,8 @@ export const imageLoaded = imgNode => {
   })
 }
 
-export const allImagesLoaded = urls => Promise.all(urls.map(imageLoaded))
+export const allImagesLoaded = (nodes: Array<HTMLImageElement>) =>
+  Promise.all(nodes.map(imageLoaded))
 
-export const allImagesLoadedInContainer = node =>
+export const allImagesLoadedInContainer = (node: Element) =>
   allImagesLoaded(getImages(node))
diff --git a/src/utils/isClient.js b/src/utils/isClient.ts
similarity index 100%
rename from src/utils/isClient.js
rename to src/utils/isClient.ts
diff --git a/src/utils/resources.js b/src/utils/resources.js
deleted file mode 100644
index a7f2a4ae52..0000000000
--- a/src/utils/resources.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Promise from 'promise-polyfill'
-
-const resourcesCache = {}
-const resourceNodeCreators = {
-  '\\.js$': ['script', { type: 'text/javascript' }, 'src'],
-  '\\.css$': [
-    'link',
-    { rel: 'stylesheet', type: 'text/css', media: 'all' },
-    'href'
-  ]
-}
-
-export const loadResource = url => {
-  if (!resourcesCache[url]) {
-    resourcesCache[url] = new Promise((resolve, reject) => {
-      const howToHandle = Object.keys(resourceNodeCreators).find(regExp =>
-        new RegExp(regExp).test(url)
-      )
-
-      if (!howToHandle) {
-        throw new Error(`You can't load resource with this url: ${url}`)
-      }
-
-      const [element, opts, urlProp] = resourceNodeCreators[howToHandle]
-      const resourceNode = document.createElement(element)
-
-      resourceNode.onload = resolve
-      resourceNode.onerror = reject
-      Object.keys(opts).forEach(opt => (resourceNode[opt] = opts[opt]))
-
-      resourceNode[urlProp] = url
-      document.head.appendChild(resourceNode)
-    })
-  }
-
-  return resourcesCache[url]
-}
diff --git a/src/utils/resources.ts b/src/utils/resources.ts
new file mode 100644
index 0000000000..8dcafad135
--- /dev/null
+++ b/src/utils/resources.ts
@@ -0,0 +1,60 @@
+import Promise from 'promise-polyfill'
+
+const createScript = (src: string, onload: () => void, onerror: () => void) => {
+  const node = document.createElement('script')
+
+  node.onload = onload
+  node.onerror = onerror
+  node.type = 'text/javascript'
+  node.src = src
+
+  return node
+}
+
+const createStylesheet = (
+  href: string,
+  onload: () => void,
+  onerror: () => void
+) => {
+  const node = document.createElement('link')
+
+  node.onload = onload
+  node.onerror = onerror
+  node.rel = 'stylesheet'
+  node.type = 'text/css'
+  node.media = 'all'
+  node.href = href
+
+  return node
+}
+
+const resourcesCache: { [url: string]: Promise<undefined> } = {}
+const resourceNodeCreators: {
+  [regex: string]: typeof createScript | typeof createStylesheet
+} = {
+  '\\.js$': createScript,
+  '\\.css$': createStylesheet
+}
+
+export const loadResource = (url: string) => {
+  if (!resourcesCache[url]) {
+    resourcesCache[url] = new Promise((resolve, reject) => {
+      const howToHandle = Object.keys(resourceNodeCreators).find(regExp =>
+        new RegExp(regExp).test(url)
+      )
+
+      if (!howToHandle) {
+        throw new Error(`You can't load resource with this url: ${url}`)
+      }
+
+      const creator = resourceNodeCreators[howToHandle]
+
+      if (creator) {
+        const node = creator(url, resolve, reject)
+        document.head.appendChild(node)
+      }
+    })
+  }
+
+  return resourcesCache[url]
+}

From 86fcc63f31d1a40a10e836237d3280ff1c6eb1c6 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 12:33:24 +0300
Subject: [PATCH 22/51] Remove temporary rule from eslint config

---
 .eslintrc.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 4d3b4b384d..ced8b13ab3 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -29,8 +29,7 @@
     ],
     "no-tabs": "error",
     "react/prop-types": "off", // Props should be described as TS types
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-var-requires": "warn"
+    "@typescript-eslint/explicit-function-return-type": "off"
   },
   "overrides": [
     {

From 835cc51b8b17ab0c125388ab61d53469c5857fdb Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 14:17:43 +0300
Subject: [PATCH 23/51] Refactor Link component to use redirected urls as href

---
 package.json                  |  1 +
 src/components/Link/index.tsx | 94 +++++++++++++++++++----------------
 src/typings.ts                |  4 ++
 src/utils/redirects.js        |  5 ++
 yarn.lock                     |  9 ++--
 5 files changed, 66 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 6ba0802508..9d50fa50a1 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "gatsby-plugin-typescript": "^2.2.5",
     "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
     "github-markdown-css": "^3.0.1",
+    "iso-url": "^0.4.7",
     "isomorphic-fetch": "^2.2.1",
     "lodash.includes": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index df465d93cc..c6ba1a6254 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useCallback } from 'react'
+import { URL } from 'iso-url'
 import { useLocation, navigate } from '@reach/router'
 import GatsbyLink from 'gatsby-link'
-import { handleFrontRedirect } from '../../utils/redirects'
+import { getRedirect, handleFrontRedirect } from '../../utils/redirects'
 import { scrollIntoLayout } from '../../utils/scroll'
 
 export type ILinkProps = {
@@ -14,23 +15,13 @@ export type ILinkProps = {
 
 const PROTOCOL_REGEXP = /^https?:\/\//
 const isRelative = (url: string) => !PROTOCOL_REGEXP.test(url)
-const getLocation = (href: string) => {
-  const location = document.createElement('a')
 
-  location.href = href
-
-  return location
-}
-
-const Link: React.SFC<ILinkProps> = ({
-  children,
+const ResultLinkComponent: React.SFC<ILinkProps> = ({
   href,
-  target,
+  children,
   ...restProps
 }) => {
-  const currentLocation = useLocation()
-
-  if (!isRelative(href) || target) {
+  if (!isRelative(href) || restProps.target) {
     let rel = 'noopener noreferrer'
 
     if (restProps.rel) {
@@ -38,49 +29,66 @@ const Link: React.SFC<ILinkProps> = ({
     }
 
     return (
-      <a href={href} rel={rel} target={target} {...restProps}>
+      <a href={href} rel={rel} {...restProps}>
         {children}
       </a>
     )
   }
 
-  const onClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (restProps.onClick) {
-      restProps.onClick(e)
-    }
-
-    const location = getLocation(href)
+  return (
+    <GatsbyLink to={href} {...restProps}>
+      {children}
+    </GatsbyLink>
+  )
+}
 
-    // Do not navigate to the same page. Handle hash scrolling manually
-    if (
-      currentLocation.host === location.host &&
-      currentLocation.pathname === location.pathname
-    ) {
-      e.preventDefault()
+const Link: React.SFC<ILinkProps> = ({ href, ...restProps }) => {
+  const currentLocation = useLocation()
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>) => {
+      if (restProps.onClick) {
+        restProps.onClick(e)
+      }
 
-      if (currentLocation.hash !== location.hash) {
-        navigate(href)
-      } else if (location.hash) {
-        scrollIntoLayout(document.querySelector(location.hash))
-      } else {
-        document.documentElement.scrollTop = 0
+      const location = new URL(href)
+
+      // Do not navigate to the same page. Handle hash scrolling manually
+      if (
+        currentLocation.host === location.host &&
+        currentLocation.pathname === location.pathname
+      ) {
+        e.preventDefault()
+
+        if (currentLocation.hash !== location.hash) {
+          navigate(href)
+        } else if (location.hash) {
+          scrollIntoLayout(document.querySelector(location.hash))
+        } else {
+          document.documentElement.scrollTop = 0
+        }
       }
-    }
 
-    // Handle front redirects
-    handleFrontRedirect(location.host, location.pathname, e)
-  }
+      // Handle front redirects
+      handleFrontRedirect(location.host, location.pathname, e)
+    },
+    [restProps.onClick, currentLocation]
+  )
 
+  const location = new URL(href)
   // Navigate from @reach/router handles hash links incorrectly. Fix it
   if (href.startsWith('#')) {
     href = currentLocation.pathname + href
   }
 
-  return (
-    <GatsbyLink to={href} {...restProps} onClick={onClick}>
-      {children}
-    </GatsbyLink>
-  )
+  // Replace link href with redirect if it exists
+  const [, redirectUrl] = getRedirect(location.host, location.pathname)
+  if (redirectUrl) {
+    href = isRelative(redirectUrl)
+      ? redirectUrl + currentLocation.search
+      : redirectUrl
+  }
+
+  return <ResultLinkComponent href={href} {...restProps} onClick={onClick} />
 }
 
 export default Link
diff --git a/src/typings.ts b/src/typings.ts
index ad8acd1c1d..5e1f8164bf 100644
--- a/src/typings.ts
+++ b/src/typings.ts
@@ -45,3 +45,7 @@ declare module 'ease-component' {
   const ease: EaseModule
   export = ease
 }
+
+declare module 'iso-url' {
+  export const URL: typeof window.URL
+}
diff --git a/src/utils/redirects.js b/src/utils/redirects.js
index 5c095169aa..0aa2fbe509 100644
--- a/src/utils/redirects.js
+++ b/src/utils/redirects.js
@@ -53,6 +53,11 @@ const handleFrontRedirect = (host, pathname, clickEvent) => {
 
     if (redirectUrl.startsWith('/')) {
       redirectUrl = redirectUrl + location.search
+
+      // If it's trailing slash redirect we should save hash in the url
+      if (pathname === `${redirectUrl}/`) {
+        redirectUrl = redirectUrl + location.hash
+      }
     }
 
     navigate(redirectUrl)
diff --git a/yarn.lock b/yarn.lock
index 8c5b5c13fd..99aeaa636c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1985,10 +1985,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-native@link:./.tmp-empty-package":
-  version "0.0.0"
-  uid ""
-
 "@types/react-popover@^0.5.3":
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/@types/react-popover/-/react-popover-0.5.3.tgz#5bee27490d2fd81f891b87799c39dbc520e5d1b7"
@@ -9221,6 +9217,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+iso-url@^0.4.7:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/iso-url/-/iso-url-0.4.7.tgz#de7e48120dae46921079fe78f325ac9e9217a385"
+  integrity sha512-27fFRDnPAMnHGLq36bWTpKET+eiXct3ENlCcdcMdk+mjXrb2kw3mhBUg1B7ewAC0kVzlOPhADzQgz1SE6Tglog==
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"

From e8a249226b4ba9611ea1a1c59961c2ed48a1bb31 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 14:25:03 +0300
Subject: [PATCH 24/51] Remove !important rules from ShowOnly styles

---
 .../Documentation/Markdown/Tooltip/index.tsx           |  5 ++---
 .../Documentation/Markdown/Tooltip/styles.module.css   |  3 ---
 src/components/ShowOnly/index.tsx                      | 10 +++++++---
 src/components/ShowOnly/styles.module.css              |  8 ++++----
 4 files changed, 13 insertions(+), 13 deletions(-)
 delete mode 100644 src/components/Documentation/Markdown/Tooltip/styles.module.css

diff --git a/src/components/Documentation/Markdown/Tooltip/index.tsx b/src/components/Documentation/Markdown/Tooltip/index.tsx
index ef48d1754a..f4c0861d24 100644
--- a/src/components/Documentation/Markdown/Tooltip/index.tsx
+++ b/src/components/Documentation/Markdown/Tooltip/index.tsx
@@ -6,7 +6,6 @@ import DesktopView from './DesktopView'
 import MobileView from './MobileView'
 
 import glossary from '../../../../../content/docs/glossary'
-import styles from './styles.module.css'
 
 const Tooltip: React.SFC<{ text: string }> = ({ text }) => {
   const [state, setState] = useState({
@@ -38,14 +37,14 @@ const Tooltip: React.SFC<{ text: string }> = ({ text }) => {
 
   return (
     <>
-      <ShowOnly on="desktop" className={styles.inline}>
+      <ShowOnly on="desktop" as="span">
         <DesktopView
           description={state.description}
           header={state.header}
           text={text}
         />
       </ShowOnly>
-      <ShowOnly on="mobile">
+      <ShowOnly on="mobile" as="span">
         <MobileView
           description={state.description}
           header={state.header}
diff --git a/src/components/Documentation/Markdown/Tooltip/styles.module.css b/src/components/Documentation/Markdown/Tooltip/styles.module.css
deleted file mode 100644
index 282a76563b..0000000000
--- a/src/components/Documentation/Markdown/Tooltip/styles.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.inline {
-  display: inline;
-}
diff --git a/src/components/ShowOnly/index.tsx b/src/components/ShowOnly/index.tsx
index 7eb5ee3823..b54e95f3c9 100644
--- a/src/components/ShowOnly/index.tsx
+++ b/src/components/ShowOnly/index.tsx
@@ -5,12 +5,16 @@ import styles from './styles.module.css'
 
 interface IShowOnlyProps {
   on: 'mobile' | 'desktop'
+  as?: 'div' | 'span'
   className?: string
   children: React.ReactNode
 }
 
-const ShowOnly: React.SFC<IShowOnlyProps> = ({ on, className, children }) => (
-  <div className={cn(styles[on], className)}>{children}</div>
-)
+const ShowOnly: React.SFC<IShowOnlyProps> = ({
+  on,
+  as: AS = 'div',
+  className,
+  children
+}) => <AS className={cn(styles[on], className)}>{children}</AS>
 
 export default ShowOnly
diff --git a/src/components/ShowOnly/styles.module.css b/src/components/ShowOnly/styles.module.css
index 2c73891038..1ab7295a38 100644
--- a/src/components/ShowOnly/styles.module.css
+++ b/src/components/ShowOnly/styles.module.css
@@ -1,15 +1,15 @@
 .mobile {
-  display: none !important;
+  display: none;
 
   @media (--xs-scr) {
-    display: initial !important;
+    display: initial;
   }
 }
 
 .desktop {
-  display: initial !important;
+  display: initial;
 
   @media (--xs-scr) {
-    display: none !important;
+    display: none;
   }
 }

From 7a30eb2c1ae4ad3fcec0aa1e68c065b65278438d Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 14:37:10 +0300
Subject: [PATCH 25/51] Split utils by using on front and shared

---
 .eslintrc.json                                |  1 +
 gatsby-node.js                                | 10 +++----
 plugins/gatsby-remark-dvc-linker/index.js     |  2 +-
 src/components/Blog/FeedMeta/index.tsx        |  2 +-
 src/components/Blog/Post/index.tsx            |  6 ++--
 src/components/Community/Contribute/index.tsx |  2 +-
 src/components/Community/Events/index.tsx     |  2 +-
 src/components/Community/Hero/index.tsx       |  2 +-
 src/components/Community/Learn/index.tsx      |  8 +++---
 src/components/Community/Meet/index.tsx       |  6 ++--
 src/components/Community/Section/index.tsx    |  2 +-
 .../Documentation/Layout/SearchForm/index.tsx |  2 +-
 .../Layout/SidebarMenu/index.tsx              |  2 +-
 .../Markdown/Tooltip/DesktopView/index.tsx    |  2 +-
 .../Markdown/Tooltip/MobileView/index.tsx     |  2 +-
 .../Documentation/Markdown/index.tsx          |  2 +-
 .../Documentation/RightPanel/index.tsx        |  2 +-
 src/components/Documentation/index.tsx        |  2 +-
 src/components/DownloadButton/index.tsx       |  4 +--
 src/components/HamburgerMenu/index.tsx        |  4 +--
 src/components/Home/LandingHero/index.tsx     |  4 +--
 src/components/Home/LearnMore/index.tsx       |  4 +--
 .../Home/UseCases/CollapsibleText/index.tsx   |  2 +-
 src/components/Home/UseCases/Video/index.tsx  |  2 +-
 src/components/Home/index.tsx                 |  2 +-
 src/components/LayoutFooter/index.tsx         |  2 +-
 src/components/LayoutHeader/Nav/index.tsx     |  4 +--
 src/components/LayoutHeader/index.tsx         |  2 +-
 src/components/Link/index.tsx                 |  4 +--
 src/components/Page/utils.ts                  |  6 ++--
 .../SubscribeSection/Form/index.tsx           |  2 +-
 src/components/Support/Popover/index.tsx      |  2 +-
 src/server/middleware/redirects/index.js      |  2 +-
 src/templates/doc-home.tsx                    |  2 +-
 src/utils/{ => front}/api.ts                  |  0
 src/utils/{ => front}/customProperties.ts     |  0
 src/utils/{ => front}/ga.ts                   |  0
 src/utils/{ => front}/i18n.ts                 |  0
 src/utils/{ => front}/images.ts               |  0
 src/utils/{ => front}/isClient.ts             |  0
 src/utils/{ => front}/keyboard.ts             |  0
 src/utils/{ => front}/resources.ts            |  0
 src/utils/{ => front}/scroll.ts               |  0
 .../paginatable.js}                           |  2 +-
 src/utils/{ => shared}/redirects.js           |  2 +-
 src/utils/{ => shared}/redirects.test.js      |  0
 src/utils/{ => shared}/sidebar.js             |  2 +-
 src/utils/{ => shared}/sidebar.test.js        | 28 +++++++++----------
 src/utils/{ => shared}/tagToSlug.js           |  0
 49 files changed, 70 insertions(+), 69 deletions(-)
 rename src/utils/{ => front}/api.ts (100%)
 rename src/utils/{ => front}/customProperties.ts (100%)
 rename src/utils/{ => front}/ga.ts (100%)
 rename src/utils/{ => front}/i18n.ts (100%)
 rename src/utils/{ => front}/images.ts (100%)
 rename src/utils/{ => front}/isClient.ts (100%)
 rename src/utils/{ => front}/keyboard.ts (100%)
 rename src/utils/{ => front}/resources.ts (100%)
 rename src/utils/{ => front}/scroll.ts (100%)
 rename src/utils/{paginatablePageGenerator.js => node/paginatable.js} (95%)
 rename src/utils/{ => shared}/redirects.js (96%)
 rename src/utils/{ => shared}/redirects.test.js (100%)
 rename src/utils/{ => shared}/sidebar.js (98%)
 rename src/utils/{ => shared}/sidebar.test.js (91%)
 rename src/utils/{ => shared}/tagToSlug.js (100%)

diff --git a/.eslintrc.json b/.eslintrc.json
index ced8b13ab3..5428e4df74 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -37,6 +37,7 @@
         "src/utils/**/*.?(js|ts)",
         "scripts/**/*.js",
         "src/server/**/*.js",
+        "plugins/**/*.js",
         "gatsby-*.js"
       ],
       "rules": {
diff --git a/gatsby-node.js b/gatsby-node.js
index 4c89947e85..7149aac3b1 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -4,11 +4,11 @@ const fs = require('fs')
 const path = require('path')
 const GithubSlugger = require('github-slugger')
 const { createFilePath } = require('gatsby-source-filesystem')
-const tagToSlug = require('./src/utils/tagToSlug')
-const paginatablePageGenerator = require('./src/utils/paginatablePageGenerator')
+const tagToSlug = require('./src/utils/shared/tagToSlug')
+const pagesGenerator = require('./src/utils/node/paginatable')
 const { siteMetadata } = require('./gatsby-config')
 
-const { getItemBySource } = require('./src/utils/sidebar')
+const { getItemBySource } = require('./src/utils/shared/sidebar')
 
 const remark = require('remark')
 const remarkHTML = require('remark-html')
@@ -186,7 +186,7 @@ exports.createPages = async ({ graphql, actions }) => {
   // Create home blog pages (with pagination)
   const blogHomeTemplate = path.resolve('./src/templates/blog-home.tsx')
 
-  for (const page of paginatablePageGenerator({
+  for (const page of pagesGenerator({
     basePath: '/blog',
     hasHeroItem: true,
     itemCount: blogResponse.data.home.pageInfo.itemCount
@@ -229,7 +229,7 @@ exports.createPages = async ({ graphql, actions }) => {
     ({ fieldValue: tag, pageInfo: { itemCount } }) => {
       const basePath = `/tags/${tagToSlug(tag)}`
 
-      for (const page of paginatablePageGenerator({ basePath, itemCount })) {
+      for (const page of pagesGenerator({ basePath, itemCount })) {
         actions.createPage({
           component: blogTagsTemplate,
           path: page.path,
diff --git a/plugins/gatsby-remark-dvc-linker/index.js b/plugins/gatsby-remark-dvc-linker/index.js
index 8f2a58f362..38477241c9 100644
--- a/plugins/gatsby-remark-dvc-linker/index.js
+++ b/plugins/gatsby-remark-dvc-linker/index.js
@@ -1,7 +1,7 @@
 /* eslint-env node */
 
 const visit = require('unist-util-visit')
-const { getItemByPath } = require('../../src/utils/sidebar')
+const { getItemByPath } = require('../../src/utils/shared/sidebar')
 
 const DVC_REGEXP = /dvc\s+[a-z][a-z-.]*/
 const COMMAND_REGEXP = /^[a-z][a-z-]*$/
diff --git a/src/components/Blog/FeedMeta/index.tsx b/src/components/Blog/FeedMeta/index.tsx
index 87feed81f4..e955a610d2 100644
--- a/src/components/Blog/FeedMeta/index.tsx
+++ b/src/components/Blog/FeedMeta/index.tsx
@@ -2,7 +2,7 @@ import Image, { FixedObject } from 'gatsby-image'
 import React from 'react'
 
 import Link from '../../Link'
-import { pluralizeComments } from '../../../utils/i18n'
+import { pluralizeComments } from '../../../utils/front/i18n'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/Blog/Post/index.tsx b/src/components/Blog/Post/index.tsx
index ec3d6477f1..f1fe5328fb 100644
--- a/src/components/Blog/Post/index.tsx
+++ b/src/components/Blog/Post/index.tsx
@@ -5,9 +5,9 @@ import { useWindowScroll, useWindowSize } from 'react-use'
 
 import { IBlogPostData } from '../../../templates/blog-post'
 
-import { useCommentsCount } from '../../../utils/api'
-import { pluralizeComments } from '../../../utils/i18n'
-import tagToSlug from '../../../utils/tagToSlug'
+import { useCommentsCount } from '../../../utils/front/api'
+import { pluralizeComments } from '../../../utils/front/i18n'
+import tagToSlug from '../../../utils/shared/tagToSlug'
 
 import Markdown from './Markdown'
 import FeedMeta from '../FeedMeta'
diff --git a/src/components/Community/Contribute/index.tsx b/src/components/Community/Contribute/index.tsx
index 09361fe9d0..00f76979a2 100644
--- a/src/components/Community/Contribute/index.tsx
+++ b/src/components/Community/Contribute/index.tsx
@@ -5,7 +5,7 @@ import LayoutWidthContainer from '../../LayoutWidthContainer'
 import Link from '../../Link'
 import CommunityBlock from '../Block'
 import CommunitySection from '../Section'
-import { logEvent } from '../../../utils/ga'
+import { logEvent } from '../../../utils/front/ga'
 
 import data from '../data.json'
 import sharedStyles from '../styles.module.css'
diff --git a/src/components/Community/Events/index.tsx b/src/components/Community/Events/index.tsx
index 6e1e39324b..3d5250e634 100644
--- a/src/components/Community/Events/index.tsx
+++ b/src/components/Community/Events/index.tsx
@@ -7,7 +7,7 @@ import LayoutWidthContainer from '../../LayoutWidthContainer'
 import Link from '../../Link'
 import Block from '../Block'
 import Section from '../Section'
-import { logEvent } from '../../../utils/ga'
+import { logEvent } from '../../../utils/front/ga'
 
 import data from '../data.json'
 import sharedStyles from '../styles.module.css'
diff --git a/src/components/Community/Hero/index.tsx b/src/components/Community/Hero/index.tsx
index 086b796635..ff5af64271 100644
--- a/src/components/Community/Hero/index.tsx
+++ b/src/components/Community/Hero/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import LayoutWidthContainer from '../../LayoutWidthContainer'
 import ShowOnly from '../../ShowOnly'
 import Link from '../../Link'
-import { logEvent } from '../../../utils/ga'
+import { logEvent } from '../../../utils/front/ga'
 
 import data from '../data.json'
 import styles from './styles.module.css'
diff --git a/src/components/Community/Learn/index.tsx b/src/components/Community/Learn/index.tsx
index 1f72f2ecdf..074c7b4ec1 100644
--- a/src/components/Community/Learn/index.tsx
+++ b/src/components/Community/Learn/index.tsx
@@ -8,11 +8,11 @@ import Link from '../../Link'
 import Block from '../Block'
 import Section from '../Section'
 
-import { logEvent } from '../../../utils/ga'
-import { getFirstPage } from '../../../utils/sidebar'
-import { useCommentsCount } from '../../../utils/api'
+import { logEvent } from '../../../utils/front/ga'
+import { getFirstPage } from '../../../utils/shared/sidebar'
+import { useCommentsCount } from '../../../utils/front/api'
 import getPosts from '../../../queries/posts'
-import { pluralizeComments } from '../../../utils/i18n'
+import { pluralizeComments } from '../../../utils/front/i18n'
 
 import data from '../data.json'
 import sharedStyles from '../styles.module.css'
diff --git a/src/components/Community/Meet/index.tsx b/src/components/Community/Meet/index.tsx
index cadbed6054..5884094f1a 100644
--- a/src/components/Community/Meet/index.tsx
+++ b/src/components/Community/Meet/index.tsx
@@ -6,14 +6,14 @@ import LayoutWidthContainer from '../../LayoutWidthContainer'
 import Block from '../Block'
 import Section from '../Section'
 import Link from '../../Link'
-import { pluralizeComments } from '../../../utils/i18n'
-import { logEvent } from '../../../utils/ga'
+import { pluralizeComments } from '../../../utils/front/i18n'
+import { logEvent } from '../../../utils/front/ga'
 import {
   useIssues,
   useTopics,
   IGithubIssue,
   IDiscussTopic
-} from '../../../utils/api'
+} from '../../../utils/front/api'
 
 import data from '../data.json'
 import sharedStyles from '../styles.module.css'
diff --git a/src/components/Community/Section/index.tsx b/src/components/Community/Section/index.tsx
index 3868f242a3..af75757b8c 100644
--- a/src/components/Community/Section/index.tsx
+++ b/src/components/Community/Section/index.tsx
@@ -4,7 +4,7 @@ import { useLocation } from '@reach/router'
 import { Collapse } from 'react-collapse'
 import { useWindowSize } from 'react-use'
 
-import { isTriggeredFromKB } from '../../../utils/keyboard'
+import { isTriggeredFromKB } from '../../../utils/front/keyboard'
 import { screens } from '../../../../config/postcss/media'
 
 import styles from './styles.module.css'
diff --git a/src/components/Documentation/Layout/SearchForm/index.tsx b/src/components/Documentation/Layout/SearchForm/index.tsx
index 782e8b804c..3782598049 100644
--- a/src/components/Documentation/Layout/SearchForm/index.tsx
+++ b/src/components/Documentation/Layout/SearchForm/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Promise from 'promise-polyfill'
-import { loadResource } from '../../../../utils/resources'
+import { loadResource } from '../../../../utils/front/resources'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/Documentation/Layout/SidebarMenu/index.tsx b/src/components/Documentation/Layout/SidebarMenu/index.tsx
index 680d0a14e2..2bf5c0433c 100644
--- a/src/components/Documentation/Layout/SidebarMenu/index.tsx
+++ b/src/components/Documentation/Layout/SidebarMenu/index.tsx
@@ -12,7 +12,7 @@ import {
   structure,
   getParentsListFromPath,
   getPathWithSoruce
-} from '../../../../utils/sidebar'
+} from '../../../../utils/shared/sidebar'
 
 import 'perfect-scrollbar/css/perfect-scrollbar.css'
 import styles from './styles.module.css'
diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
index 92ef98163b..9d55253962 100644
--- a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
+++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
@@ -4,7 +4,7 @@ import ReactMarkdown from 'react-markdown'
 import throttle from 'lodash.throttle'
 
 import Portal from '../Portal'
-import { getHeaderHeight } from '../../../../../utils/scroll'
+import { getHeaderHeight } from '../../../../../utils/front/scroll'
 import styles from './styles.module.css'
 
 interface IDesktopViewProps {
diff --git a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
index 83c8871ebd..a8ca73b922 100644
--- a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
+++ b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
@@ -3,7 +3,7 @@ import cn from 'classnames'
 import ReactMarkdown from 'react-markdown'
 
 import Portal from '../Portal'
-import { isTriggeredFromKB } from '../../../../../utils/keyboard'
+import { isTriggeredFromKB } from '../../../../../utils/front/keyboard'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/Documentation/Markdown/index.tsx b/src/components/Documentation/Markdown/index.tsx
index 74cae0395d..ff22c109c4 100644
--- a/src/components/Documentation/Markdown/index.tsx
+++ b/src/components/Documentation/Markdown/index.tsx
@@ -7,7 +7,7 @@ import Collapsible from 'react-collapsible'
 import Link from '../../Link'
 import Tooltip from './Tooltip'
 import Tutorials from '../TutorialsLinks'
-import { getPathWithSoruce } from '../../../utils/sidebar'
+import { getPathWithSoruce } from '../../../utils/shared/sidebar'
 
 import 'github-markdown-css/github-markdown.css'
 import sharedStyles from '../styles.module.css'
diff --git a/src/components/Documentation/RightPanel/index.tsx b/src/components/Documentation/RightPanel/index.tsx
index 7276ac4272..b1098a608e 100644
--- a/src/components/Documentation/RightPanel/index.tsx
+++ b/src/components/Documentation/RightPanel/index.tsx
@@ -6,7 +6,7 @@ import { IHeading } from '../'
 import Link from '../../Link'
 import Tutorials from '../TutorialsLinks'
 
-import { allImagesLoadedInContainer } from '../../../utils/images'
+import { allImagesLoadedInContainer } from '../../../utils/front/images'
 
 import sharedStyles from '../styles.module.css'
 import styles from './styles.module.css'
diff --git a/src/components/Documentation/index.tsx b/src/components/Documentation/index.tsx
index e362e36457..f5a89aac55 100644
--- a/src/components/Documentation/index.tsx
+++ b/src/components/Documentation/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Markdown from './Markdown'
 import RightPanel from './RightPanel'
 
-import { getItemByPath } from '../../utils/sidebar'
+import { getItemByPath } from '../../utils/shared/sidebar'
 
 export interface IHeading {
   slug: string
diff --git a/src/components/DownloadButton/index.tsx b/src/components/DownloadButton/index.tsx
index 41f4588f69..0d24467783 100644
--- a/src/components/DownloadButton/index.tsx
+++ b/src/components/DownloadButton/index.tsx
@@ -4,8 +4,8 @@ import cn from 'classnames'
 import TwoRowsButton from '../TwoRowsButton'
 import Link from '../Link'
 
-import isClient from '../../utils/isClient'
-import { logEvent } from '../../utils/ga'
+import isClient from '../../utils/front/isClient'
+import { logEvent } from '../../utils/front/ga'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/HamburgerMenu/index.tsx b/src/components/HamburgerMenu/index.tsx
index 99fa1edf4b..151739c952 100644
--- a/src/components/HamburgerMenu/index.tsx
+++ b/src/components/HamburgerMenu/index.tsx
@@ -4,8 +4,8 @@ import React, { useCallback, useState, useEffect } from 'react'
 import HamburgerIcon from '../HamburgerIcon'
 import Link from '../Link'
 
-import { logEvent } from '../../utils/ga'
-import { getFirstPage } from '../../utils/sidebar'
+import { logEvent } from '../../utils/front/ga'
+import { getFirstPage } from '../../utils/shared/sidebar'
 import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg'
 
 import styles from './styles.module.css'
diff --git a/src/components/Home/LandingHero/index.tsx b/src/components/Home/LandingHero/index.tsx
index 66841e1908..202cb15e5f 100644
--- a/src/components/Home/LandingHero/index.tsx
+++ b/src/components/Home/LandingHero/index.tsx
@@ -6,8 +6,8 @@ import Link from '../../Link'
 import DownloadButton from '../../DownloadButton'
 import TwoRowsButton from '../../TwoRowsButton'
 import GithubLine from './GithubLine'
-import { scrollIntoLayout, ease } from '../../../utils/scroll'
-import { logEvent } from '../../../utils/ga'
+import { scrollIntoLayout, ease } from '../../../utils/front/scroll'
+import { logEvent } from '../../../utils/front/ga'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/Home/LearnMore/index.tsx b/src/components/Home/LearnMore/index.tsx
index 7961e64e90..d7787acfe8 100644
--- a/src/components/Home/LearnMore/index.tsx
+++ b/src/components/Home/LearnMore/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 
-import { logEvent } from '../../../utils/ga'
-import { scrollIntoLayout, ease } from '../../../utils/scroll'
+import { logEvent } from '../../../utils/front/ga'
+import { scrollIntoLayout, ease } from '../../../utils/front/scroll'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/Home/UseCases/CollapsibleText/index.tsx b/src/components/Home/UseCases/CollapsibleText/index.tsx
index fcbcc10c2a..38aa663efb 100644
--- a/src/components/Home/UseCases/CollapsibleText/index.tsx
+++ b/src/components/Home/UseCases/CollapsibleText/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Collapse } from 'react-collapse'
 
-import { isTriggeredFromKB } from '../../../../utils/keyboard'
+import { isTriggeredFromKB } from '../../../../utils/front/keyboard'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/Home/UseCases/Video/index.tsx b/src/components/Home/UseCases/Video/index.tsx
index 9745d6074c..fff512e955 100644
--- a/src/components/Home/UseCases/Video/index.tsx
+++ b/src/components/Home/UseCases/Video/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react'
 
 import TwoRowsButton from '../../../TwoRowsButton'
-import { logEvent } from '../../../../utils/ga'
+import { logEvent } from '../../../../utils/front/ga'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index a432af9ace..be9819aa55 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -8,7 +8,7 @@ import LearnMore from './LearnMore'
 import LandingHero from './LandingHero'
 import Diagram from './Diagram'
 import UseCases from './UseCases'
-import { logEvent } from '../../utils/ga'
+import { logEvent } from '../../utils/front/ga'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/LayoutFooter/index.tsx b/src/components/LayoutFooter/index.tsx
index 6b7f88c3fa..541d350f0d 100644
--- a/src/components/LayoutFooter/index.tsx
+++ b/src/components/LayoutFooter/index.tsx
@@ -7,7 +7,7 @@ import LayoutWidthContainer from '../LayoutWidthContainer'
 import Link from '../Link'
 import IconSet from '../IconSet'
 
-import { getFirstPage } from '../../utils/sidebar'
+import { getFirstPage } from '../../utils/shared/sidebar'
 
 import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg'
 import styles from './styles.module.css'
diff --git a/src/components/LayoutHeader/Nav/index.tsx b/src/components/LayoutHeader/Nav/index.tsx
index feb8eca2e7..75b66a9560 100644
--- a/src/components/LayoutHeader/Nav/index.tsx
+++ b/src/components/LayoutHeader/Nav/index.tsx
@@ -4,8 +4,8 @@ import cn from 'classnames'
 import Link from '../../Link'
 import PseudoButton from '../../PseudoButton'
 
-import { logEvent } from '../../../utils/ga'
-import { getFirstPage } from '../../../utils/sidebar'
+import { logEvent } from '../../../utils/front/ga'
+import { getFirstPage } from '../../../utils/shared/sidebar'
 
 const docsPage = getFirstPage()
 
diff --git a/src/components/LayoutHeader/index.tsx b/src/components/LayoutHeader/index.tsx
index 85d1ed66f0..27c34e1073 100644
--- a/src/components/LayoutHeader/index.tsx
+++ b/src/components/LayoutHeader/index.tsx
@@ -7,7 +7,7 @@ import LayoutWidthContainer from '../LayoutWidthContainer'
 import Link from '../Link'
 import Nav from './Nav'
 
-import { useHeaderIsScrolled } from '../../utils/scroll'
+import { useHeaderIsScrolled } from '../../utils/front/scroll'
 import { ReactComponent as LogoSVG } from '../../../static/img/logo.svg'
 import styles from './styles.module.css'
 
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index c6ba1a6254..5e139b82f8 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -2,8 +2,8 @@ import React, { useCallback } from 'react'
 import { URL } from 'iso-url'
 import { useLocation, navigate } from '@reach/router'
 import GatsbyLink from 'gatsby-link'
-import { getRedirect, handleFrontRedirect } from '../../utils/redirects'
-import { scrollIntoLayout } from '../../utils/scroll'
+import { getRedirect, handleFrontRedirect } from '../../utils/shared/redirects'
+import { scrollIntoLayout } from '../../utils/front/scroll'
 
 export type ILinkProps = {
   children: React.ReactNode
diff --git a/src/components/Page/utils.ts b/src/components/Page/utils.ts
index a98c21322b..41295459b3 100644
--- a/src/components/Page/utils.ts
+++ b/src/components/Page/utils.ts
@@ -1,9 +1,9 @@
 import { useEffect } from 'react'
 import { useLocation } from '@reach/router'
 
-import { handleFrontRedirect } from '../../utils/redirects'
-import { allImagesLoadedInContainer } from '../../utils/images'
-import { scrollIntoLayout } from '../../utils/scroll'
+import { handleFrontRedirect } from '../../utils/shared/redirects'
+import { allImagesLoadedInContainer } from '../../utils/front/images'
+import { scrollIntoLayout } from '../../utils/front/scroll'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/SubscribeSection/Form/index.tsx b/src/components/SubscribeSection/Form/index.tsx
index db6df77f2b..2569754055 100644
--- a/src/components/SubscribeSection/Form/index.tsx
+++ b/src/components/SubscribeSection/Form/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef } from 'react'
 import { nanoid } from 'nanoid'
 
-import { logEvent } from '../../../utils/ga'
+import { logEvent } from '../../../utils/front/ga'
 
 import styles from './styles.module.css'
 
diff --git a/src/components/Support/Popover/index.tsx b/src/components/Support/Popover/index.tsx
index 6b486ba5ee..3e5b99989e 100644
--- a/src/components/Support/Popover/index.tsx
+++ b/src/components/Support/Popover/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import ReactPopover, { PopoverProps } from 'react-popover'
 
-import { isTriggeredFromKB } from '../../../utils/keyboard'
+import { isTriggeredFromKB } from '../../../utils/front/keyboard'
 
 import './styles.module.css'
 
diff --git a/src/server/middleware/redirects/index.js b/src/server/middleware/redirects/index.js
index 8bc96686fb..30d1e61e67 100644
--- a/src/server/middleware/redirects/index.js
+++ b/src/server/middleware/redirects/index.js
@@ -1,4 +1,4 @@
-const { getRedirect } = require('../../../../src/utils/redirects')
+const { getRedirect } = require('../../../utils/shared/redirects')
 const { parse } = require('url')
 const { stringify } = require('querystring')
 const { isProduction } = require('../../utils')
diff --git a/src/templates/doc-home.tsx b/src/templates/doc-home.tsx
index 5ced33f5af..a9484961f9 100644
--- a/src/templates/doc-home.tsx
+++ b/src/templates/doc-home.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 import { Node } from 'unist'
-import { getItemByPath } from '../utils/sidebar'
+import { getItemByPath } from '../utils/shared/sidebar'
 
 import SEO from '../components/SEO'
 
diff --git a/src/utils/api.ts b/src/utils/front/api.ts
similarity index 100%
rename from src/utils/api.ts
rename to src/utils/front/api.ts
diff --git a/src/utils/customProperties.ts b/src/utils/front/customProperties.ts
similarity index 100%
rename from src/utils/customProperties.ts
rename to src/utils/front/customProperties.ts
diff --git a/src/utils/ga.ts b/src/utils/front/ga.ts
similarity index 100%
rename from src/utils/ga.ts
rename to src/utils/front/ga.ts
diff --git a/src/utils/i18n.ts b/src/utils/front/i18n.ts
similarity index 100%
rename from src/utils/i18n.ts
rename to src/utils/front/i18n.ts
diff --git a/src/utils/images.ts b/src/utils/front/images.ts
similarity index 100%
rename from src/utils/images.ts
rename to src/utils/front/images.ts
diff --git a/src/utils/isClient.ts b/src/utils/front/isClient.ts
similarity index 100%
rename from src/utils/isClient.ts
rename to src/utils/front/isClient.ts
diff --git a/src/utils/keyboard.ts b/src/utils/front/keyboard.ts
similarity index 100%
rename from src/utils/keyboard.ts
rename to src/utils/front/keyboard.ts
diff --git a/src/utils/resources.ts b/src/utils/front/resources.ts
similarity index 100%
rename from src/utils/resources.ts
rename to src/utils/front/resources.ts
diff --git a/src/utils/scroll.ts b/src/utils/front/scroll.ts
similarity index 100%
rename from src/utils/scroll.ts
rename to src/utils/front/scroll.ts
diff --git a/src/utils/paginatablePageGenerator.js b/src/utils/node/paginatable.js
similarity index 95%
rename from src/utils/paginatablePageGenerator.js
rename to src/utils/node/paginatable.js
index e4d88c87f0..e745c3b5a6 100644
--- a/src/utils/paginatablePageGenerator.js
+++ b/src/utils/node/paginatable.js
@@ -1,5 +1,5 @@
 /* eslint-env node */
-const { BLOG } = require('../consts')
+const { BLOG } = require('../../consts')
 
 function pageUrl(basePath, page) {
   if (page > 1) {
diff --git a/src/utils/redirects.js b/src/utils/shared/redirects.js
similarity index 96%
rename from src/utils/redirects.js
rename to src/utils/shared/redirects.js
index 0aa2fbe509..6f062ecdfe 100644
--- a/src/utils/redirects.js
+++ b/src/utils/shared/redirects.js
@@ -1,7 +1,7 @@
 /* eslint-env node */
 
 const { navigate } = require('@reach/router')
-let redirects = require('../../redirects-list.json')
+let redirects = require('../../../redirects-list.json')
 
 const processRedirectString = redirectString => {
   const redirectParts = redirectString.split(/\s+/g)
diff --git a/src/utils/redirects.test.js b/src/utils/shared/redirects.test.js
similarity index 100%
rename from src/utils/redirects.test.js
rename to src/utils/shared/redirects.test.js
diff --git a/src/utils/sidebar.js b/src/utils/shared/sidebar.js
similarity index 98%
rename from src/utils/sidebar.js
rename to src/utils/shared/sidebar.js
index 46e12bab9c..5f5ec51b36 100644
--- a/src/utils/sidebar.js
+++ b/src/utils/shared/sidebar.js
@@ -19,7 +19,7 @@
 */
 
 const startCase = require('lodash.startcase')
-const sidebar = require('../../content/docs/sidebar.json')
+const sidebar = require('../../../content/docs/sidebar.json')
 
 const PATH_ROOT = '/doc/'
 const FILE_ROOT = '/docs/'
diff --git a/src/utils/sidebar.test.js b/src/utils/shared/sidebar.test.js
similarity index 91%
rename from src/utils/sidebar.test.js
rename to src/utils/shared/sidebar.test.js
index 9461592542..449ebfb92a 100644
--- a/src/utils/sidebar.test.js
+++ b/src/utils/shared/sidebar.test.js
@@ -19,7 +19,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -38,7 +38,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -57,7 +57,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -76,7 +76,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -106,7 +106,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -150,7 +150,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -190,7 +190,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -230,7 +230,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -286,7 +286,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -295,7 +295,7 @@ describe('SidebarMenu/helper', () => {
     it("Throws error if item didn't have slug field", () => {
       const rawData = [{}]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
 
       expect(() => require('./sidebar')).toThrow(
         new Error("'slug' field is required in objects in sidebar.json")
@@ -306,7 +306,7 @@ describe('SidebarMenu/helper', () => {
     it("Throws error if item has source: false and doesn't have children", () => {
       const rawData = [{ slug: 'item-name', source: false }]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
 
       expect(() => require('./sidebar')).toThrow(
         new Error(
@@ -328,7 +328,7 @@ describe('SidebarMenu/helper', () => {
         next: undefined
       }
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const { getItemByPath } = require('./sidebar')
 
       expect(getItemByPath('/doc')).toEqual(result)
@@ -364,7 +364,7 @@ describe('SidebarMenu/helper', () => {
         next: undefined
       }
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const { getItemByPath } = require('./sidebar')
 
       expect(getItemByPath('/doc/item')).toEqual(result)
@@ -383,7 +383,7 @@ describe('SidebarMenu/helper', () => {
         '/doc/item-name/nested-item/subnested-item'
       ]
 
-      jest.doMock('../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
       const { getParentsListFromPath } = require('./sidebar')
 
       expect(getParentsListFromPath(path)).toEqual(result)
diff --git a/src/utils/tagToSlug.js b/src/utils/shared/tagToSlug.js
similarity index 100%
rename from src/utils/tagToSlug.js
rename to src/utils/shared/tagToSlug.js

From ebc8216679f4616dcc5f42449c74a913e2050a41 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 15:21:17 +0300
Subject: [PATCH 26/51] Refactor gatsby-node to separate utils

---
 gatsby-node.js                | 260 ++--------------------------------
 src/utils/node/blog.js        | 151 ++++++++++++++++++++
 src/utils/node/common.js      |  70 +++++++++
 src/utils/node/doc.js         |  81 +++++++++++
 src/utils/node/paginatable.js |  50 -------
 5 files changed, 314 insertions(+), 298 deletions(-)
 create mode 100644 src/utils/node/blog.js
 create mode 100644 src/utils/node/common.js
 create mode 100644 src/utils/node/doc.js
 delete mode 100644 src/utils/node/paginatable.js

diff --git a/gatsby-node.js b/gatsby-node.js
index 7149aac3b1..c4bac87ad5 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -1,267 +1,31 @@
-/* eslint-env node */
-
-const fs = require('fs')
-const path = require('path')
-const GithubSlugger = require('github-slugger')
-const { createFilePath } = require('gatsby-source-filesystem')
-const tagToSlug = require('./src/utils/shared/tagToSlug')
-const pagesGenerator = require('./src/utils/node/paginatable')
-const { siteMetadata } = require('./gatsby-config')
-
-const { getItemBySource } = require('./src/utils/shared/sidebar')
-
-const remark = require('remark')
-const remarkHTML = require('remark-html')
-
-const markdownToHtml = remark().use(remarkHTML).processSync
-const slugger = new GithubSlugger()
-
-// Generate hedings data from markdown
-
-const SLUG_REGEXP = /\s+{#([a-z0-9-]*[a-z0-9]+)}\s*$/
-
-function extractSlugFromTitle(title) {
-  // extracts expressions like {#too-many-files} from the end of a title
-  const meta = title.match(SLUG_REGEXP)
-
-  if (meta) {
-    return [title.substring(0, meta.index), meta[1]]
-  }
-  return [title, slugger.slug(title)]
-}
-
-const parseHeadings = text => {
-  const headingRegex = /\n(## \s*)(.*)/g
-  const matches = []
-  let match
-  do {
-    match = headingRegex.exec(text)
-    if (match) {
-      const [title, slug] = extractSlugFromTitle(match[2])
-      matches.push({
-        text: title,
-        slug: slug
-      })
-    }
-  } while (match)
-
-  slugger.reset()
-  return matches
-}
+const {
+  getNodeSlug,
+  setPageContext,
+  removePageTrailingSlash
+} = require('./src/utils/node/common')
+const { createPages: createDocPages } = require('./src/utils/node/doc')
+const { createPages: createBlogPages } = require('./src/utils/node/blog')
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
 
   if (node.internal.type === 'MarkdownRemark') {
-    // We need replace to fix paths for Windows
-    const contentPath = path.join(__dirname, 'content').replace(/\\/g, '/')
-    const source = node.fileAbsolutePath.replace(contentPath, '')
-    let value
-
-    if (source.startsWith('/blog')) {
-      value = createFilePath({
-        getNode,
-        node,
-        trailingSlash: false
-      }).replace(/^\/blog\/[0-9\-]*/, '/blog/')
-
-      // Convert fields in frontmatter from markdown to html
-      const {
-        frontmatter: { descriptionLong, pictureComment }
-      } = node
-
-      if (descriptionLong) {
-        node.frontmatter.descriptionLong = markdownToHtml(
-          descriptionLong
-        ).contents
-      }
-
-      if (pictureComment) {
-        node.frontmatter.pictureComment = markdownToHtml(
-          pictureComment
-        ).contents
-      }
-      // end Convert fields
-    } else {
-      value = getItemBySource(source).path
-    }
-
     createNodeField({
       name: 'slug',
       node,
-      value
+      value: getNodeSlug(node, getNode)
     })
   }
 }
 
 exports.createPages = async ({ graphql, actions }) => {
-  // DOCS
-  const docsResponse = await graphql(
-    `
-      {
-        docs: allMarkdownRemark(
-          filter: { fileAbsolutePath: { regex: "/content/docs/" } }
-          limit: 9999
-        ) {
-          edges {
-            node {
-              rawMarkdownBody
-              fields {
-                slug
-              }
-            }
-          }
-        }
-      }
-    `
-  )
-
-  if (docsResponse.errors) {
-    throw docsResponse.errors
-  }
-
-  const docComponent = path.resolve('./src/templates/doc-home.tsx')
-
-  docsResponse.data.docs.edges.forEach(doc => {
-    const headings = parseHeadings(doc.node.rawMarkdownBody)
-
-    if (doc.node.fields.slug) {
-      actions.createPage({
-        component: docComponent,
-        path: doc.node.fields.slug,
-        context: {
-          isDocs: true,
-          slug: doc.node.fields.slug,
-          headings
-        }
-      })
-    }
-  })
-
-  // Blog
-  const blogResponse = await graphql(
-    `
-      {
-        allMarkdownRemark(
-          sort: { fields: [frontmatter___date], order: DESC }
-          filter: { fileAbsolutePath: { regex: "/content/blog/" } }
-          limit: 9999
-        ) {
-          edges {
-            node {
-              fields {
-                slug
-              }
-              frontmatter {
-                title
-              }
-            }
-          }
-        }
-        home: allMarkdownRemark(
-          sort: { fields: [frontmatter___date], order: DESC }
-          filter: { fileAbsolutePath: { regex: "/content/blog/" } }
-          limit: 9999
-        ) {
-          pageInfo {
-            itemCount
-          }
-        }
-        tags: allMarkdownRemark(limit: 9999) {
-          group(field: frontmatter___tags) {
-            fieldValue
-            pageInfo {
-              itemCount
-            }
-          }
-        }
-      }
-    `
-  )
-
-  if (blogResponse.errors) {
-    throw blogResponse.errors
-  }
-
-  // Create home blog pages (with pagination)
-  const blogHomeTemplate = path.resolve('./src/templates/blog-home.tsx')
-
-  for (const page of pagesGenerator({
-    basePath: '/blog',
-    hasHeroItem: true,
-    itemCount: blogResponse.data.home.pageInfo.itemCount
-  })) {
-    actions.createPage({
-      component: blogHomeTemplate,
-      path: page.path,
-      context: {
-        isBlog: true,
-        ...page.context
-      }
-    })
-  }
-
-  // Create blog posts pages
-  const blogPostTemplate = path.resolve('./src/templates/blog-post.tsx')
-  const posts = blogResponse.data.allMarkdownRemark.edges
-
-  posts.forEach((post, index) => {
-    const previous = index === posts.length - 1 ? null : posts[index + 1].node
-    const next = index === 0 ? null : posts[index - 1].node
-
-    actions.createPage({
-      component: blogPostTemplate,
-      context: {
-        isBlog: true,
-        currentPage: index + 1,
-        next,
-        previous,
-        slug: post.node.fields.slug
-      },
-      path: post.node.fields.slug
-    })
-  })
-
-  // Create tags pages (with pagination)
-  const blogTagsTemplate = path.resolve('./src/templates/blog-tags.tsx')
-
-  blogResponse.data.tags.group.forEach(
-    ({ fieldValue: tag, pageInfo: { itemCount } }) => {
-      const basePath = `/tags/${tagToSlug(tag)}`
-
-      for (const page of pagesGenerator({ basePath, itemCount })) {
-        actions.createPage({
-          component: blogTagsTemplate,
-          path: page.path,
-          context: { tag, ...page.context }
-        })
-      }
-    }
-  )
+  createDocPages({ graphql, actions })
+  createBlogPages({ graphql, actions })
 }
 
-const is404Regexp = /^\/404/
-const trailingSlashRegexp = /\/$/
-
 exports.onCreatePage = ({ page, actions }) => {
-  // Set necessary flags for pageContext
-  const newPage = {
-    ...page,
-    context: {
-      ...page.context,
-      is404: is404Regexp.test(page.path)
-    }
-  }
-
-  // Remove trailing slash
-  if (page.path !== '/' && trailingSlashRegexp.test(newPage.path)) {
-    newPage.path = newPage.path.replace(trailingSlashRegexp, '')
-  }
-
-  if (newPage !== page) {
-    actions.deletePage(page)
-    actions.createPage(newPage)
-  }
+  setPageContext(page, actions)
+  removePageTrailingSlash(page, actions)
 }
 
 // Ignore warnings about CSS inclusion order, because we use CSS modules.
diff --git a/src/utils/node/blog.js b/src/utils/node/blog.js
new file mode 100644
index 0000000000..21a740aeb3
--- /dev/null
+++ b/src/utils/node/blog.js
@@ -0,0 +1,151 @@
+const path = require('path')
+const tagToSlug = require('../shared/tagToSlug')
+const { BLOG } = require('../../consts')
+
+const pageUrl = (basePath, page) => {
+  if (page > 1) {
+    const basePrefix = basePath === '/' ? '' : `${basePath}/`
+
+    return `${basePrefix}page/${page}`
+  }
+
+  return basePath
+}
+
+function* pagesGenerator({ itemCount, hasHeroItem = false, basePath }) {
+  let currentPage = 1
+  let skip = 0
+
+  while (skip < itemCount) {
+    const limit =
+      hasHeroItem && currentPage === 1
+        ? BLOG.postsPerPage - BLOG.postsPerRow + 1
+        : BLOG.postsPerPage
+
+    let nextPage
+    let previousPage
+
+    if (skip + limit < itemCount) {
+      nextPage = pageUrl(basePath, currentPage + 1)
+    }
+
+    if (skip > 0) {
+      previousPage = pageUrl(basePath, currentPage - 1)
+    }
+
+    // For the Paginator component
+    const pageInfo = { currentPage, nextPage, previousPage }
+
+    yield {
+      path: pageUrl(basePath, currentPage),
+      context: { limit, pageInfo, skip }
+    }
+
+    currentPage++
+    skip += limit
+  }
+}
+
+const createPages = async ({ graphql, actions }) => {
+  const blogResponse = await graphql(
+    `
+      {
+        allMarkdownRemark(
+          sort: { fields: [frontmatter___date], order: DESC }
+          filter: { fileAbsolutePath: { regex: "/content/blog/" } }
+          limit: 9999
+        ) {
+          edges {
+            node {
+              fields {
+                slug
+              }
+              frontmatter {
+                title
+              }
+            }
+          }
+        }
+        home: allMarkdownRemark(
+          sort: { fields: [frontmatter___date], order: DESC }
+          filter: { fileAbsolutePath: { regex: "/content/blog/" } }
+          limit: 9999
+        ) {
+          pageInfo {
+            itemCount
+          }
+        }
+        tags: allMarkdownRemark(limit: 9999) {
+          group(field: frontmatter___tags) {
+            fieldValue
+            pageInfo {
+              itemCount
+            }
+          }
+        }
+      }
+    `
+  )
+
+  if (blogResponse.errors) {
+    throw blogResponse.errors
+  }
+
+  // Create home blog pages (with pagination)
+  const blogHomeTemplate = path.resolve('./src/templates/blog-home.tsx')
+
+  for (const page of pagesGenerator({
+    basePath: '/blog',
+    hasHeroItem: true,
+    itemCount: blogResponse.data.home.pageInfo.itemCount
+  })) {
+    actions.createPage({
+      component: blogHomeTemplate,
+      path: page.path,
+      context: {
+        isBlog: true,
+        ...page.context
+      }
+    })
+  }
+
+  // Create blog posts pages
+  const blogPostTemplate = path.resolve('./src/templates/blog-post.tsx')
+  const posts = blogResponse.data.allMarkdownRemark.edges
+
+  posts.forEach((post, index) => {
+    const previous = index === posts.length - 1 ? null : posts[index + 1].node
+    const next = index === 0 ? null : posts[index - 1].node
+
+    actions.createPage({
+      component: blogPostTemplate,
+      context: {
+        isBlog: true,
+        currentPage: index + 1,
+        next,
+        previous,
+        slug: post.node.fields.slug
+      },
+      path: post.node.fields.slug
+    })
+  })
+
+  // Create tags pages (with pagination)
+  const blogTagsTemplate = path.resolve('./src/templates/blog-tags.tsx')
+
+  blogResponse.data.tags.group.forEach(
+    ({ fieldValue: tag, pageInfo: { itemCount } }) => {
+      const basePath = `/tags/${tagToSlug(tag)}`
+
+      for (const page of pagesGenerator({ basePath, itemCount })) {
+        actions.createPage({
+          component: blogTagsTemplate,
+          path: page.path,
+          context: { tag, ...page.context }
+        })
+      }
+    }
+  )
+}
+
+exports.createPages = createPages
diff --git a/src/utils/node/common.js b/src/utils/node/common.js
new file mode 100644
index 0000000000..d534743836
--- /dev/null
+++ b/src/utils/node/common.js
@@ -0,0 +1,70 @@
+const path = require('path')
+const process = require('process')
+const { createFilePath } = require('gatsby-source-filesystem')
+const remark = require('remark')
+const remarkHTML = require('remark-html')
+const { getItemBySource } = require('../shared/sidebar')
+
+const markdownToHtml = remark().use(remarkHTML).processSync
+const is404Regexp = /^\/404/
+const trailingSlashRegexp = /\/$/
+
+const getNodeSlug = (node, getNode) => {
+  // We need replace to fix paths for Windows
+  const contentPath = path.join(process.cwd(), 'content').replace(/\\/g, '/')
+  const source = node.fileAbsolutePath.replace(contentPath, '')
+  let value
+
+  if (source.startsWith('/blog')) {
+    value = createFilePath({
+      getNode,
+      node,
+      trailingSlash: false
+    }).replace(/^\/blog\/[0-9\-]*/, '/blog/')
+
+    // Convert fields in frontmatter from markdown to html
+    const {
+      frontmatter: { descriptionLong, pictureComment }
+    } = node
+
+    if (descriptionLong) {
+      node.frontmatter.descriptionLong = markdownToHtml(
+        descriptionLong
+      ).contents
+    }
+
+    if (pictureComment) {
+      node.frontmatter.pictureComment = markdownToHtml(pictureComment).contents
+    }
+    // end Convert fields
+  } else {
+    value = getItemBySource(source).path
+  }
+
+  return value
+}
+
+const setPageContext = (page, actions) => {
+  actions.deletePage(page)
+  actions.createPage({
+    ...page,
+    context: {
+      ...page.context,
+      is404: is404Regexp.test(page.path)
+    }
+  })
+}
+
+const removePageTrailingSlash = (page, actions) => {
+  if (page.path !== '/' && trailingSlashRegexp.test(page.path)) {
+    actions.deletePage(page)
+    actions.createPage({
+      ...page,
+      path: page.path.replace(trailingSlashRegexp, '')
+    })
+  }
+}
+
+exports.getNodeSlug = getNodeSlug
+exports.setPageContext = setPageContext
+exports.removePageTrailingSlash = removePageTrailingSlash
diff --git a/src/utils/node/doc.js b/src/utils/node/doc.js
new file mode 100644
index 0000000000..d8ee79d64a
--- /dev/null
+++ b/src/utils/node/doc.js
@@ -0,0 +1,81 @@
+const path = require('path')
+const GithubSlugger = require('github-slugger')
+
+const slugger = new GithubSlugger()
+const SLUG_REGEXP = /\s+{#([a-z0-9-]*[a-z0-9]+)}\s*$/
+
+const extractSlugFromTitle = title => {
+  // extracts expressions like {#too-many-files} from the end of a title
+  const meta = title.match(SLUG_REGEXP)
+
+  if (meta) {
+    return [title.substring(0, meta.index), meta[1]]
+  }
+  return [title, slugger.slug(title)]
+}
+
+const parseHeadings = text => {
+  const headingRegex = /\n(## \s*)(.*)/g
+  const matches = []
+  let match
+  do {
+    match = headingRegex.exec(text)
+    if (match) {
+      const [title, slug] = extractSlugFromTitle(match[2])
+      matches.push({
+        text: title,
+        slug: slug
+      })
+    }
+  } while (match)
+
+  slugger.reset()
+  return matches
+}
+
+const createPages = async ({ graphql, actions }) => {
+  // DOCS
+  const docsResponse = await graphql(
+    `
+      {
+        docs: allMarkdownRemark(
+          filter: { fileAbsolutePath: { regex: "/content/docs/" } }
+          limit: 9999
+        ) {
+          edges {
+            node {
+              rawMarkdownBody
+              fields {
+                slug
+              }
+            }
+          }
+        }
+      }
+    `
+  )
+
+  if (docsResponse.errors) {
+    throw docsResponse.errors
+  }
+
+  const docComponent = path.resolve('./src/templates/doc-home.tsx')
+
+  docsResponse.data.docs.edges.forEach(doc => {
+    const headings = parseHeadings(doc.node.rawMarkdownBody)
+
+    if (doc.node.fields.slug) {
+      actions.createPage({
+        component: docComponent,
+        path: doc.node.fields.slug,
+        context: {
+          isDocs: true,
+          slug: doc.node.fields.slug,
+          headings
+        }
+      })
+    }
+  })
+}
+
+exports.createPages = createPages
diff --git a/src/utils/node/paginatable.js b/src/utils/node/paginatable.js
deleted file mode 100644
index e745c3b5a6..0000000000
--- a/src/utils/node/paginatable.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/* eslint-env node */
-const { BLOG } = require('../../consts')
-
-function pageUrl(basePath, page) {
-  if (page > 1) {
-    const basePrefix = basePath === '/' ? '' : `${basePath}/`
-
-    return `${basePrefix}page/${page}`
-  }
-
-  return basePath
-}
-
-module.exports = function* pagesGenerator({
-  itemCount,
-  hasHeroItem = false,
-  basePath
-}) {
-  let currentPage = 1
-  let skip = 0
-
-  while (skip < itemCount) {
-    const limit =
-      hasHeroItem && currentPage === 1
-        ? BLOG.postsPerPage - BLOG.postsPerRow + 1
-        : BLOG.postsPerPage
-
-    let nextPage
-    let previousPage
-
-    if (skip + limit < itemCount) {
-      nextPage = pageUrl(basePath, currentPage + 1)
-    }
-
-    if (skip > 0) {
-      previousPage = pageUrl(basePath, currentPage - 1)
-    }
-
-    // For the Paginator component
-    const pageInfo = { currentPage, nextPage, previousPage }
-
-    yield {
-      path: pageUrl(basePath, currentPage),
-      context: { limit, pageInfo, skip }
-    }
-
-    currentPage++
-    skip += limit
-  }
-}

From 2ff0f2dfb5bedc7e2472052cb16546940941bf1f Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 15:51:33 +0300
Subject: [PATCH 27/51] Update @react/portal package. Remove our custom Portal
 component

---
 package.json                                     |  2 +-
 .../Markdown/Tooltip/DesktopView/index.tsx       | 10 ++++------
 .../Tooltip/DesktopView/styles.module.css        |  9 ++++++---
 .../Markdown/Tooltip/MobileView/index.tsx        |  2 +-
 .../Tooltip/MobileView/styles.module.css         |  4 ++++
 .../Markdown/Tooltip/Portal/index.tsx            |  9 ---------
 src/components/Page/index.tsx                    |  2 --
 src/components/Page/styles.module.css            |  7 -------
 yarn.lock                                        | 16 ++++++++++++++++
 9 files changed, 32 insertions(+), 29 deletions(-)
 delete mode 100644 src/components/Documentation/Markdown/Tooltip/Portal/index.tsx

diff --git a/package.json b/package.json
index 9d50fa50a1..592e331161 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@hapi/wreck": "^17.0.0",
     "@octokit/graphql": "^4.3.1",
-    "@reach/portal": "^0.9.0",
+    "@reach/portal": "^0.10.0",
     "@reach/router": "^1.3.1",
     "@reach/tooltip": "^0.9.1",
     "classnames": "^2.2.6",
diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
index 9d55253962..966e260cfa 100644
--- a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
+++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
@@ -1,9 +1,9 @@
 import React, { useRef, useState, useEffect } from 'react'
 import cn from 'classnames'
 import ReactMarkdown from 'react-markdown'
+import Portal from '@reach/portal'
 import throttle from 'lodash.throttle'
 
-import Portal from '../Portal'
 import { getHeaderHeight } from '../../../../../utils/front/scroll'
 import styles from './styles.module.css'
 
@@ -87,12 +87,10 @@ const DesktopView: React.SFC<IDesktopViewProps> = ({
     }
   }, [])
   useEffect(() => {
-    if (!tooltipRef.current) {
-      return
+    if (isVisible) {
+      requestAnimationFrame(calcPosition)
     }
-
-    calcPosition()
-  }, [isVisible, tooltipRef.current])
+  }, [isVisible])
 
   return (
     <>
diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css b/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
index 05f718ea85..da57caef58 100644
--- a/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
+++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
@@ -3,8 +3,11 @@
 }
 
 .tooltip {
-  position: absolute;
-  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: block;
+  opacity: 0;
   width: 400px;
   padding: 8px 10px;
   border: 1px solid var(--color-lighter-blue);
@@ -14,7 +17,7 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
   &.calculated {
-    display: block;
+    opacity: 1;
   }
 
   &::after {
diff --git a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
index a8ca73b922..72c047d53f 100644
--- a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
+++ b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import cn from 'classnames'
+import Portal from '@reach/portal'
 import ReactMarkdown from 'react-markdown'
 
-import Portal from '../Portal'
 import { isTriggeredFromKB } from '../../../../../utils/front/keyboard'
 
 import styles from './styles.module.css'
diff --git a/src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css b/src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css
index 8f54fa7c65..f7eb3496fa 100644
--- a/src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css
+++ b/src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css
@@ -3,6 +3,10 @@
 }
 
 .modalBackground {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
   height: 100vh;
   width: 100%;
   display: flex;
diff --git a/src/components/Documentation/Markdown/Tooltip/Portal/index.tsx b/src/components/Documentation/Markdown/Tooltip/Portal/index.tsx
deleted file mode 100644
index 3977ceaed9..0000000000
--- a/src/components/Documentation/Markdown/Tooltip/Portal/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ReactDOM from 'react-dom'
-
-const Portal: React.SFC<{ children: React.ReactNode }> = ({ children }) =>
-  ReactDOM.createPortal(
-    children,
-    document.getElementById('portal') as HTMLElement
-  )
-
-export default Portal
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index 895c6ece54..5ef0c72c20 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -10,7 +10,6 @@ import { useRedirects, useAnchorNavigation, useSmoothScroll } from './utils'
 import 'reset-css'
 import './base.css'
 import './fonts/fonts.css'
-import styles from './styles.module.css'
 
 export interface IPageProps {
   location: {
@@ -48,7 +47,6 @@ const Page: React.SFC<IPageProps> = props => {
     <>
       <DefaultSEO />
       <LayoutComponent {...props} />
-      <div id="portal" className={styles.portal} />
     </>
   )
 }
diff --git a/src/components/Page/styles.module.css b/src/components/Page/styles.module.css
index 330485dcb0..412274331f 100644
--- a/src/components/Page/styles.module.css
+++ b/src/components/Page/styles.module.css
@@ -1,10 +1,3 @@
-.portal {
-  position: fixed;
-  z-index: 100000;
-  top: 0;
-  left: 0;
-}
-
 .smoothScrolling {
   scroll-behavior: smooth;
   will-change: scroll-position;
diff --git a/yarn.lock b/yarn.lock
index 99aeaa636c..60e821dea3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1503,6 +1503,14 @@
   resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.1.0.tgz#4e967a93852b6004c3895d9ed8d4e5b41895afde"
   integrity sha512-kE+jvoj/OyJV24C03VvLt5zclb9ArJi04wWXMMFwQvdZjdHoBlN4g0ZQFjyy/ejPF1Z/dpUD5dhRdBiUmIGZTA==
 
+"@reach/portal@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.10.0.tgz#ed119d796de1b5ea7c975007fa6b2e507bc7567e"
+  integrity sha512-soXCiLDWcyXMgs1pArjdt67d+IARu1rpkOmHWD3c7XDE2hanWVeQiGC4L8UVNrm51pWrCDtLH1R446tG6uNz2Q==
+  dependencies:
+    "@reach/utils" "^0.10.0"
+    tslib "^1.10.0"
+
 "@reach/portal@^0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.9.0.tgz#8346c4403aba071b36ff0bd5137b1363f70ade15"
@@ -1544,6 +1552,14 @@
     prop-types "^15.7.2"
     tslib "^1.10.0"
 
+"@reach/utils@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.10.0.tgz#480332433f9d0232aff2c36374cf9a2fe559990b"
+  integrity sha512-qPiwjw8jcT7JYrVT+ZO7bLTVEdp9KyvY0RO1emyCxqpYVr4s9oSZ3XG6n7G+bvnKeyjpbpIfCVfxYvPF1Uq2DQ==
+  dependencies:
+    tslib "^1.10.0"
+    warning "^4.0.3"
+
 "@reach/utils@^0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.9.0.tgz#ee47c25c79eb2f98e6c0e728a2672075cc9991d5"

From 7c5bfa1f085056c58b7aba63bbbbcca2e79acfea Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 15:59:47 +0300
Subject: [PATCH 28/51] Update linters and reformat code accordingly to new
 rules

---
 .github/ISSUE_TEMPLATE/bug_report.md      |    1 -
 .github/ISSUE_TEMPLATE/feature_request.md |    1 -
 .prettierignore                           |    1 +
 .prettierrc                               |    1 +
 config/prismjs/dvc-hook.js                |    1 +
 package.json                              |   28 +-
 plugins/gatsby-remark-dvc-linker/index.js |    2 +-
 plugins/resize-image-plugin/index.js      |    5 +-
 plugins/utils/convertHast.js              |    8 +-
 src/utils/shared/tagToSlug.js             |    6 +-
 yarn.lock                                 | 1520 ++++++++++++---------
 11 files changed, 873 insertions(+), 701 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index ce2b81b137..eff768bebc 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,5 +1,4 @@
 ---
 name: Bug or improvement report
 about: Create a report to help us improve
-
 ---
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index 725f7ddaa3..c709e39ab1 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,5 +1,4 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-
 ---
diff --git a/.prettierignore b/.prettierignore
index 6f4cc14699..1b9f04f14f 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,3 @@
 .cache/
+.github
 public/
diff --git a/.prettierrc b/.prettierrc
index ec85921852..365b1903fa 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "semi": false,
+  "arrowParens": "avoid",
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 80,
diff --git a/config/prismjs/dvc-hook.js b/config/prismjs/dvc-hook.js
index 89caa435c0..aa637fc7e8 100644
--- a/config/prismjs/dvc-hook.js
+++ b/config/prismjs/dvc-hook.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-env node */
 
 const Prism = require('prismjs')
diff --git a/package.json b/package.json
index 592e331161..f81979332b 100644
--- a/package.json
+++ b/package.json
@@ -102,19 +102,19 @@
     "@types/react-slick": "^0.23.4",
     "@types/rehype-react": "^4.0.0",
     "@types/vfile-message": "^1.0.1",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.24.0",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
     "autoprefixer": "^9.7.4",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^25.2.6",
     "babel-plugin-transform-define": "^2.0.0",
     "babel-plugin-transform-object-assign": "^6.22.0",
-    "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-json": "^2.0.1",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-json": "^2.1.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
     "gatsby-plugin-catch-links": "^2.1.26",
     "gatsby-plugin-google-analytics": "^2.1.36",
     "gatsby-plugin-manifest": "^2.2.42",
@@ -141,20 +141,20 @@
     "gatsby-transformer-remark": "^2.6.59",
     "gatsby-transformer-sharp": "^2.4.0",
     "hast-util-select": "^4.0.0",
-    "husky": "^4.0.10",
-    "jest": "^24.9.0",
-    "lint-staged": "^10.0.0",
+    "husky": "^4.2.3",
+    "jest": "^25.2.7",
+    "lint-staged": "^10.1.2",
     "postcss-color-mod-function": "^3.0.3",
     "postcss-custom-media": "^7.0.8",
     "postcss-custom-properties": "^9.1.1",
     "postcss-mixins": "^6.2.3",
     "postcss-nested": "^4.2.1",
-    "prettier": "^1.19.1",
+    "prettier": "^2.0.4",
     "rehype-parse": "^6.0.2",
     "rehype-stringify": "^6.0.1",
     "remark": "^11.0.2",
     "remark-html": "^10.0.0",
-    "stylelint": "^13.2.1",
+    "stylelint": "^13.3.0",
     "stylelint-config-standard": "^20.0.0",
     "typescript": "^3.8.3"
   },
diff --git a/plugins/gatsby-remark-dvc-linker/index.js b/plugins/gatsby-remark-dvc-linker/index.js
index 38477241c9..50d64bf7c6 100644
--- a/plugins/gatsby-remark-dvc-linker/index.js
+++ b/plugins/gatsby-remark-dvc-linker/index.js
@@ -8,7 +8,7 @@ const COMMAND_REGEXP = /^[a-z][a-z-]*$/
 const COMMAND_ROOT = '/doc/command-reference/'
 
 module.exports = ({ markdownAST }) => {
-  visit(markdownAST, 'inlineCode', function(node, index, parent) {
+  visit(markdownAST, 'inlineCode', function (node, index, parent) {
     if (parent.type !== 'link' && DVC_REGEXP.test(node.value)) {
       const parts = node.value.split(/\s+/)
       let url
diff --git a/plugins/resize-image-plugin/index.js b/plugins/resize-image-plugin/index.js
index 747b005e49..e47939ba6a 100644
--- a/plugins/resize-image-plugin/index.js
+++ b/plugins/resize-image-plugin/index.js
@@ -92,8 +92,9 @@ module.exports = ({ markdownAST }) => {
 
       if (wrap) {
         const { className, style } = wrapperImage.properties
-        wrapperImage.properties.className = `${className ||
-          ''} ${imageWrapClassPrefix}${wrap}`
+        wrapperImage.properties.className = `${
+          className || ''
+        } ${imageWrapClassPrefix}${wrap}`
 
         // Prevent us from using an !important in the CSS
         wrapperImage.properties.style = style.replace(
diff --git a/plugins/utils/convertHast.js b/plugins/utils/convertHast.js
index 395d41f707..353b6191fb 100644
--- a/plugins/utils/convertHast.js
+++ b/plugins/utils/convertHast.js
@@ -4,15 +4,11 @@ const stringify = require('rehype-stringify')
 
 /** HAST - Hypertext Abstract Syntax Tree */
 function convertHtmlToHast(htmlString) {
-  return unified()
-    .use(parse, { fragment: true })
-    .parse(htmlString)
+  return unified().use(parse, { fragment: true }).parse(htmlString)
 }
 
 function convertHastToHtml(htmlAst) {
-  return unified()
-    .use(stringify)
-    .stringify(htmlAst)
+  return unified().use(stringify).stringify(htmlAst)
 }
 
 module.exports = {
diff --git a/src/utils/shared/tagToSlug.js b/src/utils/shared/tagToSlug.js
index 66e61205ae..fa4fd729cc 100644
--- a/src/utils/shared/tagToSlug.js
+++ b/src/utils/shared/tagToSlug.js
@@ -1,6 +1,2 @@
 module.exports = tag =>
-  tag
-    .trim()
-    .toLowerCase()
-    .replace(/\s/g, '-')
-    .replace(/-+/g, '-')
+  tag.trim().toLowerCase().replace(/\s/g, '-').replace(/-+/g, '-')
diff --git a/yarn.lock b/yarn.lock
index 60e821dea3..2b59aefe64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -47,7 +47,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.4.0", "@babel/generator@^7.9.0":
+"@babel/generator@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.4.tgz#12441e90c3b3c4159cdecf312075bf1a8ce2dbce"
   integrity sha512-rjP8ahaDy/ouhrvCoU1E5mqaitWrxwuNGU+dy1EpaoK48jZay4MdkskKGIMHLZNewg8sAsqpGSREJwP0zH3YQA==
@@ -276,7 +276,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.7.0", "@babel/parser@^7.8.6", "@babel/parser@^7.8.8", "@babel/parser@^7.9.0":
+"@babel/parser@^7.1.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.5", "@babel/parser@^7.8.6", "@babel/parser@^7.8.8", "@babel/parser@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
   integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==
@@ -369,6 +369,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-bigint@^7.0.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
@@ -871,7 +878,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/template@^7.4.0", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
+"@babel/template@^7.7.4", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
   integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
@@ -880,7 +887,7 @@
     "@babel/parser" "^7.8.6"
     "@babel/types" "^7.8.6"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.0", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.0.tgz#d3882c2830e513f4fe4cec9fe76ea1cc78747892"
   integrity sha512-jAZQj0+kn4WTHO5dUZkZKhbFrqZE7K5LAQ5JysMnmvGij+wOdr+8lWqPeW0BcF4wFwrEXXtdGO7wcV6YPJcf3w==
@@ -895,7 +902,7 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
-"@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0":
+"@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.0.tgz#00b064c3df83ad32b2dbf5ff07312b15c7f1efb5"
   integrity sha512-BS9JKfXkzzJl8RluW4JGknzpiUV7ZrvTayM6yfqLTVBEnFtyowVIOu6rqxRd5cVO6yGoWf4T8u8dgK9oB+GCng==
@@ -904,6 +911,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -975,153 +987,176 @@
     "@hapi/bourne" "2.x.x"
     "@hapi/hoek" "9.x.x"
 
-"@jest/console@^24.7.1", "@jest/console@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
-  integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b"
+  integrity sha512-ZR0rq/f/E4f4XcgnDvtMWXCUJpi8eO0rssVhmztsZqLIEFA9UUP9zmpE0VxlM+kv/E1ul2I876Fwil2ayptDVg==
   dependencies:
-    "@jest/source-map" "^24.9.0"
-    chalk "^2.0.1"
-    slash "^2.0.0"
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
 
-"@jest/core@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
-  integrity sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==
-  dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/reporters" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.1"
-    exit "^0.1.2"
-    graceful-fs "^4.1.15"
-    jest-changed-files "^24.9.0"
-    jest-config "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-resolve-dependencies "^24.9.0"
-    jest-runner "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    jest-watcher "^24.9.0"
-    micromatch "^3.1.10"
-    p-each-series "^1.0.0"
-    realpath-native "^1.1.0"
-    rimraf "^2.5.4"
-    slash "^2.0.0"
-    strip-ansi "^5.0.0"
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
+  integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
 
-"@jest/environment@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
-  integrity sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==
+"@jest/console@^25.2.6":
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-25.2.6.tgz#f594847ec8aef3cf27f448abe97e76e491212e97"
+  integrity sha512-bGp+0PicZVCEhb+ifnW9wpKWONNdkhtJsRE7ap729hiAfTvCN6VhGx0s/l/V/skA2pnyqq+N/7xl9ZWfykDpsg==
   dependencies:
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
+    "@jest/source-map" "^25.2.6"
+    chalk "^3.0.0"
+    jest-util "^25.2.6"
+    slash "^3.0.0"
 
-"@jest/fake-timers@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
-  integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
+"@jest/core@^25.2.7":
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-25.2.7.tgz#58d697687e94ee644273d15e4eed6a20e27187cd"
+  integrity sha512-Nd6ELJyR+j0zlwhzkfzY70m04hAur0VnMwJXVe4VmmD/SaQ6DEyal++ERQ1sgyKIKKEqRuui6k/R0wHLez4P+g==
   dependencies:
-    "@jest/types" "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-mock "^24.9.0"
+    "@jest/console" "^25.2.6"
+    "@jest/reporters" "^25.2.6"
+    "@jest/test-result" "^25.2.6"
+    "@jest/transform" "^25.2.6"
+    "@jest/types" "^25.2.6"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.3"
+    jest-changed-files "^25.2.6"
+    jest-config "^25.2.7"
+    jest-haste-map "^25.2.6"
+    jest-message-util "^25.2.6"
+    jest-regex-util "^25.2.6"
+    jest-resolve "^25.2.6"
+    jest-resolve-dependencies "^25.2.7"
+    jest-runner "^25.2.7"
+    jest-runtime "^25.2.7"
+    jest-snapshot "^25.2.7"
+    jest-util "^25.2.6"
+    jest-validate "^25.2.6"
+    jest-watcher "^25.2.7"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
+    realpath-native "^2.0.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
 
-"@jest/reporters@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
-  integrity sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+"@jest/environment@^25.2.6":
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-25.2.6.tgz#8f7931e79abd81893ce88b7306f0cc4744835000"
+  integrity sha512-17WIw+wCb9drRNFw1hi8CHah38dXVdOk7ga9exThhGtXlZ9mK8xH4DjSB9uGDGXIWYSHmrxoyS6KJ7ywGr7bzg==
+  dependencies:
+    "@jest/fake-timers" "^25.2.6"
+    "@jest/types" "^25.2.6"
+    jest-mock "^25.2.6"
+
+"@jest/fake-timers@^25.2.6":
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-25.2.6.tgz#239dbde3f56badf7d05bcf888f5d669296077cad"
+  integrity sha512-A6qtDIA2zg/hVgUJJYzQSHFBIp25vHdSxW/s4XmTJAYxER6eL0NQdQhe4+232uUSviKitubHGXXirt5M7blPiA==
+  dependencies:
+    "@jest/types" "^25.2.6"
+    jest-message-util "^25.2.6"
+    jest-mock "^25.2.6"
+    jest-util "^25.2.6"
+    lolex "^5.0.0"
+
+"@jest/reporters@^25.2.6":
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-25.2.6.tgz#6d87e40fb15adb69e22bb83aa02a4d88b2253b5f"
+  integrity sha512-DRMyjaxcd6ZKctiXNcuVObnPwB1eUs7xrUVu0J2V0p5/aZJei5UM9GL3s/bmN4hRV8Mt3zXh+/9X2o0Q4ClZIA==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^25.2.6"
+    "@jest/test-result" "^25.2.6"
+    "@jest/transform" "^25.2.6"
+    "@jest/types" "^25.2.6"
+    chalk "^3.0.0"
+    collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.2"
-    istanbul-lib-coverage "^2.0.2"
-    istanbul-lib-instrument "^3.0.1"
-    istanbul-lib-report "^2.0.4"
-    istanbul-lib-source-maps "^3.0.1"
-    istanbul-reports "^2.2.6"
-    jest-haste-map "^24.9.0"
-    jest-resolve "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.6.0"
-    node-notifier "^5.4.2"
-    slash "^2.0.0"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.0"
+    jest-haste-map "^25.2.6"
+    jest-resolve "^25.2.6"
+    jest-util "^25.2.6"
+    jest-worker "^25.2.6"
+    slash "^3.0.0"
     source-map "^0.6.0"
-    string-length "^2.0.0"
+    string-length "^3.1.0"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^4.0.1"
+  optionalDependencies:
+    node-notifier "^6.0.0"
 
-"@jest/source-map@^24.3.0", "@jest/source-map@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
-  integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
+"@jest/source-map@^25.2.6":
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-25.2.6.tgz#0ef2209514c6d445ebccea1438c55647f22abb4c"
+  integrity sha512-VuIRZF8M2zxYFGTEhkNSvQkUKafQro4y+mwUxy5ewRqs5N/ynSFUODYp3fy1zCnbCMy1pz3k+u57uCqx8QRSQQ==
   dependencies:
     callsites "^3.0.0"
-    graceful-fs "^4.1.15"
+    graceful-fs "^4.2.3"
     source-map "^0.6.0"
 
-"@jest/test-result@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
-  integrity sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==
+"@jest/test-result@^25.2.6":
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-25.2.6.tgz#f6082954955313eb96f6cabf9fb14f8017826916"
+  integrity sha512-gmGgcF4qz/pkBzyfJuVHo2DA24kIgVQ5Pf/VpW4QbyMLSegi8z+9foSZABfIt5se6k0fFj/3p/vrQXdaOgit0w==
   dependencies:
-    "@jest/console" "^24.9.0"
-    "@jest/types" "^24.9.0"
+    "@jest/console" "^25.2.6"
+    "@jest/types" "^25.2.6"
     "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
 
-"@jest/test-sequencer@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
-  integrity sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==
+"@jest/test-sequencer@^25.2.7":
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-25.2.7.tgz#e4331f7b4850e34289b9a5c8ec8a2c03b400da8f"
+  integrity sha512-s2uYGOXONDSTJQcZJ9A3Zkg3hwe53RlX1HjUNqjUy3HIqwgwCKJbnAKYsORPbhxXi3ARMKA7JNBi9arsTxXoYw==
   dependencies:
-    "@jest/test-result" "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-runner "^24.9.0"
-    jest-runtime "^24.9.0"
+    "@jest/test-result" "^25.2.6"
+    jest-haste-map "^25.2.6"
+    jest-runner "^25.2.7"
+    jest-runtime "^25.2.7"
 
-"@jest/transform@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
-  integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
+"@jest/transform@^25.2.6":
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-25.2.6.tgz#007fd946dedf12d2a9eb5d4154faf1991d5f61ff"
+  integrity sha512-rZnjCjZf9avPOf9q/w9RUZ9Uc29JmB53uIXNJmNz04QbDMD5cR/VjfikiMKajBsXe2vnFl5sJ4RTt+9HPicauQ==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/types" "^24.9.0"
-    babel-plugin-istanbul "^5.1.0"
-    chalk "^2.0.1"
+    "@jest/types" "^25.2.6"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^3.0.0"
     convert-source-map "^1.4.0"
     fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.1.15"
-    jest-haste-map "^24.9.0"
-    jest-regex-util "^24.9.0"
-    jest-util "^24.9.0"
-    micromatch "^3.1.10"
+    graceful-fs "^4.2.3"
+    jest-haste-map "^25.2.6"
+    jest-regex-util "^25.2.6"
+    jest-util "^25.2.6"
+    micromatch "^4.0.2"
     pirates "^4.0.1"
-    realpath-native "^1.1.0"
-    slash "^2.0.0"
+    realpath-native "^2.0.0"
+    slash "^3.0.0"
     source-map "^0.6.1"
-    write-file-atomic "2.4.1"
+    write-file-atomic "^3.0.0"
 
-"@jest/types@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
-  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
+"@jest/types@^25.2.6":
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.2.6.tgz#c12f44af9bed444438091e4b59e7ed05f8659cb6"
+  integrity sha512-myJTTV37bxK7+3NgKc4Y/DlQ5q92/NOwZsZ+Uch7OXdElxOg61QYc72fPYNAjlvbnJ2YvbXLamIsa9tj48BmyQ==
   dependencies:
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/istanbul-reports" "^1.1.1"
-    "@types/yargs" "^13.0.0"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
 
 "@jimp/bmp@^0.6.8":
   version "0.6.8"
@@ -1644,6 +1679,13 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
+"@sinonjs/commons@^1.7.0":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.1.tgz#da5fd19a5f71177a53778073978873964f49acf1"
+  integrity sha512-Debi3Baff1Qu1Unc3mjJ96MgpbwTn43S1+9yJ0llWygPwDNu2aaWBD6yc9y/Z8XDRNhx7U+u2UDg2OGQXkclUQ==
+  dependencies:
+    type-detect "4.0.8"
+
 "@svgr/babel-plugin-add-jsx-attribute@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.0.1.tgz#744853b6533e83ce712d41d1873200b3e0a0b6fc"
@@ -1850,7 +1892,7 @@
   resolved "https://registry.yarnpkg.com/@types/isomorphic-fetch/-/isomorphic-fetch-0.0.35.tgz#c1c0d402daac324582b6186b91f8905340ea3361"
   integrity sha512-DaZNUvLDCAnCTjgwxgiL1eQdxIKEpNLOlTNtAgnZc50bG2copGhRrFN9/PxPBuJe+tZVLCbQ7ls0xveXVRPkvw==
 
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
   integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
@@ -1957,6 +1999,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/prettier@^1.19.0":
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.19.1.tgz#33509849f8e679e4add158959fdb086440e9553f"
+  integrity sha512-5qOlnZscTn4xxM5MeGXAMOsIOIKIbh9e85zJWfBRVPlRMEVawzoPhINYbRGkBZCI8LxvBe7tJCdWiarA99OZfQ==
+
 "@types/promise-polyfill@^6.0.3":
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/@types/promise-polyfill/-/promise-polyfill-6.0.3.tgz#e2f38fcd244a9e0df2cc7528e0711abcbc707b5e"
@@ -2090,10 +2137,10 @@
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
   integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
 
-"@types/yargs@^13.0.0":
-  version "13.0.8"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.8.tgz#a38c22def2f1c2068f8971acb3ea734eb3c64a99"
-  integrity sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==
+"@types/yargs@^15.0.0":
+  version "15.0.4"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.4.tgz#7e5d0f8ca25e9d5849f2ea443cf7c402decd8299"
+  integrity sha512-9T1auFmbPZoxHz0enUFlUuKRy3it01R+hlggyVUMtnCTQRunsQYifnSGb8hET4Xo8yiC0o0r1paW3ud5+rbURg==
   dependencies:
     "@types/yargs-parser" "*"
 
@@ -2112,6 +2159,16 @@
     regexpp "^3.0.0"
     tsutils "^3.17.1"
 
+"@typescript-eslint/eslint-plugin@^2.27.0":
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.27.0.tgz#e479cdc4c9cf46f96b4c287755733311b0d0ba4b"
+  integrity sha512-/my+vVHRN7zYgcp0n4z5A6HAK7bvKGBiswaM5zIlOQczsxj/aiD7RcgD+dvVFuwFaGh5+kM7XA6Q6PN0bvb1tw==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "2.27.0"
+    functional-red-black-tree "^1.0.1"
+    regexpp "^3.0.0"
+    tsutils "^3.17.1"
+
 "@typescript-eslint/experimental-utils@2.25.0":
   version "2.25.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.25.0.tgz#13691c4fe368bd377b1e5b1e4ad660b220bf7714"
@@ -2122,6 +2179,16 @@
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
+"@typescript-eslint/experimental-utils@2.27.0":
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.27.0.tgz#801a952c10b58e486c9a0b36cf21e2aab1e9e01a"
+  integrity sha512-vOsYzjwJlY6E0NJRXPTeCGqjv5OHgRU1kzxHKWJVPjDYGbPgLudBXjIlc+OD1hDBZ4l1DLbOc5VjofKahsu9Jw==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/typescript-estree" "2.27.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
 "@typescript-eslint/parser@^2.24.0":
   version "2.25.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.25.0.tgz#abfb3d999084824d9a756d9b9c0f36fba03adb76"
@@ -2132,6 +2199,16 @@
     "@typescript-eslint/typescript-estree" "2.25.0"
     eslint-visitor-keys "^1.1.0"
 
+"@typescript-eslint/parser@^2.27.0":
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.27.0.tgz#d91664335b2c46584294e42eb4ff35838c427287"
+  integrity sha512-HFUXZY+EdwrJXZo31DW4IS1ujQW3krzlRjBrFRrJcMDh0zCu107/nRfhk/uBasO8m0NVDbBF5WZKcIUMRO7vPg==
+  dependencies:
+    "@types/eslint-visitor-keys" "^1.0.0"
+    "@typescript-eslint/experimental-utils" "2.27.0"
+    "@typescript-eslint/typescript-estree" "2.27.0"
+    eslint-visitor-keys "^1.1.0"
+
 "@typescript-eslint/typescript-estree@2.25.0":
   version "2.25.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.25.0.tgz#b790497556734b7476fa7dd3fa539955a5c79e2c"
@@ -2145,6 +2222,19 @@
     semver "^6.3.0"
     tsutils "^3.17.1"
 
+"@typescript-eslint/typescript-estree@2.27.0":
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.27.0.tgz#a288e54605412da8b81f1660b56c8b2e42966ce8"
+  integrity sha512-t2miCCJIb/FU8yArjAvxllxbTiyNqaXJag7UOpB5DVoM3+xnjeOngtqlJkLRnMtzaRcJhe3CIR9RmL40omubhg==
+  dependencies:
+    debug "^4.1.1"
+    eslint-visitor-keys "^1.1.0"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^6.3.0"
+    tsutils "^3.17.1"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -2323,7 +2413,7 @@ accepts@^1.3.7, accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-globals@^4.1.0:
+acorn-globals@^4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
   integrity sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==
@@ -2346,17 +2436,12 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
   integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
 
-acorn@^5.5.3:
-  version "5.7.4"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
-  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
-
 acorn@^6.0.1, acorn@^6.2.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
 
-acorn@^7.1.1:
+acorn@^7.1.0, acorn@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
   integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
@@ -2474,7 +2559,7 @@ ansi-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
   integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
 
-ansi-regex@^4.0.0, ansi-regex@^4.1.0:
+ansi-regex@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
   integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
@@ -2527,7 +2612,7 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-anymatch@~3.1.1:
+anymatch@^3.0.3, anymatch@~3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
   integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
@@ -2807,6 +2892,19 @@ autoprefixer@^9.7.4:
     postcss "^7.0.27"
     postcss-value-parser "^4.0.3"
 
+autoprefixer@^9.7.5:
+  version "9.7.6"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.6.tgz#63ac5bbc0ce7934e6997207d5bb00d68fa8293a4"
+  integrity sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==
+  dependencies:
+    browserslist "^4.11.1"
+    caniuse-lite "^1.0.30001039"
+    chalk "^2.4.2"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^7.0.27"
+    postcss-value-parser "^4.0.3"
+
 aws-sdk@^2.328.0:
   version "2.650.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.650.0.tgz#edf995cf2805c918d7470a652f1316ae902c5aa4"
@@ -2858,7 +2956,7 @@ babel-core@7.0.0-bridge.0:
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
 
-babel-eslint@^10.0.3, babel-eslint@^10.1.0:
+babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
   integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
@@ -2870,18 +2968,18 @@ babel-eslint@^10.0.3, babel-eslint@^10.1.0:
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.0"
 
-babel-jest@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
-  integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==
+babel-jest@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-25.2.6.tgz#fe67ff4d0db3626ca8082da8881dd5e84e07ae75"
+  integrity sha512-MDJOAlwtIeIQiGshyX0d2PxTbV73xZMpNji40ivVTPQOm59OdRR9nYCkffqI7ugtsK4JR98HgNKbDbuVf4k5QQ==
   dependencies:
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
+    "@jest/transform" "^25.2.6"
+    "@jest/types" "^25.2.6"
     "@types/babel__core" "^7.1.0"
-    babel-plugin-istanbul "^5.1.0"
-    babel-preset-jest "^24.9.0"
-    chalk "^2.4.2"
-    slash "^2.0.0"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^25.2.6"
+    chalk "^3.0.0"
+    slash "^3.0.0"
 
 babel-loader@^8.0.6:
   version "8.1.0"
@@ -2908,20 +3006,21 @@ babel-plugin-dynamic-import-node@^2.3.0:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-istanbul@^5.1.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
-  integrity sha512-5LphC0USA8t4i1zCtjbbNb6jJj/9+X6P37Qfirc/70EQ34xKlMW+a1RHGwxGI+SwWpNwZ27HqvzAobeqaXwiZw==
+babel-plugin-istanbul@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
+  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    find-up "^3.0.0"
-    istanbul-lib-instrument "^3.3.0"
-    test-exclude "^5.2.3"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^4.0.0"
+    test-exclude "^6.0.0"
 
-babel-plugin-jest-hoist@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
-  integrity sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw==
+babel-plugin-jest-hoist@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-25.2.6.tgz#2af07632b8ac7aad7d414c1e58425d5fc8e84909"
+  integrity sha512-qE2xjMathybYxjiGFJg0mLFrz0qNp83aNZycWDY/SuHiZNq+vQfRQtuINqyXyue1ELd8Rd+1OhFSLjms8msMbw==
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
@@ -2987,13 +3086,14 @@ babel-preset-gatsby@^0.3.1:
     babel-plugin-transform-react-remove-prop-types "^0.4.24"
     gatsby-core-utils "^1.1.1"
 
-babel-preset-jest@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
-  integrity sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==
+babel-preset-jest@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-25.2.6.tgz#5d3f7c99e2a8508d61775c9d68506d143b7f71b5"
+  integrity sha512-Xh2eEAwaLY9+SyMt/xmGZDnXTW/7pSaBPG0EMo7EuhvosFKVWYB6CqwYD31DaEQuoTL090oDZ0FEqygffGRaSQ==
   dependencies:
+    "@babel/plugin-syntax-bigint" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
-    babel-plugin-jest-hoist "^24.9.0"
+    babel-plugin-jest-hoist "^25.2.6"
 
 babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
@@ -3400,6 +3500,16 @@ browserslist@^4.0.0, browserslist@^4.11.0, browserslist@^4.8.3, browserslist@^4.
     node-releases "^1.1.52"
     pkg-up "^3.1.0"
 
+browserslist@^4.11.1:
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.11.1.tgz#92f855ee88d6e050e7e7311d987992014f1a1f1b"
+  integrity sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g==
+  dependencies:
+    caniuse-lite "^1.0.30001038"
+    electron-to-chromium "^1.3.390"
+    node-releases "^1.1.53"
+    pkg-up "^2.0.0"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -3656,6 +3766,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001035, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001036.tgz#930ea5272010d8bf190d859159d757c0b398caf0"
   integrity sha512-jU8CIFIj2oR7r4W+5AKcsvWNVIb6Q6OZE3UsrXrZBHFtreT4YgTeOJtTucp+zSedEpTi3L5wASSP0LYIE3if6w==
 
+caniuse-lite@^1.0.30001038, caniuse-lite@^1.0.30001039:
+  version "1.0.30001039"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001039.tgz#b3814a1c38ffeb23567f8323500c09526a577bbe"
+  integrity sha512-SezbWCTT34eyFoWHgx8UWso7YtvtM7oosmFoXbCkdC6qJzRfBTeTgE9REtKtiuKXuMwWTZEvdnFNGAyVMorv8Q==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -3933,6 +4048,15 @@ cliui@^5.0.0:
     strip-ansi "^5.2.0"
     wrap-ansi "^5.1.0"
 
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
 clone-deep@^0.2.4:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
@@ -3987,6 +4111,11 @@ collapse-white-space@^1.0.0, collapse-white-space@^1.0.2:
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
   integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==
 
+collect-v8-coverage@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
+  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -4245,7 +4374,7 @@ convert-hrtime@^3.0.0:
   resolved "https://registry.yarnpkg.com/convert-hrtime/-/convert-hrtime-3.0.0.tgz#62c7593f5809ca10be8da858a6d2f702bcda00aa"
   integrity sha512-7V+KqSvMiHp8yWDuwfww06XleMWVVB9b9tURBx+G7UTADuo5hYPuowKloz4OzOqbPezxgo+fdQ1522WzPG4OeA==
 
-convert-source-map@^1.4.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -4654,17 +4783,22 @@ csso@^4.0.2:
   dependencies:
     css-tree "1.0.0-alpha.37"
 
-cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
+cssom@^0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
+  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+
+cssom@~0.3.6:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
   integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
-cssstyle@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.4.0.tgz#9d31328229d3c565c61e586b02041a28fccdccf1"
-  integrity sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==
+cssstyle@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.2.0.tgz#e4c44debccd6b7911ed617a4395e5754bba59992"
+  integrity sha512-sEb3XFPx3jNnCAMtqrXPDeSgQr+jojtCeNf8cvMNMh1cG970+lljssvQDzPq6lmmJu2Vhqood/gtEomBiHOGnA==
   dependencies:
-    cssom "0.3.x"
+    cssom "~0.3.6"
 
 csstype@^2.2.0, csstype@^2.5.5:
   version "2.6.9"
@@ -4712,7 +4846,7 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-data-urls@^1.0.0:
+data-urls@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
   integrity sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==
@@ -4880,7 +5014,7 @@ deep-map@^1.5.0:
     lodash "^4.17.4"
     tslib "^1.6.0"
 
-deepmerge@^4.0.0:
+deepmerge@^4.0.0, deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
@@ -5009,10 +5143,10 @@ detect-libc@^1.0.3:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
-detect-newline@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
-  integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
 detect-node@^2.0.4:
   version "2.0.4"
@@ -5072,10 +5206,10 @@ devcert@^1.1.0:
     tmp "^0.0.33"
     tslib "^1.10.0"
 
-diff-sequences@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
-  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
+diff-sequences@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
+  integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==
 
 diffie-hellman@^5.0.0:
   version "5.0.3"
@@ -5359,6 +5493,11 @@ electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.380:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.382.tgz#cad02da655c33f7a3d6ca7525bd35c17e90f3a8f"
   integrity sha512-gJfxOcgnBlXhfnUUObsq3n3ReU8CT6S8je97HndYRkKsNZMJJ38zO/pI5aqO7L3Myfq+E3pqPyKK/ynyLEQfBA==
 
+electron-to-chromium@^1.3.390:
+  version "1.3.398"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.398.tgz#4c01e29091bf39e578ac3f66c1f157d92fa5725d"
+  integrity sha512-BJjxuWLKFbM5axH3vES7HKMQgAknq9PZHBkMK/rEXUQG9i1Iw5R+6hGkm6GtsQSANjSUrh/a6m32nzCNDNo/+w==
+
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
@@ -5606,7 +5745,7 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-escodegen@^1.9.1:
+escodegen@^1.11.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.1.tgz#ba01d0c8278b5e95a9a45350142026659027a457"
   integrity sha512-Bmt7NcRySdIfNPfU2ZoXDrrXsG9ZjvDxcAlMfDUgRBjLOWTuIACXPBFJH7Z+cLb40JeQco5toikyc9t9P8E9SQ==
@@ -5618,7 +5757,7 @@ escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-prettier@^6.7.0:
+eslint-config-prettier@^6.10.1:
   version "6.10.1"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.10.1.tgz#129ef9ec575d5ddc0e269667bf09defcd898642a"
   integrity sha512-svTy6zh1ecQojvpbJSgH3aei/Rt7C6i090l5f2WQ4aB05lYHeZIR1qL4wZyyILTbtmnbHP5Yn8MrsOJMGa8RkQ==
@@ -5692,7 +5831,7 @@ eslint-plugin-import@^2.20.1:
     read-pkg-up "^2.0.0"
     resolve "^1.12.0"
 
-eslint-plugin-json@^2.0.1:
+eslint-plugin-json@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-json/-/eslint-plugin-json-2.1.1.tgz#7b9c4da2121f6f48d44efceb9a99ac0d4d12b299"
   integrity sha512-Ktsab8ij33V2KFLhh4alC1FYztdmbV32DeMZYYUCZm4kKLW1s4DrleKKgtbAHSJsmshCK5QGOZtfyc2r3jCRsg==
@@ -5715,7 +5854,7 @@ eslint-plugin-jsx-a11y@^6.2.3:
     has "^1.0.3"
     jsx-ast-utils "^2.2.1"
 
-eslint-plugin-prettier@^3.1.1:
+eslint-plugin-prettier@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.2.tgz#432e5a667666ab84ce72f945c72f77d996a5c9ba"
   integrity sha512-GlolCC9y3XZfv3RQfwGew7NnuFDKsfI4lbvRK+PIIo23SFH+LemGs4cKwzAaRa+Mdb+lQO/STaIayno8T5sJJA==
@@ -5727,7 +5866,7 @@ eslint-plugin-react-hooks@^1.7.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
   integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==
 
-eslint-plugin-react@^7.17.0, eslint-plugin-react@^7.19.0:
+eslint-plugin-react@^7.19.0:
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz#6d08f9673628aa69c5559d33489e855d83551666"
   integrity sha512-SPT8j72CGuAP+JFbT0sJHOB80TX/pu44gQ4vXH/cq+hQTiY2PuZ6IHkqXJV6x1b28GDdo1lbInjKUrrdUf0LOQ==
@@ -5780,7 +5919,7 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint@^6.7.2, eslint@^6.8.0:
+eslint@^6.8.0:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
   integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
@@ -5968,7 +6107,7 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^3.4.0:
+execa@^3.2.0, execa@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
   integrity sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==
@@ -6033,17 +6172,17 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-expect@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
-  integrity sha512-wvVAx8XIol3Z5m9zvZXiyZOQ+sRJqNTIm6sGjdWlaZIeupQGO3WbYI+15D/AmEwZywL6wtJkbAbJtzkOfBuR0Q==
+expect@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-25.2.7.tgz#509b79f47502835f4071ff3ecc401f2eaecca709"
+  integrity sha512-yA+U2Ph0MkMsJ9N8q5hs9WgWI6oJYfecdXta6LkP/alY/jZZL1MHlJ2wbLh60Ucqf3G+51ytbqV3mlGfmxkpNw==
   dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-styles "^3.2.0"
-    jest-get-type "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-regex-util "^24.9.0"
+    "@jest/types" "^25.2.6"
+    ansi-styles "^4.0.0"
+    jest-get-type "^25.2.6"
+    jest-matcher-utils "^25.2.7"
+    jest-message-util "^25.2.6"
+    jest-regex-util "^25.2.6"
 
 express-graphql@^0.9.0:
   version "0.9.0"
@@ -6666,7 +6805,7 @@ fsevents@^1.2.7:
     bindings "^1.5.0"
     nan "^2.12.1"
 
-fsevents@~2.1.2:
+fsevents@^2.1.2, fsevents@~2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
   integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==
@@ -7624,7 +7763,7 @@ got@^9.6.0:
     to-readable-stream "^1.0.0"
     url-parse-lax "^3.0.0"
 
-graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
+graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
   integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
@@ -8275,7 +8414,7 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-husky@^4.0.10:
+husky@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/husky/-/husky-4.2.3.tgz#3b18d2ee5febe99e27f2983500202daffbc3151e"
   integrity sha512-VxTsSTRwYveKXN4SaH1/FefRJYCtx+wx04sSVcOpD7N2zjoHxa+cEJ07Qg5NmV3HAK+IRKOyNVpi2YBIVccIfQ==
@@ -8443,6 +8582,14 @@ import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
+import-local@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
+  integrity sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -9268,50 +9415,49 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
-istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
-  integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
+istanbul-lib-coverage@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
+  integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
 
-istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
-  integrity sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==
-  dependencies:
-    "@babel/generator" "^7.4.0"
-    "@babel/parser" "^7.4.3"
-    "@babel/template" "^7.4.0"
-    "@babel/traverse" "^7.4.3"
-    "@babel/types" "^7.4.0"
-    istanbul-lib-coverage "^2.0.5"
-    semver "^6.0.0"
+istanbul-lib-instrument@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.1.tgz#61f13ac2c96cfefb076fe7131156cc05907874e6"
+  integrity sha512-imIchxnodll7pvQBYOqUu88EufLCU56LMeFPZZM/fJZ1irYcYdqroaV+ACK1Ila8ls09iEYArp+nqyC6lW1Vfg==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@babel/parser" "^7.7.5"
+    "@babel/template" "^7.7.4"
+    "@babel/traverse" "^7.7.4"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    semver "^6.3.0"
 
-istanbul-lib-report@^2.0.4:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
-  integrity sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
   dependencies:
-    istanbul-lib-coverage "^2.0.5"
-    make-dir "^2.1.0"
-    supports-color "^6.1.0"
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
 
-istanbul-lib-source-maps@^3.0.1:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
-  integrity sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz#75743ce6d96bb86dc7ee4352cf6366a23f0b1ad9"
+  integrity sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==
   dependencies:
     debug "^4.1.1"
-    istanbul-lib-coverage "^2.0.5"
-    make-dir "^2.1.0"
-    rimraf "^2.6.3"
+    istanbul-lib-coverage "^3.0.0"
     source-map "^0.6.1"
 
-istanbul-reports@^2.2.6:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.7.tgz#5d939f6237d7b48393cc0959eab40cd4fd056931"
-  integrity sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==
+istanbul-reports@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
+  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
   dependencies:
     html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
 
 isurl@^1.0.0-alpha5:
   version "1.0.0"
@@ -9326,345 +9472,342 @@ iterall@^1.2.2:
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.3.0.tgz#afcb08492e2915cbd8a0884eb93a8c94d0d72fea"
   integrity sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==
 
-jest-changed-files@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
-  integrity sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==
+jest-changed-files@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-25.2.6.tgz#7d569cd6b265b1a84db3914db345d9c452f26b71"
+  integrity sha512-F7l2m5n55jFnJj4ItB9XbAlgO+6umgvz/mdK76BfTd2NGkvGf9x96hUXP/15a1K0k14QtVOoutwpRKl360msvg==
   dependencies:
-    "@jest/types" "^24.9.0"
-    execa "^1.0.0"
-    throat "^4.0.0"
+    "@jest/types" "^25.2.6"
+    execa "^3.2.0"
+    throat "^5.0.0"
 
-jest-cli@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
-  integrity sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==
+jest-cli@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-25.2.7.tgz#515b61fee402c397ffa8d570532f7b039c3159f4"
+  integrity sha512-OOAZwY4Jkd3r5WhVM5L3JeLNFaylvHUczMLxQDVLrrVyb1Cy+DNJ6MVsb5TLh6iBklB42m5TOP+IbOgKGGOtMw==
   dependencies:
-    "@jest/core" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+    "@jest/core" "^25.2.7"
+    "@jest/test-result" "^25.2.6"
+    "@jest/types" "^25.2.6"
+    chalk "^3.0.0"
     exit "^0.1.2"
-    import-local "^2.0.0"
+    import-local "^3.0.2"
     is-ci "^2.0.0"
-    jest-config "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
+    jest-config "^25.2.7"
+    jest-util "^25.2.6"
+    jest-validate "^25.2.6"
     prompts "^2.0.1"
-    realpath-native "^1.1.0"
-    yargs "^13.3.0"
+    realpath-native "^2.0.0"
+    yargs "^15.3.1"
 
-jest-config@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
-  integrity sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==
+jest-config@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-25.2.7.tgz#a14e5b96575987ce913dd9fc20ac8cd4b35a8c29"
+  integrity sha512-rIdPPXR6XUxi+7xO4CbmXXkE6YWprvlKc4kg1SrkCL2YV5m/8MkHstq9gBZJ19Qoa3iz/GP+0sTG/PcIwkFojg==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    babel-jest "^24.9.0"
-    chalk "^2.0.1"
+    "@jest/test-sequencer" "^25.2.7"
+    "@jest/types" "^25.2.6"
+    babel-jest "^25.2.6"
+    chalk "^3.0.0"
+    deepmerge "^4.2.2"
     glob "^7.1.1"
-    jest-environment-jsdom "^24.9.0"
-    jest-environment-node "^24.9.0"
-    jest-get-type "^24.9.0"
-    jest-jasmine2 "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    micromatch "^3.1.10"
-    pretty-format "^24.9.0"
-    realpath-native "^1.1.0"
-
-jest-diff@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
-  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
-  dependencies:
-    chalk "^2.0.1"
-    diff-sequences "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-docblock@^24.3.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
-  integrity sha512-F1DjdpDMJMA1cN6He0FNYNZlo3yYmOtRUnktrT9Q37njYzC5WEaDdmbynIgy0L/IvXvvgsG8OsqhLPXTpfmZAA==
-  dependencies:
-    detect-newline "^2.1.0"
+    jest-environment-jsdom "^25.2.6"
+    jest-environment-node "^25.2.6"
+    jest-get-type "^25.2.6"
+    jest-jasmine2 "^25.2.7"
+    jest-regex-util "^25.2.6"
+    jest-resolve "^25.2.6"
+    jest-util "^25.2.6"
+    jest-validate "^25.2.6"
+    micromatch "^4.0.2"
+    pretty-format "^25.2.6"
+    realpath-native "^2.0.0"
 
-jest-each@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
-  integrity sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==
+jest-diff@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.2.6.tgz#a6d70a9ab74507715ea1092ac513d1ab81c1b5e7"
+  integrity sha512-KuadXImtRghTFga+/adnNrv9s61HudRMR7gVSbP35UKZdn4IK2/0N0PpGZIqtmllK9aUyye54I3nu28OYSnqOg==
   dependencies:
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    jest-get-type "^24.9.0"
-    jest-util "^24.9.0"
-    pretty-format "^24.9.0"
+    chalk "^3.0.0"
+    diff-sequences "^25.2.6"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.2.6"
 
-jest-environment-jsdom@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
-  integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
+jest-docblock@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-25.2.6.tgz#4b09f1e7b7d6b3f39242ef3647ac7106770f722b"
+  integrity sha512-VAYrljEq0upq0oERfIaaNf28gC6p9gORndhHstCYF8NWGNQJnzoaU//S475IxfWMk4UjjVmS9rJKLe5Jjjbixw==
   dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-util "^24.9.0"
-    jsdom "^11.5.1"
+    detect-newline "^3.0.0"
 
-jest-environment-node@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
-  integrity sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==
+jest-each@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-25.2.6.tgz#026f6dea2ccc443c35cea793265620aab1b278b6"
+  integrity sha512-OgQ01VINaRD6idWJOhCYwUc5EcgHBiFlJuw+ON2VgYr7HLtMFyCcuo+3mmBvuLUH4QudREZN7cDCZviknzsaJQ==
   dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-util "^24.9.0"
+    "@jest/types" "^25.2.6"
+    chalk "^3.0.0"
+    jest-get-type "^25.2.6"
+    jest-util "^25.2.6"
+    pretty-format "^25.2.6"
+
+jest-environment-jsdom@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-25.2.6.tgz#b7ae41c6035905b8e58d63a8f63cf8eaa00af279"
+  integrity sha512-/o7MZIhGmLGIEG5j7r5B5Az0umWLCHU+F5crwfbm0BzC4ybHTJZOQTFQWhohBg+kbTCNOuftMcqHlVkVduJCQQ==
+  dependencies:
+    "@jest/environment" "^25.2.6"
+    "@jest/fake-timers" "^25.2.6"
+    "@jest/types" "^25.2.6"
+    jest-mock "^25.2.6"
+    jest-util "^25.2.6"
+    jsdom "^15.2.1"
+
+jest-environment-node@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-25.2.6.tgz#ad4398432867113f474d94fe37b071ed04b30f3d"
+  integrity sha512-D1Ihj14fxZiMHGeTtU/LunhzSI+UeBvlr/rcXMTNyRMUMSz2PEhuqGbB78brBY6Dk3FhJDk7Ta+8reVaGjLWhA==
+  dependencies:
+    "@jest/environment" "^25.2.6"
+    "@jest/fake-timers" "^25.2.6"
+    "@jest/types" "^25.2.6"
+    jest-mock "^25.2.6"
+    jest-util "^25.2.6"
+    semver "^6.3.0"
 
-jest-get-type@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
-  integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
+jest-get-type@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
+  integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
 
-jest-haste-map@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
-  integrity sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==
+jest-haste-map@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-25.2.6.tgz#4aa6bcfa15310afccdb9ca77af58a98add8cedb8"
+  integrity sha512-nom0+fnY8jwzelSDQnrqaKAcDZczYQvMEwcBjeL3PQ4MlcsqeB7dmrsAniUw/9eLkngT5DE6FhnenypilQFsgA==
   dependencies:
-    "@jest/types" "^24.9.0"
-    anymatch "^2.0.0"
+    "@jest/types" "^25.2.6"
+    anymatch "^3.0.3"
     fb-watchman "^2.0.0"
-    graceful-fs "^4.1.15"
-    invariant "^2.2.4"
-    jest-serializer "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.9.0"
-    micromatch "^3.1.10"
+    graceful-fs "^4.2.3"
+    jest-serializer "^25.2.6"
+    jest-util "^25.2.6"
+    jest-worker "^25.2.6"
+    micromatch "^4.0.2"
     sane "^4.0.3"
     walker "^1.0.7"
+    which "^2.0.2"
   optionalDependencies:
-    fsevents "^1.2.7"
+    fsevents "^2.1.2"
 
-jest-jasmine2@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
-  integrity sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==
+jest-jasmine2@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-25.2.7.tgz#55ff87f8f462ef0e2f16fd19430b8be8bcebef0e"
+  integrity sha512-HeQxEbonp8fUvik9jF0lkU9ab1u5TQdIb7YSU9Fj7SxWtqHNDGyCpF6ZZ3r/5yuertxi+R95Ba9eA91GMQ38eA==
   dependencies:
     "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+    "@jest/environment" "^25.2.6"
+    "@jest/source-map" "^25.2.6"
+    "@jest/test-result" "^25.2.6"
+    "@jest/types" "^25.2.6"
+    chalk "^3.0.0"
     co "^4.6.0"
-    expect "^24.9.0"
+    expect "^25.2.7"
     is-generator-fn "^2.0.0"
-    jest-each "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    pretty-format "^24.9.0"
-    throat "^4.0.0"
-
-jest-leak-detector@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
-  integrity sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==
+    jest-each "^25.2.6"
+    jest-matcher-utils "^25.2.7"
+    jest-message-util "^25.2.6"
+    jest-runtime "^25.2.7"
+    jest-snapshot "^25.2.7"
+    jest-util "^25.2.6"
+    pretty-format "^25.2.6"
+    throat "^5.0.0"
+
+jest-leak-detector@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-25.2.6.tgz#68fbaf651142292b03e30641f33e15af9b8c62b1"
+  integrity sha512-n+aJUM+j/x1kIaPVxzerMqhAUuqTU1PL5kup46rXh+l9SP8H6LqECT/qD1GrnylE1L463/0StSPkH4fUpkuEjA==
+  dependencies:
+    jest-get-type "^25.2.6"
+    pretty-format "^25.2.6"
+
+jest-matcher-utils@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-25.2.7.tgz#53fad3c11fc42e92e374306df543026712c957a3"
+  integrity sha512-jNYmKQPRyPO3ny0KY1I4f0XW4XnpJ3Nx5ovT4ik0TYDOYzuXJW40axqOyS61l/voWbVT9y9nZ1THL1DlpaBVpA==
   dependencies:
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-matcher-utils@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
-  integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
-  dependencies:
-    chalk "^2.0.1"
-    jest-diff "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
+    chalk "^3.0.0"
+    jest-diff "^25.2.6"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.2.6"
 
-jest-message-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
-  integrity sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==
+jest-message-util@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-25.2.6.tgz#9d5523bebec8cd9cdef75f0f3069d6ec9a2252df"
+  integrity sha512-Hgg5HbOssSqOuj+xU1mi7m3Ti2nwSQJQf/kxEkrz2r2rp2ZLO1pMeKkz2WiDUWgSR+APstqz0uMFcE5yc0qdcg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
+    "@jest/types" "^25.2.6"
     "@types/stack-utils" "^1.0.1"
-    chalk "^2.0.1"
-    micromatch "^3.1.10"
-    slash "^2.0.0"
+    chalk "^3.0.0"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
     stack-utils "^1.0.1"
 
-jest-mock@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
-  integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
+jest-mock@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-25.2.6.tgz#8df66eaa55a713d0f2a7dfb4f14507289d24dfa3"
+  integrity sha512-vc4nibavi2RGPdj/MyZy/azuDjZhpYZLvpfgq1fxkhbyTpKVdG7CgmRVKJ7zgLpY5kuMjTzDYA6QnRwhsCU+tA==
   dependencies:
-    "@jest/types" "^24.9.0"
+    "@jest/types" "^25.2.6"
 
 jest-pnp-resolver@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
   integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
 
-jest-regex-util@^24.3.0, jest-regex-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
-  integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
+jest-regex-util@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.2.6.tgz#d847d38ba15d2118d3b06390056028d0f2fd3964"
+  integrity sha512-KQqf7a0NrtCkYmZZzodPftn7fL1cq3GQAFVMn5Hg8uKx/fIenLEobNanUxb7abQ1sjADHBseG/2FGpsv/wr+Qw==
 
-jest-resolve-dependencies@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
-  integrity sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==
+jest-resolve-dependencies@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-25.2.7.tgz#9ca4c62d67cce031a27fa5d5705b4b5b5c029d23"
+  integrity sha512-IrnMzCAh11Xd2gAOJL+ThEW6QO8DyqNdvNkQcaCticDrOAr9wtKT7yT6QBFFjqKFgjjvaVKDs59WdgUhgYnHnQ==
   dependencies:
-    "@jest/types" "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-snapshot "^24.9.0"
+    "@jest/types" "^25.2.6"
+    jest-regex-util "^25.2.6"
+    jest-snapshot "^25.2.7"
 
-jest-resolve@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.9.0.tgz#dff04c7687af34c4dd7e524892d9cf77e5d17321"
-  integrity sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==
+jest-resolve@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-25.2.6.tgz#84694ead5da13c2890ac04d4a78699ba937f3896"
+  integrity sha512-7O61GVdcAXkLz/vNGKdF+00A80/fKEAA47AEXVNcZwj75vEjPfZbXDaWFmAQCyXj4oo9y9dC9D+CLA11t8ieGw==
   dependencies:
-    "@jest/types" "^24.9.0"
+    "@jest/types" "^25.2.6"
     browser-resolve "^1.11.3"
-    chalk "^2.0.1"
+    chalk "^3.0.0"
     jest-pnp-resolver "^1.2.1"
-    realpath-native "^1.1.0"
+    realpath-native "^2.0.0"
+    resolve "^1.15.1"
 
-jest-runner@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
-  integrity sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==
+jest-runner@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-25.2.7.tgz#3676c01dc0104caa8a0ebb8507df382c88f2a1e2"
+  integrity sha512-RFEr71nMrtNwcpoHzie5+fe1w3JQCGMyT2xzNwKe3f88+bK+frM2o1v24gEcPxQ2QqB3COMCe2+1EkElP+qqqQ==
   dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.4.2"
+    "@jest/console" "^25.2.6"
+    "@jest/environment" "^25.2.6"
+    "@jest/test-result" "^25.2.6"
+    "@jest/types" "^25.2.6"
+    chalk "^3.0.0"
     exit "^0.1.2"
-    graceful-fs "^4.1.15"
-    jest-config "^24.9.0"
-    jest-docblock "^24.3.0"
-    jest-haste-map "^24.9.0"
-    jest-jasmine2 "^24.9.0"
-    jest-leak-detector "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-resolve "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.6.0"
+    graceful-fs "^4.2.3"
+    jest-config "^25.2.7"
+    jest-docblock "^25.2.6"
+    jest-haste-map "^25.2.6"
+    jest-jasmine2 "^25.2.7"
+    jest-leak-detector "^25.2.6"
+    jest-message-util "^25.2.6"
+    jest-resolve "^25.2.6"
+    jest-runtime "^25.2.7"
+    jest-util "^25.2.6"
+    jest-worker "^25.2.6"
     source-map-support "^0.5.6"
-    throat "^4.0.0"
-
-jest-runtime@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
-  integrity sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==
-  dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/environment" "^24.9.0"
-    "@jest/source-map" "^24.3.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/yargs" "^13.0.0"
-    chalk "^2.0.1"
+    throat "^5.0.0"
+
+jest-runtime@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-25.2.7.tgz#cb10e695d036671a83aec3a3803163c354043ac9"
+  integrity sha512-Gw3X8KxTTFylu2T/iDSNKRUQXQiPIYUY0b66GwVYa7W8wySkUljKhibQHSq0VhmCAN7vRBEQjlVQ+NFGNmQeBw==
+  dependencies:
+    "@jest/console" "^25.2.6"
+    "@jest/environment" "^25.2.6"
+    "@jest/source-map" "^25.2.6"
+    "@jest/test-result" "^25.2.6"
+    "@jest/transform" "^25.2.6"
+    "@jest/types" "^25.2.6"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+    collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.3"
-    graceful-fs "^4.1.15"
-    jest-config "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    realpath-native "^1.1.0"
-    slash "^2.0.0"
-    strip-bom "^3.0.0"
-    yargs "^13.3.0"
+    graceful-fs "^4.2.3"
+    jest-config "^25.2.7"
+    jest-haste-map "^25.2.6"
+    jest-message-util "^25.2.6"
+    jest-mock "^25.2.6"
+    jest-regex-util "^25.2.6"
+    jest-resolve "^25.2.6"
+    jest-snapshot "^25.2.7"
+    jest-util "^25.2.6"
+    jest-validate "^25.2.6"
+    realpath-native "^2.0.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.3.1"
 
-jest-serializer@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
-  integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
+jest-serializer@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-25.2.6.tgz#3bb4cc14fe0d8358489dbbefbb8a4e708ce039b7"
+  integrity sha512-RMVCfZsezQS2Ww4kB5HJTMaMJ0asmC0BHlnobQC6yEtxiFKIxohFA4QSXSabKwSggaNkqxn6Z2VwdFCjhUWuiQ==
 
-jest-snapshot@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
-  integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
+jest-snapshot@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-25.2.7.tgz#7eeafeef4dcbda1c47c8503d2bf5212b6430aac6"
+  integrity sha512-Rm8k7xpGM4tzmYhB6IeRjsOMkXaU8/FOz5XlU6oYwhy53mq6txVNqIKqN1VSiexzpC80oWVxVDfUDt71M6XPOA==
   dependencies:
     "@babel/types" "^7.0.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    expect "^24.9.0"
-    jest-diff "^24.9.0"
-    jest-get-type "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-resolve "^24.9.0"
-    mkdirp "^0.5.1"
+    "@jest/types" "^25.2.6"
+    "@types/prettier" "^1.19.0"
+    chalk "^3.0.0"
+    expect "^25.2.7"
+    jest-diff "^25.2.6"
+    jest-get-type "^25.2.6"
+    jest-matcher-utils "^25.2.7"
+    jest-message-util "^25.2.6"
+    jest-resolve "^25.2.6"
+    make-dir "^3.0.0"
     natural-compare "^1.4.0"
-    pretty-format "^24.9.0"
-    semver "^6.2.0"
+    pretty-format "^25.2.6"
+    semver "^6.3.0"
 
-jest-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
-  integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
-  dependencies:
-    "@jest/console" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/source-map" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    callsites "^3.0.0"
-    chalk "^2.0.1"
-    graceful-fs "^4.1.15"
+jest-util@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.2.6.tgz#3c1c95cdfd653126728b0ed861a86610e30d569c"
+  integrity sha512-gpXy0H5ymuQ0x2qgl1zzHg7LYHZYUmDEq6F7lhHA8M0eIwDB2WteOcCnQsohl9c/vBKZ3JF2r4EseipCZz3s4Q==
+  dependencies:
+    "@jest/types" "^25.2.6"
+    chalk "^3.0.0"
     is-ci "^2.0.0"
-    mkdirp "^0.5.1"
-    slash "^2.0.0"
-    source-map "^0.6.0"
+    make-dir "^3.0.0"
 
-jest-validate@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
-  integrity sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==
+jest-validate@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-25.2.6.tgz#ab3631fb97e242c42b09ca53127abe0b12e9125e"
+  integrity sha512-a4GN7hYbqQ3Rt9iHsNLFqQz7HDV7KiRPCwPgo5nqtTIWNZw7gnT8KchG+Riwh+UTSn8REjFCodGp50KX/fRNgQ==
   dependencies:
-    "@jest/types" "^24.9.0"
+    "@jest/types" "^25.2.6"
     camelcase "^5.3.1"
-    chalk "^2.0.1"
-    jest-get-type "^24.9.0"
+    chalk "^3.0.0"
+    jest-get-type "^25.2.6"
     leven "^3.1.0"
-    pretty-format "^24.9.0"
+    pretty-format "^25.2.6"
 
-jest-watcher@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
-  integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==
+jest-watcher@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-25.2.7.tgz#01db4332d34d14c03c9ef22255125a3b07f997bc"
+  integrity sha512-RdHuW+f49tahWtluTnUdZ2iPliebleROI2L/J5phYrUS6DPC9RB3SuUtqYyYhGZJsbvRSuLMIlY/cICJ+PIecw==
   dependencies:
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/yargs" "^13.0.0"
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.1"
-    jest-util "^24.9.0"
-    string-length "^2.0.0"
+    "@jest/test-result" "^25.2.6"
+    "@jest/types" "^25.2.6"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
+    jest-util "^25.2.6"
+    string-length "^3.1.0"
 
-jest-worker@^24.6.0, jest-worker@^24.9.0:
+jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
   integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
@@ -9672,13 +9815,22 @@ jest-worker@^24.6.0, jest-worker@^24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
-jest@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
-  integrity sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==
+jest-worker@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.2.6.tgz#d1292625326794ce187c38f51109faced3846c58"
+  integrity sha512-FJn9XDUSxcOR4cwDzRfL1z56rUofNTFs539FGASpd50RHdb6EVkhxQqktodW2mI49l+W3H+tFJDotCHUQF6dmA==
   dependencies:
-    import-local "^2.0.0"
-    jest-cli "^24.9.0"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
+jest@^25.2.7:
+  version "25.2.7"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-25.2.7.tgz#3929a5f35cdd496f7756876a206b99a94e1e09ae"
+  integrity sha512-XV1n/CE2McCikl4tfpCY950RytHYvxdo/wvtgmn/qwA8z1s16fuvgFL/KoPrrmkqJTaPMUlLVE58pwiaTX5TdA==
+  dependencies:
+    "@jest/core" "^25.2.7"
+    import-local "^3.0.2"
+    jest-cli "^25.2.7"
 
 jimp@^0.6.4:
   version "0.6.8"
@@ -9729,36 +9881,36 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
-jsdom@^11.5.1:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
-  integrity sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==
+jsdom@^15.2.1:
+  version "15.2.1"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.2.1.tgz#d2feb1aef7183f86be521b8c6833ff5296d07ec5"
+  integrity sha512-fAl1W0/7T2G5vURSyxBzrJ1LSdQn6Tr5UX/xD4PXDx/PDgwygedfW6El/KIj3xJ7FU61TTYnc/l/B7P49Eqt6g==
   dependencies:
     abab "^2.0.0"
-    acorn "^5.5.3"
-    acorn-globals "^4.1.0"
+    acorn "^7.1.0"
+    acorn-globals "^4.3.2"
     array-equal "^1.0.0"
-    cssom ">= 0.3.2 < 0.4.0"
-    cssstyle "^1.0.0"
-    data-urls "^1.0.0"
+    cssom "^0.4.1"
+    cssstyle "^2.0.0"
+    data-urls "^1.1.0"
     domexception "^1.0.1"
-    escodegen "^1.9.1"
+    escodegen "^1.11.1"
     html-encoding-sniffer "^1.0.2"
-    left-pad "^1.3.0"
-    nwsapi "^2.0.7"
-    parse5 "4.0.0"
+    nwsapi "^2.2.0"
+    parse5 "5.1.0"
     pn "^1.1.0"
-    request "^2.87.0"
-    request-promise-native "^1.0.5"
-    sax "^1.2.4"
+    request "^2.88.0"
+    request-promise-native "^1.0.7"
+    saxes "^3.1.9"
     symbol-tree "^3.2.2"
-    tough-cookie "^2.3.4"
+    tough-cookie "^3.0.1"
     w3c-hr-time "^1.0.1"
+    w3c-xmlserializer "^1.1.2"
     webidl-conversions "^4.0.2"
-    whatwg-encoding "^1.0.3"
-    whatwg-mimetype "^2.1.0"
-    whatwg-url "^6.4.1"
-    ws "^5.2.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^7.0.0"
+    ws "^7.0.0"
     xml-name-validator "^3.0.0"
 
 jsesc@^2.5.1:
@@ -9968,11 +10120,6 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
-left-pad@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
-  integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==
-
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -9998,10 +10145,10 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-lint-staged@^10.0.0:
-  version "10.0.9"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.0.9.tgz#185aabb2432e9467c84add306c990f1c20da3cdb"
-  integrity sha512-NKJHYgRa8oI9c4Ic42ZtF2XA6Ps7lFbXwg3q0ZEP0r55Tw3YWykCW1RzW6vu+QIGqbsy7DxndvKu93Wtr5vPQw==
+lint-staged@^10.1.2:
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.1.2.tgz#beaefc58037ea9e02fe7639cb323d584312a7957"
+  integrity sha512-Vtbe8rhWbJxPNlnXk6jczRh6wvAVjGg+VhELAIjLakOjTACdB4qJOD4W2R8oUXLRCqL1t9WMUsXbSlVK34A8Lg==
   dependencies:
     chalk "^3.0.0"
     commander "^4.0.1"
@@ -10096,16 +10243,6 @@ load-json-file@^2.0.0:
     pify "^2.0.0"
     strip-bom "^3.0.0"
 
-load-json-file@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-    strip-bom "^3.0.0"
-
 load-script@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
@@ -10377,6 +10514,13 @@ lokijs@^1.5.8:
   resolved "https://registry.yarnpkg.com/lokijs/-/lokijs-1.5.8.tgz#9296f288edb2147389ec692fc972c428c59179d1"
   integrity sha512-D8E3TBrY35o1ELnonp2MF8b3wKu2tVNl2TqRjvS+95oPMMe7OoIAxNY1qr+5BEZwnWn2V4ErAjVt000DonM+FA==
 
+lolex@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
+  integrity sha512-h4hmjAvHTmd+25JSwrtTIuwbKdwg5NzZVRMLn9saij4SZaepCrTCxPr35H/3bjwfMJtN+t3CX8672UIkglz28A==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 longest-streak@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-1.0.0.tgz#d06597c4d4c31b52ccb1f5d8f8fe7148eafd6965"
@@ -10475,7 +10619,7 @@ make-dir@^1.0.0, make-dir@^1.2.0:
   dependencies:
     pify "^3.0.0"
 
-make-dir@^2.0.0, make-dir@^2.1.0:
+make-dir@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
   integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
@@ -10720,7 +10864,7 @@ meow@^3.3.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
-meow@^6.0.1:
+meow@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-6.1.0.tgz#4ff4641818d3502afcddc631f94cb6971a581cb3"
   integrity sha512-iIAoeI01v6pmSfObAAWFoITAA4GgiT45m4SmJgoxtZfvI0fyZwhV4d0lTwiUXvAKIPlma05Feb2Xngl52Mj5Cg==
@@ -11265,16 +11409,16 @@ node-modules-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
   integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-notifier@^5.4.2:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
-  integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
+node-notifier@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-6.0.0.tgz#cea319e06baa16deec8ce5cd7f133c4a46b68e12"
+  integrity sha512-SVfQ/wMw+DesunOm5cKqr6yDcvUTDl/yc97ybGHMrteNEY6oekXpNpS3lZwgLlwz0FLgHoiW28ZpmBHUDg37cw==
   dependencies:
     growly "^1.3.0"
-    is-wsl "^1.1.0"
-    semver "^5.5.0"
+    is-wsl "^2.1.1"
+    semver "^6.3.0"
     shellwords "^0.1.1"
-    which "^1.3.0"
+    which "^1.3.1"
 
 node-object-hash@^2.0.0:
   version "2.0.0"
@@ -11288,6 +11432,11 @@ node-releases@^1.1.29, node-releases@^1.1.52:
   dependencies:
     semver "^6.3.0"
 
+node-releases@^1.1.53:
+  version "1.1.53"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
+  integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
+
 noms@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859"
@@ -11431,7 +11580,7 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-nwsapi@^2.0.7:
+nwsapi@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
@@ -11717,12 +11866,10 @@ p-defer@^3.0.0:
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-3.0.0.tgz#d1dceb4ee9b2b604b1d94ffec83760175d4e6f83"
   integrity sha512-ugZxsxmtTln604yeYd29EGrNhazN2lywetzpKhfmQjW/VJmhpDmWbiX+h0zL8V91R0UXkhb3KtPmyq9PZw3aYw==
 
-p-each-series@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
-  integrity sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=
-  dependencies:
-    p-reduce "^1.0.0"
+p-each-series@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48"
+  integrity sha512-ZuRs1miPT4HrjFa+9fRfOFXxGJfORgelKV9f9nNOWw2gl6gVsRaVDOQP0+MI0G0wGKns1Yacsu0GjOFbTK0JFQ==
 
 p-event@^1.0.0:
   version "1.3.0"
@@ -12003,10 +12150,10 @@ parse-url@^5.0.0:
     parse-path "^4.0.0"
     protocols "^1.4.0"
 
-parse5@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
-  integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
+parse5@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
+  integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
 
 parse5@^3.0.1:
   version "3.0.3"
@@ -12252,7 +12399,7 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-pkg-up@2.0.0:
+pkg-up@2.0.0, pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
   integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
@@ -12698,7 +12845,7 @@ postcss-resolve-nested-selector@^0.1.1:
   resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
   integrity sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=
 
-postcss-safe-parser@^4.0.1:
+postcss-safe-parser@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.2.tgz#a6d4e48f0f37d9f7c11b2a581bf00f8ba4870b96"
   integrity sha512-Uw6ekxSWNLCPesSv/cmqf2bY/77z11O7jZGPax3ycZMFU/oi2DMH9i89AdHc1tRwFg/arFoEwX0IS3LCUxJh1g==
@@ -12867,10 +13014,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^1.19.1:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
-  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
+prettier@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.4.tgz#2d1bae173e355996ee355ec9830a7a1ee05457ef"
+  integrity sha512-SVJIQ51spzFDvh4fIbCLvciiDMCrRhlN3mbZvv/+ycjvmF5E73bKdGfU8QDLNmjYJf+lsGnDBC4UUnvTe5OO0w==
 
 pretty-bytes@^5.3.0:
   version "5.3.0"
@@ -12885,15 +13032,15 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
-  integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
+pretty-format@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.2.6.tgz#542a1c418d019bbf1cca2e3620443bc1323cb8d7"
+  integrity sha512-DEiWxLBaCHneffrIT4B+TpMvkV9RNvvJrd3lY9ew1CEQobDzEXmYT1mg0hJhljZty7kCc10z13ohOFAE8jrUDg==
   dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-regex "^4.0.0"
-    ansi-styles "^3.2.0"
-    react-is "^16.8.4"
+    "@jest/types" "^25.2.6"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
 
 prismjs@^1.19.0:
   version "1.19.0"
@@ -13310,7 +13457,7 @@ react-hot-loader@^4.12.20:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
-react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
+react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -13429,14 +13576,6 @@ read-pkg-up@^2.0.0:
     find-up "^2.0.0"
     read-pkg "^2.0.0"
 
-read-pkg-up@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
-  integrity sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==
-  dependencies:
-    find-up "^3.0.0"
-    read-pkg "^3.0.0"
-
 read-pkg-up@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -13464,15 +13603,6 @@ read-pkg@^2.0.0:
     normalize-package-data "^2.3.2"
     path-type "^2.0.0"
 
-read-pkg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
-  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
-  dependencies:
-    load-json-file "^4.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^3.0.0"
-
 read-pkg@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
@@ -13538,12 +13668,10 @@ readdirp@~3.3.0:
   dependencies:
     picomatch "^2.0.7"
 
-realpath-native@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
-  integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
-  dependencies:
-    util.promisify "^1.0.0"
+realpath-native@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-2.0.0.tgz#7377ac429b6e1fd599dc38d08ed942d0d7beb866"
+  integrity sha512-v1SEYUOXXdbBZK8ZuNgO4TBjamPsiSgcFr0aP+tEKpQZK8vooEUqV6nm6Cv502mX4NF2EfsnVqtNAHG+/6Ur1Q==
 
 recursive-readdir@2.2.1:
   version "2.2.1"
@@ -13940,7 +14068,7 @@ request-promise-core@1.1.3:
   dependencies:
     lodash "^4.17.15"
 
-request-promise-native@^1.0.5:
+request-promise-native@^1.0.7:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
   integrity sha512-dapwLGqkHtwL5AEbfenuzjTYg35Jd6KPytsC2/TLkVMz8rm+tNt72MGUWT1RP/aYawMpN6HqbNGBQaRcBtjQMQ==
@@ -14022,6 +14150,13 @@ resolve-cwd@^2.0.0:
   dependencies:
     resolve-from "^3.0.0"
 
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
 resolve-dir@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
@@ -14318,11 +14453,18 @@ sax@1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
   integrity sha1-e45lYZCyKOgaZq6nSEgNgozS03o=
 
-sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
+sax@>=0.6.0, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+saxes@^3.1.9:
+  version "3.1.11"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
+  integrity sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==
+  dependencies:
+    xmlchars "^2.1.1"
+
 scheduler@^0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
@@ -15181,14 +15323,6 @@ string-convert@^0.2.0:
   resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
   integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
 
-string-length@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
-  integrity sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=
-  dependencies:
-    astral-regex "^1.0.0"
-    strip-ansi "^4.0.0"
-
 string-length@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-3.1.0.tgz#107ef8c23456e187a8abd4a61162ff4ac6e25837"
@@ -15459,12 +15593,12 @@ stylelint-config-standard@^20.0.0:
   dependencies:
     stylelint-config-recommended "^3.0.0"
 
-stylelint@^13.2.1:
-  version "13.2.1"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.2.1.tgz#9101fcd70791856530049816ff53d980ecd561df"
-  integrity sha512-461ZV4KpUe7pEHHgMOsH4kkjF7qsjkCIMJYOf7QQC4cvgPUJ0z4Nj+ah5fvKl1rzqBqc5EZa6P0nna4CGoJX+A==
+stylelint@^13.3.0:
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.3.0.tgz#06a5e3d34e99d1d02891bc827f660f2bd2e79897"
+  integrity sha512-ehNzQu9JAbxuiNhUhmoyPgMjIdz7Fg1AxC5urPVhKotto/faF5GxwljSoLvQa6pB6yd+BVuofApWjWT/6/rBMQ==
   dependencies:
-    autoprefixer "^9.7.4"
+    autoprefixer "^9.7.5"
     balanced-match "^1.0.0"
     chalk "^3.0.0"
     cosmiconfig "^6.0.0"
@@ -15484,7 +15618,7 @@ stylelint@^13.2.1:
     lodash "^4.17.15"
     log-symbols "^3.0.0"
     mathml-tag-names "^2.1.3"
-    meow "^6.0.1"
+    meow "^6.1.0"
     micromatch "^4.0.2"
     normalize-selector "^0.2.0"
     postcss "^7.0.27"
@@ -15495,7 +15629,7 @@ stylelint@^13.2.1:
     postcss-media-query-parser "^0.2.3"
     postcss-reporter "^6.0.1"
     postcss-resolve-nested-selector "^0.1.1"
-    postcss-safe-parser "^4.0.1"
+    postcss-safe-parser "^4.0.2"
     postcss-sass "^0.4.2"
     postcss-scss "^2.0.0"
     postcss-selector-parser "^6.0.2"
@@ -15549,13 +15683,21 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.1.0:
+supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
   integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
   dependencies:
     has-flag "^4.0.0"
 
+supports-hyperlinks@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz#f663df252af5f37c5d49bbd7eeefa9e0b9e59e47"
+  integrity sha512-zoE5/e+dnEijk6ASB6/qrK+oYdm2do1hjoLWrqUC/8WEIW1gbxFcKuBof7sW8ArN6e+AYvsE8HBGiVRWL/F5CA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 svg-parser@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
@@ -15681,6 +15823,14 @@ term-size@^2.1.0:
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.0.tgz#1f16adedfe9bdc18800e1776821734086fcc6753"
   integrity sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==
 
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
 terser-webpack-plugin@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
@@ -15705,25 +15855,24 @@ terser@^4.1.2:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-test-exclude@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
-  integrity sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
   dependencies:
-    glob "^7.1.3"
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
     minimatch "^3.0.4"
-    read-pkg-up "^4.0.0"
-    require-main-filename "^2.0.0"
 
 text-table@0.2.0, text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-throat@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
-  integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
+throat@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
+  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
 
 throttle-debounce@^2.1.0:
   version "2.1.0"
@@ -15869,7 +16018,7 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0:
+tough-cookie@^2.3.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
   integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
@@ -15877,6 +16026,15 @@ tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0:
     psl "^1.1.28"
     punycode "^2.1.1"
 
+tough-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
+  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
+  dependencies:
+    ip-regex "^2.1.0"
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -15982,6 +16140,11 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
 type-fest@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
@@ -16479,7 +16642,7 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
-util.promisify@^1.0.0, util.promisify@^1.0.1, util.promisify@~1.0.0:
+util.promisify@^1.0.1, util.promisify@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
   integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
@@ -16533,6 +16696,15 @@ v8-compile-cache@^2.0.3, v8-compile-cache@^2.1.0:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
   integrity sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==
 
+v8-to-istanbul@^4.0.1:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-4.1.3.tgz#22fe35709a64955f49a08a7c7c959f6520ad6f20"
+  integrity sha512-sAjOC+Kki6aJVbUOXJbcR0MnbfjvBzwKZazEJymA2IX49uoOdEdk+4fBq5cXgYgiyKtAyrrJNtBZdOeDIF+Fng==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
 valid-url@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/valid-url/-/valid-url-1.0.9.tgz#1c14479b40f1397a75782f115e4086447433a200"
@@ -16664,6 +16836,15 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^1.0.0"
 
+w3c-xmlserializer@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
+  integrity sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==
+  dependencies:
+    domexception "^1.0.1"
+    webidl-conversions "^4.0.2"
+    xml-name-validator "^3.0.0"
+
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
@@ -16861,7 +17042,7 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
   integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
 
-whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
+whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
   integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
@@ -16878,20 +17059,11 @@ whatwg-fetch@>=0.10.0:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
 
-whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0:
+whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
-whatwg-url@^6.4.1:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
-  integrity sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==
-  dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^1.0.1"
-    webidl-conversions "^4.0.2"
-
 whatwg-url@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
@@ -16911,14 +17083,14 @@ which-pm-runs@^1.0.0:
   resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
   integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=
 
-which@^1.2.14, which@^1.2.9, which@^1.3.0, which@^1.3.1:
+which@^1.2.14, which@^1.2.9, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
   dependencies:
     isexe "^2.0.0"
 
-which@^2.0.1:
+which@^2.0.1, which@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
@@ -17020,15 +17192,6 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write-file-atomic@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
-  integrity sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==
-  dependencies:
-    graceful-fs "^4.1.11"
-    imurmurhash "^0.1.4"
-    signal-exit "^3.0.2"
-
 write-file-atomic@^2.0.0:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.3.tgz#1fd2e9ae1df3e75b8d8c367443c692d4ca81f481"
@@ -17055,13 +17218,6 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^5.2.0:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"
-  integrity sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==
-  dependencies:
-    async-limiter "~1.0.0"
-
 ws@^6.0.0, ws@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
@@ -17069,7 +17225,7 @@ ws@^6.0.0, ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^7.1.2:
+ws@^7.0.0, ws@^7.1.2:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.3.tgz#a5411e1fb04d5ed0efee76d26d5c46d830c39b46"
   integrity sha512-HTDl9G9hbkNDk98naoR/cHDws7+EyYMOdL1BmjsZXRUjf7d+MficC4B7HLUPlSiho0vg+CWKrGIt/VJBd1xunQ==
@@ -17147,6 +17303,11 @@ xmlbuilder@~9.0.1:
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
   integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
 
+xmlchars@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
 xmlhttprequest-ssl@~1.5.4:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
@@ -17245,7 +17406,7 @@ yargs@12.0.5, yargs@^12.0.5:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
-yargs@^13.2.4, yargs@^13.3.0:
+yargs@^13.2.4:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
   integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
@@ -17261,6 +17422,23 @@ yargs@^13.2.4, yargs@^13.3.0:
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
 
+yargs@^15.3.1:
+  version "15.3.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b"
+  integrity sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.1"
+
 yauzl@^2.4.2:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"

From fa1147aaf924b23ec9dd15e53d92c1ad933bcb78 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 16:04:41 +0300
Subject: [PATCH 29/51] Update babel & webpack related packages

---
 package.json |  5 ++---
 yarn.lock    | 56 ++++++++++++++++++++++++++--------------------------
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index f81979332b..e168df47e8 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,6 @@
     "gatsby-link": "^2.3.0",
     "gatsby-plugin-feed": "^2.4.0",
     "gatsby-plugin-typescript": "^2.2.5",
-    "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
     "github-markdown-css": "^3.0.1",
     "iso-url": "^0.4.7",
     "isomorphic-fetch": "^2.2.1",
@@ -85,8 +84,8 @@
     "unist-util-visit": "2.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "@svgr/webpack": "^5.2.0",
+    "@babel/core": "^7.9.0",
+    "@svgr/webpack": "^5.3.1",
     "@types/classnames": "^2.2.10",
     "@types/isomorphic-fetch": "^0.0.35",
     "@types/lodash.includes": "^4.3.6",
diff --git a/yarn.lock b/yarn.lock
index 2b59aefe64..8484fbaa5c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25,7 +25,7 @@
     invariant "^2.2.4"
     semver "^5.5.0"
 
-"@babel/core@>=7.2.2", "@babel/core@^7.1.0", "@babel/core@^7.7.5", "@babel/core@^7.7.7", "@babel/core@^7.8.7", "@babel/core@^7.9.0":
+"@babel/core@>=7.2.2", "@babel/core@^7.1.0", "@babel/core@^7.7.5", "@babel/core@^7.8.7", "@babel/core@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
   integrity sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==
@@ -843,7 +843,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.8.3", "@babel/preset-react@^7.9.1":
+"@babel/preset-react@^7.8.3", "@babel/preset-react@^7.9.4":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.4.tgz#c6c97693ac65b6b9c0b4f25b948a8f665463014d"
   integrity sha512-AxylVB3FXeOTQXNXyiuAQJSvss62FEotbX2Pzx3K/7c+MKJMdSg6Ose6QYllkdCFA8EInCJVw7M/o5QbLuA4ZQ==
@@ -1721,15 +1721,15 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.0.1.tgz#8c593dcfe17179f5a87734a76c9174aac91d2a2b"
   integrity sha512-ITG1jJ0zHQ4yft6ISQqlMW4fHIzsrSB/FmrMxAcJtkTjh9M2/9M8wfKxQya9NnTfZ5WMSlQjXMQNZmGQsuxRrw==
 
-"@svgr/babel-plugin-transform-svg-component@^5.3.0":
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.3.0.tgz#a75ab70cba06c3cdd0a5b2de9ea81466e2ffdb06"
-  integrity sha512-x+XT8iqm81xRado8GLqDg5eUni8KbgTooqLvVZNUey2s8QBWXy7RbzJP6VX5WB9LgfbA7en6ka1/GfRUHyNhWg==
+"@svgr/babel-plugin-transform-svg-component@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.3.1.tgz#1c512bc3d1b595cc7c5edcb3ac992f655d2dd6bc"
+  integrity sha512-LY5MTWhOBjOeKhZDL+vp/CBLz8ZJQmV1C/WBgGC2ex8qiiCKOs04sqUbmHqEw+ReisEAZVpPHXBFp3RdsB+1qQ==
 
-"@svgr/babel-preset@^5.3.0":
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.3.0.tgz#98f4c79b13b496fa55645b92448e59afd565f57b"
-  integrity sha512-VQPa3czStMhaDdOpGtzyVwWMZPbe437ocTGtXoa8R/iLTDYLD9BwyQLZZMPglKRBVaWJxqAVA8kbyFJQ9ahVdw==
+"@svgr/babel-preset@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.3.1.tgz#e7e678e38cd74c2074b810da7a90582d6dbc6898"
+  integrity sha512-9h7bIUXgSZ9N1Ocxxd8yk4Vgl0wL9cdzkYTTgjU+B0ccewBJg4OwZnWdqKuu/kzfqUfwfICUMygKQM/WWYd9lQ==
   dependencies:
     "@svgr/babel-plugin-add-jsx-attribute" "^5.0.1"
     "@svgr/babel-plugin-remove-jsx-attribute" "^5.0.1"
@@ -1738,14 +1738,14 @@
     "@svgr/babel-plugin-svg-dynamic-title" "^5.0.1"
     "@svgr/babel-plugin-svg-em-dimensions" "^5.0.1"
     "@svgr/babel-plugin-transform-react-native-svg" "^5.0.1"
-    "@svgr/babel-plugin-transform-svg-component" "^5.3.0"
+    "@svgr/babel-plugin-transform-svg-component" "^5.3.1"
 
-"@svgr/core@^5.3.0":
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.3.0.tgz#fc49d29596daffd739528d76cf9de26ac0548094"
-  integrity sha512-ijUF5bLsK4xA0hmg9GEEeFC35LPYcIkONmQLCgjW3NDTf0eRBgCCm+ZZFdeDTYnkNeh+fFOfHEkv7U3tEbJnZQ==
+"@svgr/core@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.3.1.tgz#32c2d5146beeb0ca0fadb0549108d0b2512a7b8e"
+  integrity sha512-ZmEEkYrOoylo40Sgl5HlNULu+zF1zqcZ87iglJR1r+id6+TL2tRs53HPiaKUkaPMd3x5C6ErNPlTwMLShaeMSw==
   dependencies:
-    "@svgr/plugin-jsx" "^5.3.0"
+    "@svgr/plugin-jsx" "^5.3.1"
     camelcase "^5.3.1"
     cosmiconfig "^6.0.0"
 
@@ -1756,13 +1756,13 @@
   dependencies:
     "@babel/types" "^7.4.4"
 
-"@svgr/plugin-jsx@^5.3.0":
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.3.0.tgz#6452bc3adab0d6e83d211c49bd5d539f93c28ca8"
-  integrity sha512-duJFQ99ZvIXvxJmEhV/8GoKnPrAMOuK7k+lVyepRYHmR0BZr33RupjpApdleU29teXcJO5oMHYsviiHRCQcU9Q==
+"@svgr/plugin-jsx@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.3.1.tgz#8e0c9501ff6a807f5aae5538c7bd2afa818a4b0c"
+  integrity sha512-M4HQis1bJd10H1gLCYRKBulgOnxPj2Cxhx1rjMHhj+1BdGoKbFSeKLWA6uLsTm59Db6510f5ltE+N8UX0muEYg==
   dependencies:
     "@babel/core" "^7.7.5"
-    "@svgr/babel-preset" "^5.3.0"
+    "@svgr/babel-preset" "^5.3.1"
     "@svgr/hast-util-to-babel-ast" "^5.0.1"
     svg-parser "^2.0.2"
 
@@ -1775,17 +1775,17 @@
     merge-deep "^3.0.2"
     svgo "^1.2.2"
 
-"@svgr/webpack@^5.2.0":
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.3.0.tgz#172890fbd159bba0c756fb3ade9d9943755236ca"
-  integrity sha512-sOuTGg/Hy+YrVaWRlU2iHnIPxr9jCybuPBbfAFFOuoEJgAlWj9UdWLqeFXJdgwae3FNtHsCsPCzEM9PmLtdFvA==
+"@svgr/webpack@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.3.1.tgz#6d185a5407c213b7111c3854a485254de0b1697c"
+  integrity sha512-0IrfVMS3BlZ2mli5QqFw1ZGieBgTqmgVzvxejOap7CACTv3t+iBBynx3Ak+x5Sbqeat43ZJ0lXODiHZyts6hQA==
   dependencies:
     "@babel/core" "^7.9.0"
     "@babel/plugin-transform-react-constant-elements" "^7.9.0"
     "@babel/preset-env" "^7.9.0"
-    "@babel/preset-react" "^7.9.1"
-    "@svgr/core" "^5.3.0"
-    "@svgr/plugin-jsx" "^5.3.0"
+    "@babel/preset-react" "^7.9.4"
+    "@svgr/core" "^5.3.1"
+    "@svgr/plugin-jsx" "^5.3.1"
     "@svgr/plugin-svgo" "^5.3.0"
     loader-utils "^2.0.0"
 

From e79c55f940a9ad8fb88c05bfb315c13e22e79dfe Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 16:28:30 +0300
Subject: [PATCH 30/51] Update react related packages

---
 package.json |  18 +++----
 yarn.lock    | 135 ++++++++++++++++++++++++---------------------------
 2 files changed, 72 insertions(+), 81 deletions(-)

diff --git a/package.json b/package.json
index e168df47e8..06b39b984f 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,8 @@
     "@hapi/wreck": "^17.0.0",
     "@octokit/graphql": "^4.3.1",
     "@reach/portal": "^0.10.0",
-    "@reach/router": "^1.3.1",
-    "@reach/tooltip": "^0.9.1",
+    "@reach/router": "^1.3.3",
+    "@reach/tooltip": "^0.10.0",
     "classnames": "^2.2.6",
     "color": "^3.1.2",
     "compression": "^1.7.4",
@@ -64,17 +64,17 @@
     "prismjs": "^1.19.0",
     "promise-polyfill": "^8.1.3",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
+    "react": "^16.13.1",
     "react-collapse": "^5.0.1",
     "react-collapsible": "^2.7.0",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.13.1",
     "react-ga": "^2.7.0",
     "react-helmet": "^5.2.1",
-    "react-markdown": "^4.2.2",
+    "react-markdown": "^4.3.1",
     "react-popover": "^0.5.10",
     "react-slick": "^0.25.2",
-    "react-use": "^13.27.0",
-    "rehype-react": "^4.0.1",
+    "react-use": "^14.0.0",
+    "rehype-react": "^5.0.1",
     "request": "^2.88.0",
     "reset-css": "^5.0.1",
     "s3-client": "^4.4.2",
@@ -93,7 +93,7 @@
     "@types/lodash.throttle": "^4.1.6",
     "@types/lodash.topairs": "^4.3.6",
     "@types/promise-polyfill": "^6.0.3",
-    "@types/react": "^16.9.27",
+    "@types/react": "^16.9.32",
     "@types/react-collapse": "^5.0.0",
     "@types/react-dom": "^16.9.6",
     "@types/react-helmet": "^5.0.15",
@@ -118,7 +118,7 @@
     "gatsby-plugin-google-analytics": "^2.1.36",
     "gatsby-plugin-manifest": "^2.2.42",
     "gatsby-plugin-postcss": "^2.2.0",
-    "gatsby-plugin-react-helmet": "^3.1.22",
+    "gatsby-plugin-react-helmet": "^3.2.1",
     "gatsby-plugin-sentry": "^1.0.1",
     "gatsby-plugin-sharp": "^2.5.2",
     "gatsby-plugin-sitemap": "^2.2.27",
diff --git a/yarn.lock b/yarn.lock
index 8484fbaa5c..2df95bde8e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1525,12 +1525,12 @@
     lodash.debounce "^4.0.8"
     react-dev-utils "^9.1.0"
 
-"@reach/auto-id@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.9.0.tgz#73b5d34bcf432f3e73b235b9dcaa89ea05a0d4db"
-  integrity sha512-9/aXl+dT0pOenvpkB2kkmQnpMDlmSk8ZkBYmYFzFz3eA4PZFNuXcHVzQevFRhc0HVlskPjxwPNf92EkI9rdFOw==
+"@reach/auto-id@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.10.0.tgz#72b70b9bb3f7d0f39b9fae0dcb412168ee139762"
+  integrity sha512-Uwsd4eNFa5YteZ7DKCVIbhE3c8x9DYVwtLy6ZCl1jo6bXAF6Di1dYm/XnkTmo+OYoKOZlVTu7umONDeezY33rQ==
   dependencies:
-    "@reach/utils" "^0.9.0"
+    "@reach/utils" "^0.10.0"
     tslib "^1.10.0"
 
 "@reach/observe-rect@^1.1.0":
@@ -1546,25 +1546,17 @@
     "@reach/utils" "^0.10.0"
     tslib "^1.10.0"
 
-"@reach/portal@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.9.0.tgz#8346c4403aba071b36ff0bd5137b1363f70ade15"
-  integrity sha512-V3xmdKCWLyKwAdSvvF4EvO8wKPGInQsJXmCuo9c7RU5ZCDnErCQmiD/jqyD78UzGF0snXATiGHuQV0h/Ppjt0w==
-  dependencies:
-    "@reach/utils" "^0.9.0"
-    tslib "^1.10.0"
-
-"@reach/rect@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.9.0.tgz#395061af2d5e13166711716a80a0df39ce43abf4"
-  integrity sha512-ACUgv3lt6DOkgq5QmkfpTPJjVZoNULJ/u3cXg0UhaktzCxkUupIY2bue1X82MM3hf5wCfEdoZVnFi7k9KNJeAw==
+"@reach/rect@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.10.0.tgz#5e9310592f1a9413382c4a8a80e96ca167d2f32d"
+  integrity sha512-fZLZiBDc/ZDSNnNFZCQFHOw4v8QLI/DjWbX+JecXVGIhgwBUl4+3cJVmlthk/FUrndO7cQ8vjFWzEhB4o2mOnw==
   dependencies:
     "@reach/observe-rect" "^1.1.0"
-    "@reach/utils" "^0.9.0"
+    "@reach/utils" "^0.10.0"
     prop-types "^15.7.2"
     tslib "^1.10.0"
 
-"@reach/router@^1.3.1", "@reach/router@^1.3.3":
+"@reach/router@^1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"
   integrity sha512-gOIAiFhWdiVGSVjukKeNKkCRBLmnORoTPyBihI/jLunICPgxdP30DroAvPQuf1eVfQbfGJQDJkwhJXsNPMnVWw==
@@ -1574,16 +1566,16 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
-"@reach/tooltip@^0.9.1":
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.9.1.tgz#c636b93baf27ad94b8ff0a6890d3949210ee56b4"
-  integrity sha512-yOd/rehu/KnT6RYhFs4oOFPywRx7oCnta/Bevs3lf8pWYmZ1FOJRuxOmtncwl5hp0GpAAdgzsgNXXfX2o479Gw==
-  dependencies:
-    "@reach/auto-id" "^0.9.0"
-    "@reach/portal" "^0.9.0"
-    "@reach/rect" "^0.9.0"
-    "@reach/utils" "^0.9.0"
-    "@reach/visually-hidden" "^0.9.0"
+"@reach/tooltip@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.10.0.tgz#354efaee178c35b56a775ae126b76db0f90c53e7"
+  integrity sha512-jE9Ybd8Zb2XTsFhsywr++AQOiWxXXWSPKatYGiY5TEwaCLmb9Wr/Ovr4NJA0pHz6ISNE3B1jyw2HtwojuD1iwA==
+  dependencies:
+    "@reach/auto-id" "^0.10.0"
+    "@reach/portal" "^0.10.0"
+    "@reach/rect" "^0.10.0"
+    "@reach/utils" "^0.10.0"
+    "@reach/visually-hidden" "^0.10.0"
     prop-types "^15.7.2"
     tslib "^1.10.0"
 
@@ -1595,18 +1587,10 @@
     tslib "^1.10.0"
     warning "^4.0.3"
 
-"@reach/utils@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.9.0.tgz#ee47c25c79eb2f98e6c0e728a2672075cc9991d5"
-  integrity sha512-cmiykRaxuCysVTsSY3PgrLjySnEIt1PLiSYKh5rAH8nYyEmaOCtw0vaNItFAiqQIjfrxkixmcUE8dyD8kqVuJA==
-  dependencies:
-    tslib "^1.10.0"
-    warning "^4.0.3"
-
-"@reach/visually-hidden@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.9.0.tgz#1099d9be28f41cb9829c4ba4887c233e75035e4a"
-  integrity sha512-aiPss8hQMOz/NV3L9yl3r2brLMpYV76yB2HhqbhB0EstbNMb6a2eDUBo+mOVFhOdKDxlNJmqHdwz/aiBh8GP6Q==
+"@reach/visually-hidden@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.10.0.tgz#a2d697cfe67a8d25da882889e1d102163e5a2e76"
+  integrity sha512-hhaIpcTNqYKomhVaUNb/CY7fgdC8P8aatfzU1nh2wQfeEOvoEtf8ReQzAvs8/CoknRdJVuo85qGXjkApsKzHow==
   dependencies:
     tslib "^1.10.0"
 
@@ -2070,10 +2054,10 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/react@^16.9.27":
-  version "16.9.27"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.27.tgz#7fc5db99e3ec3f21735b44d3560cff684856814a"
-  integrity sha512-j+RvQb9w7a2kZFBOgTh+s/elCwtqWUMN6RJNdmz0ntmwpeoMHKnyhUcmYBu7Yw94Rtj9938D+TJSn6WGcq2+OA==
+"@types/react@^16.9.32":
+  version "16.9.32"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.32.tgz#f6368625b224604148d1ddf5920e4fefbd98d383"
+  integrity sha512-fmejdp0CTH00mOJmxUPPbWCEBWPvRIL4m8r0qD+BSDUqmutPyGQCHifzMpMzdvZwROdEdL78IuZItntFWgPXHQ==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -2380,10 +2364,10 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
-"@xobotyi/scrollbar-width@1.9.4":
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.4.tgz#a7dce20b7465bcad29cd6bbb557695e4ea7863cb"
-  integrity sha512-o12FCQt/X5n3pgKEWGpt0f/7Eg4mfv3uRwPUrctiOT8ZuxbH3cNLGWfH/8y6KxVJg4L2885ucuXQ6XECZzUiJA==
+"@xobotyi/scrollbar-width@1.9.5":
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
+  integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
@@ -6973,7 +6957,7 @@ gatsby-plugin-postcss@^2.2.0:
     "@babel/runtime" "^7.8.7"
     postcss-loader "^3.0.0"
 
-gatsby-plugin-react-helmet@^3.1.22:
+gatsby-plugin-react-helmet@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.2.1.tgz#28a89e884e5447f7aefead2a80749e3745f5f5a9"
   integrity sha512-5oarZdVvp3k3keG26eVFagVHLYw7wCGs/MXRYQg8MEyJewU3X4Uc0eo7qu4TM5EIuZ2ekaL14r86RB6RM5TORA==
@@ -8024,17 +8008,17 @@ hast-to-hyperscript@^5.0.0:
     unist-util-is "^2.0.0"
     web-namespaces "^1.1.2"
 
-hast-to-hyperscript@^7.0.0:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-7.0.4.tgz#7c4c037d9a8ea19b0a3fdb676a26448ad922353d"
-  integrity sha512-vmwriQ2H0RPS9ho4Kkbf3n3lY436QKLq6VaGA1pzBh36hBi3tm1DO9bR+kaJIbpT10UqaANDkMjxvjVfr+cnOA==
+hast-to-hyperscript@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-8.0.0.tgz#ad1182144366ed8d4f65f1a771c7f1da6f812648"
+  integrity sha512-WgSlKtcjhDeCa6USBnoJwjOmRo81/Ib/MPSASOjTH99XLoPO+R5/1LrCjHJnftM8KTbnf6OV9czQj25mqBXYHw==
   dependencies:
     comma-separated-tokens "^1.0.0"
-    property-information "^5.3.0"
+    property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
-    style-to-object "^0.2.1"
-    unist-util-is "^3.0.0"
-    web-namespaces "^1.1.2"
+    style-to-object "^0.3.0"
+    unist-util-is "^4.0.0"
+    web-namespaces "^1.0.0"
 
 hast-util-from-parse5@^4.0.2:
   version "4.0.2"
@@ -13120,7 +13104,7 @@ property-information@^4.0.0:
   dependencies:
     xtend "^4.0.1"
 
-property-information@^5.0.0, property-information@^5.2.0, property-information@^5.3.0:
+property-information@^5.0.0, property-information@^5.2.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.4.0.tgz#16e08f13f4e5c4a7be2e4ec431c01c4f8dba869a"
   integrity sha512-nmMWAm/3vKFGmmOWOcdLjgq/Hlxa+hsuR/px1Lp/UGEyc5A22A6l78Shc2C0E71sPmAqglni+HrS7L7VJ7AUCA==
@@ -13403,7 +13387,7 @@ react-dev-utils@^9.1.0:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-react-dom@^16.12.0:
+react-dom@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
   integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
@@ -13467,7 +13451,7 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-markdown@^4.2.2:
+react-markdown@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-4.3.1.tgz#39f0633b94a027445b86c9811142d05381300f2f"
   integrity sha512-HQlWFTbDxTtNY6bjgp3C3uv1h2xcjCSi1zAEzfBW9OwJJvENSYiLXWNXN5hHLsoqai7RnZiiHzcnWdXk2Splzw==
@@ -13524,13 +13508,13 @@ react-slick@^0.25.2:
     lodash.debounce "^4.0.8"
     resize-observer-polyfill "^1.5.0"
 
-react-use@^13.27.0:
-  version "13.27.0"
-  resolved "https://registry.yarnpkg.com/react-use/-/react-use-13.27.0.tgz#53a619dc9213e2cbe65d6262e8b0e76641ade4aa"
-  integrity sha512-2lyTyqJWyvnaP/woVtDcFS4B5pUYz0FQWI9pVHk/6TBWom2x3/ziJthkEn/LbCA9Twv39xSQU7Dn0zdIWfsNTQ==
+react-use@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-14.0.0.tgz#a46d055346bb8728b966f50d665ce22aa535e74c"
+  integrity sha512-ZJJRaRTreBYn2zT5OBpKpiU/muoWioFkZABfIXJf2PsnBYwnn6XYTV7NvVQnmuuvn24B+R/setmEJQsB13okXw==
   dependencies:
     "@types/js-cookie" "2.2.5"
-    "@xobotyi/scrollbar-width" "1.9.4"
+    "@xobotyi/scrollbar-width" "1.9.5"
     copy-to-clipboard "^3.2.0"
     fast-deep-equal "^3.1.1"
     fast-shallow-equal "^1.0.0"
@@ -13543,7 +13527,7 @@ react-use@^13.27.0:
     ts-easing "^0.2.0"
     tslib "^1.10.0"
 
-react@^16.12.0, react@^16.8.0:
+react@^16.13.1, react@^16.8.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
   integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
@@ -13831,13 +13815,13 @@ rehype-parse@^6.0.2:
     parse5 "^5.0.0"
     xtend "^4.0.0"
 
-rehype-react@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/rehype-react/-/rehype-react-4.0.1.tgz#fcb79e99b49ee056cfc266c4992ecfae939e8efa"
-  integrity sha512-xg6PZHqWJLTBQM6ECvzWEZhVqRpbxrx8eAPaWQAoRK7v9lkAuBelBym3AVUvGRzlQsZky9MdKrDzyYTTm1cejQ==
+rehype-react@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/rehype-react/-/rehype-react-5.0.1.tgz#6934c90101a140328fffe22b9569b86cdeac1d73"
+  integrity sha512-vv/uqHROopaPimIw6Ip4Mx5+YySLClC7pSFJSW3QkwVYvguqbm5N+Cu4yJgt6nvDmOsP66GnQtDlU+tI6bhigQ==
   dependencies:
     "@mapbox/hast-util-table-cell-style" "^0.1.3"
-    hast-to-hyperscript "^7.0.0"
+    hast-to-hyperscript "^8.0.0"
 
 rehype-stringify@^6.0.1:
   version "6.0.1"
@@ -15572,6 +15556,13 @@ style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
+style-to-object@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
+  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"

From 1e41542b2ac2be09a15bb0e789f822efedd1f884 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 17:03:26 +0300
Subject: [PATCH 31/51] Update gatsby-related packages

---
 package.json |  45 ++--
 yarn.lock    | 642 ++++++++++++++++++++++++++++-----------------------
 2 files changed, 374 insertions(+), 313 deletions(-)

diff --git a/package.json b/package.json
index 06b39b984f..c21fbddf40 100644
--- a/package.json
+++ b/package.json
@@ -45,11 +45,9 @@
     "ease-component": "^1.0.0",
     "express": "^4.17.1",
     "fs-extra": "^9.0.0",
-    "gatsby": "^2.20.2",
-    "gatsby-image": "^2.3.0",
-    "gatsby-link": "^2.3.0",
-    "gatsby-plugin-feed": "^2.4.0",
-    "gatsby-plugin-typescript": "^2.2.5",
+    "gatsby": "^2.20.13",
+    "gatsby-image": "^2.3.1",
+    "gatsby-link": "^2.3.2",
     "github-markdown-css": "^3.0.1",
     "iso-url": "^0.4.7",
     "isomorphic-fetch": "^2.2.1",
@@ -114,31 +112,32 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.19.0",
-    "gatsby-plugin-catch-links": "^2.1.26",
-    "gatsby-plugin-google-analytics": "^2.1.36",
-    "gatsby-plugin-manifest": "^2.2.42",
-    "gatsby-plugin-postcss": "^2.2.0",
+    "gatsby-plugin-catch-links": "^2.2.1",
+    "gatsby-plugin-feed": "^2.4.1",
+    "gatsby-plugin-google-analytics": "^2.2.2",
+    "gatsby-plugin-manifest": "^2.3.3",
+    "gatsby-plugin-postcss": "^2.2.1",
     "gatsby-plugin-react-helmet": "^3.2.1",
     "gatsby-plugin-sentry": "^1.0.1",
-    "gatsby-plugin-sharp": "^2.5.2",
-    "gatsby-plugin-sitemap": "^2.2.27",
+    "gatsby-plugin-sharp": "^2.5.4",
+    "gatsby-plugin-sitemap": "^2.3.1",
     "gatsby-plugin-svgr": "^2.0.2",
-    "gatsby-plugin-twitter": "^2.2.0",
-    "gatsby-plugin-typescript": "^2.2.5",
+    "gatsby-plugin-twitter": "^2.2.2",
+    "gatsby-plugin-typescript": "^2.3.1",
     "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
-    "gatsby-remark-autolink-headers": "^2.1.24",
-    "gatsby-remark-copy-linked-files": "^2.1.37",
+    "gatsby-remark-autolink-headers": "^2.2.1",
+    "gatsby-remark-copy-linked-files": "^2.2.1",
     "gatsby-remark-embed-gist": "^1.1.9",
-    "gatsby-remark-embedder": "^1.14.0",
+    "gatsby-remark-embedder": "^2.0.0",
     "gatsby-remark-external-links": "^0.0.4",
-    "gatsby-remark-images": "^3.2.0",
-    "gatsby-remark-prismjs": "^3.3.31",
+    "gatsby-remark-images": "^3.2.2",
+    "gatsby-remark-prismjs": "^3.4.1",
     "gatsby-remark-relative-images": "0.2.3",
-    "gatsby-remark-responsive-iframe": "^2.3.0",
-    "gatsby-remark-smartypants": "^2.1.21",
-    "gatsby-source-filesystem": "^2.1.48",
-    "gatsby-transformer-remark": "^2.6.59",
-    "gatsby-transformer-sharp": "^2.4.0",
+    "gatsby-remark-responsive-iframe": "^2.3.1",
+    "gatsby-remark-smartypants": "^2.2.1",
+    "gatsby-source-filesystem": "^2.2.2",
+    "gatsby-transformer-remark": "^2.7.1",
+    "gatsby-transformer-sharp": "^2.4.4",
     "hast-util-select": "^4.0.0",
     "husky": "^4.2.3",
     "jest": "^25.2.7",
diff --git a/yarn.lock b/yarn.lock
index 2df95bde8e..0ca572a195 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -871,7 +871,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
   integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
@@ -1158,257 +1158,324 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
-"@jimp/bmp@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.6.8.tgz#8abbfd9e26ba17a47fab311059ea9f7dd82005b6"
-  integrity sha512-uxVgSkI62uAzk5ZazYHEHBehow590WAkLKmDXLzkr/XP/Hv2Fx1T4DKwJ/15IY5ktq5VAhAUWGXTyd8KWFsx7w==
+"@jimp/bmp@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.9.8.tgz#5933ab8fb359889bec380b0f7802163374933624"
+  integrity sha512-CZYQPEC3iUBMuaGWrtIG+GKNl93q/PkdudrCKJR/B96dfNngsmoosEm3LuFgJHEcJIfvnJkNqKw74l+zEiqCbg==
   dependencies:
-    "@jimp/utils" "^0.6.8"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
     bmp-js "^0.1.0"
-    core-js "^2.5.7"
+    core-js "^3.4.1"
 
-"@jimp/core@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/core/-/core-0.6.8.tgz#6a41089792516f6e64a5302d12eb562aa7847c7b"
-  integrity sha512-JOFqBBcSNiDiMZJFr6OJqC6viXj5NVBQISua0eacoYvo4YJtTajOIxC4MqWyUmGrDpRMZBR8QhSsIOwsFrdROA==
+"@jimp/core@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/core/-/core-0.9.8.tgz#b2b74263a80559c0ee244e0f2d1052b36a358b85"
+  integrity sha512-N4GCjcXb0QwR5GBABDK2xQ3cKyaF7LlCYeJEG9mV7G/ynBoRqJe4JA6YKU9Ww9imGkci/4A594nQo8tUIqdcBw==
   dependencies:
-    "@jimp/utils" "^0.6.8"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
     any-base "^1.1.0"
     buffer "^5.2.0"
-    core-js "^2.5.7"
+    core-js "^3.4.1"
     exif-parser "^0.1.12"
     file-type "^9.0.0"
     load-bmfont "^1.3.1"
-    mkdirp "0.5.1"
+    mkdirp "^0.5.1"
     phin "^2.9.1"
     pixelmatch "^4.0.2"
     tinycolor2 "^1.4.1"
 
-"@jimp/custom@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/custom/-/custom-0.6.8.tgz#0476d7b3f5da3121d98895a2e14f2899e602f2b6"
-  integrity sha512-FrYlzZRVXP2vuVwd7Nc2dlK+iZk4g6IaT1Ib8Z6vU5Kkwlt83FJIPJ2UUFABf3bF5big0wkk8ZUihWxE4Nzdng==
+"@jimp/custom@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/custom/-/custom-0.9.8.tgz#1e9d904b1b05aa22b00b899baba2be7c0704a5d1"
+  integrity sha512-1UpJjI7fhX02BWLJ/KEqPwkHH60eNkCNeD6hEd+IZdTwLXfZCfFiM5BVlpgiZYZJSsVoRiAL4ne2Q5mCiKPKyw==
   dependencies:
-    "@jimp/core" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/core" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/gif@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/gif/-/gif-0.6.8.tgz#848dd4e6e1a56ca2b3ce528969e44dfa99a53b14"
-  integrity sha512-yyOlujjQcgz9zkjM5ihZDEppn9d1brJ7jQHP5rAKmqep0G7FU1D0AKcV+Ql18RhuI/CgWs10wAVcrQpmLnu4Yw==
+"@jimp/gif@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/gif/-/gif-0.9.8.tgz#513aff511634c338d1ab33a7bba1ba3412220b5b"
+  integrity sha512-LEbfpcO1sBJIQCJHchZjNlyNxzPjZQQ4X32klpQHZJG58n9FvL7Uuh1rpkrJRbqv3cU3P0ENNtTrsBDxsYwcfA==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
     omggif "^1.0.9"
 
-"@jimp/jpeg@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/jpeg/-/jpeg-0.6.8.tgz#4cad85a6d1e15759acb56bddef29aa3473859f2c"
-  integrity sha512-rGtXbYpFXAn471qLpTGvhbBMNHJo5KiufN+vC5AWyufntmkt5f0Ox2Cx4ijuBMDtirZchxbMLtrfGjznS4L/ew==
+"@jimp/jpeg@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/jpeg/-/jpeg-0.9.8.tgz#8c086f69d0e8c46e43a7db9725576edc30925cb1"
+  integrity sha512-5u29SUzbZ32ZMmOaz3gO0hXatwSCnsvEAXRCKZoPPgbsPoyFAiZKVxjfLzjkeQF6awkvJ8hZni5chM15SNMg+g==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
     jpeg-js "^0.3.4"
 
-"@jimp/plugin-blit@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-blit/-/plugin-blit-0.6.8.tgz#646ebb631f35afc28c1e8908524bc43d1e9afa3d"
-  integrity sha512-7Tl6YpKTSpvwQbnGNhsfX2zyl3jRVVopd276Y2hF2zpDz9Bycow7NdfNU/4Nx1jaf96X6uWOtSVINcQ7rGd47w==
+"@jimp/plugin-blit@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-blit/-/plugin-blit-0.9.8.tgz#916bf6f261e6a91dbecca0ca866b8d9cba563753"
+  integrity sha512-6xTDomxJybhBcby1IUVaPydZFhxf+V0DRgfDlVK81kR9kSCoshJpzWqDuWrMqjNEPspPE7jRQwHMs0FdU7mVwQ==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
+
+"@jimp/plugin-blur@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-blur/-/plugin-blur-0.9.8.tgz#00055d54b90532b7951dae377b3e40352c187f07"
+  integrity sha512-dqbxuNFBRbmt35iIRacdgma7nlXklmPThsKcGWNTDmqb/hniK5IC+0xSPzBV4qMI2fLGP39LWHqqDZ0xDz14dA==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-blur@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-blur/-/plugin-blur-0.6.8.tgz#7b753ae94f6099103f57c268c3b2679047eefe95"
-  integrity sha512-NpZCMKxXHLDQsX9zPlWtpMA660DQStY6/z8ZetyxCDbqrLe9YCXpeR4MNhdJdABIiwTm1W5FyFF4kp81PHJx3Q==
+"@jimp/plugin-circle@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-circle/-/plugin-circle-0.9.8.tgz#5de8735f32f931d9160d0f5211e9aab6413a1d4b"
+  integrity sha512-+UStXUPCzPqzTixLC8eVqcFcEa6TS+BEM/6/hyM11TDb9sbiMGeUtgpwZP/euR5H5gfpAQDA1Ppzqhh5fuMDlw==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-color@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-color/-/plugin-color-0.6.8.tgz#4101cb1208879b331db6e43ea6b96eaf8dbaedbc"
-  integrity sha512-jjFyU0zNmGOH2rjzHuOMU4kaia0oo82s/7UYfn5h7OUkmUZTd6Do3ZSK1PiXA7KR+s4B76/Omm6Doh/0SGb7BQ==
+"@jimp/plugin-color@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-color/-/plugin-color-0.9.8.tgz#3c633f22955a4f5013025e9e9e78a267ac4c3a88"
+  integrity sha512-SDHxOQsJHpt75hk6+sSlCPc2B3UJlXosFW+iLZ11xX1Qr0IdDtbfYlIoPmjKQFIDUNzqLSue/z7sKQ1OMZr/QA==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
     tinycolor2 "^1.4.1"
 
-"@jimp/plugin-contain@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-contain/-/plugin-contain-0.6.8.tgz#af95d33b63d0478943374ae15dd2607fc69cad14"
-  integrity sha512-p/P2wCXhAzbmEgXvGsvmxLmbz45feF6VpR4m9suPSOr8PC/i/XvTklTqYEUidYYAft4vHgsYJdS74HKSMnH8lw==
+"@jimp/plugin-contain@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-contain/-/plugin-contain-0.9.8.tgz#f892fb7fc87134a47b37281f0ff17d608f3e51af"
+  integrity sha512-oK52CPt7efozuLYCML7qOmpFeDt3zpU8qq8UZlnjsDs15reU6L8EiUbwYpJvzoEnEOh1ZqamB8F/gymViEO5og==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-cover@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-cover/-/plugin-cover-0.6.8.tgz#490e3186627a34d93cc015c4169bac9070d6ad17"
-  integrity sha512-2PvWgk+PJfRsfWDI1G8Fpjrsu0ZlpNyZxO2+fqWlVo6y/y2gP4v08FqvbkcqSjNlOu2IDWIFXpgyU0sTINWZLg==
+"@jimp/plugin-cover@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-cover/-/plugin-cover-0.9.8.tgz#37474b19027ac0155100b71ca17266aab19e50fc"
+  integrity sha512-nnamtHzMrNd5j5HRSPd1VzpZ8v9YYtUJPtvCdHOOiIjqG72jxJ2kTBlsS3oG5XS64h/2MJwpl/fmmMs1Tj1CmQ==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-crop@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-crop/-/plugin-crop-0.6.8.tgz#ffec8951a2f3eccad1e3cff9afff5326bd980ce7"
-  integrity sha512-CbrcpWE2xxPK1n/JoTXzhRUhP4mO07mTWaSavenCg664oQl/9XCtL+A0FekuNHzIvn4myEqvkiTwN7FsbunS/Q==
+"@jimp/plugin-crop@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-crop/-/plugin-crop-0.9.8.tgz#2308696597a8bcb528d09eeebbbadb22248e7c1c"
+  integrity sha512-Nv/6AIp4aJmbSIH2uiIqm+kSoShKM8eaX2fyrUTj811kio0hwD3f/vIxrWebvAqwDZjAFIAmMufFoFCVg6caoQ==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-displace@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-displace/-/plugin-displace-0.6.8.tgz#89df05ab7daaff6befc190bb8ac54ec8d57e533b"
-  integrity sha512-RmV2bPxoPE6mrPxtYSPtHxm2cGwBQr5a2p+9gH6SPy+eUMrbGjbvjwKNfXWUYD0leML+Pt5XOmAS9pIROmuruQ==
+"@jimp/plugin-displace@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-displace/-/plugin-displace-0.9.8.tgz#00331047039cb2d0d9d5f7c3d8ce542e07eea791"
+  integrity sha512-0OgPjkOVa2xdbqI8P6gBKX/UK36RbaYVrFyXL8Jy9oNF69+LYWyTskuCu9YbGxzlCVjY/JFqQOvrKDbxgMYAKA==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-dither@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-dither/-/plugin-dither-0.6.8.tgz#17e5b9f56575a871e329fef8b388e614b92d84f8"
-  integrity sha512-x6V/qjxe+xypjpQm7GbiMNqci1EW5UizrcebOhHr8AHijOEqHd2hjXh5f6QIGfrkTFelc4/jzq1UyCsYntqz9Q==
+"@jimp/plugin-dither@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-dither/-/plugin-dither-0.9.8.tgz#9cca12997f2917f27d5681275b32affdb3083450"
+  integrity sha512-jGM/4ByniZJnmV2fv8hKwyyydXZe/YzvgBcnB8XxzCq8kVR3Imcn+qnd2PEPZzIPKOTH4Cig/zo9Vk9Bs+m5FQ==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-flip@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-flip/-/plugin-flip-0.6.8.tgz#153df0c677f79d4078bb9e4c1f2ac392b96dc3a1"
-  integrity sha512-4il6Da6G39s9MyWBEee4jztEOUGJ40E6OlPjkMrdpDNvge6hYEAB31BczTYBP/CEY74j4LDSoY5LbcU4kv06yA==
+"@jimp/plugin-fisheye@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-fisheye/-/plugin-fisheye-0.9.8.tgz#e3f5f616ec06a9ef99aa268446f0096eac863437"
+  integrity sha512-VnsalrD05f4pxG1msjnkwIFi5QveOqRm4y7VkoZKNX+iqs4TvRnH5+HpBnfdMzX/RXBi+Lf/kpTtuZgbOu/QWw==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-gaussian@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-gaussian/-/plugin-gaussian-0.6.8.tgz#100abc7ae1f19fe9c09ed41625b475aae7c6093c"
-  integrity sha512-pVOblmjv7stZjsqloi4YzHVwAPXKGdNaHPhp4KP4vj41qtc6Hxd9z/+VWGYRTunMFac84gUToe0UKIXd6GhoKw==
+"@jimp/plugin-flip@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-flip/-/plugin-flip-0.9.8.tgz#c00559a8543a684c7cff4d1128b7152e598fbb1c"
+  integrity sha512-XbiZ4OfHD6woc0f6Sk7XxB6a7IyMjTRQ4pNU7APjaNxsl3L6qZC8qfCQphWVe3DHx7f3y7jEiPMvNnqRDP1xgA==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-invert@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-invert/-/plugin-invert-0.6.8.tgz#f40bfaa3b592d21ff14ede0e49aabec88048cad0"
-  integrity sha512-11zuLiXDHr6tFv4U8aieXqNXQEKbDbSBG/h+X62gGTNFpyn8EVPpncHhOqrAFtZUaPibBqMFlNJ15SzwC7ExsQ==
+"@jimp/plugin-gaussian@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-gaussian/-/plugin-gaussian-0.9.8.tgz#d1666167ce1b947b65db5093bb9a00d319bcfe4d"
+  integrity sha512-ZBl5RA6+4XAD+mtqLfiG7u+qd8W5yqq3RBNca8eFqUSVo1v+eB2tzeLel0CWfVC/z6cw93Awm/nVnm6/CL2Oew==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-mask@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-mask/-/plugin-mask-0.6.8.tgz#e64405f7dacf0672bff74f3b95b724d9ac517f86"
-  integrity sha512-hZJ0OiKGJyv7hDSATwJDkunB1Ie80xJnONMgpUuUseteK45YeYNBOiZVUe8vum8QI1UwavgBzcvQ9u4fcgXc9g==
+"@jimp/plugin-invert@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-invert/-/plugin-invert-0.9.8.tgz#41d6e87faf01a5d8fe7554e322d2aad25f596ab1"
+  integrity sha512-ESploqCoF6qUv5IWhVLaO5fEcrYZEsAWPFflh6ROiD2mmFKQxfeK+vHnk3IDLHtUwWTkAZQNbk89BVq7xvaNpQ==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-normalize@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-normalize/-/plugin-normalize-0.6.8.tgz#a0180f2b8835e3638cdc5e057b44ac63f60db6ba"
-  integrity sha512-Q4oYhU+sSyTJI7pMZlg9/mYh68ujLfOxXzQGEXuw0sHGoGQs3B0Jw7jmzGa6pIS06Hup5hD2Zuh1ppvMdjJBfQ==
+"@jimp/plugin-mask@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-mask/-/plugin-mask-0.9.8.tgz#fe92132db1a2b9f7718226bc3c37794dd148ce36"
+  integrity sha512-zSvEisTV4iGsBReitEdnQuGJq9/1xB5mPATadYZmIlp8r5HpD72HQb0WdEtb51/pu9Odt8KAxUf0ASg/PRVUiQ==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
+
+"@jimp/plugin-normalize@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-normalize/-/plugin-normalize-0.9.8.tgz#05646aa15b6a789c4ba447edcad77c83c1d51f16"
+  integrity sha512-dPFBfwTa67K1tRw1leCidQT25R3ozrTUUOpO4jcGFHqXvBTWaR8sML1qxdfOBWs164mE5YpfdTvu6MM/junvCg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
 
-"@jimp/plugin-print@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-print/-/plugin-print-0.6.8.tgz#66309549e01896473111e3a0ad2cee428638bd6e"
-  integrity sha512-2aokejGn4Drv1FesnZGqh5KEq0FQtR0drlmtyZrBH+r9cx7hh0Qgf4D1BOTDEgXkfSSngjGRjKKRW/fwOrVXYw==
+"@jimp/plugin-print@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-print/-/plugin-print-0.9.8.tgz#808f723176d0a57186d7558290c7e53a7a8bf812"
+  integrity sha512-nLLPv1/faehRsOjecXXUb6kzhRcZzImO55XuFZ0c90ZyoiHm4UFREwO5sKxHGvpLXS6RnkhvSav4+IWD2qGbEQ==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
     load-bmfont "^1.4.0"
 
-"@jimp/plugin-resize@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-resize/-/plugin-resize-0.6.8.tgz#c26d9a973f7eec51ad9018fcbbac1146f7a73aa0"
-  integrity sha512-27nPh8L1YWsxtfmV/+Ub5dOTpXyC0HMF2cu52RQSCYxr+Lm1+23dJF70AF1poUbUe+FWXphwuUxQzjBJza9UoA==
-  dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
-
-"@jimp/plugin-rotate@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-rotate/-/plugin-rotate-0.6.8.tgz#2afda247984eeebed95c1bb1b13ccd3be5973299"
-  integrity sha512-GbjETvL05BDoLdszNUV4Y0yLkHf177MnqGqilA113LIvx9aD0FtUopGXYfRGVvmtTOTouoaGJUc+K6qngvKxww==
-  dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
-
-"@jimp/plugin-scale@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugin-scale/-/plugin-scale-0.6.8.tgz#5de403345859bb0b30bf3e242dedd8ceb6ecb96c"
-  integrity sha512-GzIYWR/oCUK2jAwku23zt19V1ssaEU4pL0x2XsLNKuuJEU6DvEytJyTMXCE7OLG/MpDBQcQclJKHgiyQm5gIOQ==
-  dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
-
-"@jimp/plugins@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/plugins/-/plugins-0.6.8.tgz#5618170a986ced1ea795adcd9376122f2543b856"
-  integrity sha512-fMcTI72Vn/Lz6JftezTURmyP5ml/xGMe0Ljx2KRJ85IWyP33vDmGIUuutFiBEbh2+y7lRT+aTSmjs0QGa/xTmQ==
-  dependencies:
-    "@jimp/plugin-blit" "^0.6.8"
-    "@jimp/plugin-blur" "^0.6.8"
-    "@jimp/plugin-color" "^0.6.8"
-    "@jimp/plugin-contain" "^0.6.8"
-    "@jimp/plugin-cover" "^0.6.8"
-    "@jimp/plugin-crop" "^0.6.8"
-    "@jimp/plugin-displace" "^0.6.8"
-    "@jimp/plugin-dither" "^0.6.8"
-    "@jimp/plugin-flip" "^0.6.8"
-    "@jimp/plugin-gaussian" "^0.6.8"
-    "@jimp/plugin-invert" "^0.6.8"
-    "@jimp/plugin-mask" "^0.6.8"
-    "@jimp/plugin-normalize" "^0.6.8"
-    "@jimp/plugin-print" "^0.6.8"
-    "@jimp/plugin-resize" "^0.6.8"
-    "@jimp/plugin-rotate" "^0.6.8"
-    "@jimp/plugin-scale" "^0.6.8"
-    core-js "^2.5.7"
+"@jimp/plugin-resize@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-resize/-/plugin-resize-0.9.8.tgz#eef750b77f1cc06e8bcf9b390860c95c489dcc02"
+  integrity sha512-L80NZ+HKsiKFyeDc6AfneC4+5XACrdL2vnyAVfAAsb3pmamgT/jDInWvvGhyI0Y76vx2w6XikplzEznW/QQvWg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
+
+"@jimp/plugin-rotate@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-rotate/-/plugin-rotate-0.9.8.tgz#5eba01f75a397777c6782b7999c9ac6c7ed8a411"
+  integrity sha512-bpqzQheISYnBXKyU1lIj46uR7mRs0UhgEREWK70HnvFJSlRshdcoNMIrKamyrJeFdJrkYPSfR/a6D0d5zsWf1Q==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
+
+"@jimp/plugin-scale@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-scale/-/plugin-scale-0.9.8.tgz#c875d5e0b377b15b8b398ee402f45e3fc43fea40"
+  integrity sha512-QU3ZS4Lre8nN66U9dKCOC4FNfaOh/QJFYUmQPKpPS924oYbtnm4OlmsdfpK2hVMSVVyVOis8M+xpA1rDBnIp7w==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
+
+"@jimp/plugin-shadow@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-shadow/-/plugin-shadow-0.9.8.tgz#ca2d18afa29a1027b77b3e1fb2ce7d4e073a7170"
+  integrity sha512-t/pE+QS3r1ZUxGIQNmwWDI3c5+/hLU+gxXD+C3EEC47/qk3gTBHpj/xDdGQBoObdT/HRjR048vC2BgBfzjj2hg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
+
+"@jimp/plugin-threshold@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugin-threshold/-/plugin-threshold-0.9.8.tgz#2d1dde0791f70b2ff2d0b915cab8d40b0e446594"
+  integrity sha512-WWmC3lnIwOTPvkKu55w4DUY8Ehlzf3nU98bY0QtIzkqxkAOZU5m+lvgC/JxO5FyGiA57j9FLMIf0LsWkjARj7g==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
+
+"@jimp/plugins@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/plugins/-/plugins-0.9.8.tgz#5279dfe22d0d27633f4201ab36103e587b32eb85"
+  integrity sha512-tD+cxS9SuEZaQ1hhAkNKw9TkUAqfoBAhdWPBrEZDr/GvGPrvJR4pYmmpSYhc5IZmMbXfQayHTTGqjj8D18bToA==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/plugin-blit" "^0.9.8"
+    "@jimp/plugin-blur" "^0.9.8"
+    "@jimp/plugin-circle" "^0.9.8"
+    "@jimp/plugin-color" "^0.9.8"
+    "@jimp/plugin-contain" "^0.9.8"
+    "@jimp/plugin-cover" "^0.9.8"
+    "@jimp/plugin-crop" "^0.9.8"
+    "@jimp/plugin-displace" "^0.9.8"
+    "@jimp/plugin-dither" "^0.9.8"
+    "@jimp/plugin-fisheye" "^0.9.8"
+    "@jimp/plugin-flip" "^0.9.8"
+    "@jimp/plugin-gaussian" "^0.9.8"
+    "@jimp/plugin-invert" "^0.9.8"
+    "@jimp/plugin-mask" "^0.9.8"
+    "@jimp/plugin-normalize" "^0.9.8"
+    "@jimp/plugin-print" "^0.9.8"
+    "@jimp/plugin-resize" "^0.9.8"
+    "@jimp/plugin-rotate" "^0.9.8"
+    "@jimp/plugin-scale" "^0.9.8"
+    "@jimp/plugin-shadow" "^0.9.8"
+    "@jimp/plugin-threshold" "^0.9.8"
+    core-js "^3.4.1"
     timm "^1.6.1"
 
-"@jimp/png@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/png/-/png-0.6.8.tgz#ee06cf078b381137ec7206c4bb1b4cfcbe15ca6f"
-  integrity sha512-JHHg/BZ7KDtHQrcG+a7fztw45rdf7okL/YwkN4qU5FH7Fcrp41nX5QnRviDtD9hN+GaNC7kvjvcqRAxW25qjew==
+"@jimp/png@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/png/-/png-0.9.8.tgz#f88dacc9b9da1c2ea8e91026a9530d0fb45c4409"
+  integrity sha512-9CqR8d40zQCDhbnXHqcwkAMnvlV0vk9xSyE6LHjkYHS7x18Unsz5txQdsaEkEcXxCrOQSoWyITfLezlrWXRJAA==
   dependencies:
-    "@jimp/utils" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/utils" "^0.9.8"
+    core-js "^3.4.1"
     pngjs "^3.3.3"
 
-"@jimp/tiff@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/tiff/-/tiff-0.6.8.tgz#79bd22ed435edbe29d02a2c8c9bf829f988ebacc"
-  integrity sha512-iWHbxd+0IKWdJyJ0HhoJCGYmtjPBOusz1z1HT/DnpePs/Lo3TO4d9ALXqYfUkyG74ZK5jULZ69KLtwuhuJz1bg==
+"@jimp/tiff@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/tiff/-/tiff-0.9.8.tgz#91dc3eab2f222e23414f139e917f3407caa73560"
+  integrity sha512-eMxcpJivJqMByn2dZxUHLeh6qvVs5J/52kBF3TFa3C922OJ97D9l1C1h0WKUCBqFMWzMYapQQ4vwnLgpJ5tkow==
   dependencies:
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    core-js "^3.4.1"
     utif "^2.0.1"
 
-"@jimp/types@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/types/-/types-0.6.8.tgz#4510eb635cd00b201745d70e38f791748baa7075"
-  integrity sha512-vCZ/Cp2osy69VP21XOBACfHI5HeR60Rfd4Jidj4W73UL+HrFWOtyQiJ7hlToyu1vI5mR/NsUQpzyQvz56ADm5A==
-  dependencies:
-    "@jimp/bmp" "^0.6.8"
-    "@jimp/gif" "^0.6.8"
-    "@jimp/jpeg" "^0.6.8"
-    "@jimp/png" "^0.6.8"
-    "@jimp/tiff" "^0.6.8"
-    core-js "^2.5.7"
+"@jimp/types@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/types/-/types-0.9.8.tgz#46980a4a7bfcadf2f0484d187c32b4e7d6d61b8e"
+  integrity sha512-H5y/uqt0lqJ/ZN8pWqFG+pv8jPAppMKkTMByuC8YBIjWSsornwv44hjiWl93sbYhduLZY8ubz/CbX9jH2X6EwA==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@jimp/bmp" "^0.9.8"
+    "@jimp/gif" "^0.9.8"
+    "@jimp/jpeg" "^0.9.8"
+    "@jimp/png" "^0.9.8"
+    "@jimp/tiff" "^0.9.8"
+    core-js "^3.4.1"
     timm "^1.6.1"
 
-"@jimp/utils@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@jimp/utils/-/utils-0.6.8.tgz#09f794945631173567aa50f72ac28170de58a63d"
-  integrity sha512-7RDfxQ2C/rarNG9iso5vmnKQbcvlQjBIlF/p7/uYj72WeZgVCB+5t1fFBKJSU4WhniHX4jUMijK+wYGE3Y3bGw==
+"@jimp/utils@^0.9.8":
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/@jimp/utils/-/utils-0.9.8.tgz#6a6f47158ec6b424f03df0f55f0baff5b4b5e096"
+  integrity sha512-UK0Fu0eevQlpRXq5ff4o/71HJlpX9wJMddJjMYg9vUqCCl8ZnumRAljfShHFhGyO+Vc9IzN6dd8Y5JZZTp1KOw==
   dependencies:
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    core-js "^3.4.1"
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"
@@ -2003,10 +2070,10 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
-"@types/reach__router@^1.3.0":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.3.1.tgz#ca8b431acb12bb897d2b806f6fdd815f056d6d02"
-  integrity sha512-E51ntVeunnxofXmOoPFiOvElHWf+jBEs3B56gGx7XhPHOkJdjWxWDY4V1AsUiwhtOCXPM7atFy30wj7glyv2Fg==
+"@types/reach__router@^1.3.3":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.3.4.tgz#98ef393d06f59d296b5c021ba94b94e5fc463245"
+  integrity sha512-DZgYfxUIlVSjvf0AvBbYNbpXLrTFNNpU1HrvCRbnMtx3nvGUUWC1/zlAe4dD4FCPFtc+LQuIPEsDiTb0zQkthg==
   dependencies:
     "@types/history" "*"
     "@types/react" "*"
@@ -4429,11 +4496,16 @@ core-js-pure@^3.0.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.4.tgz#4bf1ba866e25814f149d4e9aaa08c36173506e3a"
   integrity sha512-epIhRLkXdgv32xIUFaaAry2wdxZYBi6bgM7cB136dzzXXa+dFyRLTZeLUJxnd8ShrmyVXBub63n2NHo2JAt8Cw==
 
-core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.7, core-js@^2.6.11, core-js@^2.6.5:
+core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.11, core-js@^2.6.5:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^3.4.1:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
+  integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -6399,7 +6471,7 @@ fd-slicer@^1.1.0, fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
-fetch-retry@^3.0.1:
+fetch-retry@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/fetch-retry/-/fetch-retry-3.1.0.tgz#53a25652adf56def526f9b6f6d749a5bebffd319"
   integrity sha512-pHCYCq7g854KkebphR3tKb4M7TJK91ZI0K2BU82cWv+vNkFQn0PZZFrQd/mL+Ra/mj2HLZNvzkTRjPEq2Dh/Bg==
@@ -6804,10 +6876,10 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-gatsby-cli@^2.11.1:
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.11.1.tgz#d6fddf35bf36e1d9d90ca559be60f85e716d8b1e"
-  integrity sha512-lr1yIt68xWaOjYg1bbDpo3gj4HhRaNuZ/g0GqdR0hD7PlT1xx9ISmcrYQyEURZCy1ZsRTPotVv1DsInveBnEaQ==
+gatsby-cli@^2.11.5:
+  version "2.11.5"
+  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.11.5.tgz#4020880414ea33647a286066bf8f1707d629b3db"
+  integrity sha512-yAvyplWx19dU5gYdWJETEMywbNTtL9HntlR65cHhznKiwrr6Jyao+TsE50CmgZ/8Vv2JMF3UZFd3vFRXb+aK7w==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@babel/runtime" "^7.8.7"
@@ -6825,7 +6897,7 @@ gatsby-cli@^2.11.1:
     fs-exists-cached "^1.0.0"
     fs-extra "^8.1.0"
     gatsby-core-utils "^1.1.1"
-    gatsby-telemetry "^1.2.1"
+    gatsby-telemetry "^1.2.3"
     hosted-git-info "^3.0.4"
     is-valid-path "^0.1.1"
     lodash "^4.17.15"
@@ -6868,7 +6940,7 @@ gatsby-graphiql-explorer@^0.3.1:
   dependencies:
     "@babel/runtime" "^7.8.7"
 
-gatsby-image@^2.3.0:
+gatsby-image@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/gatsby-image/-/gatsby-image-2.3.1.tgz#6898e03a489e9b43242562d70079bd8ed10c5d99"
   integrity sha512-VCJIb2Sp7Dcql+seZ14pqP2yL8oUlLin+HNEb5u8hcn3txkZhzIW3zwPQ3UwfPvi9Em3gBsEClCR6TQSw96J8g==
@@ -6877,13 +6949,13 @@ gatsby-image@^2.3.0:
     object-fit-images "^3.2.4"
     prop-types "^15.7.2"
 
-gatsby-link@^2.3.0, gatsby-link@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-2.3.1.tgz#7c7b0d32087256735201ec58ed394e6abc6d7ae3"
-  integrity sha512-waVhJ7klcAOgAD3UjX5P3LWYCee4GwZ7jqJS7dj8tTeiumXV1NAur4gjNiUZF8w3+0HQ4uY0vBjy+TozRRVk6Q==
+gatsby-link@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-2.3.2.tgz#b0987dc63e54880afe20fa458ac6d14c2f4cc60c"
+  integrity sha512-A4aC6EEux/zumpgWnMlqcLhDq80uwzuCVrYfPVBxs/fFifVzzrMIvsPFhqw5w3l5DHC3XkxP4Y3TZq+EhypJhA==
   dependencies:
     "@babel/runtime" "^7.8.7"
-    "@types/reach__router" "^1.3.0"
+    "@types/reach__router" "^1.3.3"
     prop-types "^15.7.2"
 
 gatsby-page-utils@^0.1.1:
@@ -6900,7 +6972,7 @@ gatsby-page-utils@^0.1.1:
     lodash "^4.17.15"
     micromatch "^3.1.10"
 
-gatsby-plugin-catch-links@^2.1.26:
+gatsby-plugin-catch-links@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-2.2.1.tgz#8e546743b43e4548c4eda9d855987a8f98eb7695"
   integrity sha512-sxKYhQVh8fKcQQ6EzEuHOyWN9igNjvaVg5jGgB2b0Mft7+KgWzVkq2pNjwmP7UGMUPVsE01LLJdQFytkduSkAA==
@@ -6908,7 +6980,7 @@ gatsby-plugin-catch-links@^2.1.26:
     "@babel/runtime" "^7.8.7"
     escape-string-regexp "^1.0.5"
 
-gatsby-plugin-feed@^2.4.0:
+gatsby-plugin-feed@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-feed/-/gatsby-plugin-feed-2.4.1.tgz#a85301556e080f89a47d21d95271ff18a3b0482d"
   integrity sha512-4+vdto148cIKPJT7bI9i//opwUu6ZqO5l1WNGAGubByWPLIA47VadcC5GzMHpWVtTMZugnmfotZI8t/3iCNP3w==
@@ -6919,17 +6991,18 @@ gatsby-plugin-feed@^2.4.0:
     lodash.merge "^4.6.2"
     rss "^1.2.2"
 
-gatsby-plugin-google-analytics@^2.1.36:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-2.2.1.tgz#0dbc464dce05784ed80766bf51eba783f8970145"
-  integrity sha512-32RPqf+CRaaYlNDEx41zUM+xTwmE3U7SdRf0X3Wfs40TyfbZVsLD6tuOeRecJHlMiSZRAb9gLQORrV1/Lx3Cqg==
+gatsby-plugin-google-analytics@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-2.2.2.tgz#b4d2a10e1863bb4c92084a1778c4a2aab53292f5"
+  integrity sha512-at0eUPTyetGuPW1ceISAv58a9fwbwsLX9V5ucwKYShs98Spil/FWviukW0f1A2LUsWOGTiVJYReS7IVVw+FlIA==
   dependencies:
     "@babel/runtime" "^7.8.7"
+    minimatch "3.0.4"
 
-gatsby-plugin-manifest@^2.2.42:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.3.2.tgz#497c17a07a2fd8bee4e8b7e89535240b8d6e29c3"
-  integrity sha512-tJQbofNs41rbcZN3W3SDrAHwXc5sYaLrWB+nPc8GTjz5rXzh76uRMMgMBLBfx4DtFInXFmM3igBjW58rikWVeg==
+gatsby-plugin-manifest@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.3.3.tgz#119b9e648428a0db8979d577d2fdb20a9f3c18b7"
+  integrity sha512-lEval/fZaCqu9qlQMY38A8fuoJOpWRih3Hh0sLfM2Bt1dPlVkjDQqpHbQCfEinQA41c6JUdFAQFhdp5+G0kOwQ==
   dependencies:
     "@babel/runtime" "^7.8.7"
     gatsby-core-utils "^1.1.1"
@@ -6949,7 +7022,7 @@ gatsby-plugin-page-creator@^2.2.1:
     lodash "^4.17.15"
     micromatch "^3.1.10"
 
-gatsby-plugin-postcss@^2.2.0:
+gatsby-plugin-postcss@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-postcss/-/gatsby-plugin-postcss-2.2.1.tgz#f35a85619906be55fc14702dd83908765d6210f5"
   integrity sha512-2beffPSf0/uT+wPPRS1eSTYHqNHQEUZrM3Sm3Zvg4vty5eUa+N6vPGc8Gf2fwTkfTmtC2ISAkzb8HB9IasCLnA==
@@ -6971,10 +7044,10 @@ gatsby-plugin-sentry@^1.0.1:
   dependencies:
     "@sentry/browser" latest
 
-gatsby-plugin-sharp@^2.5.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.5.2.tgz#73a12ebfc053a940cd75e920cd3f292e0bdc3dcd"
-  integrity sha512-dWVnuOeeZhEsaYaBcctSybDzYv8wmsjZlxhFspnveMscEgO1whBW5eolBNzRLa+ooocW3wRKg0TYljLlLfHv4g==
+gatsby-plugin-sharp@^2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.5.4.tgz#255d5418fa1be510f5a2bead878a1c487f351279"
+  integrity sha512-OVAbo9B21GF3bf0BVLpe7DPm9OpLTsk6lgk9RytzU3yqJCh6NmGTINUN+VPdhnCZNcD17j4FSfMPrquusauQyw==
   dependencies:
     "@babel/runtime" "^7.8.7"
     async "^2.6.3"
@@ -6988,7 +7061,7 @@ gatsby-plugin-sharp@^2.5.2:
     imagemin-webp "^5.1.0"
     lodash "^4.17.15"
     mini-svg-data-uri "^1.1.3"
-    potrace "^2.1.2"
+    potrace "^2.1.5"
     probe-image-size "^4.1.1"
     progress "^2.0.3"
     semver "^5.7.1"
@@ -6996,7 +7069,7 @@ gatsby-plugin-sharp@^2.5.2:
     svgo "1.3.2"
     uuid "^3.4.0"
 
-gatsby-plugin-sitemap@^2.2.27:
+gatsby-plugin-sitemap@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-sitemap/-/gatsby-plugin-sitemap-2.3.1.tgz#97c746cd1f80007010e45577c8dc9630f167cdce"
   integrity sha512-v7MeRsqt2NDr+HuTfJ3coEFtFNNdBabZ6s8NBdEE9yOBYMRm0Fi28MYgXe0UtAXX3I8I/eVmv8zJP6HH0rU1jA==
@@ -7011,14 +7084,14 @@ gatsby-plugin-svgr@^2.0.2:
   resolved "https://registry.yarnpkg.com/gatsby-plugin-svgr/-/gatsby-plugin-svgr-2.0.2.tgz#22e08fb67ec63b68aca6ac3e89962af20214e2a5"
   integrity sha512-54REIMe79qFBAwpcnWHBkvEE9CKoEVkefF9rDXai0k642r91SZ4UeWFuAmsegPG+sPVub7tHfHu/2LVXK1I9kg==
 
-gatsby-plugin-twitter@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-twitter/-/gatsby-plugin-twitter-2.2.1.tgz#7f953f90a12bf9a3430641b213ab4671d5f22d7a"
-  integrity sha512-y2HvIt4LuINIX5uGFlLdnqbWoteg+Qt/OV/ub2aS412KJ76ofaTwrll+wzYOUw9n3tXWEP9KwKYZsOf7YU+QQA==
+gatsby-plugin-twitter@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-twitter/-/gatsby-plugin-twitter-2.2.2.tgz#5f809cd3739071fffbd9d78c30170981395d7f67"
+  integrity sha512-ZmUghTJ96m45Iv8fmQk/nl4lf5X82COBrPoaMNJSvlRbMWPYsn1OEUaFb95SvjUFh8qBT4045teU/9eIa59TmA==
   dependencies:
     "@babel/runtime" "^7.8.7"
 
-gatsby-plugin-typescript@^2.2.5:
+gatsby-plugin-typescript@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.3.1.tgz#fadc8004a85cf2a033f17140e482f7d72fd3bf10"
   integrity sha512-dT+YStwH1CcMk4vCtyNrqefjCqGyVInuXrVnqfOJQD+V6Wxo7gt8t+54uGdsjQJthRCz5xVGO9ylrHvOKzmU9g==
@@ -7047,7 +7120,7 @@ gatsby-react-router-scroll@^2.2.1:
     scroll-behavior "^0.9.12"
     warning "^3.0.0"
 
-gatsby-remark-autolink-headers@^2.1.24:
+gatsby-remark-autolink-headers@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-2.2.1.tgz#8ec4f0d0bbfa82185d8e9bff7c0d014329258192"
   integrity sha512-FqTq9rh9fRxdlX1V3InXSAoZQyBcZ3mI5zNiNagO+DRNZCSve3YVKTDmMZ7a7GXx5Bz7QTPBB993wk2OcRSIFg==
@@ -7058,7 +7131,7 @@ gatsby-remark-autolink-headers@^2.1.24:
     mdast-util-to-string "^1.1.0"
     unist-util-visit "^1.4.1"
 
-gatsby-remark-copy-linked-files@^2.1.37:
+gatsby-remark-copy-linked-files@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-2.2.1.tgz#1e95420ff61f5ecb1c79dc8d0ec2ce2ac0aa3226"
   integrity sha512-xTy52n0K+fF4aXCNYkpH1HdhYy47GwLG2tE5H+xIisyEQiCr5XA555yQdS0U4MRtDZEyfX4TB+XTwaNhOgTPgw==
@@ -7084,15 +7157,15 @@ gatsby-remark-embed-gist@^1.1.9:
     request "^2.88.0"
     request-promise "^4.2.4"
 
-gatsby-remark-embedder@^1.14.0:
-  version "1.16.0"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-embedder/-/gatsby-remark-embedder-1.16.0.tgz#0fa7524a30660b4c31b7264ecf5263f5f520a01e"
-  integrity sha512-bKIKXrnDsqLyeNRnJcaDbWwqcZSXYnkZjQJ6yOsH6UiFXFA8r8FuAgzuQgsKNZSV9ZaqL6oN2eBN2iJawy8vkg==
+gatsby-remark-embedder@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-embedder/-/gatsby-remark-embedder-2.0.0.tgz#7f897214f7f5d5e47548aef8496e5150ad019aee"
+  integrity sha512-1sMmjFIRofNKMNskJppn0EORJjJUvuRzfWJ8k8IlgdB1fQ9/ugNRVhKtZu6t2q63myu1RCmpkrgKJc4uxqQEbg==
   dependencies:
-    "@babel/runtime" "^7.7.6"
-    fetch-retry "^3.0.1"
+    "@babel/runtime" "^7.9.2"
+    fetch-retry "^3.1.0"
     node-fetch "^2.6.0"
-    unist-util-visit "^2.0.1"
+    unist-util-visit "^2.0.2"
 
 gatsby-remark-external-links@^0.0.4:
   version "0.0.4"
@@ -7104,10 +7177,10 @@ gatsby-remark-external-links@^0.0.4:
     unist-util-find "^1.0.1"
     unist-util-visit "^1.1.3"
 
-gatsby-remark-images@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-3.2.1.tgz#0f767fda76c85cb0ddca2f7ff1b82ca5b4fb716a"
-  integrity sha512-3zzLRjfTiXG4u8kFK17tZYpu3FNIirfdaOt7ZtNyfaowLcB+Ok67KCweZlHlvr/+Zvj+gvXAHWycMnMQqlK0iw==
+gatsby-remark-images@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-3.2.2.tgz#0b79255af0734d38966ff34461f111adc0a2b5dc"
+  integrity sha512-hHUjKlcy8jP3ah5MUNrrMmL6kYUljnX23z8RA9KyrbyL6D923L/b07Z19kGoaQ5nNOVOrmYnpFZCrvsnFi7h8A==
   dependencies:
     "@babel/runtime" "^7.8.7"
     chalk "^2.4.2"
@@ -7116,12 +7189,12 @@ gatsby-remark-images@^3.2.0:
     is-relative-url "^3.0.0"
     lodash "^4.17.15"
     mdast-util-definitions "^1.2.5"
-    potrace "^2.1.2"
+    potrace "^2.1.5"
     query-string "^6.11.1"
     unist-util-select "^1.5.0"
     unist-util-visit-parents "^2.1.2"
 
-gatsby-remark-prismjs@^3.3.31:
+gatsby-remark-prismjs@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.4.1.tgz#455c60f24882a6167d3035806310d462b9d4f2ec"
   integrity sha512-DPg4PjalrElXXZ3KZRiWiJiHIsXaee51nN2hCoGC2hfaXW8VdSjXhpBSSps9OWuB+QNmdTp/EP3FDiiwImjpUw==
@@ -7143,7 +7216,7 @@ gatsby-remark-relative-images@0.2.3:
     slash "^2.0.0"
     unist-util-select "^1.5.0"
 
-gatsby-remark-responsive-iframe@^2.3.0:
+gatsby-remark-responsive-iframe@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/gatsby-remark-responsive-iframe/-/gatsby-remark-responsive-iframe-2.3.1.tgz#707bb89fd7aeeaeee9923e1c31a8f94681038e6d"
   integrity sha512-c0wXTQHWeo8eOeCJLZCZ32jWsZKpEPB/npXmQF8hYmh3NurdGYJ4xSQW6IWMu+1k0w/ueSVdf8s7U7Ghq9o0cw==
@@ -7154,7 +7227,7 @@ gatsby-remark-responsive-iframe@^2.3.0:
     lodash "^4.17.15"
     unist-util-visit "^1.4.1"
 
-gatsby-remark-smartypants@^2.1.21:
+gatsby-remark-smartypants@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/gatsby-remark-smartypants/-/gatsby-remark-smartypants-2.2.1.tgz#f38eb5e6b82a34898f10a36de811b2326e70dca3"
   integrity sha512-ivKkyy4Q17uRJ7D4Xu8lg0b5QF4BHz3MiwVguJlB1wGS2nbDI1L6BNoMZ7ftx5KLVYNL3XbkvMGcsqw7Qg6wZQ==
@@ -7164,7 +7237,7 @@ gatsby-remark-smartypants@^2.1.21:
     retext-smartypants "^3.0.3"
     unist-util-visit "^1.4.1"
 
-gatsby-source-filesystem@^2.1.48:
+gatsby-source-filesystem@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-2.2.2.tgz#9ecbc9e64fedd1c30b4d21f7e148016353b2dc17"
   integrity sha512-uHHCiTp8/q9JF0Yr14Q5aJZ07jUJSV6HJSnrSVnEIF4PfRQkVJG5FHQULmxJUXWQhIoy17EGuzqVjxMsFY69QA==
@@ -7185,10 +7258,10 @@ gatsby-source-filesystem@^2.1.48:
     valid-url "^1.0.9"
     xstate "^4.8.0"
 
-gatsby-telemetry@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/gatsby-telemetry/-/gatsby-telemetry-1.2.1.tgz#6b04db03c6070657e6fa903b5d43d89d7a86d44b"
-  integrity sha512-i5iIWQY5IF/KJYyc/IEWA00gKYlTilPwtNmv1303T1Qiz6qvf/t9GiqJEBDY4Qj59kGGucE+IMkdPh2R/KQnBg==
+gatsby-telemetry@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/gatsby-telemetry/-/gatsby-telemetry-1.2.3.tgz#0b38068bbc85a597afb7ee407fb0240997cec6ef"
+  integrity sha512-butEEIfuGAWZ9cVISrS6XVXMFPweFTDNO2Z5jj+mA1GkHlriahF4BtbVX3b4miQbQW16g2TfzNw/ztwIUfy0RQ==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@babel/runtime" "^7.8.7"
@@ -7208,7 +7281,7 @@ gatsby-telemetry@^1.2.1:
     stack-utils "1.0.2"
     uuid "3.4.0"
 
-gatsby-transformer-remark@^2.6.59:
+gatsby-transformer-remark@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-2.7.1.tgz#986871c3ca9a1b7d1c609e8f378a68d808827770"
   integrity sha512-9geE8itjePDvaa0uWmyRgi2emPt9ut420YyjaNJ1/4eZw9Yj8zAuCdancw7j1buhL0UAxgQ2YseO6+MWTHEoMw==
@@ -7235,23 +7308,23 @@ gatsby-transformer-remark@^2.6.59:
     unist-util-select "^1.5.0"
     unist-util-visit "^1.4.1"
 
-gatsby-transformer-sharp@^2.4.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.4.2.tgz#a2649d623ea8c5e42a9920d008e7b9bd64ef75b9"
-  integrity sha512-y8p2eBXEkSft411jyR3KOzzPRbjJ7i4aJzopB1lCQrYgOoxRtA/DeiAaANziRhJWoJUDa7M30iElizUy7n9Kzw==
+gatsby-transformer-sharp@^2.4.4:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.4.4.tgz#f43410bca43d8cdfee8e3f159501592569ff2a3d"
+  integrity sha512-LqaCvmpHBFiMvTmQjlogFn/3jgGOiWQxJsR/wclXlvgMAV1ffxiR6zr5OKwivuRueQ4gwn33adjCeLp3/iQtAA==
   dependencies:
     "@babel/runtime" "^7.8.7"
     bluebird "^3.7.2"
     fs-extra "^8.1.0"
-    potrace "^2.1.2"
+    potrace "^2.1.5"
     probe-image-size "^4.1.1"
     semver "^5.7.1"
     sharp "^0.25.1"
 
-gatsby@^2.20.2:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.20.3.tgz#f7d9f9ea95ec21b8c43b75aabea187b98964e71f"
-  integrity sha512-b1X5eEROxF0UxtKwbFDyLuGxTwYYKEsdlqOVfrzJCXj3pBmL3d2/YOjT/VV4dKg/Y3C/jdIQun96OoqCTZ2yeg==
+gatsby@^2.20.13:
+  version "2.20.13"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.20.13.tgz#e6b44e6e3ecf5f6a5c3e55f25f2097678a7db3a1"
+  integrity sha512-hPzmHSWhInIlY4Lg6hSrFlCxcITCsTs9QM5OhmmFtWDVY3fAr/MsVH1NVZJuY+rTFYtvk5hO284dOBMGcHtUww==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@babel/core" "^7.8.7"
@@ -7314,13 +7387,13 @@ gatsby@^2.20.2:
     flat "^4.1.0"
     fs-exists-cached "1.0.0"
     fs-extra "^8.1.0"
-    gatsby-cli "^2.11.1"
+    gatsby-cli "^2.11.5"
     gatsby-core-utils "^1.1.1"
     gatsby-graphiql-explorer "^0.3.1"
-    gatsby-link "^2.3.1"
+    gatsby-link "^2.3.2"
     gatsby-plugin-page-creator "^2.2.1"
     gatsby-react-router-scroll "^2.2.1"
-    gatsby-telemetry "^1.2.1"
+    gatsby-telemetry "^1.2.3"
     glob "^7.1.6"
     got "8.3.2"
     graphql "^14.6.0"
@@ -9816,15 +9889,16 @@ jest@^25.2.7:
     import-local "^3.0.2"
     jest-cli "^25.2.7"
 
-jimp@^0.6.4:
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/jimp/-/jimp-0.6.8.tgz#63074984337cc469cd4030946e503e7c02a18b5c"
-  integrity sha512-F7emeG7Hp61IM8VFbNvWENLTuHe0ghizWPuP4JS9ujx2r5mCVYEd/zdaz6M2M42ZdN41blxPajLWl9FXo7Mr2Q==
+jimp@^0.9.6:
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/jimp/-/jimp-0.9.8.tgz#2ee87b81b42e723ad74c73b8012f879c0abe5b04"
+  integrity sha512-DHN4apKMwLIvD/TKO9tFfPuankNuVK98vCwHm/Jv9z5cJnrd38xhi+4I7IAGmDU3jIDlrEVhzTkFH1Ymv5yTQQ==
   dependencies:
-    "@jimp/custom" "^0.6.8"
-    "@jimp/plugins" "^0.6.8"
-    "@jimp/types" "^0.6.8"
-    core-js "^2.5.7"
+    "@babel/runtime" "^7.7.2"
+    "@jimp/custom" "^0.9.8"
+    "@jimp/plugins" "^0.9.8"
+    "@jimp/types" "^0.9.8"
+    core-js "^3.4.1"
     regenerator-runtime "^0.13.3"
 
 jmespath@0.15.0:
@@ -11059,11 +11133,6 @@ minimist-options@^4.0.1:
     arrify "^1.0.1"
     is-plain-obj "^1.1.0"
 
-minimist@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
-  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
-
 minimist@1.1.x:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.1.3.tgz#3bedfd91a92d39016fcfaa1c681e8faa1a1efda8"
@@ -11131,13 +11200,6 @@ mkdirp@0.3.0:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
   integrity sha1-G79asbqCevI1dRQ0kEJkVfSB/h4=
 
-mkdirp@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
-  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
-  dependencies:
-    minimist "0.0.8"
-
 mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.4.tgz#fd01504a6797ec5c9be81ff43d204961ed64a512"
@@ -12948,12 +13010,12 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.1
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-potrace@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/potrace/-/potrace-2.1.2.tgz#61473a326be1e734abac6d14d54e1880eed35471"
-  integrity sha512-dNcUBapRgPkiv3j+70+rSlf0whtJJqEszC04g9a/Ll3p6kA7QVRV1Vsi3jg22voJr2jA9x9fjPbz5MdD+ngbUg==
+potrace@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/potrace/-/potrace-2.1.5.tgz#4d0c284ad5af39b74affe7a738b26bb009000b91"
+  integrity sha512-huAWS0flSZttRm+WA5IGSFxHLXgVd9JCGU8+heDD3fAvFmW1Wf1Y7qq3Un2hH2xBNMwDY7vP1PYA0VQUh7CC+Q==
   dependencies:
-    jimp "^0.6.4"
+    jimp "^0.9.6"
 
 prebuild-install@^5.3.3:
   version "5.3.3"
@@ -16458,7 +16520,7 @@ unist-util-visit-parents@^3.0.0:
     "@types/unist" "^2.0.0"
     unist-util-is "^4.0.0"
 
-unist-util-visit@2.0.2, unist-util-visit@^2.0.0, unist-util-visit@^2.0.1:
+unist-util-visit@2.0.2, unist-util-visit@^2.0.0, unist-util-visit@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.2.tgz#3843782a517de3d2357b4c193b24af2d9366afb7"
   integrity sha512-HoHNhGnKj6y+Sq+7ASo2zpVdfdRifhTgX2KTU3B/sO/TTlZchp7E3S4vjRzDJ7L60KmrCPsQkVK3lEF3cz36XQ==

From 5c00c973f7f74b585aeb53cf282da6bbb94c52cb Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 17:08:46 +0300
Subject: [PATCH 32/51] Update remaining packages

---
 package.json |  18 ++---
 yarn.lock    | 215 +++++++++++++++++++++++++++++++--------------------
 2 files changed, 139 insertions(+), 94 deletions(-)

diff --git a/package.json b/package.json
index c21fbddf40..0130b7f288 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "classnames": "^2.2.6",
     "color": "^3.1.2",
     "compression": "^1.7.4",
-    "date-fns": "^2.8.1",
+    "date-fns": "^2.11.1",
     "docsearch.js": "^2.6.3",
     "ease-component": "^1.0.0",
     "express": "^4.17.1",
@@ -48,7 +48,7 @@
     "gatsby": "^2.20.13",
     "gatsby-image": "^2.3.1",
     "gatsby-link": "^2.3.2",
-    "github-markdown-css": "^3.0.1",
+    "github-markdown-css": "^4.0.0",
     "iso-url": "^0.4.7",
     "isomorphic-fetch": "^2.2.1",
     "lodash.includes": "^4.3.0",
@@ -58,8 +58,8 @@
     "lodash.topairs": "^4.3.0",
     "nanoid": "^3.0.2",
     "node-cache": "^5.1.0",
-    "perfect-scrollbar": "^1.4.0",
-    "prismjs": "^1.19.0",
+    "perfect-scrollbar": "^1.5.0",
+    "prismjs": "^1.20.0",
     "promise-polyfill": "^8.1.3",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
@@ -73,7 +73,6 @@
     "react-slick": "^0.25.2",
     "react-use": "^14.0.0",
     "rehype-react": "^5.0.1",
-    "request": "^2.88.0",
     "reset-css": "^5.0.1",
     "s3-client": "^4.4.2",
     "scroll": "^3.0.1",
@@ -98,10 +97,9 @@
     "@types/react-popover": "^0.5.3",
     "@types/react-slick": "^0.23.4",
     "@types/rehype-react": "^4.0.0",
-    "@types/vfile-message": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
-    "autoprefixer": "^9.7.4",
+    "autoprefixer": "^9.7.6",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^25.2.6",
     "babel-plugin-transform-define": "^2.0.0",
@@ -149,9 +147,9 @@
     "postcss-nested": "^4.2.1",
     "prettier": "^2.0.4",
     "rehype-parse": "^6.0.2",
-    "rehype-stringify": "^6.0.1",
-    "remark": "^11.0.2",
-    "remark-html": "^10.0.0",
+    "rehype-stringify": "^7.0.0",
+    "remark": "^12.0.0",
+    "remark-html": "^11.0.1",
     "stylelint": "^13.3.0",
     "stylelint-config-standard": "^20.0.0",
     "typescript": "^3.8.3"
diff --git a/yarn.lock b/yarn.lock
index 0ca572a195..79d20dc39f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2166,14 +2166,6 @@
   dependencies:
     vfile-message "*"
 
-"@types/vfile-message@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/vfile-message/-/vfile-message-1.0.1.tgz#e1e9895cc6b36c462d4244e64e6d0b6eaf65355a"
-  integrity sha512-mlGER3Aqmq7bqR1tTTIVHq8KSAFFRyGbrxuM8C/H82g6k7r2fS+IMEkIu3D7JHzG10NvPdR8DNx0jr0pwpp4dA==
-  dependencies:
-    "@types/node" "*"
-    "@types/unist" "*"
-
 "@types/vfile@^3.0.0":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@types/vfile/-/vfile-3.0.2.tgz#19c18cd232df11ce6fa6ad80259bc86c366b09b9"
@@ -2943,7 +2935,7 @@ autoprefixer@^9.7.4:
     postcss "^7.0.27"
     postcss-value-parser "^4.0.3"
 
-autoprefixer@^9.7.5:
+autoprefixer@^9.7.5, autoprefixer@^9.7.6:
   version "9.7.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.6.tgz#63ac5bbc0ce7934e6997207d5bb00d68fa8293a4"
   integrity sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==
@@ -4916,11 +4908,16 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
-date-fns@^2.11.0, date-fns@^2.8.1:
+date-fns@^2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.11.0.tgz#ec2b44977465b9dcb370021d5e6c019b19f36d06"
   integrity sha512-8P1cDi8ebZyDxUyUprBXwidoEtiQAawYPGvpfb+Dg0G6JrQ+VozwOmm91xYC0vAv1+0VmLehEPb+isg4BGUFfA==
 
+date-fns@^2.11.1:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.11.1.tgz#197b8be1bbf5c5e6fe8bea817f0fe111820e7a12"
+  integrity sha512-3RdUoinZ43URd2MJcquzBbDQo+J87cSzB8NkXdZiN5ia1UNyep0oCyitfiL88+R7clGTeq/RniXAc16gWyAu1w==
+
 debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -7576,10 +7573,10 @@ github-from-package@0.0.0:
   resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
   integrity sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=
 
-github-markdown-css@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/github-markdown-css/-/github-markdown-css-3.0.1.tgz#d08db1060d2e182025e0d07d547cfe2afed30205"
-  integrity sha512-9G5CIPsHoyk5ObDsb/H4KTi23J8KE1oDd4KYU51qwqeM+lKWAiO7abpSgCkyWswgmSKBiuE7/4f8xUz7f2qAiQ==
+github-markdown-css@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/github-markdown-css/-/github-markdown-css-4.0.0.tgz#be9f4caf7a389228d4c368336260ffc909061f35"
+  integrity sha512-mH0bcIKv4XAN0mQVokfTdKo2OD5K8WJE9+lbMdM32/q0Ie5tXgVN/2o+zvToRMxSTUuiTRcLg5hzkFfOyBYreg==
 
 github-slugger@^1.2.1, github-slugger@^1.3.0:
   version "1.3.0"
@@ -8187,21 +8184,21 @@ hast-util-to-html@^4.0.1:
     unist-util-is "^2.0.0"
     xtend "^4.0.1"
 
-hast-util-to-html@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-6.1.0.tgz#86bcd19c3bd46af456984f8f34db16298c2b10b0"
-  integrity sha512-IlC+LG2HGv0Y8js3wqdhg9O2sO4iVpRDbHOPwXd7qgeagpGsnY49i8yyazwqS35RA35WCzrBQE/n0M6GG/ewxA==
+hast-util-to-html@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-7.1.0.tgz#aa580e7b846438ee1e7af2bee6a650062eb0c3ec"
+  integrity sha512-RjvNL41bYnxTOA+s8W8mjhVxH1J0dXza9hlakVHbghFsfj3JO/lsq3DsR/Md2HbynS8y89/LA7k0lhtnYJ1Yzw==
   dependencies:
     ccount "^1.0.0"
-    comma-separated-tokens "^1.0.1"
+    comma-separated-tokens "^1.0.0"
     hast-util-is-element "^1.0.0"
     hast-util-whitespace "^1.0.0"
     html-void-elements "^1.0.0"
-    property-information "^5.2.0"
+    property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
-    stringify-entities "^2.0.0"
-    unist-util-is "^3.0.0"
-    xtend "^4.0.1"
+    stringify-entities "^3.0.0"
+    unist-util-is "^4.0.0"
+    xtend "^4.0.0"
 
 hast-util-to-parse5@^4.0.1:
   version "4.0.1"
@@ -10743,6 +10740,13 @@ markdown-table@^1.1.0:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
   integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
 
+markdown-table@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-2.0.0.tgz#194a90ced26d31fe753d8b9434430214c011865b"
+  integrity sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==
+  dependencies:
+    repeat-string "^1.0.0"
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -10787,6 +10791,13 @@ mdast-util-compact@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
+mdast-util-compact@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz#cabc69a2f43103628326f35b1acf735d55c99490"
+  integrity sha512-7GlnT24gEwDrdAwEHrU4Vv5lLWrEer4KOkAiKT9nYstsTad7Oc1TwqT2zIMKRdZF7cTuaf+GA1E4Kv7jJh8mPA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
 mdast-util-definitions@^1.2.0, mdast-util-definitions@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-1.2.5.tgz#3fe622a4171c774ebd06f11e9f8af7ec53ea5c74"
@@ -10794,6 +10805,13 @@ mdast-util-definitions@^1.2.0, mdast-util-definitions@^1.2.5:
   dependencies:
     unist-util-visit "^1.0.0"
 
+mdast-util-definitions@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-2.0.1.tgz#2c931d8665a96670639f17f98e32c3afcfee25f3"
+  integrity sha512-Co+DQ6oZlUzvUR7JCpP249PcexxygiaKk9axJh+eRzHDZJk2julbIdKB4PXHVxdBuLzvJ1Izb+YDpj2deGMOuA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
 mdast-util-to-hast@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-3.0.4.tgz#132001b266031192348d3366a6b011f28e54dc40"
@@ -10811,22 +10829,20 @@ mdast-util-to-hast@^3.0.4:
     unist-util-visit "^1.1.0"
     xtend "^4.0.1"
 
-mdast-util-to-hast@^6.0.0:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-6.0.2.tgz#24a8791b7c624118637d70f03a9d29116e4311cf"
-  integrity sha512-GjcOimC9qHI0yNFAQdBesrZXzUkRdFleQlcoU8+TVNfDW6oLUazUx8MgUoTaUyCJzBOnE5AOgqhpURrSlf0QwQ==
+mdast-util-to-hast@^8.0.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-8.2.0.tgz#adf9f824defcd382e53dd7bace4282a45602ac67"
+  integrity sha512-WjH/KXtqU66XyTJQ7tg7sjvTw1OQcVV0hKdFh3BgHPwZ96fSBCQ/NitEHsN70Mmnggt+5eUUC7pCnK+2qGQnCA==
   dependencies:
     collapse-white-space "^1.0.0"
     detab "^2.0.0"
-    mdast-util-definitions "^1.2.0"
-    mdurl "^1.0.1"
-    trim "0.0.1"
+    mdast-util-definitions "^2.0.0"
+    mdurl "^1.0.0"
     trim-lines "^1.0.0"
-    unist-builder "^1.0.1"
-    unist-util-generated "^1.1.0"
+    unist-builder "^2.0.0"
+    unist-util-generated "^1.0.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.0"
-    xtend "^4.0.1"
+    unist-util-visit "^2.0.0"
 
 mdast-util-to-nlcst@^3.2.0:
   version "3.2.3"
@@ -10866,7 +10882,7 @@ mdn-data@2.0.6:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.6.tgz#852dc60fcaa5daa2e8cf6c9189c440ed3e042978"
   integrity sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==
 
-mdurl@^1.0.1:
+mdurl@^1.0.0, mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
@@ -12129,6 +12145,18 @@ parse-entities@^1.0.2, parse-entities@^1.1.0:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-headers@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/parse-headers/-/parse-headers-2.0.3.tgz#5e8e7512383d140ba02f0c7aa9f49b4399c92515"
@@ -12351,7 +12379,7 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 
-perfect-scrollbar@^1.4.0:
+perfect-scrollbar@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz#821d224ed8ff61990c23f26db63048cdc75b6b83"
   integrity sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA==
@@ -13088,10 +13116,10 @@ pretty-format@^25.2.6:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
-prismjs@^1.19.0:
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.19.0.tgz#713afbd45c3baca4b321569f2df39e17e729d4dc"
-  integrity sha512-IVFtbW9mCWm9eOIaEkNyo2Vl4NnEifis2GQ7/MLRG5TQe6t+4Sj9J5QWI9i3v+SS43uZBlCAOn+zYTVYQcPXJw==
+prismjs@^1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03"
+  integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==
   optionalDependencies:
     clipboard "^2.0.0"
 
@@ -13166,7 +13194,7 @@ property-information@^4.0.0:
   dependencies:
     xtend "^4.0.1"
 
-property-information@^5.0.0, property-information@^5.2.0:
+property-information@^5.0.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.4.0.tgz#16e08f13f4e5c4a7be2e4ec431c01c4f8dba869a"
   integrity sha512-nmMWAm/3vKFGmmOWOcdLjgq/Hlxa+hsuR/px1Lp/UGEyc5A22A6l78Shc2C0E71sPmAqglni+HrS7L7VJ7AUCA==
@@ -13885,22 +13913,22 @@ rehype-react@^5.0.1:
     "@mapbox/hast-util-table-cell-style" "^0.1.3"
     hast-to-hyperscript "^8.0.0"
 
-rehype-stringify@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-6.0.1.tgz#b6aa9f84d5276c5d247c62fc1ea15983a35a4575"
-  integrity sha512-JfEPRDD4DiG7jet4md7sY07v6ACeb2x+9HWQtRPm2iA6/ic31hCv1SNBUtpolJASxQ/D8gicXiviW4TJKEMPKQ==
+rehype-stringify@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-7.0.0.tgz#abbb172b3a2784a5739394846f6092eefda0ae1f"
+  integrity sha512-u3dQI7mIWN2X1H0MBFPva425HbkXgB+M39C9SM5leUS2kh5hHUn2SxQs2c2yZN5eIHipoLMojC0NP5e8fptxvQ==
   dependencies:
-    hast-util-to-html "^6.0.0"
+    hast-util-to-html "^7.0.0"
     xtend "^4.0.0"
 
-remark-html@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-10.0.0.tgz#927047c16845ec47e2c361e1d7f7c32ab72c63c7"
-  integrity sha512-TbSQuedRFjAhXSk1NAbfaTqDK0jKAjfgn82D2ZYFFT8XpJ80uwXc8yVwK/Tl2eqboTMPxzNzCIss4kIucE5M8w==
+remark-html@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-11.0.1.tgz#fe12671be9dd67e75dd90dfb4d78c9d42f2e11ec"
+  integrity sha512-bz7tSu9kDbaRNaiqQWrgXITkqJsZXoc2fjau+ms7WA4vflDoB+xMdY0QfNhUpGgmAv4SdDD1m+3BxWRHLizmiQ==
   dependencies:
     hast-util-sanitize "^2.0.0"
-    hast-util-to-html "^6.0.0"
-    mdast-util-to-hast "^6.0.0"
+    hast-util-to-html "^7.0.0"
+    mdast-util-to-hast "^8.0.0"
     xtend "^4.0.1"
 
 remark-parse@^1.1.0:
@@ -13960,25 +13988,26 @@ remark-parse@^6.0.0, remark-parse@^6.0.3:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
-remark-parse@^7.0.0:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-7.0.2.tgz#41e7170d9c1d96c3d32cf1109600a9ed50dba7cf"
-  integrity sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==
+remark-parse@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.0.tgz#0aaae4b49e607ee7e972a6cf688026f46bbf6d1a"
+  integrity sha512-Ck14G1Ns/GEPXhSw6m1Uv28kMtVk63e59NyL+QlhBBwBdIUXROM6MPfBehPhW6TW2d73batMdZsKwuxl5i3tEA==
   dependencies:
+    ccount "^1.0.0"
     collapse-white-space "^1.0.2"
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
     is-whitespace-character "^1.0.0"
     is-word-character "^1.0.0"
     markdown-escapes "^1.0.0"
-    parse-entities "^1.1.0"
+    parse-entities "^2.0.0"
     repeat-string "^1.5.4"
     state-toggle "^1.0.0"
     trim "0.0.1"
     trim-trailing-lines "^1.0.0"
     unherit "^1.0.4"
-    unist-util-remove-position "^1.0.0"
-    vfile-location "^2.0.0"
+    unist-util-remove-position "^2.0.0"
+    vfile-location "^3.0.0"
     xtend "^4.0.1"
 
 remark-retext@^3.1.3:
@@ -14022,10 +14051,10 @@ remark-stringify@^1.1.0:
     stringify-entities "^1.0.1"
     unherit "^1.0.4"
 
-remark-stringify@^7.0.0:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-7.0.4.tgz#3de1e3f93853288d3407da1cd44f2212321dd548"
-  integrity sha512-qck+8NeA1D0utk1ttKcWAoHRrJxERYQzkHDyn+pF5Z4whX1ug98uCNPPSeFgLSaNERRxnD6oxIug6DzZQth6Pg==
+remark-stringify@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-8.0.0.tgz#33423ab8bf3076fb197f4cf582aaaf866b531625"
+  integrity sha512-cABVYVloFH+2ZI5bdqzoOmemcz/ZuhQSH6W6ZNYnLojAUUn3xtX7u+6BpnYp35qHoGr2NFBsERV14t4vCIeW8w==
   dependencies:
     ccount "^1.0.0"
     is-alphanumeric "^1.0.0"
@@ -14033,12 +14062,12 @@ remark-stringify@^7.0.0:
     is-whitespace-character "^1.0.0"
     longest-streak "^2.0.1"
     markdown-escapes "^1.0.0"
-    markdown-table "^1.1.0"
-    mdast-util-compact "^1.0.0"
-    parse-entities "^1.0.2"
+    markdown-table "^2.0.0"
+    mdast-util-compact "^2.0.0"
+    parse-entities "^2.0.0"
     repeat-string "^1.5.4"
     state-toggle "^1.0.0"
-    stringify-entities "^2.0.0"
+    stringify-entities "^3.0.0"
     unherit "^1.0.4"
     xtend "^4.0.1"
 
@@ -14051,14 +14080,14 @@ remark@^10.0.1:
     remark-stringify "^6.0.0"
     unified "^7.0.0"
 
-remark@^11.0.2:
-  version "11.0.2"
-  resolved "https://registry.yarnpkg.com/remark/-/remark-11.0.2.tgz#12b90ea100ac3362b1976fa87a6e4e0ab5968202"
-  integrity sha512-bh+eJgn8wgmbHmIBOuwJFdTVRVpl3fcVP6HxmpPWO0ULGP9Qkh6INJh0N5Uy7GqlV7DQYGoqaKiEIpM5LLvJ8w==
+remark@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-12.0.0.tgz#d1c145c07341c9232f93b2f8539d56da15a2548c"
+  integrity sha512-oX4lMIS0csgk8AEbzY0h2jdR0ngiCHOpwwpxjmRa5TqAkeknY+tkhjRJGZqnCmvyuWh55/0SW5WY3R3nn3PH9A==
   dependencies:
-    remark-parse "^7.0.0"
-    remark-stringify "^7.0.0"
-    unified "^8.2.0"
+    remark-parse "^8.0.0"
+    remark-stringify "^8.0.0"
+    unified "^9.0.0"
 
 remark@^5.0.1:
   version "5.1.0"
@@ -14090,7 +14119,7 @@ repeat-element@^1.1.2:
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
   integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 
-repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
+repeat-string@^1.0.0, repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
@@ -15480,10 +15509,10 @@ stringify-entities@^1.0.1:
     is-alphanumerical "^1.0.0"
     is-hexadecimal "^1.0.0"
 
-stringify-entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-2.0.0.tgz#fa7ca6614b355fb6c28448140a20c4ede7462827"
-  integrity sha512-fqqhZzXyAM6pGD9lky/GOPq6V4X0SeTAFBl0iXb/BzOegl40gpf/bV3QQP7zULNYvjr6+Dx8SCaDULjVoOru0A==
+stringify-entities@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.0.0.tgz#455abe501f8b7859ba5726a25a8872333c65b0a7"
+  integrity sha512-h7NJJIssprqlyjHT2eQt2W1F+MCcNmwPGlKb0bWEdET/3N44QN3QbUF/ueKCgAssyKRZ3Br9rQ7FcXjHr0qLHw==
   dependencies:
     character-entities-html4 "^1.0.0"
     character-entities-legacy "^1.0.0"
@@ -16353,13 +16382,14 @@ unified@^7.0.0:
     vfile "^3.0.0"
     x-is-string "^0.1.0"
 
-unified@^8.2.0:
-  version "8.4.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-8.4.2.tgz#13ad58b4a437faa2751a4a4c6a16f680c500fff1"
-  integrity sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==
+unified@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.0.0.tgz#12b099f97ee8b36792dbad13d278ee2f696eed1d"
+  integrity sha512-ssFo33gljU3PdlWLjNp15Inqb77d6JnJSfyplGJPT/a+fNRNyCBeveBAYJdO5khKdF6WVHa/yYCC7Xl6BDwZUQ==
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"
+    is-buffer "^2.0.0"
     is-plain-obj "^2.0.0"
     trough "^1.0.0"
     vfile "^4.0.0"
@@ -16419,6 +16449,11 @@ unist-builder@^1.0.1:
   dependencies:
     object-assign "^4.1.0"
 
+unist-builder@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-2.0.3.tgz#77648711b5d86af0942f334397a33c5e91516436"
+  integrity sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==
+
 unist-util-find-all-after@^1.0.2:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-1.0.5.tgz#5751a8608834f41d117ad9c577770c5f2f1b2899"
@@ -16435,7 +16470,7 @@ unist-util-find@^1.0.1:
     remark "^5.0.1"
     unist-util-visit "^1.1.0"
 
-unist-util-generated@^1.1.0:
+unist-util-generated@^1.0.0, unist-util-generated@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.5.tgz#1e903e68467931ebfaea386dae9ea253628acd42"
   integrity sha512-1TC+NxQa4N9pNdayCYA1EGUOCAO0Le3fVp7Jzns6lnua/mYgwHo0tz5WUAfrdpNch1RZLHc61VZ1SDgrtNXLSw==
@@ -16474,6 +16509,13 @@ unist-util-remove-position@^1.0.0, unist-util-remove-position@^1.1.4:
   dependencies:
     unist-util-visit "^1.1.0"
 
+unist-util-remove-position@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz#5d19ca79fdba712301999b2b73553ca8f3b352cc"
+  integrity sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
 unist-util-select@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/unist-util-select/-/unist-util-select-1.5.0.tgz#a93c2be8c0f653827803b81331adec2aa24cd933"
@@ -16795,6 +16837,11 @@ vfile-location@^2.0.0:
   resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.6.tgz#8a274f39411b8719ea5728802e10d9e0dff1519e"
   integrity sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==
 
+vfile-location@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.0.1.tgz#d78677c3546de0f7cd977544c367266764d31bb3"
+  integrity sha512-yYBO06eeN/Ki6Kh1QAkgzYpWT1d3Qln+ZCtSbJqFExPl1S3y2qqotJQXoh6qEvl/jDlgpUJolBn3PItVnnZRqQ==
+
 vfile-message@*, vfile-message@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.3.tgz#0dd4f6879fb240a8099b22bd3755536c92e59ba5"

From f3a7892959292f56880e64752f25e5028ec966d2 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Tue, 7 Apr 2020 18:03:56 +0300
Subject: [PATCH 33/51] Another try to fix hash navigation

---
 src/components/MainLayout/index.tsx |  4 +++-
 src/components/Page/utils.ts        | 11 +++++++----
 src/utils/front/images.ts           |  2 +-
 src/utils/front/scroll.ts           |  4 ++--
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/MainLayout/index.tsx b/src/components/MainLayout/index.tsx
index 0e7eb5456a..7d3d369459 100644
--- a/src/components/MainLayout/index.tsx
+++ b/src/components/MainLayout/index.tsx
@@ -46,7 +46,9 @@ const MainLayout: LayoutComponent = ({
     <>
       <LayoutHeader modifiers={modifiers} />
       <HamburgerMenu />
-      {children}
+      <div id="layoutContent" className={styles.pageContent}>
+        {children}
+      </div>
       <LayoutFooter modifiers={modifiers} />
     </>
   )
diff --git a/src/components/Page/utils.ts b/src/components/Page/utils.ts
index 41295459b3..a98d22a924 100644
--- a/src/components/Page/utils.ts
+++ b/src/components/Page/utils.ts
@@ -15,10 +15,13 @@ export const useAnchorNavigation = () => {
       const node = document.querySelector(location.hash)
 
       if (node) {
-        scrollIntoLayout(node)
-        allImagesLoadedInContainer(document.body).then(() =>
-          scrollIntoLayout(node)
-        )
+        const contentRoot = document.getElementById('layoutContent')
+
+        if (contentRoot) {
+          allImagesLoadedInContainer(contentRoot).then(() =>
+            scrollIntoLayout(node)
+          )
+        }
       }
     } else {
       document.documentElement.scrollTop = 0
diff --git a/src/utils/front/images.ts b/src/utils/front/images.ts
index 809fc4077d..87a80072b2 100644
--- a/src/utils/front/images.ts
+++ b/src/utils/front/images.ts
@@ -1,7 +1,7 @@
 import Promise from 'promise-polyfill'
 
 export const getImages = (node: Element) =>
-  Array.from(node.querySelectorAll('img'))
+  Array.from(node.querySelectorAll('img')).filter((imgNode) => !!imgNode.src)
 
 export const imageLoaded = (imgNode: HTMLImageElement) => {
   if (imgNode.complete && imgNode.naturalWidth !== 0) {
diff --git a/src/utils/front/scroll.ts b/src/utils/front/scroll.ts
index 70479fa5d4..689d13d578 100644
--- a/src/utils/front/scroll.ts
+++ b/src/utils/front/scroll.ts
@@ -47,10 +47,10 @@ export const scrollIntoLayout = (
   const nodeOffset = node.getBoundingClientRect()
   const position = htmlNode.scrollTop + nodeOffset.top + (opts?.offset || 0)
   const headerHeight = getHeaderHeightAt(position)
-  const scrollTo = position - headerHeight
+  const scrollTo = Math.floor(position - headerHeight)
 
   if (!opts?.smooth) {
-    htmlNode.scrollTop = scrollTo
+    requestAnimationFrame(() => (htmlNode.scrollTop = scrollTo))
     return
   }
 

From 5c6107bd095e92487af78761658cd3a2ada81d92 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 11:51:57 +0300
Subject: [PATCH 34/51] Make tsconfig more stricter. Remove wrong eslint rule
 and refactor all warnings

---
 .eslintrc.json                                |  9 +++---
 src/components/Blog/Post/HeroPic/index.tsx    |  4 +--
 src/components/Blog/Post/Markdown/index.tsx   | 11 ++-----
 src/components/Blog/Post/Share/index.tsx      |  4 +--
 src/components/Blog/Post/Tooltip/index.tsx    | 10 +++++--
 src/components/Community/Contribute/index.tsx |  8 ++---
 src/components/Community/Events/index.tsx     |  2 +-
 src/components/Community/Hero/index.tsx       |  2 +-
 src/components/Community/Learn/index.tsx      |  5 ++--
 src/components/Community/Meet/index.tsx       |  6 ++--
 src/components/Community/index.tsx            | 28 ++++++++---------
 .../Layout/SidebarMenu/index.tsx              |  2 +-
 .../Markdown/Tooltip/DesktopView/index.tsx    |  8 ++---
 .../Markdown/Tooltip/MobileView/index.tsx     |  8 ++---
 .../Documentation/Markdown/index.tsx          |  2 +-
 .../Documentation/RightPanel/index.tsx        |  8 ++---
 src/components/DownloadButton/index.tsx       | 11 +++----
 src/components/HamburgerIcon/index.tsx        | 18 +++++------
 src/components/HamburgerMenu/index.tsx        |  4 +--
 src/components/Home/Diagram/index.tsx         | 10 ++++---
 src/components/Home/LandingHero/index.tsx     |  2 +-
 .../Home/UseCases/CollapsibleText/index.tsx   |  4 +--
 src/components/Home/UseCases/index.tsx        | 12 ++++----
 src/components/IconSet/index.tsx              | 24 ++++++++-------
 src/components/LayoutHeader/Nav/index.tsx     | 20 ++++++-------
 src/components/Link/index.tsx                 |  2 +-
 src/components/MainLayout/index.tsx           |  2 +-
 src/components/NotFound/index.tsx             | 16 +++++-----
 src/components/Page/utils.ts                  |  6 ++--
 src/components/Support/Popover/index.tsx      |  6 ++--
 src/queries/posts.ts                          | 10 ++++++-
 src/queries/siteMeta.ts                       |  9 +++++-
 src/utils/front/api.ts                        | 30 +++++++++++++++----
 src/utils/front/customProperties.ts           |  8 ++---
 src/utils/front/ga.ts                         |  4 +--
 src/utils/front/i18n.ts                       |  4 +--
 src/utils/front/images.ts                     | 13 ++++----
 src/utils/front/isClient.ts                   |  2 +-
 src/utils/front/keyboard.ts                   |  2 +-
 src/utils/front/resources.ts                  | 10 +++++--
 src/utils/front/scroll.ts                     | 10 +++----
 tsconfig.json                                 |  9 +++++-
 42 files changed, 208 insertions(+), 157 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 5428e4df74..78130f3a78 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -28,20 +28,21 @@
       { "prefixWithI": "always" }
     ],
     "no-tabs": "error",
-    "react/prop-types": "off", // Props should be described as TS types
-    "@typescript-eslint/explicit-function-return-type": "off"
+    "react/prop-types": "off" // Props should be described as TS types
   },
   "overrides": [
     {
       "files": [
-        "src/utils/**/*.?(js|ts)",
+        "src/utils/?(node|shared)/*.?(js|ts)",
+        "src/components/PageWrapper/index.js",
         "scripts/**/*.js",
         "src/server/**/*.js",
         "plugins/**/*.js",
         "gatsby-*.js"
       ],
       "rules": {
-        "@typescript-eslint/no-var-requires": "off"
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/explicit-function-return-type": "off"
       }
     }
   ]
diff --git a/src/components/Blog/Post/HeroPic/index.tsx b/src/components/Blog/Post/HeroPic/index.tsx
index b296a4625d..f11ac66e9e 100644
--- a/src/components/Blog/Post/HeroPic/index.tsx
+++ b/src/components/Blog/Post/HeroPic/index.tsx
@@ -9,7 +9,7 @@ import {
 
 import styles from './styles.module.css'
 
-function NonStretchedImage(props: IGatsbyImageProps) {
+const NonStretchedImage: React.SFC<IGatsbyImageProps> = props => {
   let normalizedProps = props
   if (props.fluid && props.fluid.presentationWidth) {
     const presetantionWidth = props.fluid?.presentationWidth
@@ -29,7 +29,7 @@ function NonStretchedImage(props: IGatsbyImageProps) {
   return <Image {...normalizedProps} />
 }
 
-function HeroPic({ pictureComment, picture }: IBlogPostHeroPic) {
+const HeroPic: React.SFC<IBlogPostHeroPic> = ({ pictureComment, picture }) => {
   return (
     <div className={styles.pictureWrapper}>
       <div className={styles.picture}>
diff --git a/src/components/Blog/Post/Markdown/index.tsx b/src/components/Blog/Post/Markdown/index.tsx
index 683bd58407..abf82be6eb 100644
--- a/src/components/Blog/Post/Markdown/index.tsx
+++ b/src/components/Blog/Post/Markdown/index.tsx
@@ -6,13 +6,8 @@ interface IMarkdownProps {
   html: string
 }
 
-function Markdown({ html }: IMarkdownProps) {
-  return (
-    <div
-      className={styles.wrapper}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  )
-}
+const Markdown: React.SFC<IMarkdownProps> = ({ html }) => (
+  <div className={styles.wrapper} dangerouslySetInnerHTML={{ __html: html }} />
+)
 
 export default Markdown
diff --git a/src/components/Blog/Post/Share/index.tsx b/src/components/Blog/Post/Share/index.tsx
index f6b8a75efd..50a7d49634 100644
--- a/src/components/Blog/Post/Share/index.tsx
+++ b/src/components/Blog/Post/Share/index.tsx
@@ -10,7 +10,7 @@ import { ReactComponent as Twitter } from './icons/twitter.svg'
 
 import styles from './styles.module.css'
 
-function openWindow(e: React.MouseEvent, href: string) {
+function openWindow(e: React.MouseEvent, href: string): void {
   e.preventDefault()
 
   window.open(
@@ -26,7 +26,7 @@ interface IShareProps {
   slug: string
 }
 
-function Share({ className, text, slug }: IShareProps) {
+const Share: React.SFC<IShareProps> = ({ className, text, slug }) => {
   const {
     site: {
       siteMetadata: { siteUrl }
diff --git a/src/components/Blog/Post/Tooltip/index.tsx b/src/components/Blog/Post/Tooltip/index.tsx
index 967ce55de1..8f2e3443c1 100644
--- a/src/components/Blog/Post/Tooltip/index.tsx
+++ b/src/components/Blog/Post/Tooltip/index.tsx
@@ -29,7 +29,9 @@ const centered: Position = (triggerRect, tooltipRect) => {
   return result
 }
 
-const portalStyle = (triggerRect: DOMRect | null) => {
+const portalStyle = (
+  triggerRect: DOMRect | null
+): { left?: number; top?: number } => {
   if (!triggerRect) {
     return { left: 0, top: 0 }
   }
@@ -42,7 +44,11 @@ const portalStyle = (triggerRect: DOMRect | null) => {
   }
 }
 
-function ModifiedTooltip({ children, label, ariaLabel }: TooltipProps) {
+const ModifiedTooltip: React.SFC<TooltipProps> = ({
+  children,
+  label,
+  ariaLabel
+}) => {
   const [trigger, tooltip] = useTooltip()
 
   const { isVisible, triggerRect } = tooltip
diff --git a/src/components/Community/Contribute/index.tsx b/src/components/Community/Contribute/index.tsx
index 00f76979a2..fc9b459822 100644
--- a/src/components/Community/Contribute/index.tsx
+++ b/src/components/Community/Contribute/index.tsx
@@ -12,10 +12,10 @@ import sharedStyles from '../styles.module.css'
 
 const { description, mobileDescription, title } = data.section.contribute
 
-const logPR = () => logEvent('community', 'contribute-pr')
-const logBlogpost = () => logEvent('community', 'contribute-blogpost')
-const logTalk = () => logEvent('community', 'contribute-talk')
-const logAmbassador = () => logEvent('community', 'contribute-ambassador')
+const logPR = (): void => logEvent('community', 'contribute-pr')
+const logBlogpost = (): void => logEvent('community', 'contribute-blogpost')
+const logTalk = (): void => logEvent('community', 'contribute-talk')
+const logAmbassador = (): void => logEvent('community', 'contribute-ambassador')
 
 const Contribute: React.SFC<{ theme: ICommunitySectionTheme }> = ({
   theme
diff --git a/src/components/Community/Events/index.tsx b/src/components/Community/Events/index.tsx
index 3d5250e634..d74a1b669c 100644
--- a/src/components/Community/Events/index.tsx
+++ b/src/components/Community/Events/index.tsx
@@ -25,7 +25,7 @@ interface IEvent {
 
 const { description, mobileDescription, title } = data.section.events
 const { events } = data
-const eventsItems = (() => {
+const eventsItems = ((): Array<IEvent | null> => {
   const items: Array<IEvent | null> = events.slice(0, 3) as Array<IEvent>
   const itemLength = items.length
 
diff --git a/src/components/Community/Hero/index.tsx b/src/components/Community/Hero/index.tsx
index ff5af64271..8503442a7a 100644
--- a/src/components/Community/Hero/index.tsx
+++ b/src/components/Community/Hero/index.tsx
@@ -8,7 +8,7 @@ import { logEvent } from '../../../utils/front/ga'
 import data from '../data.json'
 import styles from './styles.module.css'
 
-const logHero = () => logEvent('community', 'hero')
+const logHero = (): void => logEvent('community', 'hero')
 
 const Hero: React.SFC = () => {
   if (!data.hero) {
diff --git a/src/components/Community/Learn/index.tsx b/src/components/Community/Learn/index.tsx
index 074c7b4ec1..acd0e35df1 100644
--- a/src/components/Community/Learn/index.tsx
+++ b/src/components/Community/Learn/index.tsx
@@ -22,8 +22,9 @@ const docsPage = getFirstPage()
 const { description, mobileDescription, title } = data.section.learn
 const { documentation, userContent } = data
 
-const logPostAll = () => logEvent('community', 'blog', 'all')
-const logDocumentationAll = () => logEvent('community', 'documentation', 'all')
+const logPostAll = (): void => logEvent('community', 'blog', 'all')
+const logDocumentationAll = (): void =>
+  logEvent('community', 'documentation', 'all')
 
 interface ICommunityBlogPost {
   color: string
diff --git a/src/components/Community/Meet/index.tsx b/src/components/Community/Meet/index.tsx
index 5884094f1a..4c42e068ed 100644
--- a/src/components/Community/Meet/index.tsx
+++ b/src/components/Community/Meet/index.tsx
@@ -20,9 +20,9 @@ import sharedStyles from '../styles.module.css'
 import styles from './styles.module.css'
 
 const { description, mobileDescription, title } = data.section.meet
-const logIssueAll = () => logEvent('community', 'issue', 'all')
-const logTopicAll = () => logEvent('community', 'topic', 'all')
-const logDiscord = () => logEvent('community', 'discord')
+const logIssueAll = (): void => logEvent('community', 'issue', 'all')
+const logTopicAll = (): void => logEvent('community', 'topic', 'all')
+const logDiscord = (): void => logEvent('community', 'discord')
 
 const Topic: React.SFC<{ color: string } & IDiscussTopic> = ({
   url,
diff --git a/src/components/Community/index.tsx b/src/components/Community/index.tsx
index b299071fb2..788efc7159 100644
--- a/src/components/Community/index.tsx
+++ b/src/components/Community/index.tsx
@@ -22,17 +22,17 @@ export interface ICommunitySectionTheme {
   color: string
 }
 
-export default function Community() {
-  return (
-    <>
-      <PageContent className={styles.content}>
-        <Hero />
-        <Meet theme={themes.purple} />
-        <Contribute theme={themes.orange} />
-        <Learn theme={themes.green} />
-        <Events theme={themes.purple} />
-      </PageContent>
-      <SubscribeSection />
-    </>
-  )
-}
+const Community: React.SFC = () => (
+  <>
+    <PageContent className={styles.content}>
+      <Hero />
+      <Meet theme={themes.purple} />
+      <Contribute theme={themes.orange} />
+      <Learn theme={themes.green} />
+      <Events theme={themes.purple} />
+    </PageContent>
+    <SubscribeSection />
+  </>
+)
+
+export default Community
diff --git a/src/components/Documentation/Layout/SidebarMenu/index.tsx b/src/components/Documentation/Layout/SidebarMenu/index.tsx
index 2bf5c0433c..e265c6499a 100644
--- a/src/components/Documentation/Layout/SidebarMenu/index.tsx
+++ b/src/components/Documentation/Layout/SidebarMenu/index.tsx
@@ -114,7 +114,7 @@ const SidebarMenu: React.SFC<ISidebarMenuProps> = ({
       setIsScrollHidden(false)
     }, 400)
 
-    return () => {
+    return (): void => {
       clearTimeout(timeout)
       psRef.current?.destroy()
       psRef.current = undefined
diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
index 966e260cfa..54a465ce2f 100644
--- a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
+++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
@@ -57,7 +57,7 @@ const DesktopView: React.SFC<IDesktopViewProps> = ({
     ITooltipPosition | undefined
   >()
   const [isVisible, setVisible] = useState(false)
-  const calcPosition = () => {
+  const calcPosition = (): void => {
     if (!tooltipRef.current || !toggleRef.current) {
       return
     }
@@ -65,7 +65,7 @@ const DesktopView: React.SFC<IDesktopViewProps> = ({
     setPosition(getPosition(toggleRef.current, tooltipRef.current))
   }
   const throttledCalcPosition = throttle(calcPosition, 50)
-  const show = () => {
+  const show = (): void => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current)
       timeoutRef.current = undefined
@@ -73,7 +73,7 @@ const DesktopView: React.SFC<IDesktopViewProps> = ({
 
     setVisible(true)
   }
-  const hide = () => {
+  const hide = (): void => {
     timeoutRef.current = window.setTimeout(() => setVisible(false), 100)
   }
 
@@ -81,7 +81,7 @@ const DesktopView: React.SFC<IDesktopViewProps> = ({
     document.addEventListener('scroll', throttledCalcPosition)
     window.addEventListener('resize', throttledCalcPosition)
 
-    return () => {
+    return (): void => {
       document.removeEventListener('scroll', throttledCalcPosition)
       window.removeEventListener('resize', throttledCalcPosition)
     }
diff --git a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
index 72c047d53f..0a69f64c5d 100644
--- a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
+++ b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
@@ -19,20 +19,20 @@ const MobileView: React.SFC<IMobileViewProps> = ({
   text
 }) => {
   const [isVisible, setVisible] = useState(false)
-  const openTooltip = (e: React.MouseEvent<HTMLSpanElement>) => {
+  const openTooltip = (e: React.MouseEvent<HTMLSpanElement>): void => {
     e.stopPropagation()
     setVisible(true)
   }
-  const onOpenKeyDown = (e: React.KeyboardEvent) => {
+  const onOpenKeyDown = (e: React.KeyboardEvent): void => {
     if (isTriggeredFromKB(e)) {
       setVisible(true)
     }
   }
-  const closeTooltip = (e: React.MouseEvent<HTMLDivElement>) => {
+  const closeTooltip = (e: React.MouseEvent<HTMLDivElement>): void => {
     e.stopPropagation()
     setVisible(false)
   }
-  const onCloseKeyDown = (e: React.KeyboardEvent) => {
+  const onCloseKeyDown = (e: React.KeyboardEvent): void => {
     if (isTriggeredFromKB(e)) {
       setVisible(false)
     }
diff --git a/src/components/Documentation/Markdown/index.tsx b/src/components/Documentation/Markdown/index.tsx
index ff22c109c4..6a99bc7feb 100644
--- a/src/components/Documentation/Markdown/index.tsx
+++ b/src/components/Documentation/Markdown/index.tsx
@@ -99,7 +99,7 @@ const Markdown: React.SFC<IMarkdownProps> = ({
     document.addEventListener('touchstart', onTouchStart, false)
     document.addEventListener('touchend', onTouchEnd, false)
 
-    return () => {
+    return (): void => {
       document.removeEventListener('touchstart', onTouchStart)
       document.removeEventListener('touchend', onTouchEnd)
     }
diff --git a/src/components/Documentation/RightPanel/index.tsx b/src/components/Documentation/RightPanel/index.tsx
index b1098a608e..4aa59c20d7 100644
--- a/src/components/Documentation/RightPanel/index.tsx
+++ b/src/components/Documentation/RightPanel/index.tsx
@@ -31,7 +31,7 @@ const RightPanel: React.SFC<IRightPanelProps> = ({
     {}
   )
   const [current, setCurrent] = useState<string | null>(null)
-  const setCurrentHeader = () => {
+  const setCurrentHeader = (): void => {
     const { scrollTop } = document.documentElement
     const coordinateKeys = Object.keys(headingsOffsets)
 
@@ -48,7 +48,7 @@ const RightPanel: React.SFC<IRightPanelProps> = ({
     setCurrent(newCurrent)
   }
 
-  const updateHeadingsPosition = () => {
+  const updateHeadingsPosition = (): void => {
     const offsets = headings.reduce(
       (result: IHeadingsCoordinates, heading: IHeading) => {
         const headingElement = document.getElementById(heading.slug)
@@ -67,7 +67,7 @@ const RightPanel: React.SFC<IRightPanelProps> = ({
     requestAnimationFrame(setCurrentHeader)
   }
 
-  const initHeadingsPosition = () => {
+  const initHeadingsPosition = (): void => {
     const root = document.querySelector('#markdown-root')
 
     root && allImagesLoadedInContainer(root).then(updateHeadingsPosition)
@@ -79,7 +79,7 @@ const RightPanel: React.SFC<IRightPanelProps> = ({
     document.addEventListener('scroll', throttledSetCurrentHeader)
     window.addEventListener('resize', updateHeadingsPosition)
 
-    return () => {
+    return (): void => {
       document.removeEventListener('scroll', throttledSetCurrentHeader)
       window.removeEventListener('resize', updateHeadingsPosition)
     }
diff --git a/src/components/DownloadButton/index.tsx b/src/components/DownloadButton/index.tsx
index 0d24467783..021ef82dae 100644
--- a/src/components/DownloadButton/index.tsx
+++ b/src/components/DownloadButton/index.tsx
@@ -64,7 +64,8 @@ interface IDownloadButtonProps {
   openTop?: boolean
 }
 
-const userAgentIs = (value: string) => navigator.userAgent.indexOf(value) !== -1
+const userAgentIs = (value: string): boolean =>
+  navigator.userAgent.indexOf(value) !== -1
 
 const getUserOS = (): OS => {
   let OSName = OS.UNKNOWN
@@ -101,7 +102,7 @@ const DownloadButtonDropdownItems: React.SFC<IDownloadButtonDropdownItemsProps>
             key={os}
             className={cn(styles.dropdownItem, os === userOS && styles.active)}
             href={item.url}
-            onClick={() => onClick(os)}
+            onClick={(): void => onClick(os)}
           >
             {item.title}
           </Link>
@@ -129,13 +130,13 @@ const DownloadButton: React.SFC<IDownloadButtonProps> = ({ openTop }) => {
       }),
     [isOpened, isClicked]
   )
-  const download = (os: OS) => {
+  const download = (os: OS): void => {
     setOpened(false)
     logEvent('download', os)
   }
 
   useEffect(() => {
-    const onOutsideClick = (e: MouseEvent) => {
+    const onOutsideClick = (e: MouseEvent): void => {
       if (isOpened && !containerRef.current?.contains(e.target as Node)) {
         setOpened(false)
       }
@@ -143,7 +144,7 @@ const DownloadButton: React.SFC<IDownloadButtonProps> = ({ openTop }) => {
 
     document.addEventListener('mousedown', onOutsideClick)
 
-    return () => document.removeEventListener('mousedown', onOutsideClick)
+    return (): void => document.removeEventListener('mousedown', onOutsideClick)
   }, [isOpened, containerRef.current])
 
   return (
diff --git a/src/components/HamburgerIcon/index.tsx b/src/components/HamburgerIcon/index.tsx
index 17e031aa1b..077cc31a1b 100644
--- a/src/components/HamburgerIcon/index.tsx
+++ b/src/components/HamburgerIcon/index.tsx
@@ -7,12 +7,12 @@ interface IHamburgetProps {
   opened?: boolean
 }
 
-export default function HamburgerIcon({ opened }: IHamburgetProps) {
-  return (
-    <div className={cn(styles.wrapper, opened && styles.opened)}>
-      <div className={cn(styles.line, styles.first)} />
-      <div className={cn(styles.line, styles.second)} />
-      <div className={cn(styles.line, styles.third)} />
-    </div>
-  )
-}
+const HamburgerIcon: React.SFC<IHamburgetProps> = ({ opened }) => (
+  <div className={cn(styles.wrapper, opened && styles.opened)}>
+    <div className={cn(styles.line, styles.first)} />
+    <div className={cn(styles.line, styles.second)} />
+    <div className={cn(styles.line, styles.third)} />
+  </div>
+)
+
+export default HamburgerIcon
diff --git a/src/components/HamburgerMenu/index.tsx b/src/components/HamburgerMenu/index.tsx
index 151739c952..c954153b7e 100644
--- a/src/components/HamburgerMenu/index.tsx
+++ b/src/components/HamburgerMenu/index.tsx
@@ -12,7 +12,7 @@ import styles from './styles.module.css'
 
 const docsPage = getFirstPage()
 
-function HamburgerMenu() {
+const HamburgerMenu: React.SFC = () => {
   const [isOpened, setOpened] = useState(false)
 
   const toggleMobileMenu = useCallback(() => setOpened(!isOpened), [isOpened])
@@ -24,7 +24,7 @@ function HamburgerMenu() {
 
   const close = useCallback(() => setOpened(false), [isOpened])
   const itemClick = useCallback(
-    item => () => {
+    item => (): void => {
       close()
       logEvent('hamburger', item)
     },
diff --git a/src/components/Home/Diagram/index.tsx b/src/components/Home/Diagram/index.tsx
index c6c1026cb1..83a21d46ce 100644
--- a/src/components/Home/Diagram/index.tsx
+++ b/src/components/Home/Diagram/index.tsx
@@ -23,7 +23,7 @@ const LearnMore: React.SFC<{ href: string }> = ({ href }) => (
   </div>
 )
 
-const ColumnOne = () => (
+const ColumnOne: React.SFC = () => (
   <div className={styles.column}>
     <h3 className={cn(styles.columnCaption, styles.purple)}>
       ML project version control
@@ -45,7 +45,7 @@ const ColumnOne = () => (
   </div>
 )
 
-const ColumnTwo = () => (
+const ColumnTwo: React.SFC = () => (
   <div className={styles.column}>
     <h3 className={cn(styles.columnCaption, styles.azure)}>
       ML experiment management
@@ -68,7 +68,7 @@ const ColumnTwo = () => (
   </div>
 )
 
-const ColumnThree = () => (
+const ColumnThree: React.SFC = () => (
   <div className={styles.column}>
     <h3 className={cn(styles.columnCaption, styles.orange)}>
       Deployment & Collaboration
@@ -123,7 +123,9 @@ const DiagramSection: React.ForwardRefRenderFunction<HTMLElement> = (
             infinite
             speed={600}
             dots
-            appendDots={dots => <ul className={styles.sliderDots}>{dots}</ul>}
+            appendDots={(dots): JSX.Element => (
+              <ul className={styles.sliderDots}>{dots}</ul>
+            )}
           >
             <div className={styles.slide}>
               <img
diff --git a/src/components/Home/LandingHero/index.tsx b/src/components/Home/LandingHero/index.tsx
index 202cb15e5f..f0d5aebcc9 100644
--- a/src/components/Home/LandingHero/index.tsx
+++ b/src/components/Home/LandingHero/index.tsx
@@ -24,7 +24,7 @@ const LandingHero: React.SFC<ILandingHeroProps> = ({ scrollToRef }) => {
       3000
     )
 
-    return () => clearInterval(interval)
+    return (): void => clearInterval(interval)
   }, [])
 
   const scrollToUseCases = useCallback(() => {
diff --git a/src/components/Home/UseCases/CollapsibleText/index.tsx b/src/components/Home/UseCases/CollapsibleText/index.tsx
index 38aa663efb..a88caa23ce 100644
--- a/src/components/Home/UseCases/CollapsibleText/index.tsx
+++ b/src/components/Home/UseCases/CollapsibleText/index.tsx
@@ -15,8 +15,8 @@ const CollapsibleText: React.SFC<ICollapsibleTextProps> = ({
   children
 }) => {
   const [isOpened, setOpened] = useState(false)
-  const toggle = () => setOpened(prev => !prev)
-  const toggleFromKB = (e: React.KeyboardEvent<HTMLDivElement>) => {
+  const toggle = (): void => setOpened(prev => !prev)
+  const toggleFromKB = (e: React.KeyboardEvent<HTMLDivElement>): void => {
     if (isTriggeredFromKB(e)) {
       toggle()
     }
diff --git a/src/components/Home/UseCases/index.tsx b/src/components/Home/UseCases/index.tsx
index 399fb4a749..67c19bb19c 100644
--- a/src/components/Home/UseCases/index.tsx
+++ b/src/components/Home/UseCases/index.tsx
@@ -7,7 +7,7 @@ import ShowOnly from '../../ShowOnly'
 
 import styles from './styles.module.css'
 
-const Heading1 = () => (
+const Heading1: React.SFC = () => (
   <div className={styles.caseHeader}>
     <img
       className={styles.caseIcon}
@@ -20,7 +20,7 @@ const Heading1 = () => (
   </div>
 )
 
-const Heading2 = () => (
+const Heading2: React.SFC = () => (
   <div className={styles.caseHeader}>
     <img
       className={styles.caseIcon}
@@ -33,7 +33,7 @@ const Heading2 = () => (
   </div>
 )
 
-const Heading3 = () => (
+const Heading3: React.SFC = () => (
   <div className={styles.caseHeader}>
     <img
       className={styles.caseIcon}
@@ -48,7 +48,7 @@ const Heading3 = () => (
   </div>
 )
 
-const Description1 = () => (
+const Description1: React.SFC = () => (
   <div className={styles.caseDescription}>
     At any time, fetch the full context about any experiment you or your
     colleagues have run. DVC guarantees that all files and metrics will be
@@ -57,7 +57,7 @@ const Description1 = () => (
   </div>
 )
 
-const Description2 = () => (
+const Description2: React.SFC = () => (
   <div className={styles.caseDescription}>
     DVC keeps metafiles in Git instead of Google Docs to describe and version
     control your data sets and models. DVC supports a variety of external
@@ -65,7 +65,7 @@ const Description2 = () => (
   </div>
 )
 
-const Description3 = () => (
+const Description3: React.SFC = () => (
   <div className={styles.caseDescription}>
     DVC defines rules and processes for working effectively and consistently as
     a team. It serves as a protocol for collaboration, sharing results, and
diff --git a/src/components/IconSet/index.tsx b/src/components/IconSet/index.tsx
index 755bb00ee2..bd5fe3d995 100644
--- a/src/components/IconSet/index.tsx
+++ b/src/components/IconSet/index.tsx
@@ -9,16 +9,18 @@ interface IIconSetProps {
   name: string
 }
 
-function IconSet({ className, name, ...iconProps }: IIconSetProps) {
-  return (
-    <div
-      style={{
-        backgroundImage: `url(${icons[name as keyof typeof icons]})`
-      }}
-      className={cn(styles.icon, className)}
-      {...iconProps}
-    />
-  )
-}
+const IconSet: React.SFC<IIconSetProps> = ({
+  className,
+  name,
+  ...iconProps
+}) => (
+  <div
+    style={{
+      backgroundImage: `url(${icons[name as keyof typeof icons]})`
+    }}
+    className={cn(styles.icon, className)}
+    {...iconProps}
+  />
+)
 
 export default IconSet
diff --git a/src/components/LayoutHeader/Nav/index.tsx b/src/components/LayoutHeader/Nav/index.tsx
index 75b66a9560..5a3048de15 100644
--- a/src/components/LayoutHeader/Nav/index.tsx
+++ b/src/components/LayoutHeader/Nav/index.tsx
@@ -18,7 +18,7 @@ const Nav: React.SFC = () => (
         <Link
           href="/features"
           className={styles.link}
-          onClick={() => logEvent('menu', 'features')}
+          onClick={(): void => logEvent('menu', 'features')}
         >
           Features
         </Link>
@@ -27,7 +27,7 @@ const Nav: React.SFC = () => (
         <Link
           href={docsPage}
           className={styles.link}
-          onClick={() => logEvent('menu', 'doc')}
+          onClick={(): void => logEvent('menu', 'doc')}
         >
           Doc
         </Link>
@@ -36,7 +36,7 @@ const Nav: React.SFC = () => (
         <Link
           href="/blog"
           className={styles.link}
-          onClick={() => logEvent('menu', 'blog')}
+          onClick={(): void => logEvent('menu', 'blog')}
         >
           Blog
         </Link>
@@ -45,7 +45,7 @@ const Nav: React.SFC = () => (
         <Link
           href="/community"
           className={styles.link}
-          onClick={() => logEvent('menu', 'community')}
+          onClick={(): void => logEvent('menu', 'community')}
         >
           Community
         </Link>
@@ -54,28 +54,28 @@ const Nav: React.SFC = () => (
             <Link
               href="/community#meet"
               className={styles.dropdownLink}
-              onClick={() => logEvent('menu', 'community')}
+              onClick={(): void => logEvent('menu', 'community')}
             >
               Meet the Community
             </Link>
             <Link
               href="/community#contribute"
               className={styles.dropdownLink}
-              onClick={() => logEvent('menu', 'community')}
+              onClick={(): void => logEvent('menu', 'community')}
             >
               Contribute
             </Link>
             <Link
               href="/community#learn"
               className={styles.dropdownLink}
-              onClick={() => logEvent('menu', 'community')}
+              onClick={(): void => logEvent('menu', 'community')}
             >
               Learn
             </Link>
             <Link
               href="/community#events"
               className={styles.dropdownLink}
-              onClick={() => logEvent('menu', 'community')}
+              onClick={(): void => logEvent('menu', 'community')}
             >
               Events
             </Link>
@@ -86,7 +86,7 @@ const Nav: React.SFC = () => (
         <Link
           href="/support"
           className={styles.link}
-          onClick={() => logEvent('menu', 'support')}
+          onClick={(): void => logEvent('menu', 'support')}
         >
           Support
         </Link>
@@ -116,7 +116,7 @@ const Nav: React.SFC = () => (
     <PseudoButton
       className={styles.getStartedButton}
       href="/doc/tutorials/get-started"
-      onClick={() => logEvent('menu', 'get-started')}
+      onClick={(): void => logEvent('menu', 'get-started')}
     >
       Get Started
     </PseudoButton>
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index 5e139b82f8..221954f746 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -14,7 +14,7 @@ export type ILinkProps = {
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>
 
 const PROTOCOL_REGEXP = /^https?:\/\//
-const isRelative = (url: string) => !PROTOCOL_REGEXP.test(url)
+const isRelative = (url: string): boolean => !PROTOCOL_REGEXP.test(url)
 
 const ResultLinkComponent: React.SFC<ILinkProps> = ({
   href,
diff --git a/src/components/MainLayout/index.tsx b/src/components/MainLayout/index.tsx
index 7d3d369459..2bf230d7fe 100644
--- a/src/components/MainLayout/index.tsx
+++ b/src/components/MainLayout/index.tsx
@@ -36,7 +36,7 @@ const MainLayout: LayoutComponent = ({
     if (className) {
       document.body.classList.add(className)
 
-      return () => {
+      return (): void => {
         document.body.classList.remove(className)
       }
     }
diff --git a/src/components/NotFound/index.tsx b/src/components/NotFound/index.tsx
index f6fe49f3b4..a7d6393bc9 100644
--- a/src/components/NotFound/index.tsx
+++ b/src/components/NotFound/index.tsx
@@ -2,15 +2,13 @@ import React from 'react'
 
 import styles from './styles.module.css'
 
-function NotFound() {
-  return (
-    <div className={styles.wrapper}>
-      <h1 className={styles.title}>Not Found</h1>
-      <div className={styles.content}>
-        You just hit a route that doesn&#39;t exist... the sadness.
-      </div>
+const NotFound: React.SFC = () => (
+  <div className={styles.wrapper}>
+    <h1 className={styles.title}>Not Found</h1>
+    <div className={styles.content}>
+      You just hit a route that doesn&#39;t exist... the sadness.
     </div>
-  )
-}
+  </div>
+)
 
 export default NotFound
diff --git a/src/components/Page/utils.ts b/src/components/Page/utils.ts
index a98d22a924..9de80c51ca 100644
--- a/src/components/Page/utils.ts
+++ b/src/components/Page/utils.ts
@@ -7,7 +7,7 @@ import { scrollIntoLayout } from '../../utils/front/scroll'
 
 import styles from './styles.module.css'
 
-export const useAnchorNavigation = () => {
+export const useAnchorNavigation = (): void => {
   const location = useLocation()
 
   useEffect(() => {
@@ -29,7 +29,7 @@ export const useAnchorNavigation = () => {
   }, [location.href])
 }
 
-export const useRedirects = () => {
+export const useRedirects = (): void => {
   const location = useLocation()
 
   useEffect(() => {
@@ -37,7 +37,7 @@ export const useRedirects = () => {
   }, [location.href])
 }
 
-export const useSmoothScroll = (enable: boolean) => {
+export const useSmoothScroll = (enable: boolean): void => {
   useEffect(() => {
     const method = enable ? 'add' : 'remove'
 
diff --git a/src/components/Support/Popover/index.tsx b/src/components/Support/Popover/index.tsx
index 3e5b99989e..7681460875 100644
--- a/src/components/Support/Popover/index.tsx
+++ b/src/components/Support/Popover/index.tsx
@@ -11,13 +11,13 @@ type IPopoverProps = {
 
 const Popover: React.SFC<IPopoverProps> = ({ children, ...restProps }) => {
   const [isOpened, setOpened] = useState(false)
-  const toggle = () => setOpened(prev => !prev)
-  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+  const toggle = (): void => setOpened(prev => !prev)
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
     if (isTriggeredFromKB(e)) {
       toggle()
     }
   }
-  const close = () => setOpened(false)
+  const close = (): void => setOpened(false)
 
   return (
     <ReactPopover isOpen={isOpened} onOuterAction={close} {...restProps}>
diff --git a/src/queries/posts.ts b/src/queries/posts.ts
index 89d16b64f7..cc783f90c4 100644
--- a/src/queries/posts.ts
+++ b/src/queries/posts.ts
@@ -2,7 +2,15 @@ import { useStaticQuery, graphql } from 'gatsby'
 
 import { IBlogPostData } from '../templates/blog-post'
 
-export default function posts() {
+interface IResultBlogPostData {
+  commentsUrl?: string
+  date: string
+  pictureUrl: string | null
+  title: string
+  url: string
+}
+
+export default function posts(): Array<IResultBlogPostData> {
   const { allMarkdownRemark } = useStaticQuery(graphql`
     query Posts {
       allMarkdownRemark(
diff --git a/src/queries/siteMeta.ts b/src/queries/siteMeta.ts
index 3cb93d2d98..59b80d1eef 100644
--- a/src/queries/siteMeta.ts
+++ b/src/queries/siteMeta.ts
@@ -1,6 +1,13 @@
 import { useStaticQuery, graphql } from 'gatsby'
 
-export default function siteMeta() {
+interface ISiteMeta {
+  title: string
+  description: string
+  keywords: string
+  siteUrl: string
+}
+
+export default function siteMeta(): ISiteMeta {
   const {
     site: { siteMetadata }
   } = useStaticQuery(
diff --git a/src/utils/front/api.ts b/src/utils/front/api.ts
index ee60bdf7ab..e6d50ec124 100644
--- a/src/utils/front/api.ts
+++ b/src/utils/front/api.ts
@@ -1,7 +1,17 @@
 import { useEffect, useState } from 'react'
 import fetch from 'isomorphic-fetch'
 
-const useAPICall = <R>(url: string) => {
+type IApiCallResult<T> = {
+  error: string | null
+  ready: boolean
+  result?: T
+}
+
+type UseApiResult<T, R> = Omit<IApiCallResult<T>, 'result'> & {
+  result?: R
+}
+
+const useAPICall = <R>(url: string): IApiCallResult<R> => {
   const [ready, setReady] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [result, setResult] = useState<R | undefined>(undefined)
@@ -9,7 +19,7 @@ const useAPICall = <R>(url: string) => {
   useEffect(() => {
     let cancelled = false
 
-    const fetchData = async () => {
+    const fetchData = async (): Promise<void> => {
       try {
         const res = await fetch(url)
 
@@ -29,7 +39,7 @@ const useAPICall = <R>(url: string) => {
 
     fetchData()
 
-    return () => {
+    return (): void => {
       cancelled = true
     }
   }, [])
@@ -48,7 +58,10 @@ export interface IGithubIssuesResponse {
   issues: Array<IGithubIssue>
 }
 
-export function useIssues() {
+export function useIssues(): UseApiResult<
+  IGithubIssuesResponse,
+  IGithubIssue[]
+> {
   const response = useAPICall<IGithubIssuesResponse>('/api/github')
 
   return { ...response, result: response.result?.issues }
@@ -65,7 +78,10 @@ export interface IDiscussTopicsResponse {
   topics: Array<IDiscussTopic>
 }
 
-export function useTopics() {
+export function useTopics(): UseApiResult<
+  IDiscussTopicsResponse,
+  IDiscussTopic[]
+> {
   const response = useAPICall<IDiscussTopicsResponse>('/api/discourse')
 
   return { ...response, result: response.result?.topics }
@@ -75,7 +91,9 @@ export interface IDiscussCommentsCountResponse {
   count: number
 }
 
-export function useCommentsCount(commentsUrl: string) {
+export function useCommentsCount(
+  commentsUrl: string
+): UseApiResult<IDiscussCommentsCountResponse, number> {
   const response = useAPICall<IDiscussCommentsCountResponse>(
     `/api/comments?url=${commentsUrl}`
   )
diff --git a/src/utils/front/customProperties.ts b/src/utils/front/customProperties.ts
index 1f0eeefd39..9d8872cfc5 100644
--- a/src/utils/front/customProperties.ts
+++ b/src/utils/front/customProperties.ts
@@ -1,7 +1,7 @@
-const getCustomProperties = (() => {
+const getCustomProperties = ((): (() => CSSStyleDeclaration) => {
   let cssDecl: CSSStyleDeclaration
 
-  return () => {
+  return (): CSSStyleDeclaration => {
     if (!cssDecl) {
       cssDecl = getComputedStyle(document.documentElement, null)
     }
@@ -10,11 +10,11 @@ const getCustomProperties = (() => {
   }
 })()
 
-export const getCustomProperty = (() => {
+export const getCustomProperty = ((): ((name: string) => number | string) => {
   const IS_PX_VALUE = /px$/
   const cachedValues: { [key: string]: number | string } = {}
 
-  return (name: string) => {
+  return (name: string): number | string => {
     if (!cachedValues[name]) {
       const all = getCustomProperties()
       const value = all.getPropertyValue(name).trim()
diff --git a/src/utils/front/ga.ts b/src/utils/front/ga.ts
index 776fea06ee..5627246d8c 100644
--- a/src/utils/front/ga.ts
+++ b/src/utils/front/ga.ts
@@ -22,7 +22,7 @@ export const logEvent = (
   eventCategory: string,
   eventAction: string,
   eventLabel?: string
-) => {
+): void => {
   if (!window.ga) return
 
   window.ga('send', {
@@ -33,7 +33,7 @@ export const logEvent = (
   })
 }
 
-export const logException = (exDescription = '', exFatal = false) => {
+export const logException = (exDescription = '', exFatal = false): void => {
   if (!window.ga) return
 
   if (exDescription) {
diff --git a/src/utils/front/i18n.ts b/src/utils/front/i18n.ts
index 9af16d3d82..c642319fcd 100644
--- a/src/utils/front/i18n.ts
+++ b/src/utils/front/i18n.ts
@@ -1,7 +1,7 @@
 export function pluralize(
   entry: { zero: string; one: string; other: string },
   count: number
-) {
+): string {
   let selectedEntry
 
   if (count === 0 && entry.zero) {
@@ -15,7 +15,7 @@ export function pluralize(
   return selectedEntry.replace('{count}', count.toString())
 }
 
-export function pluralizeComments(count: number) {
+export function pluralizeComments(count: number): string {
   return pluralize(
     { zero: 'No comments', one: '{count} comment', other: '{count} comments' },
     count
diff --git a/src/utils/front/images.ts b/src/utils/front/images.ts
index 87a80072b2..f29081217c 100644
--- a/src/utils/front/images.ts
+++ b/src/utils/front/images.ts
@@ -1,9 +1,9 @@
 import Promise from 'promise-polyfill'
 
-export const getImages = (node: Element) =>
-  Array.from(node.querySelectorAll('img')).filter((imgNode) => !!imgNode.src)
+export const getImages = (node: Element): Array<HTMLImageElement> =>
+  Array.from(node.querySelectorAll('img')).filter(imgNode => !!imgNode.src)
 
-export const imageLoaded = (imgNode: HTMLImageElement) => {
+export const imageLoaded = (imgNode: HTMLImageElement): Promise<void> => {
   if (imgNode.complete && imgNode.naturalWidth !== 0) {
     return Promise.resolve()
   }
@@ -20,8 +20,9 @@ export const imageLoaded = (imgNode: HTMLImageElement) => {
   })
 }
 
-export const allImagesLoaded = (nodes: Array<HTMLImageElement>) =>
-  Promise.all(nodes.map(imageLoaded))
+export const allImagesLoaded = (
+  nodes: Array<HTMLImageElement>
+): Promise<void[]> => Promise.all(nodes.map(imageLoaded))
 
-export const allImagesLoadedInContainer = (node: Element) =>
+export const allImagesLoadedInContainer = (node: Element): Promise<void[]> =>
   allImagesLoaded(getImages(node))
diff --git a/src/utils/front/isClient.ts b/src/utils/front/isClient.ts
index dbef9425fb..da2240de90 100644
--- a/src/utils/front/isClient.ts
+++ b/src/utils/front/isClient.ts
@@ -1,4 +1,4 @@
-const IS_CLIENT = (() => {
+const IS_CLIENT = ((): boolean => {
   let isDefined = false
   try {
     window
diff --git a/src/utils/front/keyboard.ts b/src/utils/front/keyboard.ts
index e0c86c65d7..4127d10fbd 100644
--- a/src/utils/front/keyboard.ts
+++ b/src/utils/front/keyboard.ts
@@ -5,5 +5,5 @@ enum KEYS {
   SPACE = 32
 }
 
-export const isTriggeredFromKB = (e: React.KeyboardEvent) =>
+export const isTriggeredFromKB = (e: React.KeyboardEvent): boolean =>
   e.which === KEYS.RETURN || e.which === KEYS.SPACE
diff --git a/src/utils/front/resources.ts b/src/utils/front/resources.ts
index 8dcafad135..823bfb0685 100644
--- a/src/utils/front/resources.ts
+++ b/src/utils/front/resources.ts
@@ -1,6 +1,10 @@
 import Promise from 'promise-polyfill'
 
-const createScript = (src: string, onload: () => void, onerror: () => void) => {
+const createScript = (
+  src: string,
+  onload: () => void,
+  onerror: () => void
+): HTMLScriptElement => {
   const node = document.createElement('script')
 
   node.onload = onload
@@ -15,7 +19,7 @@ const createStylesheet = (
   href: string,
   onload: () => void,
   onerror: () => void
-) => {
+): HTMLLinkElement => {
   const node = document.createElement('link')
 
   node.onload = onload
@@ -36,7 +40,7 @@ const resourceNodeCreators: {
   '\\.css$': createStylesheet
 }
 
-export const loadResource = (url: string) => {
+export const loadResource = (url: string): Promise<void> => {
   if (!resourcesCache[url]) {
     resourcesCache[url] = new Promise((resolve, reject) => {
       const howToHandle = Object.keys(resourceNodeCreators).find(regExp =>
diff --git a/src/utils/front/scroll.ts b/src/utils/front/scroll.ts
index 689d13d578..4a4d63ed09 100644
--- a/src/utils/front/scroll.ts
+++ b/src/utils/front/scroll.ts
@@ -6,10 +6,10 @@ import { getCustomProperty } from './customProperties'
 
 const COLLAPSE_HEADER_AFTER = 25
 
-const headerIsCollapsedAt = (scrollPosition: number) =>
+const headerIsCollapsedAt = (scrollPosition: number): boolean =>
   scrollPosition > COLLAPSE_HEADER_AFTER
 
-export const getHeaderHeightAt = (scrollPosition?: number) => {
+export const getHeaderHeightAt = (scrollPosition?: number): number => {
   let header = getCustomProperty('--layout-header-height')
 
   if (
@@ -22,9 +22,9 @@ export const getHeaderHeightAt = (scrollPosition?: number) => {
   return header as number
 }
 
-export const getHeaderHeight = () => getHeaderHeightAt()
+export const getHeaderHeight = (): number => getHeaderHeightAt()
 
-export const useHeaderIsScrolled = () => {
+export const useHeaderIsScrolled = (): boolean => {
   const { y } = useWindowScroll()
 
   return headerIsCollapsedAt(y)
@@ -38,7 +38,7 @@ export const scrollIntoLayout = (
     duration?: number
     ease?: (value: number) => number
   }
-) => {
+): void => {
   if (!node) {
     return
   }
diff --git a/tsconfig.json b/tsconfig.json
index 78f0d9e21d..5d41e9a118 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,10 +8,17 @@
     "sourceMap": true,
     "strict": true,
     "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "noImplicitThis": true,
+    "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
-    "allowJs": true
+    "allowJs": true,
+    "alwaysStrict": true
   },
   "include": ["./src/**/*", "./*.js"]
 }

From 0ae12ff1f8ffabd801f783d33f8000689dde959b Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 13:02:57 +0300
Subject: [PATCH 35/51] Toggle mobile menu only in mobile version

---
 src/components/Documentation/Layout/index.tsx |  5 ++++-
 src/utils/front/breakpoints.ts                | 11 +++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/front/breakpoints.ts

diff --git a/src/components/Documentation/Layout/index.tsx b/src/components/Documentation/Layout/index.tsx
index e71c7e36a8..88fefd0e6b 100644
--- a/src/components/Documentation/Layout/index.tsx
+++ b/src/components/Documentation/Layout/index.tsx
@@ -6,6 +6,7 @@ import LayoutWidthContainer from '../../LayoutWidthContainer'
 import HamburgerIcon from '../../HamburgerIcon'
 import SearchForm from './SearchForm'
 import SidebarMenu from './SidebarMenu'
+import { matchMedia } from '../../../utils/front/breakpoints'
 
 import styles from './styles.module.css'
 
@@ -40,7 +41,9 @@ const Layout: LayoutComponent = ({ children, ...restProps }) => {
           <SearchForm />
           <SidebarMenu
             currentPath={restProps.location.pathname}
-            onClick={toggleMenu}
+            onClick={(): void =>
+              matchMedia('--xs-scr') ? toggleMenu() : undefined
+            }
           />
         </div>
         <div className={styles.content}>{children}</div>
diff --git a/src/utils/front/breakpoints.ts b/src/utils/front/breakpoints.ts
new file mode 100644
index 0000000000..c75d5b3bad
--- /dev/null
+++ b/src/utils/front/breakpoints.ts
@@ -0,0 +1,11 @@
+import { customMedia } from '../../../config/postcss/media'
+
+type AvailableCustomMedia = keyof typeof customMedia
+
+export const matchMedia = (media: string | AvailableCustomMedia): boolean => {
+  if (media.startsWith('--') && Object.keys(customMedia).includes(media)) {
+    media = customMedia[media as AvailableCustomMedia]
+  }
+
+  return window.matchMedia(media).matches
+}

From d142b358a9dbe0ac25c78fdbf8f0b282105568b5 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 13:15:56 +0300
Subject: [PATCH 36/51] Fix Algolia's dropdown position

---
 .../Documentation/Layout/SearchForm/styles.module.css         | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Documentation/Layout/SearchForm/styles.module.css b/src/components/Documentation/Layout/SearchForm/styles.module.css
index 041818d472..bb0ea37041 100644
--- a/src/components/Documentation/Layout/SearchForm/styles.module.css
+++ b/src/components/Documentation/Layout/SearchForm/styles.module.css
@@ -22,6 +22,10 @@
   input {
     height: 40px;
   }
+
+  :global(.algolia-autocomplete .ds-dropdown-menu) {
+    margin-top: -5px;
+  }
 }
 
 .container {

From f2c43268e4639908a163e6328b62309cc70f8401 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 13:28:14 +0300
Subject: [PATCH 37/51] Fix Get Started button for the mobile version of main
 page

---
 .../Home/LandingHero/styles.module.css        | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/Home/LandingHero/styles.module.css b/src/components/Home/LandingHero/styles.module.css
index 0556e7448c..126c169015 100644
--- a/src/components/Home/LandingHero/styles.module.css
+++ b/src/components/Home/LandingHero/styles.module.css
@@ -57,17 +57,35 @@
 
 .actionButton {
   min-width: 186px;
+  text-decoration: none;
 
   &.actionButton {
     @media (--xs-scr) {
-      /* max-width: none;
       min-height: 60px;
       margin: 0;
-      margin-bottom: 12px; */
+      margin-bottom: 12px;
     }
   }
 }
 
+.getStartedButton {
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 0.9;
+  border: solid 2px transparent;
+  border-radius: 4px;
+  color: #fff;
+  background-color: var(--color-azure);
+  transition: 0.2s background-color ease-out;
+
+  &:hover {
+    background-color: var(--color-azure-hover);
+  }
+}
+
 .actionButtonIcon {
   width: 20px;
   height: 20px;

From ffa3e2139c2352cb474712fcaf9c8b4c94e9ceec Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 13:31:17 +0300
Subject: [PATCH 38/51] Align buttons in PromoSection component for mobile view

---
 src/components/PromoSection/styles.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/PromoSection/styles.module.css b/src/components/PromoSection/styles.module.css
index 49e1c177af..9513ed4063 100644
--- a/src/components/PromoSection/styles.module.css
+++ b/src/components/PromoSection/styles.module.css
@@ -79,6 +79,10 @@
 
   & + & {
     margin-left: 14px;
+
+    @media (--xs-scr) {
+      margin-left: 0;
+    }
   }
 
   &.first {

From d4b941e01698b52855656fc5a84f5640edad66dd Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 13:36:05 +0300
Subject: [PATCH 39/51] Fix comments blog rendering

---
 src/components/Blog/Post/index.tsx       | 4 ++--
 src/components/Community/Learn/index.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Blog/Post/index.tsx b/src/components/Blog/Post/index.tsx
index f1fe5328fb..7756842cdf 100644
--- a/src/components/Blog/Post/index.tsx
+++ b/src/components/Blog/Post/index.tsx
@@ -111,13 +111,13 @@ const Post: React.SFC<IBlogPostData> = ({
               ))}
             </div>
           )}
-          {commentsUrl && ready && !error && result && (
+          {commentsUrl && ready && !error && (
             <div className={styles.comments}>
               <PseudoButton size="big" href={commentsUrl} target="_blank">
                 Discuss this post
               </PseudoButton>
               <Link href={commentsUrl} className={styles.count} target="_blank">
-                {pluralizeComments(result)}
+                {pluralizeComments(result || 0)}
               </Link>
             </div>
           )}
diff --git a/src/components/Community/Learn/index.tsx b/src/components/Community/Learn/index.tsx
index acd0e35df1..0c81986398 100644
--- a/src/components/Community/Learn/index.tsx
+++ b/src/components/Community/Learn/index.tsx
@@ -71,14 +71,14 @@ const BlogPost: React.SFC<ICommunityBlogPost> = ({
           {title}
         </Link>
         <div className={sharedStyles.meta}>
-          {ready && !error && result && (
+          {ready && !error && (
             <>
               <Link
                 className={sharedStyles.commentsLink}
                 href={commentsUrl}
                 target="_blank"
               >
-                {pluralizeComments(result)}
+                {pluralizeComments(result || 0)}
               </Link>
               {' • '}
             </>

From 1b1e3c619a998dd2bd356c2f6517a3f4330c461d Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 13:40:20 +0300
Subject: [PATCH 40/51] Fix share buttons overlapping

---
 src/components/PageContent/styles.module.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/PageContent/styles.module.css b/src/components/PageContent/styles.module.css
index 760e328328..52567ba951 100644
--- a/src/components/PageContent/styles.module.css
+++ b/src/components/PageContent/styles.module.css
@@ -1,7 +1,3 @@
 .pageContent {
   padding-bottom: 50px;
-
-  @media (--xs-scr) {
-    padding-bottom: 0;
-  }
 }

From 1eb4d421bf73a089d39e1e177699b6435f9e522d Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 13:46:30 +0300
Subject: [PATCH 41/51] Fix line height for main page sections titles

---
 src/components/Home/Diagram/styles.module.css  | 1 +
 src/components/Home/UseCases/styles.module.css | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/Home/Diagram/styles.module.css b/src/components/Home/Diagram/styles.module.css
index 9c3e1aefb9..80533d1870 100644
--- a/src/components/Home/Diagram/styles.module.css
+++ b/src/components/Home/Diagram/styles.module.css
@@ -10,6 +10,7 @@
   min-height: 44px;
   margin: 0 auto;
   font-family: var(--font-brandon);
+  line-height: 45px;
   text-align: center;
   color: var(--color-gray-hover);
 }
diff --git a/src/components/Home/UseCases/styles.module.css b/src/components/Home/UseCases/styles.module.css
index c430a2eb27..46f6baff0b 100644
--- a/src/components/Home/UseCases/styles.module.css
+++ b/src/components/Home/UseCases/styles.module.css
@@ -40,6 +40,7 @@
 
   min-height: 50px;
   font-family: var(--font-brandon);
+  line-height: 45px;
   text-align: center;
   color: var(--color-gray-hover);
 

From a96f30b782cd78c5b1476dc6f267e9aae98521b2 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 14:22:50 +0300
Subject: [PATCH 42/51] Fix some styles for the main page

---
 src/components/Home/LandingHero/styles.module.css | 2 +-
 src/components/TwoRowsButton/styles.module.css    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Home/LandingHero/styles.module.css b/src/components/Home/LandingHero/styles.module.css
index 126c169015..43ffff9e3b 100644
--- a/src/components/Home/LandingHero/styles.module.css
+++ b/src/components/Home/LandingHero/styles.module.css
@@ -103,7 +103,7 @@
   max-width: 412px;
   padding-top: 10px;
   margin-left: 20px;
-  font-family: var(--font-mono);
+  font-family: monospace;
 
   @media (--sm-scr) {
     align-items: center;
diff --git a/src/components/TwoRowsButton/styles.module.css b/src/components/TwoRowsButton/styles.module.css
index e90e87697d..6582628933 100644
--- a/src/components/TwoRowsButton/styles.module.css
+++ b/src/components/TwoRowsButton/styles.module.css
@@ -63,7 +63,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 15px;
+  margin-right: 17px;
 }
 
 .text {

From a4b2a582ed6b1e3da43103619e0f790672d69975 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 14:44:21 +0300
Subject: [PATCH 43/51] Fix styles of RightPanel

---
 .../Documentation/RightPanel/styles.module.css      | 13 +++++++------
 .../Documentation/TutorialsLinks/styles.module.css  |  4 ++--
 src/components/Documentation/styles.module.css      |  1 +
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Documentation/RightPanel/styles.module.css b/src/components/Documentation/RightPanel/styles.module.css
index 31854d5de1..dfbd869a83 100644
--- a/src/components/Documentation/RightPanel/styles.module.css
+++ b/src/components/Documentation/RightPanel/styles.module.css
@@ -19,7 +19,7 @@
 
 .list {
   margin-top: 57px;
-  margin-bottom: 25px;
+  margin-bottom: 27px;
 }
 
 .header {
@@ -33,7 +33,7 @@
   display: block;
   min-height: 26px;
   margin-bottom: 3px;
-  color: var(--color-gray);
+  color: #a0a8a5;
   text-decoration: none;
   font-size: 16px;
   font-weight: 400;
@@ -41,11 +41,11 @@
   cursor: pointer;
 
   &.current {
-    color: var(--color-black);
+    color: #a0a8a5;
   }
 
   &:hover {
-    color: var(--color-black);
+    color: #a0a8a5;
   }
 }
 
@@ -63,13 +63,12 @@
 }
 
 .buttonSectionDescription {
-  margin-bottom: 5px;
   color: var(--color-black);
 }
 
 .button {
   width: 100%;
-  justify-content: flex-start;
+  margin: 10px 0;
 
   &.tutorials {
     white-space: nowrap;
@@ -81,5 +80,7 @@
 }
 
 .discordIcon {
+  width: 1.2em;
+  height: 1.2em;
   background-image: url(/img/discord.svg);
 }
diff --git a/src/components/Documentation/TutorialsLinks/styles.module.css b/src/components/Documentation/TutorialsLinks/styles.module.css
index efcdabda40..683d32c9b4 100644
--- a/src/components/Documentation/TutorialsLinks/styles.module.css
+++ b/src/components/Documentation/TutorialsLinks/styles.module.css
@@ -10,12 +10,12 @@
 
     .katacodaIcon {
       margin-right: 0;
-      width: 24px;
-      height: 24px;
     }
   }
 }
 
 .katacodaIcon {
+  width: 24px;
+  height: 24px;
   background-image: url(/img/katacoda_grey_small.png);
 }
diff --git a/src/components/Documentation/styles.module.css b/src/components/Documentation/styles.module.css
index 5fff8a51a8..666d6d6817 100644
--- a/src/components/Documentation/styles.module.css
+++ b/src/components/Documentation/styles.module.css
@@ -23,6 +23,7 @@
 }
 
 .buttonIcon {
+  flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin-right: 7px;

From 7e06bdc89582bd50ac289c143520b7aa6e6d3ebe Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 14:51:31 +0300
Subject: [PATCH 44/51] Change styles of docs abbr tooltip a little bit

---
 .../Markdown/Tooltip/DesktopView/styles.module.css    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css b/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
index da57caef58..1d0225fd5a 100644
--- a/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
+++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
@@ -3,13 +3,14 @@
 }
 
 .tooltip {
+  box-sizing: border-box;
   position: fixed;
   top: 0;
   left: 0;
   display: block;
   opacity: 0;
   width: 400px;
-  padding: 8px 10px;
+  padding: 10px 10px 16px;
   border: 1px solid var(--color-lighter-blue);
   border-radius: 3px;
   color: var(--color-black);
@@ -24,8 +25,8 @@
     position: absolute;
     content: '';
     display: block;
-    height: 10px;
-    width: 10px;
+    height: 12px;
+    width: 12px;
     border: none;
     border-top: 1px solid var(--color-lighter-blue);
     border-left: 2px solid var(--color-lighter-blue);
@@ -35,7 +36,7 @@
 
   &.lt::after,
   &.rt::after {
-    top: -7px;
+    top: -8px;
     border-top-width: 2px;
     border-left-width: 1px;
     transform: rotate(45deg);
@@ -52,7 +53,7 @@
   &.lb::after,
   &.rb::after {
     top: 100%;
-    margin-top: -4px;
+    margin-top: -5px;
     transform: rotate(-135deg);
   }
 

From 368e7f4673d29537e0c50df6ceb62d4fc3e1de6b Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 15:16:09 +0300
Subject: [PATCH 45/51] Fix initial scrolling in the RightPanel

---
 src/components/Documentation/RightPanel/index.tsx         | 8 +++++---
 src/components/Documentation/RightPanel/styles.module.css | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Documentation/RightPanel/index.tsx b/src/components/Documentation/RightPanel/index.tsx
index 4aa59c20d7..a2e75ae6e5 100644
--- a/src/components/Documentation/RightPanel/index.tsx
+++ b/src/components/Documentation/RightPanel/index.tsx
@@ -6,6 +6,7 @@ import { IHeading } from '../'
 import Link from '../../Link'
 import Tutorials from '../TutorialsLinks'
 
+import { getHeaderHeight } from '../../../utils/front/scroll'
 import { allImagesLoadedInContainer } from '../../../utils/front/images'
 
 import sharedStyles from '../styles.module.css'
@@ -37,8 +38,10 @@ const RightPanel: React.SFC<IRightPanelProps> = ({
 
     if (!coordinateKeys.length) return
 
+    const headerHeight = getHeaderHeight()
     const filteredKeys = coordinateKeys.filter(
-      offsetTop => parseInt(offsetTop, 10) <= scrollTop + height / 2
+      offsetTop =>
+        parseInt(offsetTop, 10) <= scrollTop + (height - headerHeight) / 2
     )
 
     const newCurrent = filteredKeys.length
@@ -61,10 +64,8 @@ const RightPanel: React.SFC<IRightPanelProps> = ({
       },
       {}
     )
-
     setHeadingsOffsets(offsets)
     setHeight(document.documentElement.clientHeight)
-    requestAnimationFrame(setCurrentHeader)
   }
 
   const initHeadingsPosition = (): void => {
@@ -85,6 +86,7 @@ const RightPanel: React.SFC<IRightPanelProps> = ({
     }
   }, [setCurrentHeader])
   useEffect(initHeadingsPosition, [headings])
+  useEffect(setCurrentHeader, [headingsOffsets, height])
 
   return (
     <div className={styles.container}>
diff --git a/src/components/Documentation/RightPanel/styles.module.css b/src/components/Documentation/RightPanel/styles.module.css
index dfbd869a83..bd5eaa8986 100644
--- a/src/components/Documentation/RightPanel/styles.module.css
+++ b/src/components/Documentation/RightPanel/styles.module.css
@@ -41,11 +41,11 @@
   cursor: pointer;
 
   &.current {
-    color: #a0a8a5;
+    color: #000;
   }
 
   &:hover {
-    color: #a0a8a5;
+    color: #3c3937;
   }
 }
 

From 37ab5b4b069ce23779d6925a94a38cdcf5668fe6 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 15:27:31 +0300
Subject: [PATCH 46/51] Fix wrong tagname

---
 content/docs/command-reference/move.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/command-reference/move.md b/content/docs/command-reference/move.md
index 7b8c63411d..52c9b12356 100644
--- a/content/docs/command-reference/move.md
+++ b/content/docs/command-reference/move.md
@@ -140,8 +140,8 @@ $ tree
 
 ## Example: change an imported directory name and location
 
-Let's try the same with an entire directory imported from an external <abbd>DVC
-repository</abbd> with `dvc import`. Note that, as in the previous cases, the
+Let's try the same with an entire directory imported from an external <abbr>DVC
+repository</abbr> with `dvc import`. Note that, as in the previous cases, the
 DVC-file is also moved.
 
 ```dvc

From 724cb7eec6bb4b8ef85e950e7697aca4d52f68a7 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 15:27:54 +0300
Subject: [PATCH 47/51] Fix scroll in the left sidebar

---
 .../Layout/SidebarMenu/index.tsx              | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Documentation/Layout/SidebarMenu/index.tsx b/src/components/Documentation/Layout/SidebarMenu/index.tsx
index e265c6499a..c7b87ee97c 100644
--- a/src/components/Documentation/Layout/SidebarMenu/index.tsx
+++ b/src/components/Documentation/Layout/SidebarMenu/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
+import { useLocation } from '@reach/router'
 import cn from 'classnames'
 import { Collapse } from 'react-collapse'
 import PerfectScrollbar from 'perfect-scrollbar'
@@ -76,24 +77,18 @@ const SidebarMenu: React.SFC<ISidebarMenuProps> = ({
   currentPath,
   onClick
 }) => {
+  const location = useLocation()
   const rootRef = useRef<HTMLDivElement>(null)
   const psRef = useRef<PerfectScrollbar | undefined>(undefined)
   const [isScrollHidden, setIsScrollHidden] = useState(false)
   const activePaths = currentPath && getParentsListFromPath(currentPath)
 
-  useEffect(() => {
-    if (!psRef.current && rootRef.current) {
-      psRef.current = new PerfectScrollbar(rootRef.current, {
-        wheelPropagation: true
-      })
-    }
-
+  const scrollToActiveItem = (): void => {
     const node = document.getElementById(currentPath)
     const parent = rootRef.current
 
     setIsScrollHidden(true)
-
-    const timeout = setTimeout(() => {
+    setTimeout(() => {
       psRef.current?.update()
 
       if (node && parent) {
@@ -113,13 +108,23 @@ const SidebarMenu: React.SFC<ISidebarMenuProps> = ({
 
       setIsScrollHidden(false)
     }, 400)
+  }
+
+  useEffect(() => {
+    if (!psRef.current && rootRef.current) {
+      psRef.current = new PerfectScrollbar(rootRef.current, {
+        wheelPropagation: true
+      })
+    }
+
+    scrollToActiveItem()
 
     return (): void => {
-      clearTimeout(timeout)
       psRef.current?.destroy()
       psRef.current = undefined
     }
   }, [])
+  useEffect(scrollToActiveItem, [location.pathname])
 
   return (
     <div

From 0d748eca1cc38bb8564a282bd1cf0c0220ec8411 Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 19:50:26 +0300
Subject: [PATCH 48/51] Move src/utils/node to src/gatsby

---
 .eslintrc.json                       | 3 ++-
 gatsby-node.js                       | 6 +++---
 src/{utils/node => gatsby}/blog.js   | 4 ++--
 src/{utils/node => gatsby}/common.js | 2 +-
 src/{utils/node => gatsby}/doc.js    | 0
 5 files changed, 8 insertions(+), 7 deletions(-)
 rename src/{utils/node => gatsby}/blog.js (97%)
 rename src/{utils/node => gatsby}/common.js (96%)
 rename src/{utils/node => gatsby}/doc.js (100%)

diff --git a/.eslintrc.json b/.eslintrc.json
index 78130f3a78..5fdd13c338 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -33,7 +33,8 @@
   "overrides": [
     {
       "files": [
-        "src/utils/?(node|shared)/*.?(js|ts)",
+        "src/utils/shared/*.?(js|ts)",
+        "src/gatsby/**/*.js",
         "src/components/PageWrapper/index.js",
         "scripts/**/*.js",
         "src/server/**/*.js",
diff --git a/gatsby-node.js b/gatsby-node.js
index c4bac87ad5..9ab56b4c70 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -2,9 +2,9 @@ const {
   getNodeSlug,
   setPageContext,
   removePageTrailingSlash
-} = require('./src/utils/node/common')
-const { createPages: createDocPages } = require('./src/utils/node/doc')
-const { createPages: createBlogPages } = require('./src/utils/node/blog')
+} = require('./src/gatsby/common')
+const { createPages: createDocPages } = require('./src/gatsby/doc')
+const { createPages: createBlogPages } = require('./src/gatsby/blog')
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
diff --git a/src/utils/node/blog.js b/src/gatsby/blog.js
similarity index 97%
rename from src/utils/node/blog.js
rename to src/gatsby/blog.js
index 21a740aeb3..72c37d551c 100644
--- a/src/utils/node/blog.js
+++ b/src/gatsby/blog.js
@@ -1,6 +1,6 @@
 const path = require('path')
-const tagToSlug = require('../shared/tagToSlug')
-const { BLOG } = require('../../consts')
+const tagToSlug = require('../utils/shared/tagToSlug')
+const { BLOG } = require('../consts')
 
 const pageUrl = (basePath, page) => {
   if (page > 1) {
diff --git a/src/utils/node/common.js b/src/gatsby/common.js
similarity index 96%
rename from src/utils/node/common.js
rename to src/gatsby/common.js
index d534743836..1d1abbb8cb 100644
--- a/src/utils/node/common.js
+++ b/src/gatsby/common.js
@@ -3,7 +3,7 @@ const process = require('process')
 const { createFilePath } = require('gatsby-source-filesystem')
 const remark = require('remark')
 const remarkHTML = require('remark-html')
-const { getItemBySource } = require('../shared/sidebar')
+const { getItemBySource } = require('../utils/shared/sidebar')
 
 const markdownToHtml = remark().use(remarkHTML).processSync
 const is404Regexp = /^\/404/
diff --git a/src/utils/node/doc.js b/src/gatsby/doc.js
similarity index 100%
rename from src/utils/node/doc.js
rename to src/gatsby/doc.js

From 7a35301a5ec7d7306cbcf4ece42dcb9f558ac23b Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 20:01:30 +0300
Subject: [PATCH 49/51] Fix animation for doc pages

---
 .stylelintrc                                  |  2 +-
 .../Documentation/Markdown/styles.module.css  | 25 +++++++++++--------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/.stylelintrc b/.stylelintrc
index 2be439f4d4..063efbba39 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -9,7 +9,7 @@
       "ignoreProperties": ["composes"]
     }],
     "selector-pseudo-class-no-unknown": [true, {
-      "ignorePseudoClasses": ["global"]
+      "ignorePseudoClasses": ["global", "local"]
     }],
     "at-rule-no-unknown": [true, {
       "ignoreAtRules": ["mixin"]
diff --git a/src/components/Documentation/Markdown/styles.module.css b/src/components/Documentation/Markdown/styles.module.css
index 482a1b3d20..841727f84d 100644
--- a/src/components/Documentation/Markdown/styles.module.css
+++ b/src/components/Documentation/Markdown/styles.module.css
@@ -22,11 +22,24 @@
     }
 
     .markdown-body {
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+
+        to {
+          opacity: 1;
+        }
+      }
+
       font-family: inherit;
       font-size: 18px;
       animation-duration: 1s;
       animation-fill-mode: both;
-      animation-name: fadeIn;
+
+      :local {
+        animation-name: fadeIn;
+      }
 
       h1,
       h2,
@@ -211,16 +224,6 @@
       padding: 10px;
     }
 
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
-
-      to {
-        opacity: 1;
-      }
-    }
-
     details p {
       font-size: 17px;
       color: var(--color-gray-dark);

From 889f7bad028af8bde353d83afbc7e617a4075e4f Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 20:36:15 +0300
Subject: [PATCH 50/51] Fix styles for abbr tooltip

---
 .../Markdown/Tooltip/DesktopView/index.tsx    |   5 +-
 .../Tooltip/DesktopView/styles.module.css     |   7 +-
 .../Documentation/Markdown/styles.module.css  | 411 +++++++++---------
 3 files changed, 217 insertions(+), 206 deletions(-)

diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
index 54a465ce2f..5c3fb7c28d 100644
--- a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
+++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
@@ -110,7 +110,10 @@ const DesktopView: React.SFC<IDesktopViewProps> = ({
             onBlur={hide}
           >
             <div className={styles.tooltipHeader}>{header}</div>
-            <ReactMarkdown className="markdown-body" source={description} />
+            <ReactMarkdown
+              className={cn('markdown-body', styles.tooltipBody)}
+              source={description}
+            />
           </div>
         </Portal>
       )}
diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css b/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
index 1d0225fd5a..440aced6cb 100644
--- a/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
+++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
@@ -13,6 +13,7 @@
   padding: 10px 10px 16px;
   border: 1px solid var(--color-lighter-blue);
   border-radius: 3px;
+  font-family: var(--font-brandon);
   color: var(--color-black);
   background-color: #fff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -67,6 +68,10 @@
 }
 
 .tooltipHeader {
-  font-size: 1.3em;
+  font-size: 1.5em;
   font-weight: bold;
 }
+
+.tooltipBody {
+  font-size: 1.1em;
+}
diff --git a/src/components/Documentation/Markdown/styles.module.css b/src/components/Documentation/Markdown/styles.module.css
index 841727f84d..7b6acba588 100644
--- a/src/components/Documentation/Markdown/styles.module.css
+++ b/src/components/Documentation/Markdown/styles.module.css
@@ -1,243 +1,246 @@
-.content {
-  min-width: 200px;
-  margin: 30px;
-  flex: 1;
-  background-color: #fff;
+:global {
+  ul {
+    list-style-type: disc;
+  }
 
-  @media (--xs-scr) {
-    margin: 15px 0;
+  ol {
+    list-style-type: decimal;
+  }
+
+  em {
+    font-style: italic;
   }
 
-  :global {
-    ul {
-      list-style-type: disc;
+  #markdown-root {
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
     }
 
-    ol {
-      list-style-type: decimal;
+    animation-duration: 1s;
+    animation-fill-mode: both;
+
+    :local {
+      animation-name: fadeIn;
     }
+  }
+
+  .markdown-body {
+    font-family: inherit;
+    font-size: 18px;
 
-    em {
-      font-style: italic;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-weight: 500;
     }
 
-    .markdown-body {
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-        }
+    a[target='_blank']::after {
+      position: relative;
+      top: 1px;
+      right: 0;
+      width: 12px;
+      height: 12px;
+      margin-left: 1px;
+      content: url(/img/external-link.svg);
+    }
+
+    .anchor {
+      margin-left: -24px;
+    }
+
+    li {
+      margin: 16px 0;
+    }
 
-        to {
-          opacity: 1;
-        }
+    pre[class*='language-'] {
+      background: #40354d;
+      color: #ccc;
+
+      .token.line {
+        color: #ddd;
       }
 
-      font-family: inherit;
-      font-size: 18px;
-      animation-duration: 1s;
-      animation-fill-mode: both;
+      .token.comment,
+      .token.block-comment {
+        font-weight: normal;
+        color: #a0a0a0;
+      }
 
-      :local {
-        animation-name: fadeIn;
+      .token.input {
+        user-select: none;
       }
 
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        font-weight: 500;
+      .token.prolog,
+      .token.doctype,
+      .token.cdata {
+        color: #999;
       }
 
-      a[target='_blank']::after {
-        position: relative;
-        top: 1px;
-        right: 0;
-        width: 12px;
-        height: 12px;
-        margin-left: 1px;
-        content: url(/img/external-link.svg);
+      .token.url,
+      .token.constant,
+      .token.operator,
+      .token.punctuation {
+        color: #a0a0a0;
       }
 
-      .anchor {
-        margin-left: -24px;
+      .token.property,
+      .token.tag,
+      .token.boolean,
+      .token.function-name,
+      .token.symbol,
+      .token.deleted {
+        color: #4badd2;
       }
 
-      li {
-        margin: 16px 0;
+      .token.function {
+        color: #ae41bb;
       }
 
-      pre[class*='language-'] {
-        background: #40354d;
-        color: #ccc;
-
-        .token.line {
-          color: #ddd;
-        }
-
-        .token.comment,
-        .token.block-comment {
-          font-weight: normal;
-          color: #a0a0a0;
-        }
-
-        .token.input {
-          user-select: none;
-        }
-
-        .token.prolog,
-        .token.doctype,
-        .token.cdata {
-          color: #999;
-        }
-
-        .token.url,
-        .token.constant,
-        .token.operator,
-        .token.punctuation {
-          color: #a0a0a0;
-        }
-
-        .token.property,
-        .token.tag,
-        .token.boolean,
-        .token.function-name,
-        .token.symbol,
-        .token.deleted {
-          color: #4badd2;
-        }
-
-        .token.function {
-          color: #ae41bb;
-        }
-
-        .token.number,
-        .token.attr-name,
-        .token.string,
-        .token.char,
-        .token.builtin,
-        .token.inserted {
-          color: #219161;
-        }
-
-        .token.entity,
-        .token.variable {
-          color: #a67f59;
-        }
-
-        .token.class-name {
-          color: #0086b3;
-        }
-
-        .token.dvc {
-          color: #56b1d0;
-          font-weight: bold;
-        }
-
-        .token.usage,
-        .token.git {
-          color: #e9836e;
-        }
-
-        .token.command,
-        .token.selector,
-        .token.atrule,
-        .token.attr-value,
-        .token.keyword {
-          color: #e4b872;
-        }
-
-        .token.regex,
-        .token.important {
-          color: #b68;
-        }
-
-        .token.parameter {
-          color: #a0a0a0;
-        }
-
-        .token.function-variable {
-          color: #7ece42;
-        }
-
-        .token.important {
-          font-weight: normal;
-        }
-
-        .token.bold {
-          font-weight: bold;
-        }
-
-        .token.italic {
-          font-style: italic;
-        }
-
-        .token.entity {
-          cursor: help;
-        }
-
-        .token.namespace {
-          opacity: 0.7;
-        }
+      .token.number,
+      .token.attr-name,
+      .token.string,
+      .token.char,
+      .token.builtin,
+      .token.inserted {
+        color: #219161;
       }
-    }
 
-    .Collapsible {
-      margin-bottom: 10px;
-      background-color: rgba(36, 173, 197, 0.2);
-      border-radius: 15px;
-      -moz-border-radius: 15px;
-      padding: 10px;
-    }
+      .token.entity,
+      .token.variable {
+        color: #a67f59;
+      }
 
-    .Collapsible__trigger {
-      font-family: var(--font-brandon);
-      font-weight: 500;
-      display: block;
-      position: relative;
-      opacity: 0.9;
-      cursor: pointer;
-
-      &::after {
-        position: absolute;
-        display: inline-block;
-        background-size: 20px 20px;
-        right: 0;
-        width: 20px;
-        height: 20px;
-        background-image: url('/img/click.png');
-        content: '';
-        font-family: monospace;
-        transition: transform 200ms;
+      .token.class-name {
+        color: #0086b3;
       }
 
-      &.is-open::after {
-        opacity: 0.5;
+      .token.dvc {
+        color: #56b1d0;
+        font-weight: bold;
+      }
+
+      .token.usage,
+      .token.git {
+        color: #e9836e;
+      }
+
+      .token.command,
+      .token.selector,
+      .token.atrule,
+      .token.attr-value,
+      .token.keyword {
+        color: #e4b872;
       }
-    }
 
-    .Collapsible__contentInner {
-      background-color: rgba(36, 173, 197, 0);
-      border-radius: 15px;
-      -moz-border-radius: 15px;
-      padding: 10px;
+      .token.regex,
+      .token.important {
+        color: #b68;
+      }
+
+      .token.parameter {
+        color: #a0a0a0;
+      }
+
+      .token.function-variable {
+        color: #7ece42;
+      }
+
+      .token.important {
+        font-weight: normal;
+      }
+
+      .token.bold {
+        font-weight: bold;
+      }
+
+      .token.italic {
+        font-style: italic;
+      }
+
+      .token.entity {
+        cursor: help;
+      }
+
+      .token.namespace {
+        opacity: 0.7;
+      }
     }
+  }
+
+  .Collapsible {
+    margin-bottom: 10px;
+    background-color: rgba(36, 173, 197, 0.2);
+    border-radius: 15px;
+    -moz-border-radius: 15px;
+    padding: 10px;
+  }
 
-    details p {
-      font-size: 17px;
-      color: var(--color-gray-dark);
-      margin-left: 20px;
-      margin-right: 10px;
+  .Collapsible__trigger {
+    font-family: var(--font-brandon);
+    font-weight: 500;
+    display: block;
+    position: relative;
+    opacity: 0.9;
+    cursor: pointer;
+
+    &::after {
+      position: absolute;
+      display: inline-block;
+      background-size: 20px 20px;
+      right: 0;
+      width: 20px;
+      height: 20px;
+      background-image: url('/img/click.png');
+      content: '';
+      font-family: monospace;
+      transition: transform 200ms;
     }
 
-    details pre {
-      font-size: 14px;
-      color: var(--color-gray-dark);
-      margin-left: 20px;
-      margin-right: 10px;
+    &.is-open::after {
+      opacity: 0.5;
     }
   }
+
+  .Collapsible__contentInner {
+    background-color: rgba(36, 173, 197, 0);
+    border-radius: 15px;
+    -moz-border-radius: 15px;
+    padding: 10px;
+  }
+
+  details p {
+    font-size: 17px;
+    color: var(--color-gray-dark);
+    margin-left: 20px;
+    margin-right: 10px;
+  }
+
+  details pre {
+    font-size: 14px;
+    color: var(--color-gray-dark);
+    margin-left: 20px;
+    margin-right: 10px;
+  }
+}
+
+.content {
+  min-width: 200px;
+  margin: 30px;
+  flex: 1;
+  background-color: #fff;
+
+  @media (--xs-scr) {
+    margin: 15px 0;
+  }
 }
 
 .tutorialsWrapper {

From 56078f7a31f5bf5ba0409d9409198381485f829c Mon Sep 17 00:00:00 2001
From: Pavel Grinchenko <psdcoder@gmail.com>
Date: Wed, 8 Apr 2020 20:44:53 +0300
Subject: [PATCH 51/51] Fix svg images in the blog

---
 gatsby-config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index f2c1b2266d..192d7e173d 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -59,7 +59,6 @@ const plugins = [
           },
           resolve: 'gatsby-remark-prismjs'
         },
-        'gatsby-remark-copy-linked-files',
         {
           resolve: 'gatsby-remark-smartypants',
           options: {
@@ -73,6 +72,7 @@ const plugins = [
           }
         },
         'gatsby-remark-relative-images',
+        'gatsby-remark-copy-linked-files',
         {
           resolve: 'gatsby-remark-external-links'
         },