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

.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

.gitignore

@@ -1,5 +1,4 @@
 node_modules
-package-lock.json
 yarn.lock
 yarn-error.log
 .cache

.prettierrc

@@ -1,5 +1,6 @@
 {
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "none"
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 2
 }

.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
-  }
-}

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.

config.js

@@ -1,57 +1,57 @@
 module.exports = {
-    siteTitle: 'Ocean Protocol Documentation',
-    siteShortTitle: 'Docs',
-    siteDescription:
-        'Learn about the components of the Ocean Protocol software stack, and how to run or use the components relevant to you.',
-    siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com',
-    siteIcon: 'node_modules/@oceanprotocol/art/logo/favicon-black.png',
-    siteCompany: 'Ocean Protocol Foundation Ltd.',
-    analyticsId: 'UA-60614729-11',
-    social: {
-        Site: 'https://oceanprotocol.com',
-        Blog: 'https://blog.oceanprotocol.com',
-        GitHub: 'https://github.com/oceanprotocol',
-        Twitter: 'https://twitter.com/oceanprotocol',
-        Discord: 'https://discord.gg/TnXjkR5',
-        Port: 'https://port.oceanprotocol.com',
-        Telegram: 'https://t.me/OceanProtocol_Community'
+  siteTitle: 'Ocean Protocol Documentation',
+  siteShortTitle: 'Docs',
+  siteDescription:
+    'Learn about the components of the Ocean Protocol software stack, and how to run or use the components relevant to you.',
+  siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com',
+  siteIcon: 'node_modules/@oceanprotocol/art/logo/favicon-black.png',
+  siteCompany: 'Ocean Protocol Foundation Ltd.',
+  analyticsId: 'UA-60614729-11',
+  social: {
+    Site: 'https://oceanprotocol.com',
+    Blog: 'https://blog.oceanprotocol.com',
+    GitHub: 'https://github.com/oceanprotocol',
+    Twitter: 'https://twitter.com/oceanprotocol',
+    Discord: 'https://discord.gg/TnXjkR5',
+    Port: 'https://port.oceanprotocol.com',
+    Telegram: 'https://t.me/OceanProtocol_Community'
+  },
+  githubContentPath:
+    'https://github.com/oceanprotocol/docs/blob/master/content',
+  githubDevOceanPath:
+    'https://github.com/oceanprotocol/dev-ocean/blob/master/doc',
+  redirects: [
+    {
+      from: '/concepts/',
+      to: '/concepts/introduction/'
     },
-    githubContentPath:
-        'https://github.com/oceanprotocol/docs/blob/master/content',
-    githubDevOceanPath:
-        'https://github.com/oceanprotocol/dev-ocean/blob/master/doc',
-    redirects: [
-        {
-            from: '/concepts/',
-            to: '/concepts/introduction/'
-        },
-        {
-            from: '/setup/',
-            to: '/setup/quickstart/'
-        },
-        {
-            from: '/tutorials/',
-            to: '/tutorials/introduction/'
-        },
-        {
-            from: '/references/',
-            to: '/references/introduction/'
-        },
-        {
-            from: '/tutorials/wallets/',
-            to: '/concepts/wallets/'
-        },
-        {
-            from: '/concepts/production-network/',
-            to: '/concepts/pacific-network/'
-        },
-        {
-            from: '/references/squid-py/',
-            to: 'https://squid-py.readthedocs.io/en/latest/'
-        },
-        {
-            from: '/references/squid-java/',
-            to: 'https://www.javadoc.io/doc/com.oceanprotocol/squid/'
-        }
-    ]
+    {
+      from: '/setup/',
+      to: '/setup/quickstart/'
+    },
+    {
+      from: '/tutorials/',
+      to: '/tutorials/introduction/'
+    },
+    {
+      from: '/references/',
+      to: '/references/introduction/'
+    },
+    {
+      from: '/tutorials/wallets/',
+      to: '/concepts/wallets/'
+    },
+    {
+      from: '/concepts/production-network/',
+      to: '/concepts/pacific-network/'
+    },
+    {
+      from: '/references/squid-py/',
+      to: 'https://squid-py.readthedocs.io/en/latest/'
+    },
+    {
+      from: '/references/squid-java/',
+      to: 'https://www.javadoc.io/doc/com.oceanprotocol/squid/'
+    }
+  ]
 }

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
@@ -22,23 +20,22 @@ Then you need the following parts:
 - a working Kubernetes (K8s) cluster (Minikube is a good start)
 - a working `kubectl` connected to the K8s cluster
 - one folder (/ocean/operator-service/), in which we will download the following:
-    - [postgres-configmap.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/postgres-configmap.yaml)
-    - [postgres-storage.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/postgres-storage.yaml)
-    - [postgres-deployment.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/postgres-deployment.yaml)
-    - [postgres-service.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/postgresql-service.yaml)
-    - [deployment.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/deployment.yaml)
-    - [role_binding.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/role_binding.yaml)
-    - [service_account.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/service_account.yaml)
+  - [postgres-configmap.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/postgres-configmap.yaml)
+  - [postgres-storage.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/postgres-storage.yaml)
+  - [postgres-deployment.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/postgres-deployment.yaml)
+  - [postgres-service.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/postgresql-service.yaml)
+  - [deployment.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/deployment.yaml)
+  - [role_binding.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/role_binding.yaml)
+  - [service_account.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/develop/deploy_on_k8s/service_account.yaml)
 - one folder (/ocean/operator-engine/), in which we will download the following:
-    - [sa.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-engine/develop/k8s_install/sa.yml)
-    - [binding.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-engine/develop/k8s_install/binding.yml)
-    - [operator.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-engine/develop/k8s_install/operator.yml)        
-    - [computejob-crd.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-engine/develop/k8s_install/computejob-crd.yaml)
-    - [workflow-crd.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-engine/develop/k8s_install/workflow-crd.yaml)    
+  - [sa.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-engine/develop/k8s_install/sa.yml)
+  - [binding.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-engine/develop/k8s_install/binding.yml)
+  - [operator.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-engine/develop/k8s_install/operator.yml)
+  - [computejob-crd.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-engine/develop/k8s_install/computejob-crd.yaml)
+  - [workflow-crd.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-engine/develop/k8s_install/workflow-crd.yaml)
 
 ## 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
 ```
@@ -93,7 +89,7 @@ Or we can use this for minikube:
 apiVersion: storage.k8s.io/v1
 kind: StorageClass
 metadata:
-    name: standard
+  name: standard
 provisioner: docker.io/hostpath
 reclaimPolicy: Retain
 ```
@@ -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,10 +148,9 @@ 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`
+Update Brizo by adding or updating the `OPERATOR_SERVICE_URL` env in `/ocean/barge/compose-files/brizo.yaml`
 
 ```yaml
 OPERATOR_SERVICE_URL: http://example.com:8050/

external/dev-ocean

@@ -1 +1 @@
-Subproject commit 90846d10e449159eec5fe762d48e595d5a008135
+Subproject commit ba98510529e00ff9411a7df8a8c478dc3b58b635

gatsby-browser.js

@@ -3,18 +3,18 @@ import './src/styles/global.scss'
 
 // IntersectionObserver polyfill for gatsby-image (Safari, IE)
 if (typeof window.IntersectionObserver === 'undefined') {
-    // eslint-disable-next-line no-unused-expressions
-    import('intersection-observer')
+  // eslint-disable-next-line no-unused-expressions
+  import('intersection-observer')
 }
 
 // Display a message when a service worker updates
 // https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/#displaying-a-message-when-a-service-worker-updates
 export const onServiceWorkerUpdateReady = () => {
-    const answer = window.confirm(
-        'This application has been updated. ' +
-            'Reload to display the latest version?'
-    )
-    if (answer === true) {
-        window.location.reload()
-    }
+  const answer = window.confirm(
+    'This application has been updated. ' +
+      'Reload to display the latest version?'
+  )
+  if (answer === true) {
+    window.location.reload()
+  }
 }

gatsby-config.js

@@ -1,173 +1,170 @@
 require('dotenv').config()
 
 if (!process.env.GITHUB_TOKEN) {
-    throw new Error(
-        `A GitHub token is required to build the site. Check the README
+  throw new Error(
+    `A GitHub token is required to build the site. Check the README
         \nhttps://github.com/oceanprotocol/docs.`
-    )
+  )
 }
 
 const config = require('./config.js')
 
 module.exports = {
-    siteMetadata: {
-        // spread all of our config values here
-        // so they can easily be queried with GraphQL
-        ...config
+  siteMetadata: {
+    // spread all of our config values here
+    // so they can easily be queried with GraphQL
+    ...config
+  },
+  plugins: [
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'images',
+        path: `${__dirname}/src/images`
+      }
     },
-    plugins: [
-        {
-            resolve: 'gatsby-source-filesystem',
-            options: {
-                name: 'images',
-                path: `${__dirname}/src/images`
-            }
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'content',
+        path: `${__dirname}/content`
+      }
+    },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'data',
+        path: `${__dirname}/data`
+      }
+    },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'art',
+        path: `${__dirname}/node_modules/@oceanprotocol/art`
+      }
+    },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'dev-ocean',
+        path: `${__dirname}/external/dev-ocean/doc`
+      }
+    },
+    {
+      resolve: 'gatsby-source-graphql',
+      options: {
+        typeName: 'GitHub',
+        fieldName: 'github',
+        url: 'https://api.github.com/graphql',
+        headers: {
+          Authorization: `bearer ${process.env.GITHUB_TOKEN}`
         },
-        {
-            resolve: 'gatsby-source-filesystem',
+        // Additional options to pass to node-fetch
+        fetchOptions: {},
+        refetchInterval: 300 // 5 min.
+      }
+    },
+    {
+      resolve: 'gatsby-transformer-remark',
+      options: {
+        plugins: [
+          {
+            resolve: 'gatsby-remark-images',
             options: {
-                name: 'content',
-                path: `${__dirname}/content`
+              maxWidth: 666,
+              quality: 80,
+              withWebp: true,
+              linkImagesToOriginal: false,
+              showCaptions: true
             }
-        },
-        {
-            resolve: 'gatsby-source-filesystem',
+          },
+          {
+            resolve: 'gatsby-remark-github',
             options: {
-                name: 'data',
-                path: `${__dirname}/data`
+              marker: 'GITHUB-EMBED',
+              insertEllipsisComments: false,
+              ellipsisPhrase: '...',
+              useCache: false,
+              cacheKey: 'gatsby-remark-github-v1',
+              token: process.env.GITHUB_TOKEN
             }
-        },
-        {
-            resolve: 'gatsby-source-filesystem',
+          },
+          'gatsby-remark-smartypants',
+          'gatsby-remark-embed-video',
+          'gatsby-remark-responsive-iframe',
+          'gatsby-remark-autolink-headers',
+          'gatsby-remark-code-titles',
+          {
+            // https://github.com/andrewbranch/gatsby-remark-vscode
+            resolve: 'gatsby-remark-vscode',
             options: {
-                name: 'art',
-                path: `${__dirname}/node_modules/@oceanprotocol/art`
+              theme: 'Quiet Light',
+              injectStyles: false,
+              languageAliases: {
+                text: 'log'
+              }
             }
-        },
-        {
-            resolve: 'gatsby-source-filesystem',
+          },
+          'gatsby-remark-copy-linked-files',
+          {
+            resolve: 'gatsby-remark-component',
             options: {
-                name: 'dev-ocean',
-                path: `${__dirname}/external/dev-ocean/doc`
+              components: ['repo']
             }
-        },
-        {
-            resolve: 'gatsby-source-graphql',
-            options: {
-                typeName: 'GitHub',
-                fieldName: 'github',
-                url: 'https://api.github.com/graphql',
-                headers: {
-                    Authorization: `bearer ${process.env.GITHUB_TOKEN}`
-                },
-                // Additional options to pass to node-fetch
-                fetchOptions: {},
-                refetchInterval: 300 // 5 min.
-            }
-        },
-        {
-            resolve: 'gatsby-transformer-remark',
-            options: {
-                plugins: [
-                    {
-                        resolve: 'gatsby-remark-images',
-                        options: {
-                            maxWidth: 666,
-                            quality: 80,
-                            withWebp: true,
-                            linkImagesToOriginal: false,
-                            showCaptions: true
-                        }
-                    },
-                    {
-                        resolve: 'gatsby-remark-github',
-                        options: {
-                            marker: 'GITHUB-EMBED',
-                            insertEllipsisComments: false,
-                            ellipsisPhrase: '...',
-                            useCache: false,
-                            cacheKey: 'gatsby-remark-github-v1',
-                            token: process.env.GITHUB_TOKEN
-                        }
-                    },
-                    'gatsby-remark-smartypants',
-                    'gatsby-remark-embed-video',
-                    'gatsby-remark-responsive-iframe',
-                    'gatsby-remark-autolink-headers',
-                    'gatsby-remark-code-titles',
-                    {
-                        // https://github.com/andrewbranch/gatsby-remark-vscode
-                        resolve: 'gatsby-remark-vscode',
-                        options: {
-                            theme: 'Quiet Light',
-                            injectStyles: false,
-                            languageAliases: {
-                                text: 'log'
-                            }
-                        }
-                    },
-                    'gatsby-remark-copy-linked-files',
-                    {
-                        resolve: 'gatsby-remark-component',
-                        options: {
-                            components: ['repo']
-                        }
-                    }
-                ]
-            }
-        },
-        'gatsby-transformer-yaml',
-        {
-            resolve: 'gatsby-plugin-sass',
-            options: {
-                includePaths: [
-                    `${__dirname}/node_modules`,
-                    `${__dirname}/src/styles`
-                ]
-            }
-        },
-        'gatsby-transformer-sharp',
-        'gatsby-plugin-sharp',
-        {
-            resolve: 'gatsby-plugin-svgr',
-            options: {
-                icon: true,
-                viewBox: false
-                // see https://github.com/smooth-code/svgr for a list of all options
-            }
-        },
-        'gatsby-plugin-catch-links',
-        'gatsby-plugin-react-helmet',
-        {
-            resolve: 'gatsby-plugin-sitemap',
-            options: {
-                exclude: ['/test', '/references/petstore']
-            }
-        },
-        {
-            resolve: 'gatsby-plugin-manifest',
-            options: {
-                name: config.siteTitle,
-                short_name: config.siteShortTitle,
-                description: config.siteDescription,
-                start_url: '/',
-                background_color: '#e2e2e2',
-                theme_color: '#141414',
-                display: 'minimal-ui',
-                icon: config.siteIcon
-            }
-        },
-        'gatsby-plugin-webpack-size',
-        'gatsby-plugin-offline',
-        {
-            resolve: 'gatsby-plugin-google-analytics',
-            options: {
-                trackingId: config.analyticsId,
-                head: false,
-                anonymize: true,
-                respectDNT: true,
-                cookieDomain: 'oceanprotocol.com'
-            }
-        }
-    ]
+          }
+        ]
+      }
+    },
+    'gatsby-transformer-yaml',
+    {
+      resolve: 'gatsby-plugin-sass',
+      options: {
+        includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`]
+      }
+    },
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-sharp',
+    {
+      resolve: 'gatsby-plugin-svgr',
+      options: {
+        icon: true,
+        viewBox: false
+        // see https://github.com/smooth-code/svgr for a list of all options
+      }
+    },
+    'gatsby-plugin-catch-links',
+    'gatsby-plugin-react-helmet',
+    {
+      resolve: 'gatsby-plugin-sitemap',
+      options: {
+        exclude: ['/test', '/references/petstore']
+      }
+    },
+    {
+      resolve: 'gatsby-plugin-manifest',
+      options: {
+        name: config.siteTitle,
+        short_name: config.siteShortTitle,
+        description: config.siteDescription,
+        start_url: '/',
+        background_color: '#e2e2e2',
+        theme_color: '#141414',
+        display: 'minimal-ui',
+        icon: config.siteIcon
+      }
+    },
+    'gatsby-plugin-webpack-size',
+    'gatsby-plugin-offline',
+    {
+      resolve: 'gatsby-plugin-google-analytics',
+      options: {
+        trackingId: config.analyticsId,
+        head: false,
+        anonymize: true,
+        respectDNT: true,
+        cookieDomain: 'oceanprotocol.com'
+      }
+    }
+  ]
 }

gatsby-node.js

@@ -6,250 +6,237 @@ const Swagger = require('swagger-client')
 const { redirects } = require('./config')
 
 exports.onCreateNode = ({ node, getNode, actions }) => {
-    const { createNodeField } = actions
+  const { createNodeField } = actions
 
-    if (node.internal.type === 'MarkdownRemark') {
-        const fileNode = getNode(node.parent)
-        const parsedFilePath = path.parse(fileNode.relativePath)
+  if (node.internal.type === 'MarkdownRemark') {
+    const fileNode = getNode(node.parent)
+    const parsedFilePath = path.parse(fileNode.relativePath)
 
-        let slug = createFilePath({ node, getNode, basePath: 'content' })
-        let section = parsedFilePath.dir
+    let slug = createFilePath({ node, getNode, basePath: 'content' })
+    let section = parsedFilePath.dir
 
-        if (node.frontmatter.slug) {
-            ;({ slug } = node.frontmatter)
-        }
-
-        if (node.frontmatter.section) {
-            ;({ section } = node.frontmatter)
-        }
-
-        createNodeField({
-            node,
-            name: 'slug',
-            value: slug
-        })
-
-        createNodeField({
-            node,
-            name: 'section',
-            value: section
-        })
+    if (node.frontmatter.slug) {
+      ;({ slug } = node.frontmatter)
     }
+
+    if (node.frontmatter.section) {
+      ;({ section } = node.frontmatter)
+    }
+
+    createNodeField({
+      node,
+      name: 'slug',
+      value: slug
+    })
+
+    createNodeField({
+      node,
+      name: 'section',
+      value: section
+    })
+  }
 }
 
 exports.createPages = ({ graphql, actions }) => {
-    const { createPage, createRedirect } = actions
+  const { createPage, createRedirect } = actions
 
-    return new Promise((resolve, reject) => {
-        resolve(
-            graphql(
-                `
-                    query {
-                        allMarkdownRemark(
-                            filter: { fileAbsolutePath: { regex: "/content/" } }
-                        ) {
-                            edges {
-                                node {
-                                    fields {
-                                        slug
-                                        section
-                                    }
-                                }
-                            }
-                        }
-
-                        devOceanDocs: allMarkdownRemark(
-                            filter: {
-                                fileAbsolutePath: { regex: "/dev-ocean/doc/" }
-                            }
-                        ) {
-                            edges {
-                                node {
-                                    fields {
-                                        slug
-                                        section
-                                    }
-                                    frontmatter {
-                                        slug
-                                        title
-                                        description
-                                        section
-                                    }
-                                }
-                            }
-                        }
-
-                        squidJs: github {
-                            repository(
-                                name: "squid-js"
-                                owner: "oceanprotocol"
-                            ) {
-                                name
-                                releases(
-                                    first: 30
-                                    orderBy: {
-                                        field: CREATED_AT
-                                        direction: DESC
-                                    }
-                                ) {
-                                    edges {
-                                        node {
-                                            isPrerelease
-                                            isDraft
-                                            releaseAssets(
-                                                first: 1
-                                                name: "squid-js.json"
-                                            ) {
-                                                edges {
-                                                    node {
-                                                        name
-                                                        downloadUrl
-                                                    }
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                `
-            ).then(async (result) => {
-                if (result.errors) {
-                    console.log(result.errors)
-                    reject(result.errors)
+  return new Promise((resolve, reject) => {
+    resolve(
+      graphql(
+        `
+          query {
+            allMarkdownRemark(
+              filter: { fileAbsolutePath: { regex: "/content/" } }
+            ) {
+              edges {
+                node {
+                  fields {
+                    slug
+                    section
+                  }
                 }
+              }
+            }
 
-                const docTemplate = path.resolve('./src/templates/Doc.jsx')
-                const posts = result.data.allMarkdownRemark.edges
+            devOceanDocs: allMarkdownRemark(
+              filter: { fileAbsolutePath: { regex: "/dev-ocean/doc/" } }
+            ) {
+              edges {
+                node {
+                  fields {
+                    slug
+                    section
+                  }
+                  frontmatter {
+                    slug
+                    title
+                    description
+                    section
+                  }
+                }
+              }
+            }
 
-                //
-                // Create Doc pages
-                //
-                posts.forEach((post) => {
-                    createPage({
-                        path: `${post.node.fields.slug}`,
-                        component: docTemplate,
-                        context: {
-                            slug: post.node.fields.slug,
-                            section: post.node.fields.section
+            squidJs: github {
+              repository(name: "squid-js", owner: "oceanprotocol") {
+                name
+                releases(
+                  first: 30
+                  orderBy: { field: CREATED_AT, direction: DESC }
+                ) {
+                  edges {
+                    node {
+                      isPrerelease
+                      isDraft
+                      releaseAssets(first: 1, name: "squid-js.json") {
+                        edges {
+                          node {
+                            name
+                            downloadUrl
+                          }
                         }
-                    })
-                })
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        `
+      ).then(async (result) => {
+        if (result.errors) {
+          console.log(result.errors)
+          reject(result.errors)
+        }
 
-                //
-                // Create pages from dev-ocean contents
-                //
-                const postsDevOcean = result.data.devOceanDocs.edges
+        const docTemplate = path.resolve('./src/templates/Doc.jsx')
+        const posts = result.data.allMarkdownRemark.edges
 
-                postsDevOcean
-                    // only grab files with required frontmatter defined
-                    .filter(
-                        (post) =>
-                            post.node.frontmatter &&
-                            post.node.frontmatter.slug &&
-                            post.node.frontmatter.title &&
-                            post.node.frontmatter.description &&
-                            post.node.frontmatter.section
-                    )
-                    .forEach((post) => {
-                        createPage({
-                            path: `${post.node.fields.slug}`,
-                            component: docTemplate,
-                            context: {
-                                slug: post.node.fields.slug,
-                                section: post.node.fields.section
-                            }
-                        })
-                    })
+        //
+        // Create Doc pages
+        //
+        posts.forEach((post) => {
+          createPage({
+            path: `${post.node.fields.slug}`,
+            component: docTemplate,
+            context: {
+              slug: post.node.fields.slug,
+              section: post.node.fields.section
+            }
+          })
+        })
 
-                // API: brizo, aquarius
-                await createSwaggerPages(createPage)
+        //
+        // Create pages from dev-ocean contents
+        //
+        const postsDevOcean = result.data.devOceanDocs.edges
 
-                // API: squid-js
-                const lastRelease = result.data.squidJs.repository.releases.edges.filter(
-                    ({ node }) => !node.isPrerelease && !node.isDraft
-                )[0].node.releaseAssets.edges[0].node
-                await createTypeDocPage(
-                    createPage,
-                    result.data.squidJs.repository.name,
-                    lastRelease.downloadUrl
-                )
-
-                //
-                // create redirects
-                //
-                redirects.forEach(({ from, to }) => {
-                    createRedirect({
-                        fromPath: from,
-                        redirectInBrowser: true,
-                        toPath: to
-                    })
-
-                    console.log('Create redirect: ' + from + ' --> ' + to)
-                })
-
-                resolve()
+        postsDevOcean
+          // only grab files with required frontmatter defined
+          .filter(
+            (post) =>
+              post.node.frontmatter &&
+              post.node.frontmatter.slug &&
+              post.node.frontmatter.title &&
+              post.node.frontmatter.description &&
+              post.node.frontmatter.section
+          )
+          .forEach((post) => {
+            createPage({
+              path: `${post.node.fields.slug}`,
+              component: docTemplate,
+              context: {
+                slug: post.node.fields.slug,
+                section: post.node.fields.section
+              }
             })
+          })
+
+        // API: brizo, aquarius
+        await createSwaggerPages(createPage)
+
+        // API: squid-js
+        const lastRelease = result.data.squidJs.repository.releases.edges.filter(
+          ({ node }) => !node.isPrerelease && !node.isDraft
+        )[0].node.releaseAssets.edges[0].node
+        await createTypeDocPage(
+          createPage,
+          result.data.squidJs.repository.name,
+          lastRelease.downloadUrl
         )
-    })
+
+        //
+        // create redirects
+        //
+        redirects.forEach(({ from, to }) => {
+          createRedirect({
+            fromPath: from,
+            redirectInBrowser: true,
+            toPath: to
+          })
+
+          console.log('Create redirect: ' + from + ' --> ' + to)
+        })
+
+        resolve()
+      })
+    )
+  })
 }
 
 //
 // Create pages from TypeDoc json files
 //
 const createTypeDocPage = async (createPage, name, downloadUrl) => {
-    try {
-        const typedoc = await fetch(downloadUrl)
-        const typedocTemplate = path.resolve(
-            './src/templates/Typedoc/index.jsx'
-        )
-        const slug = `/references/${name}/`
+  try {
+    const typedoc = await fetch(downloadUrl)
+    const typedocTemplate = path.resolve('./src/templates/Typedoc/index.jsx')
+    const slug = `/references/${name}/`
 
-        createPage({
-            path: slug,
-            component: typedocTemplate,
-            context: {
-                slug,
-                typedoc: await typedoc.json(),
-                // We define the classes here so the data object passed as page context
-                // is as small as possible.
-                // Caveat: no live update during development when these values are changed.
-                //
-                // TODO: defining these classes for inclusion
-                // needs to be handled somewhere else to keep
-                // it generic for all TypeDoc specs
-                classes: [
-                    'ocean/Ocean',
-                    'ocean/OceanAccounts',
-                    'ocean/OceanAssets',
-                    'ocean/OceanAgreements',
-                    'ocean/OceanAgreementsConditions',
-                    'ocean/OceanCompute',
-                    'ocean/OceanSecretStore',
-                    'ocean/OceanVersions',
-                    'ocean/Account',
-                    'ocean/DID',
-                    'ddo/DDO',
-                    'ddo/Service',
-                    'aquarius/Aquarius',
-                    'brizo/Brizo',
-                    'keeper/Keeper',
-                    'keeper/ContractHandler',
-                    'keeper/EventHandler',
-                    'keeper/Web3Provider',
-                    'models/Config',
-                    'models/Balance',
-                    'ocean/utils/OceanUtils',
-                    'ocean/utils/ServiceAgreement',
-                    'ocean/utils/WebServiceConnector',
-                    'utils/Logger'
-                ]
-            }
-        })
-    } catch (error) {
-        console.log(error.message)
-    }
+    createPage({
+      path: slug,
+      component: typedocTemplate,
+      context: {
+        slug,
+        typedoc: await typedoc.json(),
+        // We define the classes here so the data object passed as page context
+        // is as small as possible.
+        // Caveat: no live update during development when these values are changed.
+        //
+        // TODO: defining these classes for inclusion
+        // needs to be handled somewhere else to keep
+        // it generic for all TypeDoc specs
+        classes: [
+          'ocean/Ocean',
+          'ocean/OceanAccounts',
+          'ocean/OceanAssets',
+          'ocean/OceanAgreements',
+          'ocean/OceanAgreementsConditions',
+          'ocean/OceanCompute',
+          'ocean/OceanSecretStore',
+          'ocean/OceanVersions',
+          'ocean/Account',
+          'ocean/DID',
+          'ddo/DDO',
+          'ddo/Service',
+          'aquarius/Aquarius',
+          'brizo/Brizo',
+          'keeper/Keeper',
+          'keeper/ContractHandler',
+          'keeper/EventHandler',
+          'keeper/Web3Provider',
+          'models/Config',
+          'models/Balance',
+          'ocean/utils/OceanUtils',
+          'ocean/utils/ServiceAgreement',
+          'ocean/utils/WebServiceConnector',
+          'utils/Logger'
+        ]
+      }
+    })
+  } catch (error) {
+    console.log(error.message)
+  }
 }
 
 //
@@ -257,77 +244,75 @@ const createTypeDocPage = async (createPage, name, downloadUrl) => {
 //
 // https://github.com/swagger-api/swagger-js
 const fetchSwaggerSpec = async (name) => {
-    try {
-        const client = await Swagger(
-            `https://${name}.commons.oceanprotocol.com/spec`
-        )
-        return client.spec // The resolved spec
+  try {
+    const client = await Swagger(
+      `https://${name}.commons.oceanprotocol.com/spec`
+    )
+    return client.spec // The resolved spec
 
-        // client.originalSpec // In case you need it
-        // client.errors // Any resolver errors
+    // client.originalSpec // In case you need it
+    // client.errors // Any resolver errors
 
-        // Tags interface
-        // client.apis.pet.addPet({id: 1, name: "bobby"}).then(...)
+    // Tags interface
+    // client.apis.pet.addPet({id: 1, name: "bobby"}).then(...)
 
-        // TryItOut Executor, with the `spec` already provided
-        // client.execute({operationId: 'addPet', parameters: {id: 1, name: "bobby") }).then(...)
-    } catch (error) {
-        console.error(error.message)
-    }
+    // TryItOut Executor, with the `spec` already provided
+    // client.execute({operationId: 'addPet', parameters: {id: 1, name: "bobby") }).then(...)
+  } catch (error) {
+    console.error(error.message)
+  }
 }
 
 const createSwaggerPages = async (createPage) => {
-    const swaggerComponents = ['aquarius', 'brizo']
-    const apiSwaggerTemplate = path.resolve('./src/templates/Swagger/index.jsx')
+  const swaggerComponents = ['aquarius', 'brizo']
+  const apiSwaggerTemplate = path.resolve('./src/templates/Swagger/index.jsx')
 
-    const getSlug = (name) => {
-        const slug = `/references/${name}/`
-        return slug
+  const getSlug = (name) => {
+    const slug = `/references/${name}/`
+    return slug
+  }
+
+  const specAquarius = await fetchSwaggerSpec(swaggerComponents[0])
+  const slugAquarius = getSlug(swaggerComponents[0])
+
+  createPage({
+    path: slugAquarius,
+    component: apiSwaggerTemplate,
+    context: {
+      slug: slugAquarius,
+      name: swaggerComponents[0],
+      api: specAquarius
     }
+  })
 
-    const specAquarius = await fetchSwaggerSpec(swaggerComponents[0])
-    const slugAquarius = getSlug(swaggerComponents[0])
+  const specBrizo = await fetchSwaggerSpec(swaggerComponents[1])
+  const slugBrizo = getSlug(swaggerComponents[1])
+
+  createPage({
+    path: slugBrizo,
+    component: apiSwaggerTemplate,
+    context: {
+      slug: slugBrizo,
+      name: swaggerComponents[1],
+      api: specBrizo
+    }
+  })
+
+  // Swagger Pet Store example
+  const petStoreSlug = '/references/petstore/'
+
+  try {
+    const client = await Swagger(`http://petstore.swagger.io/v2/swagger.json`)
 
     createPage({
-        path: slugAquarius,
-        component: apiSwaggerTemplate,
-        context: {
-            slug: slugAquarius,
-            name: swaggerComponents[0],
-            api: specAquarius
-        }
+      path: petStoreSlug,
+      component: apiSwaggerTemplate,
+      context: {
+        slug: petStoreSlug,
+        api: client.spec
+      }
     })
-
-    const specBrizo = await fetchSwaggerSpec(swaggerComponents[1])
-    const slugBrizo = getSlug(swaggerComponents[1])
-
-    createPage({
-        path: slugBrizo,
-        component: apiSwaggerTemplate,
-        context: {
-            slug: slugBrizo,
-            name: swaggerComponents[1],
-            api: specBrizo
-        }
-    })
-
-    // Swagger Pet Store example
-    const petStoreSlug = '/references/petstore/'
-
-    try {
-        const client = await Swagger(
-            `http://petstore.swagger.io/v2/swagger.json`
-        )
-
-        createPage({
-            path: petStoreSlug,
-            component: apiSwaggerTemplate,
-            context: {
-                slug: petStoreSlug,
-                api: client.spec
-            }
-        })
-    } catch (error) {
-        console.error(error.message)
-    }
+  } catch (error) {
+    console.error(error.message)
+  }
 }

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

src/components/Content.jsx

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types'
 import styles from './Content.module.scss'
 
 const Content = ({ children }) => (
-    <section className={styles.content}>{children}</section>
+  <section className={styles.content}>{children}</section>
 )
 
 Content.propTypes = {
-    children: PropTypes.any.isRequired
+  children: PropTypes.any.isRequired
 }
 
 export default Content

src/components/Content.module.scss

@@ -1,11 +1,11 @@
 @import 'variables';
 
 .content {
-    padding: 0 $spacer / 2;
-    max-width: $break-point--large;
-    margin: auto;
+  padding: 0 $spacer / 2;
+  max-width: $break-point--large;
+  margin: auto;
 
-    @media (min-width: $break-point--small) {
-        padding: 0 $spacer;
-    }
+  @media (min-width: $break-point--small) {
+    padding: 0 $spacer;
+  }
 }

src/components/DocContent.jsx

@@ -5,22 +5,22 @@ import Repository from './Repository'
 import styles from './DocContent.module.scss'
 
 const renderAst = new RehypeReact({
-    createElement: React.createElement,
-    components: { repo: Repository }
+  createElement: React.createElement,
+  components: { repo: Repository }
 }).Compiler
 
 const DocContent = ({ html, htmlAst }) =>
-    html ? (
-        <div className={styles.docContent}>{renderAst(htmlAst)}</div>
-    ) : (
-        <div className={styles.empty}>
-            This is a placeholder for now. Help creating it.
-        </div>
-    )
+  html ? (
+    <div className={styles.docContent}>{renderAst(htmlAst)}</div>
+  ) : (
+    <div className={styles.empty}>
+      This is a placeholder for now. Help creating it.
+    </div>
+  )
 
 DocContent.propTypes = {
-    html: PropTypes.string,
-    htmlAst: PropTypes.object
+  html: PropTypes.string,
+  htmlAst: PropTypes.object
 }
 
 export default DocContent

src/components/DocContent.module.scss

@@ -1,70 +1,70 @@
 @import 'variables';
 
 .docContent {
-    // handling long text, like URLs
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
+  // handling long text, like URLs
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  padding-bottom: $spacer / $line-height;
+
+  figcaption {
+    font-size: $font-size-small;
+    text-align: center;
+    color: $brand-grey-light;
+    margin-top: $spacer / 2;
+  }
+
+  > div > h1,
+  > div > h2 {
+    margin-top: $spacer * $line-height;
+    margin-bottom: $spacer / $line-height;
     padding-bottom: $spacer / $line-height;
+    border-bottom: 1px solid $brand-grey-lighter;
+  }
 
-    figcaption {
-        font-size: $font-size-small;
-        text-align: center;
-        color: $brand-grey-light;
-        margin-top: $spacer / 2;
+  table {
+    overflow-wrap: normal;
+    word-wrap: normal;
+    word-break: normal;
+  }
+
+  // use blockquote for info blocks
+  blockquote {
+    padding: $spacer / 2;
+    background: lighten($brand-grey-light, 36%);
+    border-left: 0.25rem solid $brand-grey-light;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+
+    &,
+    p {
+      color: $brand-blue;
+      font-style: italic;
     }
 
-    > div > h1,
-    > div > h2 {
-        margin-top: $spacer * $line-height;
-        margin-bottom: $spacer / $line-height;
-        padding-bottom: $spacer / $line-height;
-        border-bottom: 1px solid $brand-grey-lighter;
-    }
-
-    table {
-        overflow-wrap: normal;
-        word-wrap: normal;
-        word-break: normal;
-    }
-
-    // use blockquote for info blocks
-    blockquote {
-        padding: $spacer / 2;
-        background: lighten($brand-grey-light, 36%);
-        border-left: .25rem solid $brand-grey-light;
-        border-top-right-radius: $border-radius;
-        border-bottom-right-radius: $border-radius;
-
-        &,
-        p {
-            color: $brand-blue;
-            font-style: italic;
-        }
-
-        p:last-child {
-            margin-bottom: 0;
-        }
+    p:last-child {
+      margin-bottom: 0;
     }
+  }
 }
 
 .empty {
-    font-style: italic;
-    margin-bottom: $spacer * 2;
+  font-style: italic;
+  margin-bottom: $spacer * 2;
 }
 
 :global(.footnotes) {
-    font-size: $font-size-small;
+  font-size: $font-size-small;
 
-    p {
-        margin: 0;
-    }
+  p {
+    margin: 0;
+  }
 }
 
 :global(.footnote-ref) {
-    font-size: $font-size-mini;
-    font-weight: $font-weight-bold;
-    padding-left: .2rem;
-    padding-right: .2rem;
-    display: inline-block;
+  font-size: $font-size-mini;
+  font-weight: $font-weight-bold;
+  padding-left: 0.2rem;
+  padding-right: 0.2rem;
+  display: inline-block;
 }

src/components/DocFooter.jsx

@@ -5,40 +5,38 @@ import styles from './DocFooter.module.scss'
 import { social, githubContentPath, githubDevOceanPath } from '../../config'
 
 export default function DocFooter({ post, url, externalName }) {
-    let path
+  let path
 
-    if (post) {
-        const { sourceInstanceName } = post.parent
+  if (post) {
+    const { sourceInstanceName } = post.parent
 
-        switch (sourceInstanceName) {
-            case 'dev-ocean':
-                path = githubDevOceanPath
-                externalName = sourceInstanceName
-                break
-            default:
-                path = githubContentPath
-        }
-
-        url = `${path}/${post.parent.relativePath}`
+    switch (sourceInstanceName) {
+      case 'dev-ocean':
+        path = githubDevOceanPath
+        externalName = sourceInstanceName
+        break
+      default:
+        path = githubContentPath
     }
 
-    return (
-        <footer className={styles.footer}>
-            <a href={social.Discord}>✋ Ask a question on Discord</a>
-            <a href={url} className={post && !post.html ? styles.active : null}>
-                <Pencil /> Edit this page on GitHub
-                {externalName && (
-                    <span className={styles.externalRepoName}>
-                        {externalName}
-                    </span>
-                )}
-            </a>
-        </footer>
-    )
+    url = `${path}/${post.parent.relativePath}`
+  }
+
+  return (
+    <footer className={styles.footer}>
+      <a href={social.Discord}>✋ Ask a question on Discord</a>
+      <a href={url} className={post && !post.html ? styles.active : null}>
+        <Pencil /> Edit this page on GitHub
+        {externalName && (
+          <span className={styles.externalRepoName}>{externalName}</span>
+        )}
+      </a>
+    </footer>
+  )
 }
 
 DocFooter.propTypes = {
-    post: PropTypes.object,
-    url: PropTypes.string,
-    externalName: PropTypes.string
+  post: PropTypes.object,
+  url: PropTypes.string,
+  externalName: PropTypes.string
 }

src/components/DocFooter.module.scss

@@ -1,54 +1,54 @@
 @import 'variables';
 
 .footer {
-    margin-top: $spacer;
-    margin-bottom: $spacer;
-    font-size: $font-size-small;
-    text-align: center;
+  margin-top: $spacer;
+  margin-bottom: $spacer;
+  font-size: $font-size-small;
+  text-align: center;
+
+  @media (min-width: $break-point--small) {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  a {
+    font-family: $font-family-button;
+    font-weight: $font-weight-bold;
+    text-transform: uppercase;
+    color: $brand-grey-light;
+    display: block;
+    margin-bottom: $spacer / 2;
 
     @media (min-width: $break-point--small) {
-        display: flex;
-        justify-content: space-between;
+      margin-bottom: 0;
     }
 
-    a {
-        font-family: $font-family-button;
-        font-weight: $font-weight-bold;
-        text-transform: uppercase;
-        color: $brand-grey-light;
-        display: block;
-        margin-bottom: $spacer / 2;
-
-        @media (min-width: $break-point--small) {
-            margin-bottom: 0;
-        }
-
-        &:hover,
-        &:focus {
-            color: $brand-pink;
-        }
-
-        svg {
-            display: inline-block;
-            margin-right: $spacer / 10;
-            margin-bottom: -1px;
-            fill: $brand-grey-light;
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
+    &:hover,
+    &:focus {
+      color: $brand-pink;
     }
+
+    svg {
+      display: inline-block;
+      margin-right: $spacer / 10;
+      margin-bottom: -1px;
+      fill: $brand-grey-light;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .active {
-    color: $brand-pink !important; // stylelint-disable-line declaration-no-important
+  color: $brand-pink !important; // stylelint-disable-line declaration-no-important
 }
 
 .externalRepoName {
-    font-family: $font-family-monospace;
-    font-weight: $font-weight-base;
-    font-size: $font-size-mini;
-    text-transform: none;
-    margin-left: $spacer / 4;
+  font-family: $font-family-monospace;
+  font-weight: $font-weight-base;
+  font-size: $font-size-mini;
+  text-transform: none;
+  margin-left: $spacer / 4;
 }

src/components/DocHeader.jsx

@@ -5,25 +5,23 @@ import remarkReact from 'remark-react'
 import styles from './DocHeader.module.scss'
 
 const DocHeader = ({ title, description, prepend }) => {
-    const descriptionHtml =
-        description && remark().use(remarkReact).processSync(description).result
+  const descriptionHtml =
+    description && remark().use(remarkReact).processSync(description).result
 
-    return (
-        <header className={styles.header}>
-            <h1 className={styles.title}>
-                {title} {prepend && prepend}
-            </h1>
-            {description && (
-                <div className={styles.lead}>{descriptionHtml}</div>
-            )}
-        </header>
-    )
+  return (
+    <header className={styles.header}>
+      <h1 className={styles.title}>
+        {title} {prepend && prepend}
+      </h1>
+      {description && <div className={styles.lead}>{descriptionHtml}</div>}
+    </header>
+  )
 }
 
 DocHeader.propTypes = {
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    prepend: PropTypes.any
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  prepend: PropTypes.any
 }
 
 export default DocHeader

src/components/DocHeader.module.scss

@@ -1,25 +1,25 @@
 @import 'variables';
 
 .header {
-    padding-top: $spacer;
-    margin-bottom: $spacer;
+  padding-top: $spacer;
+  margin-bottom: $spacer;
 
-    @media screen and (min-width: $break-point--small) {
-        padding-top: $spacer * $line-height;
-        margin-bottom: $spacer * $line-height;
-    }
+  @media screen and (min-width: $break-point--small) {
+    padding-top: $spacer * $line-height;
+    margin-bottom: $spacer * $line-height;
+  }
 }
 
 .title {
-    font-size: $font-size-h1 / 1.3;
-    margin-top: 0;
-    margin-bottom: $spacer / $line-height;
+  font-size: $font-size-h1 / 1.3;
+  margin-top: 0;
+  margin-bottom: $spacer / $line-height;
 
-    @media screen and (min-width: $break-point--small) {
-        font-size: $font-size-h1;
-    }
+  @media screen and (min-width: $break-point--small) {
+    font-size: $font-size-h1;
+  }
 }
 
 .lead {
-    font-size: $font-size-large;
+  font-size: $font-size-large;
 }

src/components/DocToc.jsx

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './DocToc.module.scss'
 
 const DocToc = ({ tableOfContents }) => (
-    <aside
-        className={styles.toc}
-        dangerouslySetInnerHTML={{ __html: tableOfContents }}
-    />
+  <aside
+    className={styles.toc}
+    dangerouslySetInnerHTML={{ __html: tableOfContents }}
+  />
 )
 
 DocToc.propTypes = {
-    tableOfContents: PropTypes.string.isRequired
+  tableOfContents: PropTypes.string.isRequired
 }
 
 export default DocToc

src/components/DocToc.module.scss

@@ -1,15 +1,15 @@
 @import 'variables';
 
 .toc {
-    background: darken($brand-white, 2%);
-    padding: $spacer / 2;
-    margin-bottom: $spacer * 2;
+  background: darken($brand-white, 2%);
+  padding: $spacer / 2;
+  margin-bottom: $spacer * 2;
 
-    @media screen and (min-width: $break-point--small) {
-        padding: $spacer / $line-height $spacer;
-    }
+  @media screen and (min-width: $break-point--small) {
+    padding: $spacer / $line-height $spacer;
+  }
 
-    ul {
-        margin-bottom: 0;
-    }
+  ul {
+    margin-bottom: 0;
+  }
 }

src/components/Footer.jsx

@@ -5,59 +5,59 @@ import Content from '../components/Content'
 import styles from './Footer.module.scss'
 
 const query = graphql`
-    query {
-        site {
-            siteMetadata {
-                siteCompany
-                social {
-                    Site
-                    Blog
-                    GitHub
-                    Twitter
-                    Discord
-                    Port
-                    Telegram
-                }
-            }
+  query {
+    site {
+      siteMetadata {
+        siteCompany
+        social {
+          Site
+          Blog
+          GitHub
+          Twitter
+          Discord
+          Port
+          Telegram
         }
+      }
     }
+  }
 `
 
 const FooterSocial = ({ social }) => (
-    <nav className={styles.links}>
-        {Object.keys(social).map((key) => (
-            <a key={key} href={social[key]}>
-                {key}
-            </a>
-        ))}
-    </nav>
+  <nav className={styles.links}>
+    {Object.keys(social).map((key) => (
+      <a key={key} href={social[key]}>
+        {key}
+      </a>
+    ))}
+  </nav>
 )
 
 FooterSocial.propTypes = {
-    social: PropTypes.object
+  social: PropTypes.object
 }
 
 const Footer = () => (
-    <StaticQuery
-        query={query}
-        render={(data) => {
-            const { siteCompany, social } = data.site.siteMetadata
+  <StaticQuery
+    query={query}
+    render={(data) => {
+      const { siteCompany, social } = data.site.siteMetadata
 
-            return (
-                <footer className={styles.footer}>
-                    <Content>
-                        <small>
-                            &copy; {new Date().getFullYear()}{' '}
-                            <a href={social.site}>{siteCompany}</a> &mdash; All
-                            Rights Reserved
-                        </small>
+      return (
+        <footer className={styles.footer}>
+          <Content>
+            <small>
+              &copy; {new Date().getFullYear()}{' '}
+              <a href={social.site}>{siteCompany}</a> &mdash; All Rights
+              Reserved
+            </small>
 
-                        <FooterSocial social={social} />
-                    </Content>
-                </footer>
-            )
-        }}
-    />
+            <FooterSocial social={social} />
+          </Content>
+        </footer>
+      )
+    }}
+  />
 )
 
 export default Footer

src/components/Footer.module.scss

@@ -1,58 +1,58 @@
 @import 'variables';
 
 .footer {
-    color: $brand-grey-light;
-    width: 100%;
-    text-align: center;
-    margin-top: $spacer;
-    padding-top: $spacer;
-    padding-bottom: $spacer;
+  color: $brand-grey-light;
+  width: 100%;
+  text-align: center;
+  margin-top: $spacer;
+  padding-top: $spacer;
+  padding-bottom: $spacer;
 
-    > section {
-        align-self: flex-end;
+  > section {
+    align-self: flex-end;
 
-        @media screen and (min-width: $break-point--small) {
-            text-align: left;
-            display: flex;
-            justify-content: space-between;
-        }
+    @media screen and (min-width: $break-point--small) {
+      text-align: left;
+      display: flex;
+      justify-content: space-between;
     }
+  }
 
-    &,
-    small {
-        font-size: $font-size-small;
+  &,
+  small {
+    font-size: $font-size-small;
+  }
+
+  a {
+    color: inherit;
+
+    &:hover,
+    &:focus {
+      color: $brand-grey;
     }
+  }
 
-    a {
-        color: inherit;
-
-        &:hover,
-        &:focus {
-            color: $brand-grey;
-        }
-    }
-
-    svg {
-        display: inline-block;
-        width: $font-size-large;
-        height: $font-size-large;
-    }
+  svg {
+    display: inline-block;
+    width: $font-size-large;
+    height: $font-size-large;
+  }
 }
 
 .links {
-    margin-top: $spacer / 2;
+  margin-top: $spacer / 2;
 
-    @media screen and (min-width: $break-point--small) {
-        text-align: right;
-        margin-top: 0;
-    }
-
-    a {
-        margin: 0 $spacer / 2;
-        display: inline-block;
-
-        &:last-child {
-            margin-right: 0;
-        }
+  @media screen and (min-width: $break-point--small) {
+    text-align: right;
+    margin-top: 0;
+  }
+
+  a {
+    margin: 0 $spacer / 2;
+    display: inline-block;
+
+    &:last-child {
+      margin-right: 0;
     }
+  }
 }

src/components/Header.jsx

@@ -1,59 +1,59 @@
 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`
-    query {
-        site {
-            siteMetadata {
-                siteTitle
-            }
-        }
-
-        allSectionsYaml {
-            edges {
-                node {
-                    title
-                    description
-                    link
-                }
-            }
-        }
+  query {
+    site {
+      siteMetadata {
+        siteTitle
+      }
     }
+
+    allSectionsYaml {
+      edges {
+        node {
+          title
+          description
+          link
+        }
+      }
+    }
+  }
 `
 
 const Header = () => (
-    <StaticQuery
-        query={query}
-        render={(data) => {
-            const { siteTitle } = data.site.siteMetadata
-            const sections = data.allSectionsYaml.edges
+  <StaticQuery
+    query={query}
+    render={(data) => {
+      const { siteTitle } = data.site.siteMetadata
+      const sections = data.allSectionsYaml.edges
 
-            return (
-                <header className={styles.header}>
-                    <div className={styles.headerContent}>
-                        <Link to="/" className={styles.headerLogo}>
-                            <Logo className={styles.headerLogoImage} />
-                            <h1 className={styles.headerTitle}>{siteTitle}</h1>
-                        </Link>
+      return (
+        <header className={styles.header}>
+          <div className={styles.headerContent}>
+            <Link to="/" className={styles.headerLogo}>
+              <Logo className={styles.headerLogoImage} />
+              <h1 className={styles.headerTitle}>{siteTitle}</h1>
+            </Link>
 
-                        <nav className={styles.headerMenu}>
-                            {sections.map(({ node }) => (
-                                <Link
-                                    key={node.title}
-                                    to={node.link}
-                                    className={styles.section}
-                                >
-                                    {node.title}
-                                </Link>
-                            ))}
-                        </nav>
-                    </div>
-                </header>
-            )
-        }}
-    />
+            <nav className={styles.headerMenu}>
+              {sections.map(({ node }) => (
+                <Link
+                  key={node.title}
+                  to={node.link}
+                  className={styles.section}
+                >
+                  {node.title}
+                </Link>
+              ))}
+            </nav>
+          </div>
+        </header>
+      )
+    }}
+  />
 )
 
 export default Header

src/components/Header.module.scss

@@ -1,89 +1,83 @@
 @import 'variables';
 
 .header {
-    background: $brand-black
-        url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center -6rem;
-    background-size: cover;
-    width: 100%;
-    padding: $spacer / 2 0;
+  background: $brand-grey-dimmed url('@oceanprotocol/art/waves/waves.svg')
+    no-repeat center -3rem;
+  background-size: cover;
+  width: 100%;
+  padding: $spacer / 2 0;
 }
 
 .headerContent {
-    composes: content from './Content.module.scss';
-    display: flex;
-    align-items: center;
+  composes: content from './Content.module.scss';
+  display: flex;
+  align-items: center;
 }
 
 .headerLogo {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 
-    &:hover,
-    &:focus,
-    &:active {
-        transform: none;
-    }
+  &:hover,
+  &:focus,
+  &:active {
+    transform: none;
+  }
 }
 
 .headerLogoImage {
-    width: 4rem;
-    height: 4rem;
-    fill: #fff;
-    margin: 0;
+  width: 4rem;
+  height: 4rem;
+  margin: 0;
 }
 
 .headerTitle {
-    font-size: $font-size-h3;
-    color: $brand-grey-light;
-    margin-left: $spacer / 2;
-    display: none;
+  font-size: $font-size-h3;
+  color: $brand-grey-light;
+  margin-left: $spacer / 2;
+  display: none;
 
-    @media (min-width: $break-point--medium) {
-        display: inline-block;
-    }
+  @media (min-width: $break-point--medium) {
+    display: inline-block;
+  }
 }
 
 .headerMenu {
-    flex: 1;
-    justify-self: flex-end;
-    text-align: right;
-    white-space: nowrap;
-    overflow-y: hidden;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    margin-right: -($spacer / 2);
-    padding-right: $spacer;
+  flex: 1;
+  justify-self: flex-end;
+  text-align: right;
+  white-space: nowrap;
+  overflow-y: hidden;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin-right: -($spacer / 2);
+  padding-right: $spacer;
 
-    @media (min-width: $break-point--medium) {
-        padding-right: 0;
-        margin-right: 0;
-    }
+  @media (min-width: $break-point--medium) {
+    padding-right: 0;
+    margin-right: 0;
+  }
 
-    &::-webkit-scrollbar,
-    &::-moz-scrollbar {
-        display: none;
-    }
+  &::-webkit-scrollbar,
+  &::-moz-scrollbar {
+    display: none;
+  }
 
-    &::-webkit-scrollbar {
-        width: 3px;
-        height: 3px;
-        transition: opacity .2s ease-out;
-    }
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+    transition: opacity 0.2s ease-out;
+  }
 }
 
 .section {
-    display: inline-block;
-    margin: 0 $spacer / 2;
-    font-family: $font-family-button;
-    color: $brand-grey-lighter;
+  display: inline-block;
+  margin: 0 $spacer / 2;
+  font-family: $font-family-button;
+  color: $brand-grey;
 
-    &:last-child {
-        margin-right: 0;
-    }
-
-    &:hover,
-    &:focus {
-        color: $brand-white;
-    }
+  &:last-child {
+    margin-right: 0;
+  }
 }

src/components/HeaderHome.jsx

@@ -1,37 +1,35 @@
 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'
 
 const HeaderHome = () => (
-    <StaticQuery
-        query={graphql`
-            query {
-                site {
-                    siteMetadata {
-                        siteTitle
-                        siteDescription
-                    }
-                }
-            }
-        `}
-        render={(data) => {
-            const { siteTitle, siteDescription } = data.site.siteMetadata
+  <StaticQuery
+    query={graphql`
+      query {
+        site {
+          siteMetadata {
+            siteTitle
+            siteDescription
+          }
+        }
+      }
+    `}
+    render={(data) => {
+      const { siteTitle, siteDescription } = data.site.siteMetadata
 
-            return (
-                <header className={styles.header}>
-                    <Content>
-                        <Logo className={styles.headerLogo} />
-                        <h1 className={styles.headerTitle}>{siteTitle}</h1>
-                        <p className={styles.headerDescription}>
-                            {siteDescription}
-                        </p>
-                    </Content>
-                </header>
-            )
-        }}
-    />
+      return (
+        <header className={styles.header}>
+          <Content>
+            <Logo className={styles.headerLogo} />
+            <h1 className={styles.headerTitle}>{siteTitle}</h1>
+            <p className={styles.headerDescription}>{siteDescription}</p>
+          </Content>
+        </header>
+      )
+    }}
+  />
 )
 
 export default HeaderHome

src/components/HeaderHome.module.scss

@@ -2,49 +2,47 @@
 @import 'animations';
 
 .header {
-    background: $brand-black
-        url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center
-        4rem;
-    background-size: cover;
-    width: 100%;
-    padding: $spacer * 2 0;
-    min-height: 30rem;
-    color: $brand-white;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  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;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .headerLogo,
 .headerTitle,
 .headerDescription {
-    animation: fadeInUp .6s ease-out backwards;
+  animation: fadeInUp 0.6s ease-out backwards;
 }
 
 .headerLogo {
-    width: 5rem;
-    height: 5rem;
+  width: 5rem;
+  height: 5rem;
 }
 
 .headerTitle {
-    margin-bottom: $spacer;
-    font-size: $font-size-h2;
-    animation-delay: .2s;
+  margin-bottom: $spacer;
+  font-size: $font-size-h2;
+  animation-delay: 0.2s;
 
-    @media (min-width: $break-point--small) {
-        font-size: $font-size-h1;
-    }
+  @media (min-width: $break-point--small) {
+    font-size: $font-size-h1;
+  }
 }
 
 .headerDescription {
-    margin-bottom: $spacer * 4;
-    max-width: $break-point--small;
-    margin-left: auto;
-    margin-right: auto;
-    animation-delay: .4s;
+  margin-bottom: $spacer * 4;
+  max-width: $break-point--small;
+  margin-left: auto;
+  margin-right: auto;
+  animation-delay: 0.4s;
 
-    @media (min-width: $break-point--small) {
-        font-size: $font-size-large;
-    }
+  @media (min-width: $break-point--small) {
+    font-size: $font-size-large;
+  }
 }

src/components/HeaderSection.jsx

@@ -5,20 +5,20 @@ import Content from './Content'
 import styles from './HeaderSection.module.scss'
 
 const HeaderSection = ({ title }) => (
-    <aside className={styles.headerSection}>
-        <Content>
-            <h1 className={styles.headerSectionTitle}>
-                <Link className={styles.rootLink} to="/">
-                    /
-                </Link>
-                {title}
-            </h1>
-        </Content>
-    </aside>
+  <aside className={styles.headerSection}>
+    <Content>
+      <h1 className={styles.headerSectionTitle}>
+        <Link className={styles.rootLink} to="/">
+          /
+        </Link>
+        {title}
+      </h1>
+    </Content>
+  </aside>
 )
 
 HeaderSection.propTypes = {
-    title: PropTypes.PropTypes.oneOfType([PropTypes.array, PropTypes.string])
+  title: PropTypes.PropTypes.oneOfType([PropTypes.array, PropTypes.string])
 }
 
 export default HeaderSection

src/components/HeaderSection.module.scss

@@ -1,35 +1,35 @@
 @import 'variables';
 
 .headerSection {
-    border-bottom: .1rem solid $brand-grey-lighter;
+  border-bottom: 0.1rem solid $brand-grey-lighter;
 }
 
 .headerSectionTitle {
-    display: inline-block;
-    margin: 0;
-    padding: $spacer / $line-height 0;
-    font-size: $font-size-h3;
-    color: $brand-grey-light;
+  display: inline-block;
+  margin: 0;
+  padding: $spacer / $line-height 0;
+  font-size: $font-size-h3;
+  color: $brand-grey-light;
 
-    :global(.concepts) & {
-        color: $brand-purple;
-    }
+  :global(.concepts) & {
+    color: $brand-purple;
+  }
 
-    :global(.setup) & {
-        color: $brand-blue;
-    }
+  :global(.setup) & {
+    color: $brand-blue;
+  }
 
-    :global(.tutorials) & {
-        color: $orange;
-    }
+  :global(.tutorials) & {
+    color: $orange;
+  }
 
-    :global(.references) & {
-        color: $green;
-    }
+  :global(.references) & {
+    color: $green;
+  }
 }
 
 .rootLink {
-    display: inline-block;
-    margin-right: $spacer / 4;
-    color: inherit;
+  display: inline-block;
+  margin-right: $spacer / 4;
+  color: inherit;
 }

src/components/Layout.jsx

@@ -4,20 +4,20 @@ import Header from './Header'
 import Footer from './Footer'
 
 const Layout = ({ children, header }) => {
-    const headerElement = header || <Header />
+  const headerElement = header || <Header />
 
-    return (
-        <>
-            {headerElement}
-            {children}
-            <Footer />
-        </>
-    )
+  return (
+    <>
+      {headerElement}
+      {children}
+      <Footer />
+    </>
+  )
 }
 
 Layout.propTypes = {
-    children: PropTypes.node.isRequired,
-    header: PropTypes.element
+  children: PropTypes.node.isRequired,
+  header: PropTypes.element
 }
 
 export default Layout

src/components/QuickRun.jsx

@@ -4,43 +4,41 @@ import Repository from './Repository'
 import styles from './QuickRun.module.scss'
 
 const QuickRun = () => (
-    <StaticQuery
-        query={graphql`
-            query {
-                allMarkdownRemark(
-                    filter: { fields: { slug: { eq: "/quickrun/" } } }
-                ) {
-                    edges {
-                        node {
-                            html
-                        }
-                    }
-                }
+  <StaticQuery
+    query={graphql`
+      query {
+        allMarkdownRemark(filter: { fields: { slug: { eq: "/quickrun/" } } }) {
+          edges {
+            node {
+              html
             }
-        `}
-        render={(data) => (
-            <aside className={styles.quickrun}>
-                <header className={styles.header}>
-                    <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?
-                    </strong>
-                </header>
+          }
+        }
+      }
+    `}
+    render={(data) => (
+      <aside className={styles.quickrun}>
+        <header className={styles.header}>
+          <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?
+          </strong>
+        </header>
 
-                <div className={styles.docker}>
-                    <div
-                        dangerouslySetInnerHTML={{
-                            __html: data.allMarkdownRemark.edges[0].node.html
-                        }}
-                    />
+        <div className={styles.docker}>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: data.allMarkdownRemark.edges[0].node.html
+            }}
+          />
 
-                    <Repository name="barge" />
-                </div>
-            </aside>
-        )}
-    />
+          <Repository name="barge" />
+        </div>
+      </aside>
+    )}
+  />
 )
 
 export default QuickRun

src/components/QuickRun.module.scss

@@ -1,58 +1,58 @@
 @import 'variables';
 
 .quickrun {
-    padding-top: $spacer * 4;
-    padding-bottom: $spacer * 2.5;
-    text-align: center;
+  padding-top: $spacer * 4;
+  padding-bottom: $spacer * 2.5;
+  text-align: center;
 
-    > div {
-        text-align: left;
-        margin-top: $spacer / $line-height;
-    }
+  > div {
+    text-align: left;
+    margin-top: $spacer / $line-height;
+  }
 }
 
 .header,
 .docker {
-    margin: auto;
+  margin: auto;
 
-    @media (min-width: $break-point--medium) {
-        max-width: 33rem;
-    }
+  @media (min-width: $break-point--medium) {
+    max-width: 33rem;
+  }
 }
 
 .header {
-    margin-bottom: $spacer;
+  margin-bottom: $spacer;
 }
 
 .docker {
-    @media (min-width: $break-point--large) {
-        max-width: none;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+  @media (min-width: $break-point--large) {
+    max-width: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-        > div,
-        > article {
-            flex: 0 0 48%;
-            margin: 0;
-        }
-
-        pre {
-            margin: 0;
-
-            code {
-                padding: $spacer / 1.1;
-            }
-        }
+    > div,
+    > article {
+      flex: 0 0 48%;
+      margin: 0;
     }
+
+    pre {
+      margin: 0;
+
+      code {
+        padding: $spacer / 1.1;
+      }
+    }
+  }
 }
 
 .tldr {
-    display: block;
-    margin-bottom: $spacer / 2;
-    font-size: $font-size-h4;
+  display: block;
+  margin-bottom: $spacer / 2;
+  font-size: $font-size-h4;
 
-    + strong {
-        color: $brand-grey-light;
-    }
+  + strong {
+    color: $brand-grey-light;
+  }
 }

src/components/Repositories/RepositoryList.jsx

@@ -4,27 +4,23 @@ import Repository from '../Repository'
 import styles from './RepositoryList.module.scss'
 
 const RepositoryList = ({ repositories }) => (
-    <div className={styles.repositoryCategory}>
-        {repositories.map(({ node }) => (
-            <div key={node.id}>
-                <h3 className={styles.repositoryCategoryTitle}>{node.group}</h3>
+  <div className={styles.repositoryCategory}>
+    {repositories.map(({ node }) => (
+      <div key={node.id}>
+        <h3 className={styles.repositoryCategoryTitle}>{node.group}</h3>
 
-                <div className={styles.repositoryList}>
-                    {node.items.map((item) => (
-                        <Repository
-                            key={item.name}
-                            name={item.name}
-                            links={item.links}
-                        />
-                    ))}
-                </div>
-            </div>
-        ))}
-    </div>
+        <div className={styles.repositoryList}>
+          {node.items.map((item) => (
+            <Repository key={item.name} name={item.name} links={item.links} />
+          ))}
+        </div>
+      </div>
+    ))}
+  </div>
 )
 
 RepositoryList.propTypes = {
-    repositories: PropTypes.array.isRequired
+  repositories: PropTypes.array.isRequired
 }
 
 export default RepositoryList

src/components/Repositories/RepositoryList.module.scss

@@ -1,74 +1,74 @@
 @import 'variables';
 
 .repositoryList {
-    white-space: nowrap;
-    overflow-y: hidden;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    margin-left: calc(-50vw + 50%);
-    margin-right: calc(-50vw + 50%);
-    display: flex;
+  white-space: nowrap;
+  overflow-y: hidden;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+  display: flex;
 
-    @media (min-width: $break-point--medium) {
-        margin-left: $spacer;
-        border-left: 1px solid $brand-grey-lighter;
-        padding-left: $spacer;
-        padding-top: $spacer / 4;
+  @media (min-width: $break-point--medium) {
+    margin-left: $spacer;
+    border-left: 1px solid $brand-grey-lighter;
+    padding-left: $spacer;
+    padding-top: $spacer / 4;
+  }
+
+  article {
+    white-space: normal;
+    flex: 0 0 90vw;
+    max-width: 25rem;
+    margin-left: $spacer;
+    margin-bottom: $spacer / 4;
+
+    &:first-child {
+      margin-left: $spacer * 1.4;
+
+      @media (min-width: $break-point--medium) {
+        margin-left: 0;
+      }
     }
+  }
 
-    article {
-        white-space: normal;
-        flex: 0 0 90vw;
-        max-width: 25rem;
-        margin-left: $spacer;
-        margin-bottom: $spacer / 4;
+  // add final right margin
+  &:after {
+    content: '';
+    flex: 0 0 $spacer;
+  }
 
-        &:first-child {
-            margin-left: $spacer * 1.4;
+  // custom scrollbar
+  &::-webkit-scrollbar,
+  &::-moz-scrollbar {
+    display: none;
+  }
 
-            @media (min-width: $break-point--medium) {
-                margin-left: 0;
-            }
-        }
-    }
-
-    // add final right margin
-    &:after {
-        content: '';
-        flex: 0 0 $spacer;
-    }
-
-    // custom scrollbar
-    &::-webkit-scrollbar,
-    &::-moz-scrollbar {
-        display: none;
-    }
+  &::-webkit-scrollbar {
+    opacity: 0;
+    width: 7px;
+    height: 7px;
+    transition: opacity 0.2s ease-out;
+  }
 
+  &:hover {
     &::-webkit-scrollbar {
-        opacity: 0;
-        width: 7px;
-        height: 7px;
-        transition: opacity .2s ease-out;
+      opacity: 1;
     }
 
-    &:hover {
-        &::-webkit-scrollbar {
-            opacity: 1;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: lighten($brand-grey-light, 30%);
-        }
-
-        &::-webkit-scrollbar-track {
-            background: $brand-white;
-        }
+    &::-webkit-scrollbar-thumb {
+      background: lighten($brand-grey-light, 30%);
     }
+
+    &::-webkit-scrollbar-track {
+      background: $brand-white;
+    }
+  }
 }
 
 .repositoryCategoryTitle {
-    width: 100%;
-    font-size: $font-size-h4;
-    color: $brand-grey-light;
-    margin-bottom: $spacer / 2;
+  width: 100%;
+  font-size: $font-size-h4;
+  color: $brand-grey-light;
+  margin-bottom: $spacer / 2;
 }

src/components/Repositories/index.jsx

@@ -4,55 +4,51 @@ import RepositoryList from './RepositoryList'
 import styles from './index.module.scss'
 
 const query = graphql`
-    query {
-        allRepositoriesYaml {
-            edges {
-                node {
-                    id
-                    group
-                    items {
-                        name
-                        links {
-                            name
-                            url
-                        }
-                    }
-                }
+  query {
+    allRepositoriesYaml {
+      edges {
+        node {
+          id
+          group
+          items {
+            name
+            links {
+              name
+              url
             }
+          }
         }
+      }
     }
+  }
 `
 
 const Repositories = () => (
-    <StaticQuery
-        query={query}
-        render={(data) => {
-            const repositories = data.allRepositoriesYaml.edges
+  <StaticQuery
+    query={query}
+    render={(data) => {
+      const repositories = data.allRepositoriesYaml.edges
 
-            return (
-                <div className={styles.repositories}>
-                    <header>
-                        <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.
-                            </strong>
-                        </p>
-                    </header>
+      return (
+        <div className={styles.repositories}>
+          <header>
+            <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.
+              </strong>
+            </p>
+          </header>
 
-                    <RepositoryList repositories={repositories} />
-                </div>
-            )
-        }}
-    />
+          <RepositoryList repositories={repositories} />
+        </div>
+      )
+    }}
+  />
 )
 
 export default Repositories

src/components/Repositories/index.module.scss

@@ -1,26 +1,26 @@
 @import 'variables';
 
 .repositories {
-    margin-top: $spacer * 2;
+  margin-top: $spacer * 2;
 
-    > header {
-        @media (min-width: $break-point--medium) {
-            max-width: 33rem;
-            margin: auto;
-        }
+  > header {
+    @media (min-width: $break-point--medium) {
+      max-width: 33rem;
+      margin: auto;
     }
+  }
 }
 
 .repositoriesTitle {
-    text-align: center;
-    display: block;
-    margin-top: 0;
-    margin-bottom: $spacer / 2;
-    font-size: $font-size-h3;
+  text-align: center;
+  display: block;
+  margin-top: 0;
+  margin-bottom: $spacer / 2;
+  font-size: $font-size-h3;
 }
 
 .repositoriesText {
-    text-align: center;
-    margin-bottom: $spacer;
-    color: $brand-grey-light;
+  text-align: center;
+  margin-bottom: $spacer;
+  color: $brand-grey-light;
 }

src/components/Repository/Links.jsx

@@ -3,22 +3,22 @@ import PropTypes from 'prop-types'
 import styles from './Links.module.scss'
 
 export default function Links({ links, url }) {
-    return (
-        <ul className={styles.links}>
-            <li>
-                <a href={url}>GitHub</a>
-            </li>
-            {links &&
-                links.map((link) => (
-                    <li key={link.url}>
-                        <a href={link.url}>{link.name}</a>
-                    </li>
-                ))}
-        </ul>
-    )
+  return (
+    <ul className={styles.links}>
+      <li>
+        <a href={url}>GitHub</a>
+      </li>
+      {links &&
+        links.map((link) => (
+          <li key={link.url}>
+            <a href={link.url}>{link.name}</a>
+          </li>
+        ))}
+    </ul>
+  )
 }
 
 Links.propTypes = {
-    links: PropTypes.array,
-    url: PropTypes.string.isRequired
+  links: PropTypes.array,
+  url: PropTypes.string.isRequired
 }

src/components/Repository/Links.module.scss

@@ -1,23 +1,23 @@
 @import 'variables';
 
 .links {
-    margin: 0;
+  margin: 0;
+  padding: 0;
+  margin-left: -($spacer / $line-height);
+  width: 80%;
+
+  li {
+    display: inline-block;
     padding: 0;
-    margin-left: -($spacer / $line-height);
-    width: 80%;
+    margin-left: $spacer / $line-height;
 
-    li {
-        display: inline-block;
-        padding: 0;
-        margin-left: $spacer / $line-height;
-
-        &:before {
-            display: none;
-        }
+    &:before {
+      display: none;
     }
+  }
 
-    a {
-        font-family: $font-family-button;
-        font-weight: $font-weight-bold;
-    }
+  a {
+    font-family: $font-family-button;
+    font-weight: $font-weight-bold;
+  }
 }

src/components/Repository/Numbers.jsx

@@ -6,83 +6,83 @@ import { ReactComponent as Forks } from '../../images/forks.svg'
 import styles from './Numbers.module.scss'
 
 export default class Numbers extends PureComponent {
-    static propTypes = {
-        stargazers: PropTypes.object.isRequired,
-        forkCount: PropTypes.number.isRequired,
-        url: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired
-    }
+  static propTypes = {
+    stargazers: PropTypes.object.isRequired,
+    forkCount: PropTypes.number.isRequired,
+    url: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  }
 
-    state = {
-        forks: this.props.forkCount,
-        stars: this.props.stargazers.totalCount
-    }
+  state = {
+    forks: this.props.forkCount,
+    stars: this.props.stargazers.totalCount
+  }
 
-    url = 'https://oceanprotocol-github.now.sh'
+  url = 'https://oceanprotocol-github.now.sh'
 
-    signal = axios.CancelToken.source()
+  signal = axios.CancelToken.source()
 
-    componentDidMount() {
-        this.fetchNumbers()
-    }
+  componentDidMount() {
+    this.fetchNumbers()
+  }
 
-    componentWillUnmount() {
-        this.signal.cancel()
-    }
+  componentWillUnmount() {
+    this.signal.cancel()
+  }
 
-    fetchNumbers = async () => {
-        try {
-            const response = await axios({
-                method: 'get',
-                url: this.url,
-                timeout: 10000, // 10 sec.
-                headers: {
-                    'Content-Type': 'application/json'
-                }
-            })
-
-            const repo = response.data
-                .map((item) => {
-                    if (item.name === this.props.name) {
-                        return item
-                    }
-                })
-                .filter((n) => n)
-
-            const { forks, stars } = repo
-
-            // update state only when numbers have changed
-            if (forks && forks !== this.props.forkCount) {
-                this.setState({ forks })
-            }
-
-            if (stars && stars !== this.props.stargazers.totalCount) {
-                this.setState({ stars })
-            }
-        } catch (error) {
-            if (axios.isCancel(error)) {
-                return null
-            } else {
-                console.log(error.message) // eslint-disable-line no-console
-            }
+  fetchNumbers = async () => {
+    try {
+      const response = await axios({
+        method: 'get',
+        url: this.url,
+        timeout: 10000, // 10 sec.
+        headers: {
+          'Content-Type': 'application/json'
         }
-    }
+      })
 
-    render() {
-        const { url } = this.props
-        const { forks, stars } = this.state
+      const repo = response.data
+        .map((item) => {
+          if (item.name === this.props.name) {
+            return item
+          }
+        })
+        .filter((n) => n)
 
-        return (
-            <aside className={styles.repositorynumbers}>
-                <a href={`${url}/stargazers`} title="Show Stargazers">
-                    <Star /> <span>{stars}</span>
-                </a>
-                {forks > 0 && (
-                    <a href={`${url}/network`} title="Show Forks">
-                        <Forks /> <span>{forks}</span>
-                    </a>
-                )}
-            </aside>
-        )
+      const { forks, stars } = repo
+
+      // update state only when numbers have changed
+      if (forks && forks !== this.props.forkCount) {
+        this.setState({ forks })
+      }
+
+      if (stars && stars !== this.props.stargazers.totalCount) {
+        this.setState({ stars })
+      }
+    } catch (error) {
+      if (axios.isCancel(error)) {
+        return null
+      } else {
+        console.log(error.message) // eslint-disable-line no-console
+      }
     }
+  }
+
+  render() {
+    const { url } = this.props
+    const { forks, stars } = this.state
+
+    return (
+      <aside className={styles.repositorynumbers}>
+        <a href={`${url}/stargazers`} title="Show Stargazers">
+          <Star /> <span>{stars}</span>
+        </a>
+        {forks > 0 && (
+          <a href={`${url}/network`} title="Show Forks">
+            <Forks /> <span>{forks}</span>
+          </a>
+        )}
+      </aside>
+    )
+  }
 }

src/components/Repository/Numbers.module.scss

@@ -1,35 +1,35 @@
 @import 'variables';
 
 .repositorynumbers {
-    font-size: $font-size-small;
-    margin-left: -($spacer / 4);
-    flex: 1;
-    text-align: right;
-    width: 20%;
+  font-size: $font-size-small;
+  margin-left: -($spacer / 4);
+  flex: 1;
+  text-align: right;
+  width: 20%;
 
-    a {
-        color: $brand-grey-light;
-        margin-left: $spacer / 4;
-        display: inline-block;
+  a {
+    color: $brand-grey-light;
+    margin-left: $spacer / 4;
+    display: inline-block;
 
-        &:hover,
-        &:focus {
-            color: $brand-pink;
-            transform: none;
+    &:hover,
+    &:focus {
+      color: $brand-pink;
+      transform: none;
 
-            svg {
-                fill: $brand-pink;
-            }
-        }
-
-        span {
-            margin-left: -.15rem;
-        }
+      svg {
+        fill: $brand-pink;
+      }
     }
 
-    svg {
-        display: inline-block;
-        fill: $brand-grey-light;
-        margin-bottom: -.1rem;
+    span {
+      margin-left: -0.15rem;
     }
+  }
+
+  svg {
+    display: inline-block;
+    fill: $brand-grey-light;
+    margin-bottom: -0.1rem;
+  }
 }

src/components/Repository/Readme.jsx

@@ -5,21 +5,21 @@ import remarkReact from 'remark-react'
 import styles from './Readme.module.scss'
 
 export default function Readme({ object }) {
-    const readmeHtml =
-        object && remark().use(remarkReact).processSync(object.text).result
+  const readmeHtml =
+    object && remark().use(remarkReact).processSync(object.text).result
 
-    return (
-        object && (
-            <aside className={styles.readme}>
-                <h3 className={styles.title}>README.md</h3>
-                {readmeHtml}
-            </aside>
-        )
+  return (
+    object && (
+      <aside className={styles.readme}>
+        <h3 className={styles.title}>README.md</h3>
+        {readmeHtml}
+      </aside>
     )
+  )
 }
 
 Readme.propTypes = {
-    object: PropTypes.shape({
-        text: PropTypes.string.isRequired
-    })
+  object: PropTypes.shape({
+    text: PropTypes.string.isRequired
+  })
 }

src/components/Repository/Readme.module.scss

@@ -1,30 +1,30 @@
 @import 'variables';
 
 .readme {
-    margin-top: $spacer / $line-height;
-    padding: $spacer / 2;
-    background: darken($brand-white, 2%);
+  margin-top: $spacer / $line-height;
+  padding: $spacer / 2;
+  background: darken($brand-white, 2%);
 
-    h1,
-    h2 {
-        font-size: $font-size-large;
-    }
+  h1,
+  h2 {
+    font-size: $font-size-large;
+  }
 
-    h3,
-    h4 {
-        font-size: $font-size-base;
-    }
+  h3,
+  h4 {
+    font-size: $font-size-base;
+  }
 
-    img {
-        display: inline-block;
-    }
+  img {
+    display: inline-block;
+  }
 }
 
 .title {
-    font-size: $font-size-small !important; // stylelint-disable-line
-    font-family: $font-family-monospace;
-    font-weight: $font-weight-base;
-    margin: 0;
-    color: $brand-grey-light;
-    margin-bottom: $spacer / 2;
+  font-size: $font-size-small !important; // stylelint-disable-line
+  font-family: $font-family-monospace;
+  font-weight: $font-weight-base;
+  margin: 0;
+  color: $brand-grey-light;
+  margin-bottom: $spacer / 2;
 }

src/components/Repository/Title.jsx

@@ -5,36 +5,34 @@ import styles from './Title.module.scss'
 import { ReactComponent as Forks } from '../../images/forks.svg'
 
 export default function Title({ name, isFork, parent, releases, url }) {
-    return (
-        <h1 className={styles.title}>
-            <a href={url}>
-                {isFork && <Forks />}
-                {name}
-                {isFork && (
-                    <span className={styles.forkLine}>
-                        {parent.nameWithOwner}
-                    </span>
-                )}
-            </a>
-            {releases.edges[0] && (
-                <a
-                    href={`${url}/releases`}
-                    className={styles.repositoryRelease}
-                    title="Latest release"
-                >
-                    {releases.edges[0].node.tag.name}
-                </a>
-            )}
-        </h1>
-    )
+  return (
+    <h1 className={styles.title}>
+      <a href={url}>
+        {isFork && <Forks />}
+        {name}
+        {isFork && (
+          <span className={styles.forkLine}>{parent.nameWithOwner}</span>
+        )}
+      </a>
+      {releases.edges[0] && (
+        <a
+          href={`${url}/releases`}
+          className={styles.repositoryRelease}
+          title="Latest release"
+        >
+          {releases.edges[0].node.tag.name}
+        </a>
+      )}
+    </h1>
+  )
 }
 
 Title.propTypes = {
-    name: PropTypes.string.isRequired,
-    isFork: PropTypes.bool,
-    parent: PropTypes.shape({
-        nameWithOwner: PropTypes.string
-    }),
-    releases: PropTypes.object.isRequired,
-    url: PropTypes.string.isRequired
+  name: PropTypes.string.isRequired,
+  isFork: PropTypes.bool,
+  parent: PropTypes.shape({
+    nameWithOwner: PropTypes.string
+  }),
+  releases: PropTypes.object.isRequired,
+  url: PropTypes.string.isRequired
 }

src/components/Repository/Title.module.scss

@@ -1,53 +1,53 @@
 @import 'variables';
 
 .title {
-    font-size: $font-size-h4;
-    margin-top: 0;
-    margin-bottom: $spacer / 2;
-    border: 0;
-    padding: 0;
-    width: 100%;
-    position: relative;
+  font-size: $font-size-h4;
+  margin-top: 0;
+  margin-bottom: $spacer / 2;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  position: relative;
 
-    a:first-of-type {
-        color: $brand-black;
-
-        &:hover,
-        &:focus {
-            color: $brand-pink;
-        }
-    }
-
-    svg {
-        width: 1em;
-        height: 1em;
-        display: inline-block;
-        fill: $brand-grey-light;
-        margin-right: $spacer / 8;
-        margin-left: -.2rem;
-        margin-bottom: -.2rem;
-    }
-}
-
-.repositoryRelease {
-    font-family: $font-family-base;
-    font-weight: $font-weight-base;
-    font-size: $font-size-small;
-    color: $brand-grey-light;
-    display: inline-block;
-    margin-left: $spacer / 4;
+  a:first-of-type {
+    color: $brand-black;
 
     &:hover,
     &:focus {
-        transform: none;
+      color: $brand-pink;
     }
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    fill: $brand-grey-light;
+    margin-right: $spacer / 8;
+    margin-left: -0.2rem;
+    margin-bottom: -0.2rem;
+  }
+}
+
+.repositoryRelease {
+  font-family: $font-family-base;
+  font-weight: $font-weight-base;
+  font-size: $font-size-small;
+  color: $brand-grey-light;
+  display: inline-block;
+  margin-left: $spacer / 4;
+
+  &:hover,
+  &:focus {
+    transform: none;
+  }
 }
 
 .forkLine {
-    display: inline;
-    margin-left: $spacer / 4;
-    font-size: $font-size-mini;
-    font-family: $font-family-monospace;
-    font-weight: $font-weight-base;
-    color: $brand-grey-light;
+  display: inline;
+  margin-left: $spacer / 4;
+  font-size: $font-size-mini;
+  font-family: $font-family-monospace;
+  font-weight: $font-weight-base;
+  color: $brand-grey-light;
 }

src/components/Repository/index.jsx

@@ -8,143 +8,142 @@ import Title from './Title'
 import Links from './Links'
 
 const queryGithub = graphql`
-    query GitHubReposInfo {
-        github {
-            organization(login: "oceanprotocol") {
-                repositories(first: 100, privacy: PUBLIC) {
-                    edges {
-                        node {
-                            name
-                            description
-                            url
-                            forkCount
-                            isFork
-                            parent {
-                                nameWithOwner
-                            }
-                            stargazers {
-                                totalCount
-                            }
-                            releases(
-                                first: 1
-                                orderBy: { field: CREATED_AT, direction: DESC }
-                            ) {
-                                edges {
-                                    node {
-                                        tag {
-                                            name
-                                        }
-                                    }
-                                }
-                            }
-                            object(expression: "develop:README.md") {
-                                id
-                                ... on GitHub_Blob {
-                                    text
-                                }
-                            }
-                        }
+  query GitHubReposInfo {
+    github {
+      organization(login: "oceanprotocol") {
+        repositories(first: 100, privacy: PUBLIC) {
+          edges {
+            node {
+              name
+              description
+              url
+              forkCount
+              isFork
+              parent {
+                nameWithOwner
+              }
+              stargazers {
+                totalCount
+              }
+              releases(
+                first: 1
+                orderBy: { field: CREATED_AT, direction: DESC }
+              ) {
+                edges {
+                  node {
+                    tag {
+                      name
                     }
+                  }
                 }
-            }
-        }
-
-        allRepositoriesYaml {
-            edges {
-                node {
-                    items {
-                        name
-                        links {
-                            name
-                            url
-                        }
-                    }
+              }
+              object(expression: "develop:README.md") {
+                id
+                ... on GitHub_Blob {
+                  text
                 }
+              }
             }
+          }
         }
+      }
     }
+
+    allRepositoriesYaml {
+      edges {
+        node {
+          items {
+            name
+            links {
+              name
+              url
+            }
+          }
+        }
+      }
+    }
+  }
 `
 
 const Repository = ({ name, links, readme }) => (
-    <StaticQuery
-        query={queryGithub}
-        render={(data) => {
-            const repositoriesGitHub =
-                data.github.organization.repositories.edges
-            const repositoriesYaml = data.allRepositoriesYaml.edges
+  <StaticQuery
+    query={queryGithub}
+    render={(data) => {
+      const repositoriesGitHub = data.github.organization.repositories.edges
+      const repositoriesYaml = data.allRepositoriesYaml.edges
 
-            // just iterate over all repos until we have a name match,
-            // then return that repo, and then filter out all empty nodes
-            const repoFilteredArray = repositoriesGitHub
-                .map(({ node }) => {
-                    if (node.name === name) return node
-                })
-                .filter((n) => n)
+      // just iterate over all repos until we have a name match,
+      // then return that repo, and then filter out all empty nodes
+      const repoFilteredArray = repositoriesGitHub
+        .map(({ node }) => {
+          if (node.name === name) return node
+        })
+        .filter((n) => n)
 
-            const repo = repoFilteredArray[0]
+      const repo = repoFilteredArray[0]
 
-            // safeguard against more empty items,
-            // e.g. when private repos are referenced in repositories.yml
-            if (repo === undefined) return null
+      // safeguard against more empty items,
+      // e.g. when private repos are referenced in repositories.yml
+      if (repo === undefined) return null
 
-            const {
-                url,
-                description,
-                forkCount,
-                isFork,
-                parent,
-                stargazers,
-                releases,
-                object
-            } = repo
+      const {
+        url,
+        description,
+        forkCount,
+        isFork,
+        parent,
+        stargazers,
+        releases,
+        object
+      } = repo
 
-            // enhance passed links array with what's in repositories.yml,
-            // iterating over all repos until we have a name match
-            const linksFilteredArray = []
+      // enhance passed links array with what's in repositories.yml,
+      // iterating over all repos until we have a name match
+      const linksFilteredArray = []
 
-            repositoriesYaml.map(({ node }) => {
-                node.items.forEach((item) => {
-                    if (item.name === name) {
-                        linksFilteredArray.push(item.links)
-                    }
-                })
-            })
+      repositoriesYaml.map(({ node }) => {
+        node.items.forEach((item) => {
+          if (item.name === name) {
+            linksFilteredArray.push(item.links)
+          }
+        })
+      })
 
-            const moreLinks = links || linksFilteredArray.filter((n) => n)[0]
+      const moreLinks = links || linksFilteredArray.filter((n) => n)[0]
 
-            return (
-                <article className={styles.repository}>
-                    <Title
-                        name={name}
-                        releases={releases}
-                        url={url}
-                        isFork={isFork}
-                        parent={parent}
-                    />
+      return (
+        <article className={styles.repository}>
+          <Title
+            name={name}
+            releases={releases}
+            url={url}
+            isFork={isFork}
+            parent={parent}
+          />
 
-                    <p>{!description ? '...' : description}</p>
+          <p>{!description ? '...' : description}</p>
 
-                    <footer className={styles.repositoryMeta}>
-                        <Links links={moreLinks} url={url} />
-                        <Numbers
-                            stargazers={stargazers}
-                            forkCount={forkCount}
-                            url={url}
-                            name={name}
-                        />
-                    </footer>
+          <footer className={styles.repositoryMeta}>
+            <Links links={moreLinks} url={url} />
+            <Numbers
+              stargazers={stargazers}
+              forkCount={forkCount}
+              url={url}
+              name={name}
+            />
+          </footer>
 
-                    {readme && <Readme object={object} />}
-                </article>
-            )
-        }}
-    />
+          {readme && <Readme object={object} />}
+        </article>
+      )
+    }}
+  />
 )
 
 Repository.propTypes = {
-    name: PropTypes.string.isRequired,
-    links: PropTypes.array,
-    readme: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+  name: PropTypes.string.isRequired,
+  links: PropTypes.array,
+  readme: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
 }
 
 export default Repository

src/components/Repository/index.module.scss

@@ -1,25 +1,25 @@
 @import 'variables';
 
 .repository {
-    padding: $spacer / $line-height;
-    border: 1px solid $brand-grey-lighter;
-    background: $brand-white;
-    border-radius: $border-radius;
-    font-size: $font-size-small;
-    text-align: left;
-    width: 100%;
-    margin-bottom: $spacer;
-    display: flex;
-    flex-wrap: wrap;
+  padding: $spacer / $line-height;
+  border: 1px solid $brand-grey-lighter;
+  background: $brand-white;
+  border-radius: $border-radius;
+  font-size: $font-size-small;
+  text-align: left;
+  width: 100%;
+  margin-bottom: $spacer;
+  display: flex;
+  flex-wrap: wrap;
 
-    p {
-        align-self: flex-start;
-    }
+  p {
+    align-self: flex-start;
+  }
 }
 
 .repositoryMeta {
-    display: flex;
-    align-items: flex-end;
-    align-self: flex-end;
-    width: 100%;
+  display: flex;
+  align-items: flex-end;
+  align-self: flex-end;
+  width: 100%;
 }

src/components/Scroll.jsx

@@ -3,83 +3,83 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 export default class TocScroll extends React.Component {
-    static propTypes = {
-        type: PropTypes.string,
-        element: PropTypes.string,
-        offset: PropTypes.number,
-        timeout: PropTypes.number,
-        children: PropTypes.node.isRequired
+  static propTypes = {
+    type: PropTypes.string,
+    element: PropTypes.string,
+    offset: PropTypes.number,
+    timeout: PropTypes.number,
+    children: PropTypes.node.isRequired
+  }
+
+  componentDidMount() {
+    smoothscroll.polyfill()
+  }
+
+  handleClick = (e) => {
+    e.preventDefault()
+
+    let elem = 0
+    let scroll = true
+    const { type, element, offset, timeout } = this.props
+
+    if (type && element) {
+      switch (type) {
+        case 'class':
+          // eslint-disable-next-line prefer-destructuring
+          elem = document.getElementsByClassName(element)[0]
+          scroll = !!elem
+          break
+        case 'id':
+          elem = document.getElementById(element)
+          scroll = !!elem
+          break
+        default:
+      }
     }
 
-    componentDidMount() {
-        smoothscroll.polyfill()
+    if (scroll) {
+      this.scrollTo(elem, offset, timeout)
+
+      // update browser url
+      if (typeof window !== 'undefined') {
+        window.history.pushState({}, null, `#${element}`)
+      }
+    } else {
+      console.log(`Element not found: ${element}`) // eslint-disable-line
     }
+  }
 
-    handleClick = (e) => {
-        e.preventDefault()
+  scrollTo(element, offSet = 0, timeout = null) {
+    const elemPos = element
+      ? element.getBoundingClientRect().top + window.pageYOffset
+      : 0
 
-        let elem = 0
-        let scroll = true
-        const { type, element, offset, timeout } = this.props
-
-        if (type && element) {
-            switch (type) {
-                case 'class':
-                    // eslint-disable-next-line prefer-destructuring
-                    elem = document.getElementsByClassName(element)[0]
-                    scroll = !!elem
-                    break
-                case 'id':
-                    elem = document.getElementById(element)
-                    scroll = !!elem
-                    break
-                default:
-            }
-        }
-
-        if (scroll) {
-            this.scrollTo(elem, offset, timeout)
-
-            // update browser url
-            if (typeof window !== 'undefined') {
-                window.history.pushState({}, null, `#${element}`)
-            }
-        } else {
-            console.log(`Element not found: ${element}`) // eslint-disable-line
-        }
+    if (timeout) {
+      setTimeout(() => {
+        window.scroll({
+          top: elemPos + offSet,
+          left: 0,
+          behavior: 'smooth'
+        })
+      }, timeout)
+    } else {
+      window.scroll({
+        top: elemPos + offSet,
+        left: 0,
+        behavior: 'smooth'
+      })
     }
+  }
 
-    scrollTo(element, offSet = 0, timeout = null) {
-        const elemPos = element
-            ? element.getBoundingClientRect().top + window.pageYOffset
-            : 0
-
-        if (timeout) {
-            setTimeout(() => {
-                window.scroll({
-                    top: elemPos + offSet,
-                    left: 0,
-                    behavior: 'smooth'
-                })
-            }, timeout)
-        } else {
-            window.scroll({
-                top: elemPos + offSet,
-                left: 0,
-                behavior: 'smooth'
-            })
-        }
-    }
-
-    render() {
-        return (
-            <a
-                onClick={this.handleClick}
-                href={`#${this.props.element}`}
-                {...this.props}
-            >
-                {this.props.children}
-            </a>
-        )
-    }
+  render() {
+    return (
+      <a
+        onClick={this.handleClick}
+        href={`#${this.props.element}`}
+        {...this.props}
+      >
+        {this.props.children}
+      </a>
+    )
+  }
 }

src/components/Seo.jsx

@@ -4,171 +4,171 @@ import { StaticQuery, graphql } from 'gatsby'
 import { Helmet } from 'react-helmet'
 
 const query = graphql`
-    query {
-        site {
-            siteMetadata {
-                siteTitle
-                siteDescription
-                siteUrl
-            }
-        }
-
-        shareImage: allFile(filter: { name: { eq: "share" } }) {
-            edges {
-                node {
-                    childImageSharp {
-                        original {
-                            src
-                        }
-                    }
-                }
-            }
-        }
+  query {
+    site {
+      siteMetadata {
+        siteTitle
+        siteDescription
+        siteUrl
+      }
     }
+
+    shareImage: allFile(filter: { name: { eq: "share" } }) {
+      edges {
+        node {
+          childImageSharp {
+            original {
+              src
+            }
+          }
+        }
+      }
+    }
+  }
 `
 
 const createSchemaOrg = (title, description, image, url, siteMeta, article) => {
-    const schemaOrgJSONLD = [
-        {
-            '@context': 'http://schema.org',
-            '@type': 'WebSite',
-            url: siteMeta.siteUrl,
-            name: title
-        }
-    ]
-
-    if (article) {
-        schemaOrgJSONLD.push(
-            {
-                '@context': 'http://schema.org',
-                '@type': 'BreadcrumbList',
-                itemListElement: [
-                    {
-                        '@type': 'ListItem',
-                        position: 1,
-                        item: { '@id': url, name: title, image }
-                    }
-                ]
-            },
-            {
-                // https://schema.org/TechArticle
-                '@context': 'http://schema.org',
-                '@type': 'TechArticle',
-                name: title,
-                headline: title,
-                description,
-                url,
-                image: { '@type': 'URL', url: image }
-            }
-        )
+  const schemaOrgJSONLD = [
+    {
+      '@context': 'http://schema.org',
+      '@type': 'WebSite',
+      url: siteMeta.siteUrl,
+      name: title
     }
+  ]
 
-    return schemaOrgJSONLD
+  if (article) {
+    schemaOrgJSONLD.push(
+      {
+        '@context': 'http://schema.org',
+        '@type': 'BreadcrumbList',
+        itemListElement: [
+          {
+            '@type': 'ListItem',
+            position: 1,
+            item: { '@id': url, name: title, image }
+          }
+        ]
+      },
+      {
+        // https://schema.org/TechArticle
+        '@context': 'http://schema.org',
+        '@type': 'TechArticle',
+        name: title,
+        headline: title,
+        description,
+        url,
+        image: { '@type': 'URL', url: image }
+      }
+    )
+  }
+
+  return schemaOrgJSONLD
 }
 
 const MetaTags = ({
-    title,
-    description,
-    url,
-    image,
-    schema,
-    siteMeta,
-    article,
-    location
+  title,
+  description,
+  url,
+  image,
+  schema,
+  siteMeta,
+  article,
+  location
 }) => (
-    <Helmet
-        defaultTitle={siteMeta.siteTitle}
-        titleTemplate={`%s - ${siteMeta.siteTitle}`}
-    >
-        <html lang="en" />
+  <Helmet
+    defaultTitle={siteMeta.siteTitle}
+    titleTemplate={`%s - ${siteMeta.siteTitle}`}
+  >
+    <html lang="en" />
 
-        {title && <title>{title}</title>}
+    {title && <title>{title}</title>}
 
-        {/* General tags */}
-        <meta name="description" content={description} />
-        <meta name="image" content={image} />
-        <link rel="canonical" href={url} />
+    {/* General tags */}
+    <meta name="description" content={description} />
+    <meta name="image" content={image} />
+    <link rel="canonical" href={url} />
 
-        {/* Schema.org tags */}
-        <script type="application/ld+json">{schema}</script>
+    {/* Schema.org tags */}
+    <script type="application/ld+json">{schema}</script>
 
-        {/* OpenGraph tags */}
-        <meta property="og:url" content={url} />
-        {article && <meta property="og:type" content="article" />}
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={description} />
-        <meta property="og:image" content={image} />
+    {/* OpenGraph tags */}
+    <meta property="og:url" content={url} />
+    {article && <meta property="og:type" content="article" />}
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={image} />
 
-        {/* Twitter Card tags */}
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:creator" content="@oceanprotocol" />
-        <meta name="twitter:title" content={title} />
-        <meta name="twitter:description" content={description} />
-        <meta name="twitter:image" content={image} />
+    {/* Twitter Card tags */}
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:creator" content="@oceanprotocol" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={image} />
 
-        {/* Prevent search engine indexing except for live */}
-        {/* {location.hostname !== 'docs.oceanprotocol.com' && (
+    {/* Prevent search engine indexing except for live */}
+    {/* {location.hostname !== 'docs.oceanprotocol.com' && (
             <meta name="robots" content="noindex,nofollow" />
         )} */}
-    </Helmet>
+  </Helmet>
 )
 
 MetaTags.propTypes = {
-    title: PropTypes.string,
-    description: PropTypes.string,
-    url: PropTypes.string,
-    image: PropTypes.string,
-    schema: PropTypes.string,
-    siteMeta: PropTypes.object,
-    article: PropTypes.bool,
-    location: PropTypes.object.isRequired
+  title: PropTypes.string,
+  description: PropTypes.string,
+  url: PropTypes.string,
+  image: PropTypes.string,
+  schema: PropTypes.string,
+  siteMeta: PropTypes.object,
+  article: PropTypes.bool,
+  location: PropTypes.object.isRequired
 }
 
 const Seo = ({ title, description, slug, article, location }) => (
-    <StaticQuery
-        query={query}
-        render={(data) => {
-            const siteMeta = data.site.siteMetadata
-            const shareImage =
-                data.shareImage.edges[0].node.childImageSharp.original.src
+  <StaticQuery
+    query={query}
+    render={(data) => {
+      const siteMeta = data.site.siteMetadata
+      const shareImage =
+        data.shareImage.edges[0].node.childImageSharp.original.src
 
-            title = title || siteMeta.siteTitle
-            description = description || siteMeta.siteDescription
-            const url = siteMeta.siteUrl || siteMeta.siteUrl + slug
-            const image = siteMeta.siteUrl + shareImage
+      title = title || siteMeta.siteTitle
+      description = description || siteMeta.siteDescription
+      const url = siteMeta.siteUrl || siteMeta.siteUrl + slug
+      const image = siteMeta.siteUrl + shareImage
 
-            let schema = createSchemaOrg(
-                title,
-                description,
-                image,
-                url,
-                siteMeta,
-                article
-            )
-            schema = JSON.stringify(schema)
+      let schema = createSchemaOrg(
+        title,
+        description,
+        image,
+        url,
+        siteMeta,
+        article
+      )
+      schema = JSON.stringify(schema)
 
-            return (
-                <MetaTags
-                    title={title}
-                    description={description}
-                    url={url}
-                    image={image}
-                    schema={schema}
-                    siteMeta={siteMeta}
-                    article={article}
-                    location={location}
-                />
-            )
-        }}
-    />
+      return (
+        <MetaTags
+          title={title}
+          description={description}
+          url={url}
+          image={image}
+          schema={schema}
+          siteMeta={siteMeta}
+          article={article}
+          location={location}
+        />
+      )
+    }}
+  />
 )
 
 Seo.propTypes = {
-    title: PropTypes.string,
-    description: PropTypes.string,
-    slug: PropTypes.string,
-    article: PropTypes.bool,
-    location: PropTypes.object.isRequired
+  title: PropTypes.string,
+  description: PropTypes.string,
+  slug: PropTypes.string,
+  article: PropTypes.bool,
+  location: PropTypes.object.isRequired
 }
 
 export default Seo

src/components/Sidebar.jsx

@@ -5,153 +5,140 @@ import { ReactComponent as External } from '../images/external.svg'
 import styles from './Sidebar.module.scss'
 
 const SidebarLink = ({ link, title, linkClasses }) => {
-    if (link) {
-        if (link.match(/^\s?http(s?)/gi)) {
-            return (
-                <a
-                    href={link}
-                    className={linkClasses}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    {title} <External className={styles.external} />
-                </a>
-            )
-        } else {
-            return (
-                <Link to={link} className={linkClasses}>
-                    {title}
-                </Link>
-            )
-        }
+  if (link) {
+    if (link.match(/^\s?http(s?)/gi)) {
+      return (
+        <a
+          href={link}
+          className={linkClasses}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {title} <External className={styles.external} />
+        </a>
+      )
     } else {
-        return title
+      return (
+        <Link to={link} className={linkClasses}>
+          {title}
+        </Link>
+      )
     }
+  } else {
+    return title
+  }
 }
 
 SidebarLink.propTypes = {
-    link: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    linkClasses: PropTypes.string
+  link: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  linkClasses: PropTypes.string
 }
 
 const SidebarList = ({ items, location, toc, tocComponent }) => (
-    <div className={styles.list}>
-        {toc ? (
-            <div className={styles.toc}>{tocComponent}</div>
-        ) : (
-            <ul>
-                {items.map((item, j) => (
-                    <li key={j}>
-                        <SidebarLink
-                            link={item.link}
-                            title={item.title}
-                            linkClasses={
-                                item.link === location.pathname
-                                    ? styles.active
-                                    : styles.link
-                            }
-                        />
-                    </li>
-                ))}
-            </ul>
-        )}
-    </div>
+  <div className={styles.list}>
+    {toc ? (
+      <div className={styles.toc}>{tocComponent}</div>
+    ) : (
+      <ul>
+        {items.map((item, j) => (
+          <li key={j}>
+            <SidebarLink
+              link={item.link}
+              title={item.title}
+              linkClasses={
+                item.link === location.pathname ? styles.active : styles.link
+              }
+            />
+          </li>
+        ))}
+      </ul>
+    )}
+  </div>
 )
 
 SidebarList.propTypes = {
-    items: PropTypes.array.isRequired,
-    location: PropTypes.object.isRequired,
-    toc: PropTypes.bool,
-    tocComponent: PropTypes.object
+  items: PropTypes.array.isRequired,
+  location: PropTypes.object.isRequired,
+  toc: PropTypes.bool,
+  tocComponent: PropTypes.object
 }
 
 const SidebarGroupTitle = ({ group }) => (
-    <h4 className={styles.groupTitle}>
-        {group.items[0].link ? (
-            <SidebarLink
-                link={group.items[0].link}
-                title={group.group}
-                linkClasses={styles.groupTitleLink}
-            />
-        ) : (
-            group.group
-        )}
-    </h4>
+  <h4 className={styles.groupTitle}>
+    {group.items[0].link ? (
+      <SidebarLink
+        link={group.items[0].link}
+        title={group.group}
+        linkClasses={styles.groupTitleLink}
+      />
+    ) : (
+      group.group
+    )}
+  </h4>
 )
 
 SidebarGroupTitle.propTypes = {
-    group: PropTypes.object.isRequired
+  group: PropTypes.object.isRequired
 }
 
 const SidebarGroup = ({ i, group, location, ...props }) => (
-    <>
-        <SidebarGroupTitle group={group} />
-        <SidebarList
-            key={i}
-            items={group.items}
-            location={location}
-            {...props}
-        />
-    </>
+  <>
+    <SidebarGroupTitle group={group} />
+    <SidebarList key={i} items={group.items} location={location} {...props} />
+  </>
 )
 
 SidebarGroup.propTypes = {
-    i: PropTypes.number,
-    group: PropTypes.object,
-    location: PropTypes.object
+  i: PropTypes.number,
+  group: PropTypes.object,
+  location: PropTypes.object
 }
 
 export default class Sidebar extends Component {
-    static propTypes = {
-        sidebar: PropTypes.string,
-        location: PropTypes.object.isRequired,
-        collapsed: PropTypes.bool,
-        toc: PropTypes.bool,
-        tocComponent: PropTypes.element
+  static propTypes = {
+    sidebar: PropTypes.string,
+    location: PropTypes.object.isRequired,
+    collapsed: PropTypes.bool,
+    toc: PropTypes.bool,
+    tocComponent: PropTypes.element
+  }
+
+  static defaultProps = { location: { pathname: '/' } }
+
+  render() {
+    const { sidebar, location, collapsed, toc, tocComponent } = this.props
+
+    if (sidebar) {
+      var sidebarfile = require(`../../data/sidebars/${sidebar}.yml`) // eslint-disable-line
     }
 
-    static defaultProps = { location: { pathname: '/' } }
-
-    render() {
-        const { sidebar, location, collapsed, toc, tocComponent } = this.props
-
-        if (sidebar) {
-            var sidebarfile = require(`../../data/sidebars/${sidebar}.yml`) // eslint-disable-line
-        }
-
-        if (!sidebarfile) {
-            return null
-        }
-
-        return (
-            <nav className={styles.sidebar}>
-                {sidebarfile.map((group, i) => (
-                    <div key={i}>
-                        {collapsed ? (
-                            group.items.some(
-                                (item) => item.link === location.pathname
-                            ) ? (
-                                <SidebarGroup
-                                    i={i}
-                                    group={group}
-                                    location={location}
-                                    toc={toc}
-                                    tocComponent={tocComponent}
-                                />
-                            ) : (
-                                <SidebarGroupTitle group={group} />
-                            )
-                        ) : (
-                            <SidebarGroup
-                                i={i}
-                                group={group}
-                                location={location}
-                            />
-                        )}
-                    </div>
-                ))}
-            </nav>
-        )
+    if (!sidebarfile) {
+      return null
     }
+
+    return (
+      <nav className={styles.sidebar}>
+        {sidebarfile.map((group, i) => (
+          <div key={i}>
+            {collapsed ? (
+              group.items.some((item) => item.link === location.pathname) ? (
+                <SidebarGroup
+                  i={i}
+                  group={group}
+                  location={location}
+                  toc={toc}
+                  tocComponent={tocComponent}
+                />
+              ) : (
+                <SidebarGroupTitle group={group} />
+              )
+            ) : (
+              <SidebarGroup i={i} group={group} location={location} />
+            )}
+          </div>
+        ))}
+      </nav>
+    )
+  }
 }

src/components/Sidebar.module.scss

@@ -1,161 +1,161 @@
 @import 'variables';
 
 .sidebar {
-    padding-bottom: $spacer;
-    padding-right: $spacer / 2;
-    position: sticky;
-    top: 0;
-    max-height: 100vh;
-    overflow-y: auto;
-    overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
+  padding-bottom: $spacer;
+  padding-right: $spacer / 2;
+  position: sticky;
+  top: 0;
+  max-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
 
-    &::-webkit-scrollbar,
-    &::-moz-scrollbar {
-        display: none;
-    }
+  &::-webkit-scrollbar,
+  &::-moz-scrollbar {
+    display: none;
+  }
 
-    &::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
 
-    &::-webkit-scrollbar-thumb {
-        background: $brand-grey-lighter;
-    }
+  &::-webkit-scrollbar-thumb {
+    background: $brand-grey-lighter;
+  }
 
-    &::-webkit-scrollbar-track {
-        background: darken($brand-white, 3%);
-    }
+  &::-webkit-scrollbar-track {
+    background: darken($brand-white, 3%);
+  }
 }
 
 .groupTitle {
-    font-size: $font-size-small;
-    font-family: $font-family-button;
-    text-transform: uppercase;
-    margin-top: $spacer;
-    margin-bottom: $spacer / 4;
+  font-size: $font-size-small;
+  font-family: $font-family-button;
+  text-transform: uppercase;
+  margin-top: $spacer;
+  margin-bottom: $spacer / 4;
 }
 
 .groupTitleLink {
-    color: $brand-grey-light;
+  color: $brand-grey-light;
 
-    &:hover,
-    &:focus {
-        transform: none;
-        color: $brand-grey-light;
-    }
+  &:hover,
+  &:focus {
+    transform: none;
+    color: $brand-grey-light;
+  }
 }
 
 .list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    border-left: 1px solid $brand-grey-lighter;
-    margin-left: $spacer / 2;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-left: 1px solid $brand-grey-lighter;
+  margin-left: $spacer / 2;
 
-    > ul {
-        padding-left: 0;
-    }
-
-    li {
-        display: block;
-
-        &:before {
-            display: none;
-        }
+  > ul {
+    padding-left: 0;
+  }
+
+  li {
+    display: block;
+
+    &:before {
+      display: none;
     }
+  }
 }
 
 .link,
 .toc a {
-    color: $brand-grey;
-    display: inline-block;
-    padding: $spacer / 6 $spacer / 2;
-    border-left: .1rem solid transparent;
-    margin-left: -.05rem;
+  color: $brand-grey;
+  display: inline-block;
+  padding: $spacer / 6 $spacer / 2;
+  border-left: 0.1rem solid transparent;
+  margin-left: -0.05rem;
 
-    &:hover,
-    &:focus {
-        transform: none;
-        color: $brand-purple;
-
-        :global(.setup) & {
-            color: $brand-blue;
-        }
-
-        :global(.tutorials) & {
-            color: $orange;
-        }
-
-        :global(.references) & {
-            color: $green;
-        }
-    }
-}
-
-.toc {
-    ul {
-        padding-left: 0;
-        margin: 0;
-
-        ul {
-            border-left: 1px solid $brand-grey-lighter;
-            margin-left: $spacer;
-            font-size: $font-size-small;
-        }
-    }
-
-    li {
-        margin: 0;
-    }
-
-    a {
-        padding-top: $spacer / 12;
-        padding-bottom: $spacer / 12;
-    }
-
-    code {
-        background: none;
-        color: inherit;
-    }
-
-    [data-deprecated='true'] code {
-        opacity: .5;
-    }
-}
-
-.active {
-    composes: link;
+  &:hover,
+  &:focus {
+    transform: none;
     color: $brand-purple;
-    border-left-color: $brand-purple;
 
     :global(.setup) & {
-        color: $brand-blue;
-        border-left-color: $brand-blue;
+      color: $brand-blue;
     }
 
     :global(.tutorials) & {
-        color: $orange;
-        border-left-color: $orange;
+      color: $orange;
     }
 
     :global(.references) & {
-        color: $green;
-        border-left-color: $green;
+      color: $green;
     }
+  }
+}
+
+.toc {
+  ul {
+    padding-left: 0;
+    margin: 0;
+
+    ul {
+      border-left: 1px solid $brand-grey-lighter;
+      margin-left: $spacer;
+      font-size: $font-size-small;
+    }
+  }
+
+  li {
+    margin: 0;
+  }
+
+  a {
+    padding-top: $spacer / 12;
+    padding-bottom: $spacer / 12;
+  }
+
+  code {
+    background: none;
+    color: inherit;
+  }
+
+  [data-deprecated='true'] code {
+    opacity: 0.5;
+  }
+}
+
+.active {
+  composes: link;
+  color: $brand-purple;
+  border-left-color: $brand-purple;
+
+  :global(.setup) & {
+    color: $brand-blue;
+    border-left-color: $brand-blue;
+  }
+
+  :global(.tutorials) & {
+    color: $orange;
+    border-left-color: $orange;
+  }
+
+  :global(.references) & {
+    color: $green;
+    border-left-color: $green;
+  }
 }
 
 .scrollspyActive {
-    > a {
-        color: $green;
-        border-left-color: $green;
-    }
+  > a {
+    color: $green;
+    border-left-color: $green;
+  }
 }
 
 .external {
-    fill: $brand-grey-light;
-    display: inline-block;
-    width: $font-size-mini;
-    height: $font-size-mini;
+  fill: $brand-grey-light;
+  display: inline-block;
+  width: $font-size-mini;
+  height: $font-size-mini;
 }

src/pages/404.jsx

@@ -17,63 +17,56 @@ const giphyClient = giphyAPI('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
 const tag = 'ocean'
 
 export default class NotFoundPage extends Component {
-    state = { gif: '' }
+  state = { gif: '' }
 
-    static propTypes = {
-        location: PropTypes.object
+  static propTypes = {
+    location: PropTypes.object
+  }
+
+  componentDidMount() {
+    this.getRandomGif()
+  }
+
+  async getRandomGif() {
+    try {
+      const response = await giphyClient.random('gifs', { tag })
+      const gif = response.data.images.original.mp4
+      this.setState({ gif })
+    } catch (error) {
+      return error
     }
+  }
 
-    componentDidMount() {
-        this.getRandomGif()
-    }
+  handleClick = (e) => {
+    e.preventDefault()
+    this.getRandomGif()
+  }
 
-    async getRandomGif() {
-        try {
-            const response = await giphyClient.random('gifs', { tag })
-            const gif = response.data.images.original.mp4
-            this.setState({ gif })
-        } catch (error) {
-            return error
-        }
-    }
+  render() {
+    return (
+      <>
+        <Seo location={this.props.location} title="404 - Not Found" />
+        <Layout location={this.props.location}>
+          <Content>
+            <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.
+              </p>
 
-    handleClick = (e) => {
-        e.preventDefault()
-        this.getRandomGif()
-    }
+              <video className="gif" src={this.state.gif} autoPlay loop />
 
-    render() {
-        return (
-            <>
-                <Seo location={this.props.location} title="404 - Not Found" />
-                <Layout location={this.props.location}>
-                    <Content>
-                        <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.
-                            </p>
-
-                            <video
-                                className="gif"
-                                src={this.state.gif}
-                                autoPlay
-                                loop
-                            />
-
-                            <div>
-                                <button
-                                    onClick={this.handleClick}
-                                >{`Get another ${tag} gif`}</button>
-                            </div>
-                        </article>
-                    </Content>
-                </Layout>
-            </>
-        )
-    }
+              <div>
+                <button
+                  onClick={this.handleClick}
+                >{`Get another ${tag} gif`}</button>
+              </div>
+            </article>
+          </Content>
+        </Layout>
+      </>
+    )
+  }
 }

src/pages/404.module.scss

@@ -1,28 +1,28 @@
 @import 'variables';
 
 .content {
-    max-width: 33rem;
-    margin: auto;
-    text-align: center;
+  max-width: 33rem;
+  margin: auto;
+  text-align: center;
 
-    video {
-        margin-top: $spacer;
-        margin-bottom: $spacer;
-        display: block;
-        width: auto;
-        max-height: 300px;
-        border: $page-frame solid $brand-black;
-        background: $brand-black;
-    }
+  video {
+    margin-top: $spacer;
+    margin-bottom: $spacer;
+    display: block;
+    width: auto;
+    max-height: 300px;
+    border: $page-frame solid $brand-black;
+    background: $brand-black;
+  }
 
-    button {
-        background: none;
-        border: 0;
-        box-shadow: none;
-        font-family: $font-family-button;
-        font-weight: $font-weight-bold;
-        font-size: $font-size-base;
-        color: $brand-pink;
-        cursor: pointer;
-    }
+  button {
+    background: none;
+    border: 0;
+    box-shadow: none;
+    font-family: $font-family-button;
+    font-weight: $font-weight-bold;
+    font-size: $font-size-base;
+    color: $brand-pink;
+    cursor: pointer;
+  }
 }

src/pages/index.jsx

@@ -12,100 +12,96 @@ import { ReactComponent as Arrow } from '../images/arrow.svg'
 import styles from './index.module.scss'
 
 const SectionBox = ({ to, children, ...props }) =>
-    to ? (
-        <Link to={to} {...props}>
-            {children}
-        </Link>
-    ) : (
-        <div {...props}>{children}</div>
-    )
+  to ? (
+    <Link to={to} {...props}>
+      {children}
+    </Link>
+  ) : (
+    <div {...props}>{children}</div>
+  )
 
 SectionBox.propTypes = {
-    to: PropTypes.string.isRequired,
-    children: PropTypes.any.isRequired
+  to: PropTypes.string.isRequired,
+  children: PropTypes.any.isRequired
 }
 
 const SectionLink = ({ to, title, color, children }) => {
-    // eslint-disable-next-line
-    let classNames = classnames(styles.link, {
-        [styles.purple]: color === 'purple',
-        [styles.blue]: color === 'blue',
-        [styles.orange]: color === 'orange',
-        [styles.green]: color === 'green'
-    })
+  // eslint-disable-next-line
+  let classNames = classnames(styles.link, {
+    [styles.purple]: color === 'purple',
+    [styles.blue]: color === 'blue',
+    [styles.orange]: color === 'orange',
+    [styles.green]: color === 'green'
+  })
 
-    return (
-        <SectionBox to={to} className={classNames}>
-            <h3 className={styles.sectionTitle}>{title}</h3>
-            <p className={styles.sectionText}>{children}</p>
-            {title !== 'API References' && (
-                <span className={styles.sectionMore}>
-                    Learn More <Arrow />
-                </span>
-            )}
-        </SectionBox>
-    )
+  return (
+    <SectionBox to={to} className={classNames}>
+      <h3 className={styles.sectionTitle}>{title}</h3>
+      <p className={styles.sectionText}>{children}</p>
+      {title !== 'API References' && (
+        <span className={styles.sectionMore}>
+          Learn More <Arrow />
+        </span>
+      )}
+    </SectionBox>
+  )
 }
 
 SectionLink.propTypes = {
-    to: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    color: PropTypes.string,
-    children: PropTypes.any
+  to: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  children: PropTypes.any
 }
 
 const IndexPage = ({ data, location }) => (
-    <>
-        <Seo location={location} />
+  <>
+    <Seo location={location} />
 
-        <Layout location={location} header={<HeaderHome />}>
-            <Content>
-                <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}
-                            >
-                                {node.description}
-                            </SectionLink>
-                        </li>
-                    ))}
-                </ul>
+    <Layout location={location} header={<HeaderHome />}>
+      <Content>
+        <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}>
+                {node.description}
+              </SectionLink>
+            </li>
+          ))}
+        </ul>
 
-                <QuickRun />
+        <QuickRun />
 
-                <Repositories />
-            </Content>
-        </Layout>
-    </>
+        <Repositories />
+      </Content>
+    </Layout>
+  </>
 )
 
 IndexPage.propTypes = {
-    data: PropTypes.object.isRequired,
-    location: PropTypes.object.isRequired
+  data: PropTypes.object.isRequired,
+  location: PropTypes.object.isRequired
 }
 
 export default IndexPage
 
 export const IndexQuery = graphql`
-    query {
-        site {
-            siteMetadata {
-                siteDescription
-            }
-        }
-
-        allSectionsYaml {
-            edges {
-                node {
-                    title
-                    description
-                    link
-                    color
-                }
-            }
-        }
+  query {
+    site {
+      siteMetadata {
+        siteDescription
+      }
     }
+
+    allSectionsYaml {
+      edges {
+        node {
+          title
+          description
+          link
+          color
+        }
+      }
+    }
+  }
 `

src/pages/index.module.scss

@@ -2,118 +2,118 @@
 @import 'animations';
 
 .sections {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    margin-top: -($spacer * 4);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-top: -($spacer * 4);
 
-    @media (min-width: $break-point--medium) {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
+  @media (min-width: $break-point--medium) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
 }
 
 .section {
-    margin-top: $spacer;
-    animation: fadeInUp .6s ease-out backwards;
+  margin-top: $spacer;
+  animation: fadeInUp 0.6s ease-out backwards;
 
-    &:before {
-        display: none;
-    }
+  &:before {
+    display: none;
+  }
 
-    @media (min-width: $break-point--medium) {
-        flex: 0 0 31%;
-    }
-    animation-delay: .4s;
+  @media (min-width: $break-point--medium) {
+    flex: 0 0 31%;
+  }
+  animation-delay: 0.4s;
 
-    &:nth-child(2) {
-        animation-delay: .6s;
-    }
+  &:nth-child(2) {
+    animation-delay: 0.6s;
+  }
 
-    &:nth-child(3) {
-        animation-delay: .8s;
-    }
+  &:nth-child(3) {
+    animation-delay: 0.8s;
+  }
 
-    &:last-child {
-        flex-basis: 100%;
-        text-align: center;
-    }
+  &:last-child {
+    flex-basis: 100%;
+    text-align: center;
+  }
 }
 
 .link {
-    display: flex;
-    flex-wrap: wrap;
-    padding: $spacer $spacer * $line-height;
-    border-radius: $border-radius;
-    box-shadow: rgba($brand-black, .1) 0 9px 18px;
-    color: $brand-grey;
-    background: $brand-white;
-    height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: $spacer $spacer * $line-height;
+  border-radius: $border-radius;
+  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;
+  &:hover,
+  &:focus {
+    box-shadow: rgba($brand-black, 0.1) 0 12px 20px;
 
-        svg {
-            transform: translate3d(.2rem, 0, 0);
-        }
+    svg {
+      transform: translate3d(0.2rem, 0, 0);
     }
+  }
 }
 
 .purple {
-    .sectionTitle,
-    .sectionMore {
-        color: $brand-purple;
-    }
+  .sectionTitle,
+  .sectionMore {
+    color: $brand-purple;
+  }
 }
 
 .blue {
-    .sectionTitle,
-    .sectionMore {
-        color: $brand-blue;
-    }
+  .sectionTitle,
+  .sectionMore {
+    color: $brand-blue;
+  }
 }
 
 .orange {
-    .sectionTitle,
-    .sectionMore {
-        color: $orange;
-    }
+  .sectionTitle,
+  .sectionMore {
+    color: $orange;
+  }
 }
 
 .green {
-    .sectionTitle,
-    .sectionMore {
-        color: $green;
-    }
+  .sectionTitle,
+  .sectionMore {
+    color: $green;
+  }
 }
 
 .sectionTitle {
-    margin-top: 0;
-    margin-bottom: $spacer / $line-height;
-    width: 100%;
+  margin-top: 0;
+  margin-bottom: $spacer / $line-height;
+  width: 100%;
 }
 
 .sectionText {
-    margin-bottom: 0;
-    color: $brand-grey;
-    width: 100%;
+  margin-bottom: 0;
+  color: $brand-grey;
+  width: 100%;
 }
 
 .sectionMore {
-    align-self: flex-end;
-    margin-top: $spacer / $line-height;
-    color: $brand-pink;
-    width: 100%;
-    font-family: $font-family-button;
-    font-weight: $font-weight-bold;
+  align-self: flex-end;
+  margin-top: $spacer / $line-height;
+  color: $brand-pink;
+  width: 100%;
+  font-family: $font-family-button;
+  font-weight: $font-weight-bold;
 
-    svg {
-        display: inline-block;
-        width: $font-size-small;
-        height: $font-size-small;
-        fill: $brand-grey-light;
-        transition: transform .2s ease-out;
-    }
+  svg {
+    display: inline-block;
+    width: $font-size-small;
+    height: $font-size-small;
+    fill: $brand-grey-light;
+    transition: transform 0.2s ease-out;
+  }
 }

src/styles/_animations.scss

@@ -1,21 +1,21 @@
 @keyframes fadeInUp {
-    0% {
-        opacity: .01;
-        transform: translate3d(0, 5rem, 0);
-    }
+  0% {
+    opacity: 0.01;
+    transform: translate3d(0, 5rem, 0);
+  }
 
-    100% {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 @keyframes fadeIn {
-    0% {
-        opacity: .01;
-    }
+  0% {
+    opacity: 0.01;
+  }
 
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }

src/styles/_code.scss

@@ -6,150 +6,150 @@ code,
 kbd,
 pre,
 samp {
-    font-family: $font-family-monospace;
-    font-size: $font-size-small;
-    border-radius: $border-radius;
-    background: lighten($brand-grey-light, 35%);
-    color: $brand-grey;
-    text-shadow: none;
+  font-family: $font-family-monospace;
+  font-size: $font-size-small;
+  border-radius: $border-radius;
+  background: lighten($brand-grey-light, 35%);
+  color: $brand-grey;
+  text-shadow: none;
 
-    h1 &,
-    h2 &,
-    h3 &,
-    h4 &,
-    h5 & {
-        font-size: inherit;
-    }
+  h1 &,
+  h2 &,
+  h3 &,
+  h4 &,
+  h5 & {
+    font-size: inherit;
+  }
 }
 
 :not(pre) > code {
-    display: inline-block;
-    padding-left: .3rem;
-    padding-right: .3rem;
+  display: inline-block;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
 }
 
 a > code {
-    color: $brand-pink;
+  color: $brand-pink;
 }
 
 pre {
+  display: block;
+  margin: $spacer / 2 0;
+  padding: 0;
+  position: relative;
+  background: lighten($brand-grey-light, 35%) !important;
+
+  // make 'em scrollable
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  max-height: 800px;
+  width: 100%;
+
+  code {
+    background: none;
+    padding: $spacer / 1.5;
+    white-space: pre;
     display: block;
-    margin: $spacer / 2 0;
-    padding: 0;
-    position: relative;
-    background: lighten($brand-grey-light, 35%) !important;
-
-    // make 'em scrollable
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    max-height: 800px;
+    color: $brand-grey;
+    overflow-wrap: normal;
+    word-wrap: normal;
+    word-break: normal;
+    float: left;
     width: 100%;
-
-    code {
-        background: none;
-        padding: $spacer / 1.5;
-        white-space: pre;
-        display: block;
-        color: $brand-grey;
-        overflow-wrap: normal;
-        word-wrap: normal;
-        word-break: normal;
-        float: left;
-        width: 100%;
-    }
+  }
 }
 
 pre[data-language]:before {
-    background: $brand-grey-lighter;
-    border-radius: 0 0 $border-radius $border-radius;
-    color: $brand-grey;
-    font-size: $font-size-mini;
-    font-family: $font-family-monospace;
-    letter-spacing: .05em;
-    line-height: 1;
-    padding: .25rem .5rem;
-    position: absolute;
-    right: $spacer / 2;
-    top: 0;
+  background: $brand-grey-lighter;
+  border-radius: 0 0 $border-radius $border-radius;
+  color: $brand-grey;
+  font-size: $font-size-mini;
+  font-family: $font-family-monospace;
+  letter-spacing: 0.05em;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+  position: absolute;
+  right: $spacer / 2;
+  top: 0;
 }
 
 pre[data-language='js']:before {
-    content: 'js';
+  content: 'js';
 }
 
 pre[data-language='jsx']:before {
-    content: 'jsx';
+  content: 'jsx';
 }
 
 pre[data-language='bash'] {
+  &:before {
+    content: 'bash';
+  }
+
+  .vscode-highlight-line:only-child {
+    padding-left: 0.5rem;
+    display: block;
+
     &:before {
-        content: 'bash';
-    }
-
-    .vscode-highlight-line:only-child {
-        padding-left: .5rem;
-        display: block;
-
-        &:before {
-            content: '$';
-            opacity: .5;
-            display: inline-block;
-            margin-left: -.5rem;
-            margin-right: .5rem;
-        }
+      content: '$';
+      opacity: 0.5;
+      display: inline-block;
+      margin-left: -0.5rem;
+      margin-right: 0.5rem;
     }
+  }
 }
 
 pre[data-language='html']:before {
-    content: 'html';
+  content: 'html';
 }
 
 pre[data-language='css']:before {
-    content: 'css';
+  content: 'css';
 }
 
 pre[data-language='php']:before {
-    content: 'php';
+  content: 'php';
 }
 
 pre[data-language='python']:before {
-    content: 'python';
+  content: 'python';
 }
 
 pre[data-language='java']:before {
-    content: 'java';
+  content: 'java';
 }
 
 pre[data-language='markdown']:before {
-    content: 'markdown';
+  content: 'markdown';
 }
 
 pre[data-language='toml']:before {
-    content: 'toml';
+  content: 'toml';
 }
 
 .gatsby-code-title {
-    background: lighten($brand-grey-light, 35%);
-    padding: $spacer / 4 $spacer / 2;
-    margin-bottom: -($spacer / 2);
-    border-bottom: 1px solid $brand-white;
-    font-family: $font-family-monospace;
-    color: $brand-grey-light;
-    font-size: $font-size-small;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
+  background: lighten($brand-grey-light, 35%);
+  padding: $spacer / 4 $spacer / 2;
+  margin-bottom: -($spacer / 2);
+  border-bottom: 1px solid $brand-white;
+  font-family: $font-family-monospace;
+  color: $brand-grey-light;
+  font-size: $font-size-small;
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
 }
 
 .vscode-highlight-line {
-    display: inline-block;
+  display: inline-block;
 
-    &.vscode-highlight-line-highlighted {
-        background-color: lighten($brand-grey-light, 30%);
-        margin-left: -($spacer / 1.5);
-        margin-right: -($spacer / 1.5);
-        padding-left: $spacer / 1.85;
-        padding-right: $spacer / 1.5;
-        border-left: .25rem solid $brand-grey-light;
-        width: calc(100% + #{$spacer * 1.5});
-    }
+  &.vscode-highlight-line-highlighted {
+    background-color: lighten($brand-grey-light, 30%);
+    margin-left: -($spacer / 1.5);
+    margin-right: -($spacer / 1.5);
+    padding-left: $spacer / 1.85;
+    padding-right: $spacer / 1.5;
+    border-left: 0.25rem solid $brand-grey-light;
+    width: calc(100% + #{$spacer * 1.5});
+  }
 }

src/styles/_fonts.scss

@@ -1,26 +1,26 @@
 @font-face {
-    font-family: 'Sharp Sans Display';
-    src: url('../fonts/SharpSansDispNo1-Bold.woff2') format('woff2'),
-        url('../fonts/SharpSansDispNo1-Bold.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-    font-stretch: normal;
+  font-family: 'Sharp Sans Display';
+  src: url('../fonts/SharpSansDispNo1-Bold.woff2') format('woff2'),
+    url('../fonts/SharpSansDispNo1-Bold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-stretch: normal;
 }
 
 @font-face {
-    font-family: 'Sharp Sans Medium';
-    src: url('../fonts/SharpSans-Medium.woff2') format('woff2'),
-        url('../fonts/SharpSans-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-stretch: normal;
+  font-family: 'Sharp Sans Medium';
+  src: url('../fonts/SharpSans-Medium.woff2') format('woff2'),
+    url('../fonts/SharpSans-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-stretch: normal;
 }
 
 @font-face {
-    font-family: 'Sharp Sans Bold';
-    src: url('../fonts/SharpSans-Bold.woff2') format('woff2'),
-        url('../fonts/SharpSans-Bold.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-    font-stretch: normal;
+  font-family: 'Sharp Sans Bold';
+  src: url('../fonts/SharpSans-Bold.woff2') format('woff2'),
+    url('../fonts/SharpSans-Bold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-stretch: normal;
 }

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;
@@ -23,20 +24,20 @@ $body-background: darken($brand-white, 1%);
 // Fonts
 // stylelint-disable value-keyword-case
 $font-family-base: 'Sharp Sans Medium', -apple-system, blinkmacsystemfont,
-    'Segoe UI', helvetica, arial, sans-serif;
+  'Segoe UI', helvetica, arial, sans-serif;
 $font-family-title: 'Sharp Sans Display', -apple-system, blinkmacsystemfont,
-    'Segoe UI', helvetica, arial, sans-serif;
+  'Segoe UI', helvetica, arial, sans-serif;
 $font-family-button: 'Sharp Sans Bold', -apple-system, blinkmacsystemfont,
-    'Segoe UI', helvetica, arial, sans-serif;
+  'Segoe UI', helvetica, arial, sans-serif;
 $font-family-monospace: 'Fira Code', 'Fira Mono', menlo, monaco, consolas,
-    'Courier New', monospace;
+  'Courier New', monospace;
 // stylelint-enable value-keyword-case
 
 $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;

src/styles/global.scss

@@ -6,113 +6,109 @@
 *,
 *:before,
 *:after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 html {
-    font-size: $font-size-root;
+  font-size: $font-size-root;
 }
 
 body {
-    color: $brand-black;
-    font-size: $font-size-base;
-    font-family: $font-family-base;
-    font-weight: $font-weight-base;
-    line-height: $line-height;
-    background: $body-background;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    position: relative;
-    margin: 0;
-
-    @media screen and (min-width: $break-point--small) {
-        padding: $page-frame;
-    }
+  color: $brand-black;
+  font-size: $font-size-base;
+  font-family: $font-family-base;
+  font-weight: $font-weight-base;
+  line-height: $line-height;
+  background: $body-background;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  margin: 0;
 }
 
 a {
+  text-decoration: none;
+  color: $brand-pink;
+  transition: 0.2s ease-out;
+
+  &:hover,
+  &:focus {
+    color: darken($brand-pink, 15%);
     text-decoration: none;
-    color: $brand-pink;
-    transition: .2s ease-out;
+    transform: translate3d(0, -0.1rem, 0);
+  }
 
-    &:hover,
-    &:focus {
-        color: darken($brand-pink, 15%);
-        text-decoration: none;
-        transform: translate3d(0, -.1rem, 0);
-    }
-
-    &:active {
-        color: darken($brand-pink, 15%);
-        text-decoration: none;
-        transform: none;
-        transition: none;
-    }
+  &:active {
+    color: darken($brand-pink, 15%);
+    text-decoration: none;
+    transform: none;
+    transition: none;
+  }
 }
 
 p {
-    margin: 0;
-    margin-bottom: $spacer / $line-height;
+  margin: 0;
+  margin-bottom: $spacer / $line-height;
 }
 
 // Lists
 /////////////////////////////////////
 
 ul {
-    li {
-        &:before {
-            content: ' \25AA'; // Black Small Square: ▪ ▪
-            top: -2px;
-        }
+  li {
+    &:before {
+      content: ' \25AA'; // Black Small Square: ▪ ▪
+      top: -2px;
     }
+  }
 }
 
 ol {
-    counter-reset: ol-counter;
+  counter-reset: ol-counter;
 
-    li {
-        &:before {
-            content: counter(ol-counter) '.';
-            counter-increment: ol-counter;
-            font-family: $font-family-button;
-        }
+  li {
+    &:before {
+      content: counter(ol-counter) '.';
+      counter-increment: ol-counter;
+      font-family: $font-family-button;
     }
+  }
 
-    ul li:before {
-        content: ' \25AA';
-    }
+  ul li:before {
+    content: ' \25AA';
+  }
 }
 
 ul,
 ol {
-    margin-top: 0;
-    margin-bottom: $spacer;
-    padding-left: $spacer / $line-height;
-    list-style: none;
+  margin-top: 0;
+  margin-bottom: $spacer;
+  padding-left: $spacer / $line-height;
+  list-style: none;
 
-    li {
-        position: relative;
-        display: block;
+  li {
+    position: relative;
+    display: block;
 
-        &:before {
-            position: absolute;
-            left: -($spacer / $line-height);
-            color: $brand-grey-light;
-            user-select: none;
-        }
-
-        + li {
-            margin-top: $spacer / 3;
-        }
-
-        ul,
-        ol,
-        p {
-            margin-bottom: 0;
-            margin-top: $spacer / 3;
-        }
+    &:before {
+      position: absolute;
+      left: -($spacer / $line-height);
+      color: $brand-grey-light;
+      user-select: none;
     }
+
+    + li {
+      margin-top: $spacer / 3;
+    }
+
+    ul,
+    ol,
+    p {
+      margin-bottom: 0;
+      margin-top: $spacer / 3;
+    }
+  }
 }
 
 // Inline typography
@@ -121,23 +117,23 @@ ol {
 b,
 strong,
 .bold {
-    font-family: $font-family-button;
-    font-weight: 600;
+  font-family: $font-family-button;
+  font-weight: 600;
 }
 
 em,
 .italic {
-    font-style: italic;
+  font-style: italic;
 }
 
 abbr[title],
 dfn {
-    text-transform: none;
-    font-style: normal;
-    font-size: inherit;
-    border-bottom: 1px dashed $brand-grey-light;
-    cursor: help;
-    font-feature-settings: inherit;
+  text-transform: none;
+  font-style: normal;
+  font-size: inherit;
+  border-bottom: 1px dashed $brand-grey-light;
+  cursor: help;
+  font-feature-settings: inherit;
 }
 
 h1,
@@ -145,30 +141,30 @@ h2,
 h3,
 h4,
 h5 {
-    font-family: $font-family-title;
-    color: inherit;
-    line-height: 1.2;
-    font-weight: 600;
+  font-family: $font-family-title;
+  color: inherit;
+  line-height: 1.2;
+  font-weight: 600;
 }
 
 h1 {
-    font-size: $font-size-h1;
+  font-size: $font-size-h1;
 }
 
 h2 {
-    font-size: $font-size-h2;
+  font-size: $font-size-h2;
 }
 
 h3 {
-    font-size: $font-size-h3;
+  font-size: $font-size-h3;
 }
 
 h4 {
-    font-size: $font-size-h4;
+  font-size: $font-size-h4;
 }
 
 h5 {
-    font-size: $font-size-h5;
+  font-size: $font-size-h5;
 }
 
 // Responsive Media
@@ -182,102 +178,102 @@ audio,
 embed,
 canvas,
 picture {
-    max-width: 100%;
-    height: auto;
-    margin: 0 auto;
-    display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: block;
 }
 
 hr {
-    margin: $spacer 0;
-    border: 0;
-    border-bottom: .1rem solid $brand-grey-lighter;
+  margin: $spacer 0;
+  border: 0;
+  border-bottom: 0.1rem solid $brand-grey-lighter;
 }
 
 // Quotes
 /////////////////////////////////////
 
 q {
-    font-style: italic;
+  font-style: italic;
 }
 
 cite {
-    font-style: normal;
-    text-transform: uppercase;
+  font-style: normal;
+  text-transform: uppercase;
 }
 
 blockquote,
 blockquote > p {
-    font-style: italic;
-    color: lighten($brand-grey, 15%);
+  font-style: italic;
+  color: lighten($brand-grey, 15%);
 }
 
 blockquote {
-    margin: 0 0 $spacer;
-    padding-left: $spacer / 2;
-    border-left: .2rem solid $brand-grey-lighter;
+  margin: 0 0 $spacer;
+  padding-left: $spacer / 2;
+  border-left: 0.2rem solid $brand-grey-lighter;
 
-    @media screen and (min-width: $break-point--small) {
-        padding-left: $spacer / $line-height;
-    }
+  @media screen and (min-width: $break-point--small) {
+    padding-left: $spacer / $line-height;
+  }
 }
 
 // Tables
 /////////////////////////////////////
 
 table {
-    width: 100%;
-    margin-bottom: $spacer * $line-height;
-    border-collapse: collapse;
-    display: block;
+  width: 100%;
+  margin-bottom: $spacer * $line-height;
+  border-collapse: collapse;
+  display: block;
 
-    // make 'em scrollable
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
+  // make 'em scrollable
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
 
-    th,
-    td {
-        border: 0;
-        margin: 0;
-        padding: $spacer / 2;
-        border-bottom: 1px solid $brand-grey-lighter;
-        text-align: left;
-        font-size: 90%;
-        vertical-align: top;
+  th,
+  td {
+    border: 0;
+    margin: 0;
+    padding: $spacer / 2;
+    border-bottom: 1px solid $brand-grey-lighter;
+    text-align: left;
+    font-size: 90%;
+    vertical-align: top;
 
-        &[align='center'] {
-            text-align: center;
-        }
-
-        &[align='right'] {
-            text-align: right;
-        }
+    &[align='center'] {
+      text-align: center;
     }
 
-    th {
-        font-family: $font-family-button;
-        font-weight: 600;
+    &[align='right'] {
+      text-align: right;
     }
+  }
+
+  th {
+    font-family: $font-family-button;
+    font-weight: 600;
+  }
 }
 
 // Selection
 /////////////////////////////////////
 
 ::-moz-selection {
-    background: $brand-grey-light;
-    color: #fff;
+  background: $brand-grey-light;
+  color: #fff;
 }
 
 ::selection {
-    background: $brand-grey-light;
-    color: #fff;
+  background: $brand-grey-light;
+  color: #fff;
 }
 
 // Gatsby specific
 /////////////////////////////////////
 
 .anchor {
-    margin-top: .6rem;
+  margin-top: 0.6rem;
 }
 
 @import 'code';

src/templates/Doc.jsx

@@ -14,147 +14,141 @@ import Seo from '../components/Seo'
 import styles from './Doc.module.scss'
 
 const DocMain = ({ title, description, tableOfContents, post, single }) => (
-    <article className={single ? styles.mainSingle : styles.main}>
-        <DocHeader title={title} description={description} />
+  <article className={single ? styles.mainSingle : styles.main}>
+    <DocHeader title={title} description={description} />
 
-        {tableOfContents && <DocToc tableOfContents={tableOfContents} />}
+    {tableOfContents && <DocToc tableOfContents={tableOfContents} />}
 
-        <DocContent html={post.html} htmlAst={post.htmlAst} />
-        <DocFooter post={post} />
-    </article>
+    <DocContent html={post.html} htmlAst={post.htmlAst} />
+    <DocFooter post={post} />
+  </article>
 )
 
 DocMain.propTypes = {
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    tableOfContents: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    post: PropTypes.object.isRequired,
-    single: PropTypes.bool
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  tableOfContents: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  post: PropTypes.object.isRequired,
+  single: PropTypes.bool
 }
 
 export default class DocTemplate extends Component {
-    static propTypes = {
-        data: PropTypes.object.isRequired,
-        location: PropTypes.object.isRequired
+  static propTypes = {
+    data: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired
+  }
+
+  // output section title as defined in sections.yml
+  sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
+    // compare section against section title from sections.yml
+    if (
+      node.title
+        .toLowerCase()
+        .includes(this.props.data.markdownRemark.fields.section)
+    ) {
+      return node.title
     }
+  })
 
-    // output section title as defined in sections.yml
-    sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
-        // compare section against section title from sections.yml
-        if (
-            node.title
-                .toLowerCase()
-                .includes(this.props.data.markdownRemark.fields.section)
-        ) {
-            return node.title
-        }
-    })
+  render() {
+    const { location } = this.props
+    const post = this.props.data.markdownRemark
+    const { section, slug } = post.fields
+    const { title, description } = post.frontmatter
+    const { tableOfContents } = post
 
-    render() {
-        const { location } = this.props
-        const post = this.props.data.markdownRemark
-        const { section, slug } = post.fields
-        const { title, description } = post.frontmatter
-        const { tableOfContents } = post
+    const isApiSection = location.pathname.includes('/references/')
 
-        const isApiSection = location.pathname.includes('/references/')
+    return (
+      <>
+        <Helmet>
+          <body className={section} />
+        </Helmet>
 
-        return (
-            <>
-                <Helmet>
-                    <body className={section} />
-                </Helmet>
+        <Seo
+          title={title}
+          description={description}
+          slug={slug}
+          article
+          location={location}
+        />
 
-                <Seo
-                    title={title}
-                    description={description}
-                    slug={slug}
-                    article
+        <Layout location={location}>
+          <HeaderSection title={section ? this.sectionTitle : title} />
+
+          <Content>
+            {section ? (
+              <main className={styles.wrapper}>
+                <aside className={styles.sidebar}>
+                  <Sidebar
                     location={location}
+                    sidebar={section}
+                    collapsed={isApiSection}
+                    toc={
+                      isApiSection &&
+                      !location.pathname.includes('/references/introduction/')
+                    }
+                    tableOfContents={tableOfContents}
+                  />
+                </aside>
+                <DocMain
+                  title={title}
+                  description={description}
+                  tableOfContents={!isApiSection && tableOfContents}
+                  post={post}
                 />
-
-                <Layout location={location}>
-                    <HeaderSection
-                        title={section ? this.sectionTitle : title}
-                    />
-
-                    <Content>
-                        {section ? (
-                            <main className={styles.wrapper}>
-                                <aside className={styles.sidebar}>
-                                    <Sidebar
-                                        location={location}
-                                        sidebar={section}
-                                        collapsed={isApiSection}
-                                        toc={
-                                            isApiSection &&
-                                            !location.pathname.includes(
-                                                '/references/introduction/'
-                                            )
-                                        }
-                                        tableOfContents={tableOfContents}
-                                    />
-                                </aside>
-                                <DocMain
-                                    title={title}
-                                    description={description}
-                                    tableOfContents={
-                                        !isApiSection && tableOfContents
-                                    }
-                                    post={post}
-                                />
-                            </main>
-                        ) : (
-                            <DocMain
-                                title={title}
-                                description={description}
-                                tableOfContents={tableOfContents}
-                                post={post}
-                                single
-                            />
-                        )}
-                    </Content>
-                </Layout>
-            </>
-        )
-    }
+              </main>
+            ) : (
+              <DocMain
+                title={title}
+                description={description}
+                tableOfContents={tableOfContents}
+                post={post}
+                single
+              />
+            )}
+          </Content>
+        </Layout>
+      </>
+    )
+  }
 }
 
 export const pageQuery = graphql`
-    query DocBySlug($slug: String!) {
-        markdownRemark(fields: { slug: { eq: $slug } }) {
-            id
-            tableOfContents(maxDepth: 3)
-            html
-            htmlAst
-            frontmatter {
-                title
-                description
-            }
-            fields {
-                section
-                slug
-            }
-            ...PageFooter
-        }
-
-        allSectionsYaml {
-            edges {
-                node {
-                    title
-                    description
-                    link
-                }
-            }
-        }
+  query DocBySlug($slug: String!) {
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      id
+      tableOfContents(maxDepth: 3)
+      html
+      htmlAst
+      frontmatter {
+        title
+        description
+      }
+      fields {
+        section
+        slug
+      }
+      ...PageFooter
     }
 
-    fragment PageFooter on MarkdownRemark {
-        parent {
-            ... on File {
-                relativePath
-                sourceInstanceName
-            }
+    allSectionsYaml {
+      edges {
+        node {
+          title
+          description
+          link
         }
+      }
     }
+  }
+
+  fragment PageFooter on MarkdownRemark {
+    parent {
+      ... on File {
+        relativePath
+        sourceInstanceName
+      }
+    }
+  }
 `

src/templates/Doc.module.scss

@@ -1,75 +1,75 @@
 @import 'variables';
 
 .wrapper {
-    display: flex;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .sidebar {
-    margin-top: $spacer / 2;
-    margin-bottom: $spacer / 2;
-    top: $spacer;
-    order: 2;
+  margin-top: $spacer / 2;
+  margin-bottom: $spacer / 2;
+  top: $spacer;
+  order: 2;
 
-    @media (min-width: $break-point--medium) {
-        width: 27%;
-        margin-bottom: 0;
-        margin-top: 0;
-        order: 1;
+  @media (min-width: $break-point--medium) {
+    width: 27%;
+    margin-bottom: 0;
+    margin-top: 0;
+    order: 1;
 
-        + .main {
-            width: 73%;
-        }
+    + .main {
+      width: 73%;
     }
+  }
 }
 
 .main {
-    width: 100%;
-    background: $brand-white;
-    padding: 0 $spacer / 2;
-    border: 1px solid $brand-grey-lighter;
-    border-top: 0;
-    order: 1;
+  width: 100%;
+  background: $brand-white;
+  padding: 0 $spacer / 2;
+  border: 1px solid $brand-grey-lighter;
+  border-top: 0;
+  order: 1;
 
-    @media (min-width: $break-point--small) {
-        padding-left: $spacer;
-        padding-right: $spacer;
-    }
+  @media (min-width: $break-point--small) {
+    padding-left: $spacer;
+    padding-right: $spacer;
+  }
 
-    @media (min-width: $break-point--medium) {
-        padding-left: $spacer * 2;
-        padding-right: $spacer * 2;
-        order: 2;
-    }
+  @media (min-width: $break-point--medium) {
+    padding-left: $spacer * 2;
+    padding-right: $spacer * 2;
+    order: 2;
+  }
 }
 
 .mainSingle {
-    composes: main;
-    max-width: 73%;
-    margin: auto;
+  composes: main;
+  max-width: 73%;
+  margin: auto;
 }
 
 .version {
-    color: $brand-grey-light;
-    font-size: $font-size-base;
-    font-family: $font-family-monospace;
+  color: $brand-grey-light;
+  font-size: $font-size-base;
+  font-family: $font-family-monospace;
 
-    a {
-        font-size: $font-size-mini;
-        font-family: $font-family-base;
-        font-weight: $font-weight-base;
-        display: inline-block;
-        margin-left: .5rem;
-    }
+  a {
+    font-size: $font-size-mini;
+    font-family: $font-family-base;
+    font-weight: $font-weight-base;
+    display: inline-block;
+    margin-left: 0.5rem;
+  }
 }
 
 .pathName {
-    font-size: $font-size-h3;
-    border-bottom: 1px solid $brand-grey-lighter;
-    padding-bottom: $spacer / 2;
-    margin-top: $spacer * 2;
-    margin-bottom: $spacer / $line-height;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-all;
+  font-size: $font-size-h3;
+  border-bottom: 1px solid $brand-grey-lighter;
+  padding-bottom: $spacer / 2;
+  margin-top: $spacer * 2;
+  margin-bottom: $spacer / $line-height;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
 }

src/templates/Swagger/Paths.jsx

@@ -6,119 +6,117 @@ import styles from './Paths.module.scss'
 import stylesDoc from '../Doc.module.scss'
 
 const ParameterExample = ({ properties }) => (
-    //
-    // HEADS UP!
-    //
-    // Constructing the example request body here based on the defined properties
-    // where `key` is the name of the property, and `properties[key].example` is
-    // the value for it.
-    //
-    // Making prism.js pick up on the strings only output didn't work out so well
-    // so the spans and classes this plugin would add are added manually here. Since we
-    // include the prism css file globally this is picked up by that.
-    //
-    // But this can only work if all keys and values are manually constructed here, which
-    // is almost impossible to do for deep nested objects or arrays as example value. Running
-    // that code through `JSON.stringify` won't syntax highlight that part of the code.
-    //
-    <pre className="language-json">
-        <code className="language-json">
-            {'{'}
-            {properties &&
-                Object.keys(properties).map((key) => (
-                    <div key={key}>
-                        <span className="token property">{`  "${key}"`}</span>
-                        <span className="token operator">: </span>
-                        {properties[key].type === 'string' && (
-                            <span className="token string">{`"${properties[key].example}"`}</span>
-                        )}
-                        {(properties[key].type === 'integer' ||
-                            properties[key].type === 'number') && (
-                            <span className="token number">
-                                {`${properties[key].example}`}
-                            </span>
-                        )}
-                        {(properties[key].type === 'array' ||
-                            properties[key].type === 'object') &&
-                            JSON.stringify(properties[key].example, null, 2)}
-                        ,
-                    </div>
-                ))}
-            {'}'}
-        </code>
-    </pre>
+  //
+  // HEADS UP!
+  //
+  // Constructing the example request body here based on the defined properties
+  // where `key` is the name of the property, and `properties[key].example` is
+  // the value for it.
+  //
+  // Making prism.js pick up on the strings only output didn't work out so well
+  // so the spans and classes this plugin would add are added manually here. Since we
+  // include the prism css file globally this is picked up by that.
+  //
+  // But this can only work if all keys and values are manually constructed here, which
+  // is almost impossible to do for deep nested objects or arrays as example value. Running
+  // that code through `JSON.stringify` won't syntax highlight that part of the code.
+  //
+  <pre className="language-json">
+    <code className="language-json">
+      {'{'}
+      {properties &&
+        Object.keys(properties).map((key) => (
+          <div key={key}>
+            <span className="token property">{`  "${key}"`}</span>
+            <span className="token operator">: </span>
+            {properties[key].type === 'string' && (
+              <span className="token string">{`"${properties[key].example}"`}</span>
+            )}
+            {(properties[key].type === 'integer' ||
+              properties[key].type === 'number') && (
+              <span className="token number">
+                {`${properties[key].example}`}
+              </span>
+            )}
+            {(properties[key].type === 'array' ||
+              properties[key].type === 'object') &&
+              JSON.stringify(properties[key].example, null, 2)}
+            ,
+          </div>
+        ))}
+      {'}'}
+    </code>
+  </pre>
 )
 
 ParameterExample.propTypes = {
-    properties: PropTypes.object
+  properties: PropTypes.object
 }
 
 const Parameters = ({ parameters }) => (
-    <>
-        <h4 className={styles.subHeading}>Parameters</h4>
+  <>
+    <h4 className={styles.subHeading}>Parameters</h4>
 
-        {parameters.map((parameter) => {
-            const { name, type, required, description, schema } = parameter
+    {parameters.map((parameter) => {
+      const { name, type, required, description, schema } = parameter
 
-            return (
-                <div className={styles.parameters} key={parameter.name}>
-                    <h5>
-                        <code>{name}</code>
-                        {required && (
-                            <span
-                                className={styles.parameterRequired}
-                                title="required parameter"
-                            >
-                                *
-                            </span>
-                        )}
-                        <span className={styles.parameterType}>{type}</span>
-                    </h5>
+      return (
+        <div className={styles.parameters} key={parameter.name}>
+          <h5>
+            <code>{name}</code>
+            {required && (
+              <span
+                className={styles.parameterRequired}
+                title="required parameter"
+              >
+                *
+              </span>
+            )}
+            <span className={styles.parameterType}>{type}</span>
+          </h5>
 
-                    <p>{description}</p>
+          <p>{description}</p>
 
-                    {schema && (
-                        <ParameterExample properties={schema.properties} />
-                    )}
-                </div>
-            )
-        })}
-    </>
+          {schema && <ParameterExample properties={schema.properties} />}
+        </div>
+      )
+    })}
+  </>
 )
 
 Parameters.propTypes = {
-    parameters: PropTypes.array.isRequired
+  parameters: PropTypes.array.isRequired
 }
 
 const Responses = ({ responses }) => (
-    <>
-        <h4 className={styles.subHeading}>Responses</h4>
-        {Object.keys(responses).map((key) => (
-            <div key={key} className={styles.response}>
-                <code>{key}</code> {responses[key].description}
-            </div>
-        ))}
-    </>
+  <>
+    <h4 className={styles.subHeading}>Responses</h4>
+    {Object.keys(responses).map((key) => (
+      <div key={key} className={styles.response}>
+        <code>{key}</code> {responses[key].description}
+      </div>
+    ))}
+  </>
 )
 
 Responses.propTypes = {
-    responses: PropTypes.object.isRequired
+  responses: PropTypes.object.isRequired
 }
 
 const Method = ({ keyName, value }) => {
-    const { summary, description, parameters, responses } = value
+  const { summary, description, parameters, responses } = value
 
-    return (
-        <div className={styles.method}>
-            <h3 className={styles.pathMethod} data-type={keyName}>
-                {keyName}
-            </h3>
+  return (
+    <div className={styles.method}>
+      <h3 className={styles.pathMethod} data-type={keyName}>
+        {keyName}
+      </h3>
 
-            <p>{summary}</p>
+      <p>{summary}</p>
 
-            {description && <p>{description}</p>}
+      {description && <p>{description}</p>}
 
-            {/*
+      {/*
             {consumes &&
                 consumes.map((item, i) => (
                     <div key={i}>
@@ -127,32 +125,32 @@ const Method = ({ keyName, value }) => {
                 ))}
             */}
 
-            {parameters && parameters.length && (
-                <Parameters parameters={parameters} />
-            )}
-            {responses && Object.keys(responses).length !== 0 && (
-                <Responses responses={responses} />
-            )}
-        </div>
-    )
+      {parameters && parameters.length && (
+        <Parameters parameters={parameters} />
+      )}
+      {responses && Object.keys(responses).length !== 0 && (
+        <Responses responses={responses} />
+      )}
+    </div>
+  )
 }
 
 Method.propTypes = {
-    keyName: PropTypes.string,
-    value: PropTypes.object
+  keyName: PropTypes.string,
+  value: PropTypes.object
 }
 
 const Paths = ({ paths }) =>
-    Object.entries(paths).map(([key, value]) => (
-        <div key={key} id={slugify(cleanPathKey(key))}>
-            <h2 className={stylesDoc.pathName}>
-                <code>{cleanPathKey(key)}</code>
-            </h2>
+  Object.entries(paths).map(([key, value]) => (
+    <div key={key} id={slugify(cleanPathKey(key))}>
+      <h2 className={stylesDoc.pathName}>
+        <code>{cleanPathKey(key)}</code>
+      </h2>
 
-            {Object.entries(value).map(([key, value]) => (
-                <Method key={key} keyName={key} value={value} />
-            ))}
-        </div>
-    ))
+      {Object.entries(value).map(([key, value]) => (
+        <Method key={key} keyName={key} value={value} />
+      ))}
+    </div>
+  ))
 
 export default Paths

src/templates/Swagger/Paths.module.scss

@@ -1,74 +1,74 @@
 @import 'variables';
 
 .pathMethod {
-    font-size: $font-size-base;
-    font-family: $font-family-monospace;
-    margin-bottom: $spacer / 4;
-    margin-top: 0;
-    display: inline-block;
-    padding: $spacer / 8 $spacer / 3;
-    border-radius: $border-radius;
-    text-transform: uppercase;
+  font-size: $font-size-base;
+  font-family: $font-family-monospace;
+  margin-bottom: $spacer / 4;
+  margin-top: 0;
+  display: inline-block;
+  padding: $spacer / 8 $spacer / 3;
+  border-radius: $border-radius;
+  text-transform: uppercase;
 
-    &[data-type='get'] {
-        background: rgba($green, .4);
-    }
+  &[data-type='get'] {
+    background: rgba($green, 0.4);
+  }
 
-    &[data-type='post'] {
-        background: rgba($brand-blue, .4);
-    }
+  &[data-type='post'] {
+    background: rgba($brand-blue, 0.4);
+  }
 
-    &[data-type='put'] {
-        background: rgba($brand-violet, .3);
-    }
+  &[data-type='put'] {
+    background: rgba($brand-violet, 0.3);
+  }
 
-    &[data-type='delete'] {
-        background: rgba($red, .4);
-    }
+  &[data-type='delete'] {
+    background: rgba($red, 0.4);
+  }
 }
 
 .method {
-    padding: $spacer / 2;
-    border: 1px solid $brand-grey-lighter;
-    margin-bottom: $spacer;
-    border-radius: $border-radius;
+  padding: $spacer / 2;
+  border: 1px solid $brand-grey-lighter;
+  margin-bottom: $spacer;
+  border-radius: $border-radius;
 }
 
 .subHeading {
-    font-size: $font-size-h5;
+  font-size: $font-size-h5;
 }
 
 .parameters {
-    h5 {
-        font-size: $font-size-small;
-        margin-bottom: $spacer / 4;
-    }
+  h5 {
+    font-size: $font-size-small;
+    margin-bottom: $spacer / 4;
+  }
 
-    pre {
-        max-height: 80vh;
+  pre {
+    max-height: 80vh;
 
-        code {
-            padding: $spacer / $line-height;
-        }
+    code {
+      padding: $spacer / $line-height;
     }
+  }
 }
 
 .parameterRequired {
-    font-size: $font-size-small;
-    vertical-align: top;
-    color: $brand-purple;
+  font-size: $font-size-small;
+  vertical-align: top;
+  color: $brand-purple;
 }
 
 .parameterType {
-    font-weight: $font-weight-base;
-    margin-left: $spacer / 4;
-    color: $brand-grey-light;
+  font-weight: $font-weight-base;
+  margin-left: $spacer / 4;
+  color: $brand-grey-light;
 }
 
 .response {
-    margin-bottom: $spacer / 4;
+  margin-bottom: $spacer / 4;
 
-    code {
-        margin-right: $spacer / 4;
-    }
+  code {
+    margin-right: $spacer / 4;
+  }
 }

src/templates/Swagger/Toc.jsx

@@ -7,37 +7,37 @@ import { cleanPathKey } from './utils'
 import stylesSidebar from '../../components/Sidebar.module.scss'
 
 const Toc = ({ data }) => {
-    const Ids = []
+  const Ids = []
 
-    const items = Object.keys(data.paths).map((key) => {
-        Ids.push(slugify(cleanPathKey(key)))
-
-        return (
-            <li key={key}>
-                <Scroll
-                    type="id"
-                    element={`${slugify(cleanPathKey(key))}`}
-                    offset={-20}
-                >
-                    <code>{cleanPathKey(key)}</code>
-                </Scroll>
-            </li>
-        )
-    })
+  const items = Object.keys(data.paths).map((key) => {
+    Ids.push(slugify(cleanPathKey(key)))
 
     return (
-        <Scrollspy
-            items={Ids}
-            currentClassName={stylesSidebar.scrollspyActive}
-            offset={-100}
+      <li key={key}>
+        <Scroll
+          type="id"
+          element={`${slugify(cleanPathKey(key))}`}
+          offset={-20}
         >
-            {items}
-        </Scrollspy>
+          <code>{cleanPathKey(key)}</code>
+        </Scroll>
+      </li>
     )
+  })
+
+  return (
+    <Scrollspy
+      items={Ids}
+      currentClassName={stylesSidebar.scrollspyActive}
+      offset={-100}
+    >
+      {items}
+    </Scrollspy>
+  )
 }
 
 Toc.propTypes = {
-    data: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
 }
 
 export default Toc

src/templates/Swagger/index.jsx

@@ -18,136 +18,133 @@ import stylesDoc from '../Doc.module.scss'
 import styles from './index.module.scss'
 
 const SwaggerMeta = ({ contact, license }) => (
-    <ul className={styles.swaggerMeta}>
-        {contact && (
-            <li>
-                <a href={`mailto:${contact.email}`}>{contact.email}</a>
-            </li>
-        )}
-        {license && (
-            <li>
-                <a href={license.url}>{license.name}</a>
-            </li>
-        )}
-    </ul>
+  <ul className={styles.swaggerMeta}>
+    {contact && (
+      <li>
+        <a href={`mailto:${contact.email}`}>{contact.email}</a>
+      </li>
+    )}
+    {license && (
+      <li>
+        <a href={license.url}>{license.name}</a>
+      </li>
+    )}
+  </ul>
 )
 
 SwaggerMeta.propTypes = {
-    contact: PropTypes.object,
-    license: PropTypes.object
+  contact: PropTypes.object,
+  license: PropTypes.object
 }
 
 const BasePath = ({ host, basePath }) => (
-    <div className={styles.basePath}>
-        <h2>Base Path</h2>
-        <code>
-            <span>{host}</span>
-            {basePath}
-        </code>
-    </div>
+  <div className={styles.basePath}>
+    <h2>Base Path</h2>
+    <code>
+      <span>{host}</span>
+      {basePath}
+    </code>
+  </div>
 )
 
 BasePath.propTypes = {
-    host: PropTypes.string,
-    basePath: PropTypes.string
+  host: PropTypes.string,
+  basePath: PropTypes.string
 }
 
 export default class ApiSwaggerTemplate extends Component {
-    static propTypes = {
-        data: PropTypes.object.isRequired,
-        location: PropTypes.object.isRequired,
-        pageContext: PropTypes.object.isRequired
+  static propTypes = {
+    data: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired,
+    pageContext: PropTypes.object.isRequired
+  }
+
+  // output section title as defined in sections.yml
+  sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
+    // compare section against section title from sections.yml
+    if (node.title.toLowerCase().includes('references')) {
+      return node.title
     }
+  })
 
-    // output section title as defined in sections.yml
-    sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
-        // compare section against section title from sections.yml
-        if (node.title.toLowerCase().includes('references')) {
-            return node.title
-        }
-    })
+  render() {
+    const { location, pageContext } = this.props
+    const { api } = pageContext
+    const { host, basePath, info, paths } = api
+    const { title, description, version, license, contact } = info
 
-    render() {
-        const { location, pageContext } = this.props
-        const { api } = pageContext
-        const { host, basePath, info, paths } = api
-        const { title, description, version, license, contact } = info
+    return (
+      <>
+        <Helmet>
+          <body className="references" />
+        </Helmet>
 
-        return (
-            <>
-                <Helmet>
-                    <body className="references" />
-                </Helmet>
+        <Seo
+          title={title}
+          description={description}
+          slug={pageContext.slug}
+          article
+          location={location}
+        />
 
-                <Seo
-                    title={title}
-                    description={description}
-                    slug={pageContext.slug}
-                    article
-                    location={location}
+        <Layout location={location}>
+          <HeaderSection title={this.sectionTitle} />
+
+          <Content>
+            <main className={stylesDoc.wrapper}>
+              <aside className={stylesDoc.sidebar}>
+                <Sidebar
+                  location={location}
+                  sidebar="references"
+                  collapsed
+                  toc
+                  tocComponent={<Toc data={api} />}
+                />
+              </aside>
+              <article className={stylesDoc.main}>
+                <DocHeader
+                  title={title}
+                  description={description}
+                  prepend={
+                    <span className={stylesDoc.version}>
+                      <span>v{version}</span>
+                    </span>
+                  }
                 />
 
-                <Layout location={location}>
-                    <HeaderSection title={this.sectionTitle} />
+                {(contact || license) && (
+                  <SwaggerMeta contact={contact} license={license} />
+                )}
 
-                    <Content>
-                        <main className={stylesDoc.wrapper}>
-                            <aside className={stylesDoc.sidebar}>
-                                <Sidebar
-                                    location={location}
-                                    sidebar="references"
-                                    collapsed
-                                    toc
-                                    tocComponent={<Toc data={api} />}
-                                />
-                            </aside>
-                            <article className={stylesDoc.main}>
-                                <DocHeader
-                                    title={title}
-                                    description={description}
-                                    prepend={
-                                        <span className={stylesDoc.version}>
-                                            <span>v{version}</span>
-                                        </span>
-                                    }
-                                />
+                {(host || basePath) && (
+                  <BasePath host={host} basePath={basePath} />
+                )}
 
-                                {(contact || license) && (
-                                    <SwaggerMeta
-                                        contact={contact}
-                                        license={license}
-                                    />
-                                )}
+                <Paths paths={paths} />
 
-                                {(host || basePath) && (
-                                    <BasePath host={host} basePath={basePath} />
-                                )}
-
-                                <Paths paths={paths} />
-
-                                <DocFooter
-                                    url={`https://github.com/oceanprotocol/${title.toLowerCase()}`}
-                                    externalName={`${title} Swagger spec`}
-                                />
-                            </article>
-                        </main>
-                    </Content>
-                </Layout>
-            </>
-        )
-    }
+                <DocFooter
+                  url={`https://github.com/oceanprotocol/${title.toLowerCase()}`}
+                  externalName={`${title} Swagger spec`}
+                />
+              </article>
+            </main>
+          </Content>
+        </Layout>
+      </>
+    )
+  }
 }
 
 export const apiSwaggerQuery = graphql`
-    query {
-        allSectionsYaml {
-            edges {
-                node {
-                    title
-                    description
-                    link
-                }
-            }
+  query {
+    allSectionsYaml {
+      edges {
+        node {
+          title
+          description
+          link
         }
+      }
     }
+  }
 `

src/templates/Swagger/index.module.scss

@@ -1,42 +1,42 @@
 @import 'variables';
 
 .swaggerMeta {
-    margin-top: -($spacer);
-    padding: 0;
-    font-size: $font-size-small;
+  margin-top: -($spacer);
+  padding: 0;
+  font-size: $font-size-small;
 
-    li {
-        display: inline-block;
-        margin-left: $spacer;
+  li {
+    display: inline-block;
+    margin-left: $spacer;
 
-        &:first-child {
-            margin-left: 0;
-        }
-
-        &:before {
-            display: none;
-        }
+    &:first-child {
+      margin-left: 0;
     }
+
+    &:before {
+      display: none;
+    }
+  }
 }
 
 .basePath {
-    margin-top: $spacer;
+  margin-top: $spacer;
 
-    h2 {
-        font-size: $font-size-h3;
-        border-bottom: 1px solid $brand-grey-lighter;
-        padding-bottom: $spacer / 2;
-        margin-top: $spacer * 2;
-        margin-bottom: $spacer;
-    }
+  h2 {
+    font-size: $font-size-h3;
+    border-bottom: 1px solid $brand-grey-lighter;
+    padding-bottom: $spacer / 2;
+    margin-top: $spacer * 2;
+    margin-bottom: $spacer;
+  }
 
-    span {
-        color: $brand-grey-light;
-    }
+  span {
+    color: $brand-grey-light;
+  }
 
-    code {
-        // stylelint-disable-next-line
-        font-size: $font-size-large !important;
-        font-weight: $font-weight-bold;
-    }
+  code {
+    // stylelint-disable-next-line
+    font-size: $font-size-large !important;
+    font-weight: $font-weight-bold;
+  }
 }

src/templates/Swagger/utils.js

@@ -1,13 +1,13 @@
 export const cleanPathKey = (key) => {
-    let keyCleaned = key
+  let keyCleaned = key
 
-    if (key.includes('aquarius')) {
-        keyCleaned = key.replace(/\/api\/v1\/aquarius/gi, '')
-    }
+  if (key.includes('aquarius')) {
+    keyCleaned = key.replace(/\/api\/v1\/aquarius/gi, '')
+  }
 
-    if (key.includes('brizo')) {
-        keyCleaned = key.replace(/\/api\/v1\/brizo/gi, '')
-    }
+  if (key.includes('brizo')) {
+    keyCleaned = key.replace(/\/api\/v1\/brizo/gi, '')
+  }
 
-    return keyCleaned
+  return keyCleaned
 }

src/templates/Typedoc/Entities.jsx

@@ -7,255 +7,228 @@ import styles from './Entities.module.scss'
 import { filterByKindOfProperty } from './utils'
 
 const Type = ({ type }) => {
-    let isArray = false
-    if (type.type === 'array') {
-        isArray = true
-        type = type.elementType
-    }
-    const { name, type: typeOfType, typeArguments, id } = type
-    const isInternal = typeOfType === 'reference' && id
+  let isArray = false
+  if (type.type === 'array') {
+    isArray = true
+    type = type.elementType
+  }
+  const { name, type: typeOfType, typeArguments, id } = type
+  const isInternal = typeOfType === 'reference' && id
 
-    return (
-        <div className={styles.type}>
-            <span>
-                {isInternal && (
-                    <Scroll
-                        type="id"
-                        element={`${name && slugify(name)}`}
-                        offset={-20}
-                    >
-                        {type.name}
-                    </Scroll>
-                )}
-                {!isInternal && <span>{type.name}</span>}
-            </span>
+  return (
+    <div className={styles.type}>
+      <span>
+        {isInternal && (
+          <Scroll type="id" element={`${name && slugify(name)}`} offset={-20}>
+            {type.name}
+          </Scroll>
+        )}
+        {!isInternal && <span>{type.name}</span>}
+      </span>
 
-            {typeArguments && (
-                <span>
-                    <span className={styles.typeSymbol}>&lt;</span>
-                    <span>
-                        {typeArguments.map((typeArgument, i) => (
-                            <span key={shortid.generate()}>
-                                {i !== 0 && (
-                                    <span className={styles.typeSymbol}>
-                                        ,{' '}
-                                    </span>
-                                )}
-                                <Type type={typeArgument} />
-                            </span>
-                        ))}
-                    </span>
-                    <span className={styles.typeSymbol}>&gt;</span>
-                </span>
-            )}
+      {typeArguments && (
+        <span>
+          <span className={styles.typeSymbol}>&lt;</span>
+          <span>
+            {typeArguments.map((typeArgument, i) => (
+              <span key={shortid.generate()}>
+                {i !== 0 && <span className={styles.typeSymbol}>, </span>}
+                <Type type={typeArgument} />
+              </span>
+            ))}
+          </span>
+          <span className={styles.typeSymbol}>&gt;</span>
+        </span>
+      )}
 
-            {isArray && <span className={styles.typeSymbol}>[]</span>}
-        </div>
-    )
+      {isArray && <span className={styles.typeSymbol}>[]</span>}
+    </div>
+  )
 }
 
 Type.propTypes = {
-    type: PropTypes.object.isRequired
+  type: PropTypes.object.isRequired
 }
 
 const PropertyDetails = ({ property }) => {
-    const { type } = property
-    return (
-        <div>
-            <Type type={type} />
-        </div>
-    )
+  const { type } = property
+  return (
+    <div>
+      <Type type={type} />
+    </div>
+  )
 }
 
 PropertyDetails.propTypes = {
-    property: PropTypes.object
+  property: PropTypes.object
 }
 
 const MethodDetails = ({ property }) => {
-    const signature = property.signatures[0]
-    const { parameters, type } = signature
-    return (
-        <>
-            {parameters && parameters.length && (
-                <div>
-                    <h4 className={styles.subHeading}>Parameters</h4>
+  const signature = property.signatures[0]
+  const { parameters, type } = signature
+  return (
+    <>
+      {parameters && parameters.length && (
+        <div>
+          <h4 className={styles.subHeading}>Parameters</h4>
 
-                    {parameters.map((parameter) => {
-                        const { name, type, flags, comment } = parameter
-                        const { isOptional } = flags
-                        const description =
-                            comment && (comment.text || comment.shortText)
+          {parameters.map((parameter) => {
+            const { name, type, flags, comment } = parameter
+            const { isOptional } = flags
+            const description = comment && (comment.text || comment.shortText)
 
-                        return (
-                            <div
-                                className={styles.parameters}
-                                key={shortid.generate()}
-                            >
-                                <h5>
-                                    <code>{name}</code>
-                                    {isOptional && (
-                                        <span
-                                            className={styles.parameterOptional}
-                                            title="optional parameter"
-                                        >
-                                            ?
-                                        </span>
-                                    )}
-                                </h5>
-                                <Type type={type} />
+            return (
+              <div className={styles.parameters} key={shortid.generate()}>
+                <h5>
+                  <code>{name}</code>
+                  {isOptional && (
+                    <span
+                      className={styles.parameterOptional}
+                      title="optional parameter"
+                    >
+                      ?
+                    </span>
+                  )}
+                </h5>
+                <Type type={type} />
 
-                                <p>{description}</p>
-                            </div>
-                        )
-                    })}
-                </div>
-            )}
+                <p>{description}</p>
+              </div>
+            )
+          })}
+        </div>
+      )}
 
-            {type && (
-                <div>
-                    <h4 className={styles.subHeading}>Returns</h4>
+      {type && (
+        <div>
+          <h4 className={styles.subHeading}>Returns</h4>
 
-                    <Type type={type} />
-                </div>
-            )}
-        </>
-    )
+          <Type type={type} />
+        </div>
+      )}
+    </>
+  )
 }
 
 MethodDetails.propTypes = {
-    property: PropTypes.object
+  property: PropTypes.object
 }
 
 const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
-    const {
-        name,
-        kindString,
-        flags,
-        signatures,
-        sources,
-        decorators
-    } = property
-    const { isPublic, isStatic } = flags
-    const signature = signatures && signatures[0]
-    const comment = (signature && signature.comment) || property.comment
-    const { fileName, line } = sources[0]
-    const deprecation = (decorators || []).filter(
-        ({ name }) => name === 'deprecated'
-    )[0] // Assuming deprecated annotation
-    let deprecatedUse, deprecatedSlug
-    if (deprecation) {
-        deprecatedUse = deprecation.arguments.alternative.replace(/('|")/g, '')
-        deprecatedSlug =
-            deprecatedUse && slugify(deprecatedUse.replace('.', '-'))
-    }
+  const { name, kindString, flags, signatures, sources, decorators } = property
+  const { isPublic, isStatic } = flags
+  const signature = signatures && signatures[0]
+  const comment = (signature && signature.comment) || property.comment
+  const { fileName, line } = sources[0]
+  const deprecation = (decorators || []).filter(
+    ({ name }) => name === 'deprecated'
+  )[0] // Assuming deprecated annotation
+  let deprecatedUse, deprecatedSlug
+  if (deprecation) {
+    deprecatedUse = deprecation.arguments.alternative.replace(/('|")/g, '')
+    deprecatedSlug = deprecatedUse && slugify(deprecatedUse.replace('.', '-'))
+  }
 
-    const sourceLink = `${sourceUrl}${fileName}#L${line}`
+  const sourceLink = `${sourceUrl}${fileName}#L${line}`
 
-    return (
-        <div
-            className={styles.property}
-            data-private={!isPublic}
-            data-deprecated={!!deprecation}
-            id={`${parentAnchor}-${name && slugify(name)}`}
-        >
-            <h3 className={styles.propertyName}>{name}</h3>
+  return (
+    <div
+      className={styles.property}
+      data-private={!isPublic}
+      data-deprecated={!!deprecation}
+      id={`${parentAnchor}-${name && slugify(name)}`}
+    >
+      <h3 className={styles.propertyName}>{name}</h3>
 
-            <div
-                className={styles.propertyType}
-                data-type={kindString.toLowerCase()}
-            >
-                {kindString}
-            </div>
+      <div className={styles.propertyType} data-type={kindString.toLowerCase()}>
+        {kindString}
+      </div>
 
-            {isStatic && <div className={styles.propertyModifier}>static</div>}
-            {!isPublic && (
-                <div className={styles.propertyModifier} data-secondary>
-                    private
-                </div>
-            )}
-
-            {comment && !deprecation && (
-                <div className={styles.propertyDescription}>
-                    {comment.text || comment.shortText}
-                </div>
-            )}
-
-            {deprecation && (
-                <div className={styles.deprecation}>
-                    <strong>Deprecated</strong>: use{' '}
-                    <code>
-                        <Scroll
-                            type="id"
-                            element={`${deprecatedSlug}`}
-                            offset={-20}
-                        >
-                            {deprecatedUse}
-                        </Scroll>
-                    </code>{' '}
-                    instead
-                </div>
-            )}
-
-            {!deprecation &&
-                (() => {
-                    switch (kindString) {
-                        case 'Method':
-                            return <MethodDetails property={property} />
-                        case 'Property':
-                            return <PropertyDetails property={property} />
-                    }
-                })()}
-
-            {fileName && (
-                <a
-                    className={styles.sourceLink}
-                    href={sourceLink}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    {`${fileName}#L${line}`}
-                </a>
-            )}
+      {isStatic && <div className={styles.propertyModifier}>static</div>}
+      {!isPublic && (
+        <div className={styles.propertyModifier} data-secondary>
+          private
         </div>
-    )
+      )}
+
+      {comment && !deprecation && (
+        <div className={styles.propertyDescription}>
+          {comment.text || comment.shortText}
+        </div>
+      )}
+
+      {deprecation && (
+        <div className={styles.deprecation}>
+          <strong>Deprecated</strong>: use{' '}
+          <code>
+            <Scroll type="id" element={`${deprecatedSlug}`} offset={-20}>
+              {deprecatedUse}
+            </Scroll>
+          </code>{' '}
+          instead
+        </div>
+      )}
+
+      {!deprecation &&
+        (() => {
+          switch (kindString) {
+            case 'Method':
+              return <MethodDetails property={property} />
+            case 'Property':
+              return <PropertyDetails property={property} />
+          }
+        })()}
+
+      {fileName && (
+        <a
+          className={styles.sourceLink}
+          href={sourceLink}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {`${fileName}#L${line}`}
+        </a>
+      )}
+    </div>
+  )
 }
 
 PropertyWrapper.propTypes = {
-    property: PropTypes.object,
-    sourceUrl: PropTypes.string,
-    parentAnchor: PropTypes.string
+  property: PropTypes.object,
+  sourceUrl: PropTypes.string,
+  parentAnchor: PropTypes.string
 }
 
 const Entities = ({ entities, sourceUrl }) =>
-    entities.map(({ name, comment, children }) => (
-        <div key={shortid.generate()} id={name && slugify(name)}>
-            <h2 className={styles.entityName}>
-                <code>{name}</code>
-            </h2>
+  entities.map(({ name, comment, children }) => (
+    <div key={shortid.generate()} id={name && slugify(name)}>
+      <h2 className={styles.entityName}>
+        <code>{name}</code>
+      </h2>
 
-            {comment && (
-                <div className={styles.entityDescription}>
-                    {comment.text || comment.shortText}
-                </div>
-            )}
-
-            {children &&
-                children
-                    .filter(filterByKindOfProperty)
-                    .map((property) => (
-                        <PropertyWrapper
-                            key={shortid.generate()}
-                            property={property}
-                            sourceUrl={sourceUrl}
-                            parentAnchor={name && slugify(name)}
-                        />
-                    ))}
+      {comment && (
+        <div className={styles.entityDescription}>
+          {comment.text || comment.shortText}
         </div>
-    ))
+      )}
+
+      {children &&
+        children
+          .filter(filterByKindOfProperty)
+          .map((property) => (
+            <PropertyWrapper
+              key={shortid.generate()}
+              property={property}
+              sourceUrl={sourceUrl}
+              parentAnchor={name && slugify(name)}
+            />
+          ))}
+    </div>
+  ))
 
 Entities.propTypes = {
-    entities: PropTypes.array.isRequired,
-    sourceUrl: PropTypes.string
+  entities: PropTypes.array.isRequired,
+  sourceUrl: PropTypes.string
 }
 
 export default Entities

src/templates/Typedoc/Entities.module.scss

@@ -1,165 +1,165 @@
 @import 'variables';
 
 .entityName {
-    // stylelint-disable value-keyword-case
-    composes: pathname from '../Doc.module.scss';
-    // stylelint-enable value-keyword-case
-    font-size: $font-size-h2;
+  // stylelint-disable value-keyword-case
+  composes: pathname from '../Doc.module.scss';
+  // stylelint-enable value-keyword-case
+  font-size: $font-size-h2;
 }
 
 .entityDescription {
-    padding-bottom: $spacer;
-    white-space: pre-line;
+  padding-bottom: $spacer;
+  white-space: pre-line;
 }
 
 .property {
-    padding: $spacer / 2;
-    border: 1px solid $brand-grey-lighter;
-    margin-bottom: $spacer;
-    border-radius: $border-radius;
-    position: relative;
+  padding: $spacer / 2;
+  border: 1px solid $brand-grey-lighter;
+  margin-bottom: $spacer;
+  border-radius: $border-radius;
+  position: relative;
 
-    &[data-deprecated='true'] {
-        > *:not(.deprecation) {
-            opacity: .5;
-        }
-
-        code {
-            opacity: 1;
-            background: none;
-            padding: 0;
-        }
-
-        .sourceLink {
-            display: none;
-        }
+  &[data-deprecated='true'] {
+    > *:not(.deprecation) {
+      opacity: 0.5;
     }
+
+    code {
+      opacity: 1;
+      background: none;
+      padding: 0;
+    }
+
+    .sourceLink {
+      display: none;
+    }
+  }
 }
 
 .propertyName,
 .propertyType,
 .propertyModifier {
-    font-size: $font-size-base;
-    font-family: $font-family-monospace;
-    margin-bottom: $spacer / 4;
-    margin-top: 0;
-    display: inline-block;
-    padding: 0 $spacer / 4;
-    border-radius: $border-radius;
-    vertical-align: middle;
+  font-size: $font-size-base;
+  font-family: $font-family-monospace;
+  margin-bottom: $spacer / 4;
+  margin-top: 0;
+  display: inline-block;
+  padding: 0 $spacer / 4;
+  border-radius: $border-radius;
+  vertical-align: middle;
 }
 
 .propertyName {
-    font-size: $font-size-large;
-    padding: 0;
-    margin-right: $spacer / 3;
+  font-size: $font-size-large;
+  padding: 0;
+  margin-right: $spacer / 3;
 }
 
 .propertyType,
 .propertyModifier {
-    font-size: $font-size-small;
-    color: $brand-grey;
-    margin-right: $spacer / 4;
+  font-size: $font-size-small;
+  color: $brand-grey;
+  margin-right: $spacer / 4;
 }
 
 .propertyType {
-    &[data-type='method'] {
-        background: rgba($green, .3);
-    }
+  &[data-type='method'] {
+    background: rgba($green, 0.3);
+  }
 
-    &[data-type='property'] {
-        background: rgba($yellow, .3);
-    }
+  &[data-type='property'] {
+    background: rgba($yellow, 0.3);
+  }
 }
 
 .propertyModifier {
-    background: rgba($red, .2);
+  background: rgba($red, 0.2);
 
-    &[data-secondary] {
-        background: rgba($brand-blue, .2);
-    }
+  &[data-secondary] {
+    background: rgba($brand-blue, 0.2);
+  }
 }
 
 .propertyDescription {
-    margin-bottom: $spacer;
+  margin-bottom: $spacer;
 }
 
 .sourceLink {
-    display: block;
-    font-size: $font-size-mini;
-    color: $brand-grey-light;
-    margin-top: $spacer / 2;
+  display: block;
+  font-size: $font-size-mini;
+  color: $brand-grey-light;
+  margin-top: $spacer / 2;
 
-    &:hover,
-    &:focus {
-        transform: none;
-    }
+  &:hover,
+  &:focus {
+    transform: none;
+  }
 
-    @media (min-width: $break-point--large) {
-        margin-top: 0;
-        position: absolute;
-        bottom: $spacer / 2;
-        right: $spacer / 2;
-    }
+  @media (min-width: $break-point--large) {
+    margin-top: 0;
+    position: absolute;
+    bottom: $spacer / 2;
+    right: $spacer / 2;
+  }
 }
 
 .deprecation {
-    font-size: $font-size-small;
-    margin-top: $spacer / 4;
+  font-size: $font-size-small;
+  margin-top: $spacer / 4;
 
-    strong {
-        color: $brand-grey-light;
-    }
+  strong {
+    color: $brand-grey-light;
+  }
 }
 
 .type {
-    display: inline-block;
-    color: $brand-grey;
-    font-family: $font-family-monospace;
-    font-size: $font-size-small;
+  display: inline-block;
+  color: $brand-grey;
+  font-family: $font-family-monospace;
+  font-size: $font-size-small;
 
-    a {
-        &:hover {
-            opacity: .6;
-        }
+  a {
+    &:hover {
+      opacity: 0.6;
     }
+  }
 }
 
 .typeSymbol {
-    opacity: .6;
+  opacity: 0.6;
 }
 
 .subHeading {
-    font-size: $font-size-base;
-    border-bottom: 1px solid $brand-grey-lighter;
-    padding-bottom: $spacer / 4;
-    margin-bottom: $spacer / 4;
-    color: $brand-grey;
+  font-size: $font-size-base;
+  border-bottom: 1px solid $brand-grey-lighter;
+  padding-bottom: $spacer / 4;
+  margin-bottom: $spacer / 4;
+  color: $brand-grey;
 }
 
 .parameters {
-    margin-top: $spacer / 1.5;
+  margin-top: $spacer / 1.5;
 
-    h5,
-    p {
-        margin: 0;
-    }
+  h5,
+  p {
+    margin: 0;
+  }
 
-    h5 {
-        font-size: $font-size-small;
-        margin-bottom: $spacer / 4;
-        margin-right: $spacer / 4;
-        margin-left: -(.2rem);
-        display: inline-block;
-    }
+  h5 {
+    font-size: $font-size-small;
+    margin-bottom: $spacer / 4;
+    margin-right: $spacer / 4;
+    margin-left: -(0.2rem);
+    display: inline-block;
+  }
 
-    code {
-        padding: .2rem;
-    }
+  code {
+    padding: 0.2rem;
+  }
 }
 
 .parameterOptional {
-    font-size: $font-size-small;
-    vertical-align: top;
-    color: $brand-purple;
+  font-size: $font-size-small;
+  vertical-align: top;
+  color: $brand-purple;
 }

src/templates/Typedoc/Toc.jsx

@@ -8,63 +8,59 @@ import { filterByKindOfProperty } from './utils'
 import stylesSidebar from '../../components/Sidebar.module.scss'
 
 export default class Toc extends PureComponent {
-    static propTypes = {
-        data: PropTypes.array
-    }
+  static propTypes = {
+    data: PropTypes.array
+  }
 
-    subItems = (children, parentName) =>
-        children &&
-        children.filter(filterByKindOfProperty).map(({ name, decorators }) => {
-            const deprecation = (decorators || []).filter(
-                ({ name }) => name === 'deprecated'
-            )[0] // Assuming deprecated annotation
+  subItems = (children, parentName) =>
+    children &&
+    children.filter(filterByKindOfProperty).map(({ name, decorators }) => {
+      const deprecation = (decorators || []).filter(
+        ({ name }) => name === 'deprecated'
+      )[0] // Assuming deprecated annotation
 
-            return (
-                <li key={shortid.generate()}>
-                    <Scroll
-                        type="id"
-                        element={`${parentName}-${name && slugify(name)}`}
-                        data-deprecated={!!deprecation}
-                        offset={-20}
-                    >
-                        <code>{name}</code>
-                    </Scroll>
-                </li>
-            )
-        })
-
-    items = this.props.data.map(({ name, children }) => {
-        const subIds = []
-        const parentName = name
-
-        subIds.push(
-            children &&
-                children.filter(filterByKindOfProperty).map(({ name }) => {
-                    return `${parentName}-${name && slugify(name)}`
-                })
-        )
-
-        return (
-            <li key={shortid.generate()}>
-                <Scroll
-                    type="id"
-                    element={`${name && slugify(name)}`}
-                    offset={-20}
-                >
-                    <code>{name}</code>
-                </Scroll>
-                <Scrollspy
-                    items={subIds[0]}
-                    currentClassName={stylesSidebar.scrollspyActive}
-                    offset={-30}
-                >
-                    {this.subItems(children, name)}
-                </Scrollspy>
-            </li>
-        )
+      return (
+        <li key={shortid.generate()}>
+          <Scroll
+            type="id"
+            element={`${parentName}-${name && slugify(name)}`}
+            data-deprecated={!!deprecation}
+            offset={-20}
+          >
+            <code>{name}</code>
+          </Scroll>
+        </li>
+      )
     })
 
-    render() {
-        return <ul>{this.items}</ul>
-    }
+  items = this.props.data.map(({ name, children }) => {
+    const subIds = []
+    const parentName = name
+
+    subIds.push(
+      children &&
+        children.filter(filterByKindOfProperty).map(({ name }) => {
+          return `${parentName}-${name && slugify(name)}`
+        })
+    )
+
+    return (
+      <li key={shortid.generate()}>
+        <Scroll type="id" element={`${name && slugify(name)}`} offset={-20}>
+          <code>{name}</code>
+        </Scroll>
+        <Scrollspy
+          items={subIds[0]}
+          currentClassName={stylesSidebar.scrollspyActive}
+          offset={-30}
+        >
+          {this.subItems(children, name)}
+        </Scrollspy>
+      </li>
+    )
+  })
+
+  render() {
+    return <ul>{this.items}</ul>
+  }
 }

src/templates/Typedoc/index.jsx

@@ -16,95 +16,89 @@ import Toc from './Toc'
 import stylesDoc from '../Doc.module.scss'
 
 export default class TypedocTemplate extends Component {
-    static propTypes = {
-        data: PropTypes.object.isRequired,
-        location: PropTypes.object.isRequired,
-        pageContext: PropTypes.object.isRequired
+  static propTypes = {
+    data: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired,
+    pageContext: PropTypes.object.isRequired
+  }
+
+  typedocCleaned = cleanTypedocData(
+    this.props.pageContext.typedoc,
+    this.props.pageContext.classes
+  )
+
+  // output section title as defined in sections.yml
+  sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
+    // compare section against section title from sections.yml
+    if (node.title.toLowerCase().includes('references')) {
+      return node.title
     }
+  })
 
-    typedocCleaned = cleanTypedocData(
-        this.props.pageContext.typedoc,
-        this.props.pageContext.classes
-    )
+  render() {
+    const { location, pageContext } = this.props
+    const { typedoc } = pageContext
+    const { info } = typedoc
+    const { title, description, version, sourceUrl } = info
 
-    // output section title as defined in sections.yml
-    sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
-        // compare section against section title from sections.yml
-        if (node.title.toLowerCase().includes('references')) {
-            return node.title
-        }
-    })
+    return (
+      <>
+        <Helmet>
+          <body className="references" />
+        </Helmet>
 
-    render() {
-        const { location, pageContext } = this.props
-        const { typedoc } = pageContext
-        const { info } = typedoc
-        const { title, description, version, sourceUrl } = info
+        <Seo
+          title={title}
+          description={description}
+          slug={pageContext.slug}
+          article
+          location={location}
+        />
 
-        return (
-            <>
-                <Helmet>
-                    <body className="references" />
-                </Helmet>
+        <Layout location={location}>
+          <HeaderSection title={this.sectionTitle} />
 
-                <Seo
-                    title={title}
-                    description={description}
-                    slug={pageContext.slug}
-                    article
-                    location={location}
+          <Content>
+            <main className={stylesDoc.wrapper}>
+              <aside className={stylesDoc.sidebar}>
+                <Sidebar
+                  location={location}
+                  sidebar="references"
+                  collapsed
+                  toc
+                  tocComponent={<Toc data={this.typedocCleaned} />}
+                />
+              </aside>
+              <article className={stylesDoc.main}>
+                <DocHeader
+                  title={title}
+                  description={description}
+                  prepend={<span className={stylesDoc.version}>{version}</span>}
                 />
 
-                <Layout location={location}>
-                    <HeaderSection title={this.sectionTitle} />
-
-                    <Content>
-                        <main className={stylesDoc.wrapper}>
-                            <aside className={stylesDoc.sidebar}>
-                                <Sidebar
-                                    location={location}
-                                    sidebar="references"
-                                    collapsed
-                                    toc
-                                    tocComponent={
-                                        <Toc data={this.typedocCleaned} />
-                                    }
-                                />
-                            </aside>
-                            <article className={stylesDoc.main}>
-                                <DocHeader
-                                    title={title}
-                                    description={description}
-                                    prepend={
-                                        <span className={stylesDoc.version}>
-                                            {version}
-                                        </span>
-                                    }
-                                />
-
-                                <Entities
-                                    entities={this.typedocCleaned}
-                                    sourceUrl={sourceUrl}
-                                />
-                            </article>
-                        </main>
-                    </Content>
-                </Layout>
-            </>
-        )
-    }
+                <Entities
+                  entities={this.typedocCleaned}
+                  sourceUrl={sourceUrl}
+                />
+              </article>
+            </main>
+          </Content>
+        </Layout>
+      </>
+    )
+  }
 }
 
 export const TypedocQuery = graphql`
-    query {
-        allSectionsYaml {
-            edges {
-                node {
-                    title
-                    description
-                    link
-                }
-            }
+  query {
+    allSectionsYaml {
+      edges {
+        node {
+          title
+          description
+          link
         }
+      }
     }
+  }
 `

src/templates/Typedoc/utils.js

@@ -1,48 +1,44 @@
 export const cleanTypedocData = (data, useClasses) => {
-    const nodes = data.children
+  const nodes = data.children
 
-    const cleanData = nodes
-        .map((node) => {
-            const child =
-                node.children &&
-                node.children.filter(
-                    ({ kindString }) => kindString === 'Class'
-                )[0]
+  const cleanData = nodes
+    .map((node) => {
+      const child =
+        node.children &&
+        node.children.filter(({ kindString }) => kindString === 'Class')[0]
 
-            return {
-                ...node,
-                name: node.name.replace(/"/g, '').replace('src/', ''),
-                child
-            }
-        })
-        .filter(({ name }) => (useClasses || []).includes(name))
-        .sort((a, b) => useClasses.indexOf(a.name) - useClasses.indexOf(b.name))
-        .map(({ child }) => child)
-        .map((node) => ({
-            ...node,
-            children:
-                node &&
-                node.children &&
-                node.children.sort((a, b) => a.id - b.id)
-        }))
+      return {
+        ...node,
+        name: node.name.replace(/"/g, '').replace('src/', ''),
+        child
+      }
+    })
+    .filter(({ name }) => (useClasses || []).includes(name))
+    .sort((a, b) => useClasses.indexOf(a.name) - useClasses.indexOf(b.name))
+    .map(({ child }) => child)
+    .map((node) => ({
+      ...node,
+      children:
+        node && node.children && node.children.sort((a, b) => a.id - b.id)
+    }))
 
-    return cleanData
+  return cleanData
 }
 
 // more kinds: 'Property', 'Enumeration'
 const showKindOfProperty = {
-    Method: { onlyPublic: true },
-    Property: { onlyPublic: true }
+  Method: { onlyPublic: true },
+  Property: { onlyPublic: true }
 }
 
 export const filterByKindOfProperty = ({ kindString, flags }) => {
-    const config = showKindOfProperty[kindString]
-    if (!config) return
+  const config = showKindOfProperty[kindString]
+  if (!config) return
 
-    // filter out static methods by default
-    if (flags.isStatic) return
+  // filter out static methods by default
+  if (flags.isStatic) return
 
-    if (config.onlyPublic && !flags.isPublic) return
+  if (config.onlyPublic && !flags.isPublic) return
 
-    return true
+  return true
 }