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
This commit is contained in:
parent
40e160c4c7
commit
7014ee27a7
GPG Key ID:
606EEEF3C479A91F
|
|
@ -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
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
node_modules
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
yarn-error.log
|
||||
.cache
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"tabWidth": 2
|
||||
}
|
||||
|
|
|
|||
11
.stylelintrc
11
.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
|
||||
}
|
||||
}
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
108
config.js
108
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/'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,13 +89,13 @@ 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
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
For more information, please visit https://kubernetes.io/docs/concepts/storage/storage-classes/
|
||||
|
||||
|
||||
## Create namespaces
|
||||
|
||||
```bash
|
||||
|
|
@ -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/
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 90846d10e449159eec5fe762d48e595d5a008135
|
||||
Subproject commit ba98510529e00ff9411a7df8a8c478dc3b58b635
|
||||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
303
gatsby-config.js
303
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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
545
gatsby-node.js
545
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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
80
package.json
80
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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
© {new Date().getFullYear()}{' '}
|
||||
<a href={social.site}>{siteCompany}</a> — All
|
||||
Rights Reserved
|
||||
</small>
|
||||
return (
|
||||
<footer className={styles.footer}>
|
||||
<Content>
|
||||
<small>
|
||||
© {new Date().getFullYear()}{' '}
|
||||
<a href={social.site}>{siteCompany}</a> — All Rights
|
||||
Reserved
|
||||
</small>
|
||||
|
||||
<FooterSocial social={social} />
|
||||
</Content>
|
||||
</footer>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<FooterSocial social={social} />
|
||||
</Content>
|
||||
</footer>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
export default Footer
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 42 KiB |
|
|
@ -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'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'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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}><</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}>></span>
|
||||
</span>
|
||||
)}
|
||||
{typeArguments && (
|
||||
<span>
|
||||
<span className={styles.typeSymbol}><</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}>></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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue