package updates

* update most dependencies * simplify linting: kick out editorconfig, stylelint * update to @oceanprotocol/art v3.0.0, source new assets and update UI for it
2024-11-26 19:49:26 +01:00 · 2020-07-01 11:24:21 +02:00 · 2020-07-01 11:24:21 +02:00 · 7014ee27a7
commit 7014ee27a7
parent 40e160c4c7
75 changed files with 28366 additions and 3525 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -1,12 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_size = 4
-end_of_line = lf
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.{json,yml,yaml,md}]
-indent_size = 2
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,4 @@
 node_modules
-package-lock.json
 yarn.lock
 yarn-error.log
 .cache
--- a/.prettierrc
+++ b/.prettierrc
@ -1,5 +1,6 @@
 {
  "semi": false,
  "singleQuote": true,
-    "trailingComma": "none"
+  "trailingComma": "none",
+  "tabWidth": 2
 }
--- a/.stylelintrc
+++ b/.stylelintrc
@ -1,11 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-bigchaindb",
-    "stylelint-config-css-modules",
-    "./node_modules/prettier-stylelint/config.js"
-  ],
-  "syntax": "scss",
-  "rules": {
-      "no-descending-specificity": null
-  }
-}
--- a/README.md
+++ b/README.md
@ -75,7 +75,6 @@ To enforce a consistent code style, linting is setup for pretty much every file.
 In this repo the following tools are setup for that:

 - ESLint with [eslint-config-oceanprotocol](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
- Stylelint with [stylelint-config-bigchaindb](https://github.com/bigchaindb/stylelint-config-bigchaindb)
 - [markdownlint](https://github.com/DavidAnson/markdownlint)
 - [Prettier](https://prettier.io)

@ -93,7 +92,6 @@ If you use VS Code as your editor, you can install those extensions to get linti

 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [stylelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint)
 - [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

 ## Deployment
@ -125,7 +123,7 @@ Requires authorization against AWS with [one of the various ways](https://docs.a
 ## License

 ```text
-Copyright 2019 Ocean Protocol Foundation Ltd.
+Copyright 2020 Ocean Protocol Foundation Ltd.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/content/setup/compute-to-data.md
+++ b/content/setup/compute-to-data.md
@ -3,10 +3,8 @@ title: Set Up a Compute-to-Data Environment
 description: Set Up a Compute-to-Data environment.
 ---

-
 ## Requirements

-
 First, create a folder with the following structure:

 ```text
@ -38,7 +36,6 @@ Then you need the following parts:

 ## Customize your Operator Service deployment

-
 The following resources need attention:

 | Resource                  | Variable           | Description                                                                                            |
@ -66,7 +63,6 @@ For AWS , please make sure that your class allocates volumes in the same region

 We created our own 'standard' class in AWS:

-
 ```bash
 kubectl get storageclass standard -o yaml
 ```
@ -107,7 +103,6 @@ kubectl create ns ocean-operator
 kubectl create ns ocean-compute
 ```

-
 ## Deploy Operator Service

 ```bash
@ -121,7 +116,6 @@ kubectl apply -f /ocean/operator-service/role_binding.yaml
 kubectl apply -f /ocean/operator-service/service_account.yaml
 ```

-
 ## Deploy Operator Engine

 ```bash
@ -134,14 +128,12 @@ kubectl apply -f /ocean/operator-engine/workflow-crd.yaml
 kubectl create -f /ocean/operator-service/postgres-configmap.yaml
 ```

-
 ## Expose Operator Service

 ```bash
 kubectl expose deployment operator-api --namespace=ocean-operator --port=8050
 ```

-
 Run a port forward or create your ingress service (not covered here):

 ```bash
@ -156,7 +148,6 @@ If your cluster is running on example.com:
 curl -X POST "http://example.com:8050/api/v1/operator/pgsqlinit" -H  "accept: application/json"
 ```

-
 ## Update Brizo

 Update Brizo by adding or updating the `OPERATOR_SERVICE_URL` env in `/ocean/barge/compose-files/brizo.yaml`
--- a/external/dev-ocean
+++ b/external/dev-ocean
@ -1 +1 @@
-Subproject commit 90846d10e449159eec5fe762d48e595d5a008135
+Subproject commit ba98510529e00ff9411a7df8a8c478dc3b58b635
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -120,10 +120,7 @@ module.exports = {
    {
      resolve: 'gatsby-plugin-sass',
      options: {
-                includePaths: [
-                    `${__dirname}/node_modules`,
-                    `${__dirname}/src/styles`
-                ]
+        includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`]
      }
    },
    'gatsby-transformer-sharp',
--- a/gatsby-node.js
+++ b/gatsby-node.js
@ -59,9 +59,7 @@ exports.createPages = ({ graphql, actions }) => {
            }

            devOceanDocs: allMarkdownRemark(
-                            filter: {
-                                fileAbsolutePath: { regex: "/dev-ocean/doc/" }
-                            }
+              filter: { fileAbsolutePath: { regex: "/dev-ocean/doc/" } }
            ) {
              edges {
                node {
@ -80,26 +78,17 @@ exports.createPages = ({ graphql, actions }) => {
            }

            squidJs: github {
-                            repository(
-                                name: "squid-js"
-                                owner: "oceanprotocol"
-                            ) {
+              repository(name: "squid-js", owner: "oceanprotocol") {
                name
                releases(
                  first: 30
-                                    orderBy: {
-                                        field: CREATED_AT
-                                        direction: DESC
-                                    }
+                  orderBy: { field: CREATED_AT, direction: DESC }
                ) {
                  edges {
                    node {
                      isPrerelease
                      isDraft
-                                            releaseAssets(
-                                                first: 1
-                                                name: "squid-js.json"
-                                            ) {
+                      releaseAssets(first: 1, name: "squid-js.json") {
                        edges {
                          node {
                            name
@ -201,9 +190,7 @@ exports.createPages = ({ graphql, actions }) => {
 const createTypeDocPage = async (createPage, name, downloadUrl) => {
  try {
    const typedoc = await fetch(downloadUrl)
-        const typedocTemplate = path.resolve(
-            './src/templates/Typedoc/index.jsx'
-        )
+    const typedocTemplate = path.resolve('./src/templates/Typedoc/index.jsx')
    const slug = `/references/${name}/`

    createPage({
@ -315,9 +302,7 @@ const createSwaggerPages = async (createPage) => {
  const petStoreSlug = '/references/petstore/'

  try {
-        const client = await Swagger(
-            `http://petstore.swagger.io/v2/swagger.json`
-        )
+    const client = await Swagger(`http://petstore.swagger.io/v2/swagger.json`)

    createPage({
      path: petStoreSlug,
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -8,82 +8,72 @@
    "build": "gatsby build",
    "start": "gatsby develop",
    "ssr": "npm run build && serve -s public/",
-    "format:js": "prettier --write '**/*.{js,jsx}'",
-    "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
-    "format:md": "prettier --write '**/*.md'",
-    "format:yml": "prettier --write '**/*.{yml,yaml}'",
-    "format": "run-p format:js format:css format:md format:yml",
+    "format": "prettier --ignore-path .gitignore './**/*.{css,scss,yml,js,jsx,ts,tsx,json}' --write",
    "lint:js": "eslint --ignore-path .gitignore --ignore-path .prettierignore --ext .js,.jsx .",
-    "lint:css": "stylelint './src/**/*.{css,scss}'",
    "lint:md": "markdownlint './**/*.{md,markdown}' --ignore './{node_modules,external,public,.cache}/**/*'",
    "lint:yml": "prettier '**/*.{yml,yaml}' --list-different",
-    "lint": "run-p --continue-on-error lint:js lint:css lint:md lint:yml",
+    "lint": "run-p --continue-on-error lint:js lint:md lint:yml",
    "test": "npm run lint",
    "deploy": "./scripts/deploy.sh"
  },
  "dependencies": {
-    "@oceanprotocol/art": "^2.2.0",
+    "@oceanprotocol/art": "^3.0.0",
    "axios": "^0.19.2",
    "classnames": "^2.2.6",
-    "gatsby": "^2.21.31",
-    "gatsby-image": "^2.4.3",
-    "gatsby-plugin-catch-links": "^2.3.1",
-    "gatsby-plugin-google-analytics": "^2.3.1",
-    "gatsby-plugin-manifest": "^2.4.3",
-    "gatsby-plugin-offline": "^3.2.2",
-    "gatsby-plugin-react-helmet": "^3.3.1",
-    "gatsby-plugin-sass": "^2.3.1",
-    "gatsby-plugin-sharp": "^2.6.3",
-    "gatsby-plugin-sitemap": "^2.4.2",
+    "gatsby": "^2.23.12",
+    "gatsby-image": "^2.4.9",
+    "gatsby-plugin-catch-links": "^2.3.7",
+    "gatsby-plugin-google-analytics": "^2.3.6",
+    "gatsby-plugin-manifest": "^2.4.14",
+    "gatsby-plugin-offline": "^3.2.13",
+    "gatsby-plugin-react-helmet": "^3.3.6",
+    "gatsby-plugin-sass": "^2.3.7",
+    "gatsby-plugin-sharp": "^2.6.14",
+    "gatsby-plugin-sitemap": "^2.4.7",
    "gatsby-plugin-svgr": "^2.0.2",
    "gatsby-plugin-webpack-size": "^1.0.0",
-    "gatsby-remark-autolink-headers": "^2.3.2",
+    "gatsby-remark-autolink-headers": "^2.3.7",
    "gatsby-remark-code-titles": "^1.1.0",
    "gatsby-remark-component": "^1.1.3",
-    "gatsby-remark-copy-linked-files": "^2.3.2",
+    "gatsby-remark-copy-linked-files": "^2.3.7",
    "gatsby-remark-embed-video": "^3.0.10",
    "gatsby-remark-github": "^2.0.0",
-    "gatsby-remark-images": "^3.3.3",
-    "gatsby-remark-responsive-iframe": "^2.4.2",
-    "gatsby-remark-smartypants": "^2.3.1",
-    "gatsby-remark-vscode": "^2.1.1",
-    "gatsby-source-filesystem": "^2.3.3",
-    "gatsby-source-graphql": "^2.5.1",
-    "gatsby-transformer-remark": "^2.8.8",
-    "gatsby-transformer-sharp": "^2.5.2",
-    "gatsby-transformer-xml": "^2.3.1",
-    "gatsby-transformer-yaml": "^2.4.1",
+    "gatsby-remark-images": "^3.3.14",
+    "gatsby-remark-responsive-iframe": "^2.4.7",
+    "gatsby-remark-smartypants": "^2.3.6",
+    "gatsby-remark-vscode": "^2.1.2",
+    "gatsby-source-filesystem": "^2.3.14",
+    "gatsby-source-graphql": "^2.5.7",
+    "gatsby-transformer-remark": "^2.8.20",
+    "gatsby-transformer-sharp": "^2.5.7",
+    "gatsby-transformer-xml": "^2.3.6",
+    "gatsby-transformer-yaml": "^2.4.6",
    "giphy-js-sdk-core": "^1.0.6",
-    "intersection-observer": "^0.10.0",
+    "intersection-observer": "^0.11.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
-    "react-helmet": "^6.0.0",
+    "react-helmet": "^6.1.0",
    "react-scrollspy": "^3.4.2",
-    "rehype-react": "^5.0.1",
+    "rehype-react": "^6.0.0",
    "remark": "^12.0.0",
-    "remark-github-plugin": "^1.3.1",
+    "remark-github-plugin": "^1.4.0",
    "remark-react": "^7.0.1",
    "shortid": "^2.2.15",
-    "slugify": "^1.4.0",
+    "slugify": "^1.4.4",
    "smoothscroll-polyfill": "^0.4.4",
-    "swagger-client": "^3.10.3"
+    "swagger-client": "^3.10.9"
  },
  "devDependencies": {
    "@svgr/webpack": "^5.4.0",
    "dotenv": "^8.2.0",
-    "eslint": "^7.0.0",
+    "eslint": "^7.3.1",
    "eslint-config-oceanprotocol": "^1.5.0",
    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "markdownlint-cli": "^0.23.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "markdownlint-cli": "^0.23.2",
    "node-sass": "^4.14.1",
    "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5",
-    "prettier-stylelint": "^0.4.2",
-    "stylelint": "^13.3.3",
-    "stylelint-config-bigchaindb": "^1.2.2",
-    "stylelint-config-css-modules": "^2.2.0",
-    "stylelint-config-standard": "^20.0.0"
+    "prettier": "^2.0.5"
  },
  "repository": {
    "type": "git",
--- a/src/components/DocContent.module.scss
+++ b/src/components/DocContent.module.scss
@ -32,7 +32,7 @@
  blockquote {
    padding: $spacer / 2;
    background: lighten($brand-grey-light, 36%);
-        border-left: .25rem solid $brand-grey-light;
+    border-left: 0.25rem solid $brand-grey-light;
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;

@ -64,7 +64,7 @@
 :global(.footnote-ref) {
  font-size: $font-size-mini;
  font-weight: $font-weight-bold;
-    padding-left: .2rem;
-    padding-right: .2rem;
+  padding-left: 0.2rem;
+  padding-right: 0.2rem;
  display: inline-block;
 }
--- a/src/components/DocFooter.jsx
+++ b/src/components/DocFooter.jsx
@ -28,9 +28,7 @@ export default function DocFooter({ post, url, externalName }) {
      <a href={url} className={post && !post.html ? styles.active : null}>
        <Pencil /> Edit this page on GitHub
        {externalName && (
-                    <span className={styles.externalRepoName}>
-                        {externalName}
-                    </span>
+          <span className={styles.externalRepoName}>{externalName}</span>
        )}
      </a>
    </footer>
--- a/src/components/DocHeader.jsx
+++ b/src/components/DocHeader.jsx
@ -13,9 +13,7 @@ const DocHeader = ({ title, description, prepend }) => {
      <h1 className={styles.title}>
        {title} {prepend && prepend}
      </h1>
-            {description && (
-                <div className={styles.lead}>{descriptionHtml}</div>
-            )}
+      {description && <div className={styles.lead}>{descriptionHtml}</div>}
    </header>
  )
 }
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@ -48,8 +48,8 @@ const Footer = () => (
          <Content>
            <small>
              &copy; {new Date().getFullYear()}{' '}
-                            <a href={social.site}>{siteCompany}</a> &mdash; All
-                            Rights Reserved
+              <a href={social.site}>{siteCompany}</a> &mdash; All Rights
+              Reserved
            </small>

            <FooterSocial social={social} />
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@ -1,6 +1,6 @@
 import React from 'react'
 import { Link, StaticQuery, graphql } from 'gatsby'
-import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
+import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import styles from './Header.module.scss'

 const query = graphql`
--- a/src/components/Header.module.scss
+++ b/src/components/Header.module.scss
@ -1,8 +1,8 @@
@import 'variables';

 .header {
-    background: $brand-black
-        url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center -6rem;
+  background: $brand-grey-dimmed url('@oceanprotocol/art/waves/waves.svg')
+    no-repeat center -3rem;
  background-size: cover;
  width: 100%;
  padding: $spacer / 2 0;
@ -29,7 +29,6 @@
 .headerLogoImage {
  width: 4rem;
  height: 4rem;
-    fill: #fff;
  margin: 0;
 }

@ -68,7 +67,7 @@
  &::-webkit-scrollbar {
    width: 3px;
    height: 3px;
-        transition: opacity .2s ease-out;
+    transition: opacity 0.2s ease-out;
  }
 }

@ -76,14 +75,9 @@
  display: inline-block;
  margin: 0 $spacer / 2;
  font-family: $font-family-button;
-    color: $brand-grey-lighter;
+  color: $brand-grey;

  &:last-child {
    margin-right: 0;
  }
-
-    &:hover,
-    &:focus {
-        color: $brand-white;
-    }
 }
--- a/src/components/HeaderHome.jsx
+++ b/src/components/HeaderHome.jsx
@ -1,6 +1,6 @@
 import React from 'react'
 import { StaticQuery, graphql } from 'gatsby'
-import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
+import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import Content from '../components/Content'
 import styles from './HeaderHome.module.scss'

@ -24,9 +24,7 @@ const HeaderHome = () => (
          <Content>
            <Logo className={styles.headerLogo} />
            <h1 className={styles.headerTitle}>{siteTitle}</h1>
-                        <p className={styles.headerDescription}>
-                            {siteDescription}
-                        </p>
+            <p className={styles.headerDescription}>{siteDescription}</p>
          </Content>
        </header>
      )
--- a/src/components/HeaderHome.module.scss
+++ b/src/components/HeaderHome.module.scss
@ -2,14 +2,12 @@
@import 'animations';

 .header {
-    background: $brand-black
-        url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center
-        4rem;
+  background: $brand-grey-dimmed url('@oceanprotocol/art/waves/waves.svg')
+    no-repeat center 10rem;
  background-size: cover;
  width: 100%;
  padding: $spacer * 2 0;
  min-height: 30rem;
-    color: $brand-white;
  text-align: center;
  display: flex;
  justify-content: center;
@ -19,7 +17,7 @@
 .headerLogo,
 .headerTitle,
 .headerDescription {
-    animation: fadeInUp .6s ease-out backwards;
+  animation: fadeInUp 0.6s ease-out backwards;
 }

 .headerLogo {
@ -30,7 +28,7 @@
 .headerTitle {
  margin-bottom: $spacer;
  font-size: $font-size-h2;
-    animation-delay: .2s;
+  animation-delay: 0.2s;

  @media (min-width: $break-point--small) {
    font-size: $font-size-h1;
@ -42,7 +40,7 @@
  max-width: $break-point--small;
  margin-left: auto;
  margin-right: auto;
-    animation-delay: .4s;
+  animation-delay: 0.4s;

  @media (min-width: $break-point--small) {
    font-size: $font-size-large;
--- a/src/components/HeaderSection.module.scss
+++ b/src/components/HeaderSection.module.scss
@ -1,7 +1,7 @@
@import 'variables';

 .headerSection {
-    border-bottom: .1rem solid $brand-grey-lighter;
+  border-bottom: 0.1rem solid $brand-grey-lighter;
 }

 .headerSectionTitle {
--- a/src/components/QuickRun.jsx
+++ b/src/components/QuickRun.jsx
@ -7,9 +7,7 @@ const QuickRun = () => (
  <StaticQuery
    query={graphql`
      query {
-                allMarkdownRemark(
-                    filter: { fields: { slug: { eq: "/quickrun/" } } }
-                ) {
+        allMarkdownRemark(filter: { fields: { slug: { eq: "/quickrun/" } } }) {
          edges {
            node {
              html
@ -24,8 +22,8 @@ const QuickRun = () => (
          <h1 className={styles.tldr}>TL;DR</h1>
          <strong>
            Wanna quickly get an Ocean network with all{' '}
-                        <Link to="/concepts/components/">core components</Link>{' '}
-                        running on your machine?
+            <Link to="/concepts/components/">core components</Link> running on
+            your machine?
          </strong>
        </header>

--- a/src/components/Repositories/RepositoryList.jsx
+++ b/src/components/Repositories/RepositoryList.jsx
@ -11,11 +11,7 @@ const RepositoryList = ({ repositories }) => (

        <div className={styles.repositoryList}>
          {node.items.map((item) => (
-                        <Repository
-                            key={item.name}
-                            name={item.name}
-                            links={item.links}
-                        />
+            <Repository key={item.name} name={item.name} links={item.links} />
          ))}
        </div>
      </div>
--- a/src/components/Repositories/RepositoryList.module.scss
+++ b/src/components/Repositories/RepositoryList.module.scss
@ -48,7 +48,7 @@
    opacity: 0;
    width: 7px;
    height: 7px;
-        transition: opacity .2s ease-out;
+    transition: opacity 0.2s ease-out;
  }

  &:hover {
--- a/src/components/Repositories/index.jsx
+++ b/src/components/Repositories/index.jsx
@ -32,18 +32,14 @@ const Repositories = () => (
      return (
        <div className={styles.repositories}>
          <header>
-                        <h1 className={styles.repositoriesTitle}>
-                            Repositories
-                        </h1>
+            <h1 className={styles.repositoriesTitle}>Repositories</h1>
            <p className={styles.repositoriesText}>
              <strong>
-                                Most of our repositories are open source and we
-                                listed the key repositories here. Start with the{' '}
-                                <Link to="/concepts/components/">
-                                    software components
-                                </Link>{' '}
-                                document for an introduction to the components
-                                found in a typical Ocean network.
+                Most of our repositories are open source and we listed the key
+                repositories here. Start with the{' '}
+                <Link to="/concepts/components/">software components</Link>{' '}
+                document for an introduction to the components found in a
+                typical Ocean network.
              </strong>
            </p>
          </header>
--- a/src/components/Repository/Numbers.module.scss
+++ b/src/components/Repository/Numbers.module.scss
@ -23,13 +23,13 @@
    }

    span {
-            margin-left: -.15rem;
+      margin-left: -0.15rem;
    }
  }

  svg {
    display: inline-block;
    fill: $brand-grey-light;
-        margin-bottom: -.1rem;
+    margin-bottom: -0.1rem;
  }
 }
--- a/src/components/Repository/Title.jsx
+++ b/src/components/Repository/Title.jsx
@ -11,9 +11,7 @@ export default function Title({ name, isFork, parent, releases, url }) {
        {isFork && <Forks />}
        {name}
        {isFork && (
-                    <span className={styles.forkLine}>
-                        {parent.nameWithOwner}
-                    </span>
+          <span className={styles.forkLine}>{parent.nameWithOwner}</span>
        )}
      </a>
      {releases.edges[0] && (
--- a/src/components/Repository/Title.module.scss
+++ b/src/components/Repository/Title.module.scss
@ -24,8 +24,8 @@
    display: inline-block;
    fill: $brand-grey-light;
    margin-right: $spacer / 8;
-        margin-left: -.2rem;
-        margin-bottom: -.2rem;
+    margin-left: -0.2rem;
+    margin-bottom: -0.2rem;
  }
 }

--- a/src/components/Repository/index.jsx
+++ b/src/components/Repository/index.jsx
@ -69,8 +69,7 @@ const Repository = ({ name, links, readme }) => (
  <StaticQuery
    query={queryGithub}
    render={(data) => {
-            const repositoriesGitHub =
-                data.github.organization.repositories.edges
+      const repositoriesGitHub = data.github.organization.repositories.edges
      const repositoriesYaml = data.allRepositoriesYaml.edges

      // just iterate over all repos until we have a name match,
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@ -47,9 +47,7 @@ const SidebarList = ({ items, location, toc, tocComponent }) => (
              link={item.link}
              title={item.title}
              linkClasses={
-                                item.link === location.pathname
-                                    ? styles.active
-                                    : styles.link
+                item.link === location.pathname ? styles.active : styles.link
              }
            />
          </li>
@ -87,12 +85,7 @@ SidebarGroupTitle.propTypes = {
 const SidebarGroup = ({ i, group, location, ...props }) => (
  <>
    <SidebarGroupTitle group={group} />
-        <SidebarList
-            key={i}
-            items={group.items}
-            location={location}
-            {...props}
-        />
+    <SidebarList key={i} items={group.items} location={location} {...props} />
  </>
 )

@ -129,9 +122,7 @@ export default class Sidebar extends Component {
        {sidebarfile.map((group, i) => (
          <div key={i}>
            {collapsed ? (
-                            group.items.some(
-                                (item) => item.link === location.pathname
-                            ) ? (
+              group.items.some((item) => item.link === location.pathname) ? (
                <SidebarGroup
                  i={i}
                  group={group}
@ -143,11 +134,7 @@ export default class Sidebar extends Component {
                <SidebarGroupTitle group={group} />
              )
            ) : (
-                            <SidebarGroup
-                                i={i}
-                                group={group}
-                                location={location}
-                            />
+              <SidebarGroup i={i} group={group} location={location} />
            )}
          </div>
        ))}
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@ -72,8 +72,8 @@
  color: $brand-grey;
  display: inline-block;
  padding: $spacer / 6 $spacer / 2;
-    border-left: .1rem solid transparent;
-    margin-left: -.05rem;
+  border-left: 0.1rem solid transparent;
+  margin-left: -0.05rem;

  &:hover,
  &:focus {
@ -121,7 +121,7 @@
  }

  [data-deprecated='true'] code {
-        opacity: .5;
+    opacity: 0.5;
  }
 }

--- a/src/images/share.png
+++ b/src/images/share.png
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@ -51,19 +51,12 @@ export default class NotFoundPage extends Component {
            <article className={styles.content}>
              <h1>Page not found.</h1>
              <p>
-                                You just hit a route that doesn&#39;t exist...
-                                the sadness. Check your url,{' '}
-                                <Link to="/">go back to the homepage</Link>, or
-                                check out some <em>{tag}</em> gifs, entirely
-                                your choice.
+                You just hit a route that doesn&#39;t exist... the sadness.
+                Check your url, <Link to="/">go back to the homepage</Link>, or
+                check out some <em>{tag}</em> gifs, entirely your choice.
              </p>

-                            <video
-                                className="gif"
-                                src={this.state.gif}
-                                autoPlay
-                                loop
-                            />
+              <video className="gif" src={this.state.gif} autoPlay loop />

              <div>
                <button
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@ -63,11 +63,7 @@ const IndexPage = ({ data, location }) => (
        <ul className={styles.sections}>
          {data.allSectionsYaml.edges.map(({ node }) => (
            <li key={node.title} className={styles.section}>
-                            <SectionLink
-                                to={node.link}
-                                title={node.title}
-                                color={node.color}
-                            >
+              <SectionLink to={node.link} title={node.title} color={node.color}>
                {node.description}
              </SectionLink>
            </li>
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@ -16,7 +16,7 @@

 .section {
  margin-top: $spacer;
-    animation: fadeInUp .6s ease-out backwards;
+  animation: fadeInUp 0.6s ease-out backwards;

  &:before {
    display: none;
@ -25,14 +25,14 @@
  @media (min-width: $break-point--medium) {
    flex: 0 0 31%;
  }
-    animation-delay: .4s;
+  animation-delay: 0.4s;

  &:nth-child(2) {
-        animation-delay: .6s;
+    animation-delay: 0.6s;
  }

  &:nth-child(3) {
-        animation-delay: .8s;
+    animation-delay: 0.8s;
  }

  &:last-child {
@ -46,17 +46,17 @@
  flex-wrap: wrap;
  padding: $spacer $spacer * $line-height;
  border-radius: $border-radius;
-    box-shadow: rgba($brand-black, .1) 0 9px 18px;
+  box-shadow: rgba($brand-black, 0.1) 0 9px 18px;
  color: $brand-grey;
  background: $brand-white;
  height: 100%;

  &:hover,
  &:focus {
-        box-shadow: rgba($brand-black, .1) 0 12px 20px;
+    box-shadow: rgba($brand-black, 0.1) 0 12px 20px;

    svg {
-            transform: translate3d(.2rem, 0, 0);
+      transform: translate3d(0.2rem, 0, 0);
    }
  }
 }
@ -114,6 +114,6 @@
    width: $font-size-small;
    height: $font-size-small;
    fill: $brand-grey-light;
-        transition: transform .2s ease-out;
+    transition: transform 0.2s ease-out;
  }
 }
--- a/src/styles/_animations.scss
+++ b/src/styles/_animations.scss
@ -1,6 +1,6 @@
@keyframes fadeInUp {
  0% {
-        opacity: .01;
+    opacity: 0.01;
    transform: translate3d(0, 5rem, 0);
  }

@ -12,7 +12,7 @@

@keyframes fadeIn {
  0% {
-        opacity: .01;
+    opacity: 0.01;
  }

  100% {
--- a/src/styles/_code.scss
+++ b/src/styles/_code.scss
@ -24,8 +24,8 @@ samp {

 :not(pre) > code {
  display: inline-block;
-    padding-left: .3rem;
-    padding-right: .3rem;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
 }

 a > code {
@ -65,9 +65,9 @@ pre[data-language]:before {
  color: $brand-grey;
  font-size: $font-size-mini;
  font-family: $font-family-monospace;
-    letter-spacing: .05em;
+  letter-spacing: 0.05em;
  line-height: 1;
-    padding: .25rem .5rem;
+  padding: 0.25rem 0.5rem;
  position: absolute;
  right: $spacer / 2;
  top: 0;
@ -87,15 +87,15 @@ pre[data-language='bash'] {
  }

  .vscode-highlight-line:only-child {
-        padding-left: .5rem;
+    padding-left: 0.5rem;
    display: block;

    &:before {
      content: '$';
-            opacity: .5;
+      opacity: 0.5;
      display: inline-block;
-            margin-left: -.5rem;
-            margin-right: .5rem;
+      margin-left: -0.5rem;
+      margin-right: 0.5rem;
    }
  }
 }
@ -149,7 +149,7 @@ pre[data-language='toml']:before {
    margin-right: -($spacer / 1.5);
    padding-left: $spacer / 1.85;
    padding-right: $spacer / 1.5;
-        border-left: .25rem solid $brand-grey-light;
+    border-left: 0.25rem solid $brand-grey-light;
    width: calc(100% + #{$spacer * 1.5});
  }
 }
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@ -10,6 +10,7 @@ $brand-grey: #41474e;
 $brand-grey-light: #8b98a9;
 $brand-grey-dark: #303030;
 $brand-grey-lighter: #e2e2e2;
+$brand-grey-dimmed: #f7f7f7;

 $green: #5fb359;
 $red: #d80606;
@ -35,8 +36,8 @@ $font-family-monospace: 'Fira Code', 'Fira Mono', menlo, monaco, consolas,
 $font-size-root: 15px;
 $font-size-base: 1rem;
 $font-size-large: 1.2rem;
-$font-size-small: .85rem;
-$font-size-mini: .65rem;
+$font-size-small: 0.85rem;
+$font-size-mini: 0.65rem;
 $font-size-text: $font-size-base;
 $font-size-label: $font-size-base;
 $font-size-title: 1.4rem;
@ -53,7 +54,7 @@ $line-height: 1.6;

 // Sizes
 $spacer: 2rem;
-$page-frame: .75rem;
+$page-frame: 0.75rem;

 $break-point--small: 640px;
 $break-point--medium: 860px;
@ -61,6 +62,6 @@ $break-point--large: 1140px;
 $break-point--huge: 1400px;
 $brand-border-width: 1px;

-$border-radius: .2rem;
+$border-radius: 0.2rem;

 $narrowWidth: 35rem;
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -25,22 +25,18 @@ body {
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  margin: 0;
-
-    @media screen and (min-width: $break-point--small) {
-        padding: $page-frame;
-    }
 }

 a {
  text-decoration: none;
  color: $brand-pink;
-    transition: .2s ease-out;
+  transition: 0.2s ease-out;

  &:hover,
  &:focus {
    color: darken($brand-pink, 15%);
    text-decoration: none;
-        transform: translate3d(0, -.1rem, 0);
+    transform: translate3d(0, -0.1rem, 0);
  }

  &:active {
@ -191,7 +187,7 @@ picture {
 hr {
  margin: $spacer 0;
  border: 0;
-    border-bottom: .1rem solid $brand-grey-lighter;
+  border-bottom: 0.1rem solid $brand-grey-lighter;
 }

 // Quotes
@ -215,7 +211,7 @@ blockquote > p {
 blockquote {
  margin: 0 0 $spacer;
  padding-left: $spacer / 2;
-    border-left: .2rem solid $brand-grey-lighter;
+  border-left: 0.2rem solid $brand-grey-lighter;

  @media screen and (min-width: $break-point--small) {
    padding-left: $spacer / $line-height;
@ -277,7 +273,7 @@ table {
 /////////////////////////////////////

 .anchor {
-    margin-top: .6rem;
+  margin-top: 0.6rem;
 }

@import 'code';
--- a/src/templates/Doc.jsx
+++ b/src/templates/Doc.jsx
@ -74,9 +74,7 @@ export default class DocTemplate extends Component {
        />

        <Layout location={location}>
-                    <HeaderSection
-                        title={section ? this.sectionTitle : title}
-                    />
+          <HeaderSection title={section ? this.sectionTitle : title} />

          <Content>
            {section ? (
@ -88,9 +86,7 @@ export default class DocTemplate extends Component {
                    collapsed={isApiSection}
                    toc={
                      isApiSection &&
-                                            !location.pathname.includes(
-                                                '/references/introduction/'
-                                            )
+                      !location.pathname.includes('/references/introduction/')
                    }
                    tableOfContents={tableOfContents}
                  />
@ -98,9 +94,7 @@ export default class DocTemplate extends Component {
                <DocMain
                  title={title}
                  description={description}
-                                    tableOfContents={
-                                        !isApiSection && tableOfContents
-                                    }
+                  tableOfContents={!isApiSection && tableOfContents}
                  post={post}
                />
              </main>
--- a/src/templates/Doc.module.scss
+++ b/src/templates/Doc.module.scss
@ -59,7 +59,7 @@
    font-family: $font-family-base;
    font-weight: $font-weight-base;
    display: inline-block;
-        margin-left: .5rem;
+    margin-left: 0.5rem;
  }
 }

--- a/src/templates/Swagger/Paths.jsx
+++ b/src/templates/Swagger/Paths.jsx
@ -77,9 +77,7 @@ const Parameters = ({ parameters }) => (

          <p>{description}</p>

-                    {schema && (
-                        <ParameterExample properties={schema.properties} />
-                    )}
+          {schema && <ParameterExample properties={schema.properties} />}
        </div>
      )
    })}
--- a/src/templates/Swagger/Paths.module.scss
+++ b/src/templates/Swagger/Paths.module.scss
@ -11,19 +11,19 @@
  text-transform: uppercase;

  &[data-type='get'] {
-        background: rgba($green, .4);
+    background: rgba($green, 0.4);
  }

  &[data-type='post'] {
-        background: rgba($brand-blue, .4);
+    background: rgba($brand-blue, 0.4);
  }

  &[data-type='put'] {
-        background: rgba($brand-violet, .3);
+    background: rgba($brand-violet, 0.3);
  }

  &[data-type='delete'] {
-        background: rgba($red, .4);
+    background: rgba($red, 0.4);
  }
 }

--- a/src/templates/Swagger/index.jsx
+++ b/src/templates/Swagger/index.jsx
@ -113,10 +113,7 @@ export default class ApiSwaggerTemplate extends Component {
                />

                {(contact || license) && (
-                                    <SwaggerMeta
-                                        contact={contact}
-                                        license={license}
-                                    />
+                  <SwaggerMeta contact={contact} license={license} />
                )}

                {(host || basePath) && (
--- a/src/templates/Typedoc/Entities.jsx
+++ b/src/templates/Typedoc/Entities.jsx
@ -19,11 +19,7 @@ const Type = ({ type }) => {
    <div className={styles.type}>
      <span>
        {isInternal && (
-                    <Scroll
-                        type="id"
-                        element={`${name && slugify(name)}`}
-                        offset={-20}
-                    >
+          <Scroll type="id" element={`${name && slugify(name)}`} offset={-20}>
            {type.name}
          </Scroll>
        )}
@ -36,11 +32,7 @@ const Type = ({ type }) => {
          <span>
            {typeArguments.map((typeArgument, i) => (
              <span key={shortid.generate()}>
-                                {i !== 0 && (
-                                    <span className={styles.typeSymbol}>
-                                        ,{' '}
-                                    </span>
-                                )}
+                {i !== 0 && <span className={styles.typeSymbol}>, </span>}
                <Type type={typeArgument} />
              </span>
            ))}
@ -83,14 +75,10 @@ const MethodDetails = ({ property }) => {
          {parameters.map((parameter) => {
            const { name, type, flags, comment } = parameter
            const { isOptional } = flags
-                        const description =
-                            comment && (comment.text || comment.shortText)
+            const description = comment && (comment.text || comment.shortText)

            return (
-                            <div
-                                className={styles.parameters}
-                                key={shortid.generate()}
-                            >
+              <div className={styles.parameters} key={shortid.generate()}>
                <h5>
                  <code>{name}</code>
                  {isOptional && (
@ -127,14 +115,7 @@ MethodDetails.propTypes = {
 }

 const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
-    const {
-        name,
-        kindString,
-        flags,
-        signatures,
-        sources,
-        decorators
-    } = property
+  const { name, kindString, flags, signatures, sources, decorators } = property
  const { isPublic, isStatic } = flags
  const signature = signatures && signatures[0]
  const comment = (signature && signature.comment) || property.comment
@ -145,8 +126,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
  let deprecatedUse, deprecatedSlug
  if (deprecation) {
    deprecatedUse = deprecation.arguments.alternative.replace(/('|")/g, '')
-        deprecatedSlug =
-            deprecatedUse && slugify(deprecatedUse.replace('.', '-'))
+    deprecatedSlug = deprecatedUse && slugify(deprecatedUse.replace('.', '-'))
  }

  const sourceLink = `${sourceUrl}${fileName}#L${line}`
@ -160,10 +140,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
    >
      <h3 className={styles.propertyName}>{name}</h3>

-            <div
-                className={styles.propertyType}
-                data-type={kindString.toLowerCase()}
-            >
+      <div className={styles.propertyType} data-type={kindString.toLowerCase()}>
        {kindString}
      </div>

@ -184,11 +161,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
        <div className={styles.deprecation}>
          <strong>Deprecated</strong>: use{' '}
          <code>
-                        <Scroll
-                            type="id"
-                            element={`${deprecatedSlug}`}
-                            offset={-20}
-                        >
+            <Scroll type="id" element={`${deprecatedSlug}`} offset={-20}>
              {deprecatedUse}
            </Scroll>
          </code>{' '}
--- a/src/templates/Typedoc/Entities.module.scss
+++ b/src/templates/Typedoc/Entities.module.scss
@ -21,7 +21,7 @@

  &[data-deprecated='true'] {
    > *:not(.deprecation) {
-            opacity: .5;
+      opacity: 0.5;
    }

    code {
@ -64,19 +64,19 @@

 .propertyType {
  &[data-type='method'] {
-        background: rgba($green, .3);
+    background: rgba($green, 0.3);
  }

  &[data-type='property'] {
-        background: rgba($yellow, .3);
+    background: rgba($yellow, 0.3);
  }
 }

 .propertyModifier {
-    background: rgba($red, .2);
+  background: rgba($red, 0.2);

  &[data-secondary] {
-        background: rgba($brand-blue, .2);
+    background: rgba($brand-blue, 0.2);
  }
 }

@ -120,13 +120,13 @@

  a {
    &:hover {
-            opacity: .6;
+      opacity: 0.6;
    }
  }
 }

 .typeSymbol {
-    opacity: .6;
+  opacity: 0.6;
 }

 .subHeading {
@ -149,12 +149,12 @@
    font-size: $font-size-small;
    margin-bottom: $spacer / 4;
    margin-right: $spacer / 4;
-        margin-left: -(.2rem);
+    margin-left: -(0.2rem);
    display: inline-block;
  }

  code {
-        padding: .2rem;
+    padding: 0.2rem;
  }
 }

--- a/src/templates/Typedoc/Toc.jsx
+++ b/src/templates/Typedoc/Toc.jsx
@ -46,11 +46,7 @@ export default class Toc extends PureComponent {

    return (
      <li key={shortid.generate()}>
-                <Scroll
-                    type="id"
-                    element={`${name && slugify(name)}`}
-                    offset={-20}
-                >
+        <Scroll type="id" element={`${name && slugify(name)}`} offset={-20}>
          <code>{name}</code>
        </Scroll>
        <Scrollspy
--- a/src/templates/Typedoc/index.jsx
+++ b/src/templates/Typedoc/index.jsx
@ -66,20 +66,14 @@ export default class TypedocTemplate extends Component {
                  sidebar="references"
                  collapsed
                  toc
-                                    tocComponent={
-                                        <Toc data={this.typedocCleaned} />
-                                    }
+                  tocComponent={<Toc data={this.typedocCleaned} />}
                />
              </aside>
              <article className={stylesDoc.main}>
                <DocHeader
                  title={title}
                  description={description}
-                                    prepend={
-                                        <span className={stylesDoc.version}>
-                                            {version}
-                                        </span>
-                                    }
+                  prepend={<span className={stylesDoc.version}>{version}</span>}
                />

                <Entities
--- a/src/templates/Typedoc/utils.js
+++ b/src/templates/Typedoc/utils.js
@ -5,9 +5,7 @@ export const cleanTypedocData = (data, useClasses) => {
    .map((node) => {
      const child =
        node.children &&
-                node.children.filter(
-                    ({ kindString }) => kindString === 'Class'
-                )[0]
+        node.children.filter(({ kindString }) => kindString === 'Class')[0]

      return {
        ...node,
@ -21,9 +19,7 @@ export const cleanTypedocData = (data, useClasses) => {
    .map((node) => ({
      ...node,
      children:
-                node &&
-                node.children &&
-                node.children.sort((a, b) => a.id - b.id)
+        node && node.children && node.children.sort((a, b) => a.id - b.id)
    }))

  return cleanData