mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
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
@ -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
.gitignore
vendored
1
.gitignore
vendored
@ -1,5 +1,4 @@
|
|||||||
node_modules
|
node_modules
|
||||||
package-lock.json
|
|
||||||
yarn.lock
|
yarn.lock
|
||||||
yarn-error.log
|
yarn-error.log
|
||||||
.cache
|
.cache
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
{
|
{
|
||||||
"semi": false,
|
"semi": false,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"trailingComma": "none"
|
"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:
|
In this repo the following tools are setup for that:
|
||||||
|
|
||||||
- ESLint with [eslint-config-oceanprotocol](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
|
- 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)
|
- [markdownlint](https://github.com/DavidAnson/markdownlint)
|
||||||
- [Prettier](https://prettier.io)
|
- [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)
|
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
|
||||||
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
- [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)
|
- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
|
||||||
|
|
||||||
## Deployment
|
## Deployment
|
||||||
@ -125,7 +123,7 @@ Requires authorization against AWS with [one of the various ways](https://docs.a
|
|||||||
## License
|
## License
|
||||||
|
|
||||||
```text
|
```text
|
||||||
Copyright 2019 Ocean Protocol Foundation Ltd.
|
Copyright 2020 Ocean Protocol Foundation Ltd.
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with the License.
|
you may not use this file except in compliance with the License.
|
||||||
|
@ -3,10 +3,8 @@ title: Set Up a Compute-to-Data Environment
|
|||||||
description: Set Up a Compute-to-Data environment.
|
description: Set Up a Compute-to-Data environment.
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
|
|
||||||
First, create a folder with the following structure:
|
First, create a folder with the following structure:
|
||||||
|
|
||||||
```text
|
```text
|
||||||
@ -38,7 +36,6 @@ Then you need the following parts:
|
|||||||
|
|
||||||
## Customize your Operator Service deployment
|
## Customize your Operator Service deployment
|
||||||
|
|
||||||
|
|
||||||
The following resources need attention:
|
The following resources need attention:
|
||||||
|
|
||||||
| Resource | Variable | Description |
|
| 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:
|
We created our own 'standard' class in AWS:
|
||||||
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
kubectl get storageclass standard -o yaml
|
kubectl get storageclass standard -o yaml
|
||||||
```
|
```
|
||||||
@ -107,7 +103,6 @@ kubectl create ns ocean-operator
|
|||||||
kubectl create ns ocean-compute
|
kubectl create ns ocean-compute
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Deploy Operator Service
|
## Deploy Operator Service
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@ -121,7 +116,6 @@ kubectl apply -f /ocean/operator-service/role_binding.yaml
|
|||||||
kubectl apply -f /ocean/operator-service/service_account.yaml
|
kubectl apply -f /ocean/operator-service/service_account.yaml
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Deploy Operator Engine
|
## Deploy Operator Engine
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@ -134,14 +128,12 @@ kubectl apply -f /ocean/operator-engine/workflow-crd.yaml
|
|||||||
kubectl create -f /ocean/operator-service/postgres-configmap.yaml
|
kubectl create -f /ocean/operator-service/postgres-configmap.yaml
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Expose Operator Service
|
## Expose Operator Service
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
kubectl expose deployment operator-api --namespace=ocean-operator --port=8050
|
kubectl expose deployment operator-api --namespace=ocean-operator --port=8050
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
Run a port forward or create your ingress service (not covered here):
|
Run a port forward or create your ingress service (not covered here):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@ -156,7 +148,6 @@ If your cluster is running on example.com:
|
|||||||
curl -X POST "http://example.com:8050/api/v1/operator/pgsqlinit" -H "accept: application/json"
|
curl -X POST "http://example.com:8050/api/v1/operator/pgsqlinit" -H "accept: application/json"
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Update Brizo
|
## 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`
|
||||||
|
2
external/dev-ocean
vendored
2
external/dev-ocean
vendored
@ -1 +1 @@
|
|||||||
Subproject commit 90846d10e449159eec5fe762d48e595d5a008135
|
Subproject commit ba98510529e00ff9411a7df8a8c478dc3b58b635
|
@ -120,10 +120,7 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
resolve: 'gatsby-plugin-sass',
|
resolve: 'gatsby-plugin-sass',
|
||||||
options: {
|
options: {
|
||||||
includePaths: [
|
includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`]
|
||||||
`${__dirname}/node_modules`,
|
|
||||||
`${__dirname}/src/styles`
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'gatsby-transformer-sharp',
|
'gatsby-transformer-sharp',
|
||||||
|
@ -59,9 +59,7 @@ exports.createPages = ({ graphql, actions }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
devOceanDocs: allMarkdownRemark(
|
devOceanDocs: allMarkdownRemark(
|
||||||
filter: {
|
filter: { fileAbsolutePath: { regex: "/dev-ocean/doc/" } }
|
||||||
fileAbsolutePath: { regex: "/dev-ocean/doc/" }
|
|
||||||
}
|
|
||||||
) {
|
) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
@ -80,26 +78,17 @@ exports.createPages = ({ graphql, actions }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
squidJs: github {
|
squidJs: github {
|
||||||
repository(
|
repository(name: "squid-js", owner: "oceanprotocol") {
|
||||||
name: "squid-js"
|
|
||||||
owner: "oceanprotocol"
|
|
||||||
) {
|
|
||||||
name
|
name
|
||||||
releases(
|
releases(
|
||||||
first: 30
|
first: 30
|
||||||
orderBy: {
|
orderBy: { field: CREATED_AT, direction: DESC }
|
||||||
field: CREATED_AT
|
|
||||||
direction: DESC
|
|
||||||
}
|
|
||||||
) {
|
) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
isPrerelease
|
isPrerelease
|
||||||
isDraft
|
isDraft
|
||||||
releaseAssets(
|
releaseAssets(first: 1, name: "squid-js.json") {
|
||||||
first: 1
|
|
||||||
name: "squid-js.json"
|
|
||||||
) {
|
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
name
|
name
|
||||||
@ -201,9 +190,7 @@ exports.createPages = ({ graphql, actions }) => {
|
|||||||
const createTypeDocPage = async (createPage, name, downloadUrl) => {
|
const createTypeDocPage = async (createPage, name, downloadUrl) => {
|
||||||
try {
|
try {
|
||||||
const typedoc = await fetch(downloadUrl)
|
const typedoc = await fetch(downloadUrl)
|
||||||
const typedocTemplate = path.resolve(
|
const typedocTemplate = path.resolve('./src/templates/Typedoc/index.jsx')
|
||||||
'./src/templates/Typedoc/index.jsx'
|
|
||||||
)
|
|
||||||
const slug = `/references/${name}/`
|
const slug = `/references/${name}/`
|
||||||
|
|
||||||
createPage({
|
createPage({
|
||||||
@ -315,9 +302,7 @@ const createSwaggerPages = async (createPage) => {
|
|||||||
const petStoreSlug = '/references/petstore/'
|
const petStoreSlug = '/references/petstore/'
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const client = await Swagger(
|
const client = await Swagger(`http://petstore.swagger.io/v2/swagger.json`)
|
||||||
`http://petstore.swagger.io/v2/swagger.json`
|
|
||||||
)
|
|
||||||
|
|
||||||
createPage({
|
createPage({
|
||||||
path: petStoreSlug,
|
path: petStoreSlug,
|
||||||
|
25009
package-lock.json
generated
Normal file
25009
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
80
package.json
80
package.json
@ -8,82 +8,72 @@
|
|||||||
"build": "gatsby build",
|
"build": "gatsby build",
|
||||||
"start": "gatsby develop",
|
"start": "gatsby develop",
|
||||||
"ssr": "npm run build && serve -s public/",
|
"ssr": "npm run build && serve -s public/",
|
||||||
"format:js": "prettier --write '**/*.{js,jsx}'",
|
"format": "prettier --ignore-path .gitignore './**/*.{css,scss,yml,js,jsx,ts,tsx,json}' --write",
|
||||||
"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",
|
|
||||||
"lint:js": "eslint --ignore-path .gitignore --ignore-path .prettierignore --ext .js,.jsx .",
|
"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:md": "markdownlint './**/*.{md,markdown}' --ignore './{node_modules,external,public,.cache}/**/*'",
|
||||||
"lint:yml": "prettier '**/*.{yml,yaml}' --list-different",
|
"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",
|
"test": "npm run lint",
|
||||||
"deploy": "./scripts/deploy.sh"
|
"deploy": "./scripts/deploy.sh"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@oceanprotocol/art": "^2.2.0",
|
"@oceanprotocol/art": "^3.0.0",
|
||||||
"axios": "^0.19.2",
|
"axios": "^0.19.2",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"gatsby": "^2.21.31",
|
"gatsby": "^2.23.12",
|
||||||
"gatsby-image": "^2.4.3",
|
"gatsby-image": "^2.4.9",
|
||||||
"gatsby-plugin-catch-links": "^2.3.1",
|
"gatsby-plugin-catch-links": "^2.3.7",
|
||||||
"gatsby-plugin-google-analytics": "^2.3.1",
|
"gatsby-plugin-google-analytics": "^2.3.6",
|
||||||
"gatsby-plugin-manifest": "^2.4.3",
|
"gatsby-plugin-manifest": "^2.4.14",
|
||||||
"gatsby-plugin-offline": "^3.2.2",
|
"gatsby-plugin-offline": "^3.2.13",
|
||||||
"gatsby-plugin-react-helmet": "^3.3.1",
|
"gatsby-plugin-react-helmet": "^3.3.6",
|
||||||
"gatsby-plugin-sass": "^2.3.1",
|
"gatsby-plugin-sass": "^2.3.7",
|
||||||
"gatsby-plugin-sharp": "^2.6.3",
|
"gatsby-plugin-sharp": "^2.6.14",
|
||||||
"gatsby-plugin-sitemap": "^2.4.2",
|
"gatsby-plugin-sitemap": "^2.4.7",
|
||||||
"gatsby-plugin-svgr": "^2.0.2",
|
"gatsby-plugin-svgr": "^2.0.2",
|
||||||
"gatsby-plugin-webpack-size": "^1.0.0",
|
"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-code-titles": "^1.1.0",
|
||||||
"gatsby-remark-component": "^1.1.3",
|
"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-embed-video": "^3.0.10",
|
||||||
"gatsby-remark-github": "^2.0.0",
|
"gatsby-remark-github": "^2.0.0",
|
||||||
"gatsby-remark-images": "^3.3.3",
|
"gatsby-remark-images": "^3.3.14",
|
||||||
"gatsby-remark-responsive-iframe": "^2.4.2",
|
"gatsby-remark-responsive-iframe": "^2.4.7",
|
||||||
"gatsby-remark-smartypants": "^2.3.1",
|
"gatsby-remark-smartypants": "^2.3.6",
|
||||||
"gatsby-remark-vscode": "^2.1.1",
|
"gatsby-remark-vscode": "^2.1.2",
|
||||||
"gatsby-source-filesystem": "^2.3.3",
|
"gatsby-source-filesystem": "^2.3.14",
|
||||||
"gatsby-source-graphql": "^2.5.1",
|
"gatsby-source-graphql": "^2.5.7",
|
||||||
"gatsby-transformer-remark": "^2.8.8",
|
"gatsby-transformer-remark": "^2.8.20",
|
||||||
"gatsby-transformer-sharp": "^2.5.2",
|
"gatsby-transformer-sharp": "^2.5.7",
|
||||||
"gatsby-transformer-xml": "^2.3.1",
|
"gatsby-transformer-xml": "^2.3.6",
|
||||||
"gatsby-transformer-yaml": "^2.4.1",
|
"gatsby-transformer-yaml": "^2.4.6",
|
||||||
"giphy-js-sdk-core": "^1.0.6",
|
"giphy-js-sdk-core": "^1.0.6",
|
||||||
"intersection-observer": "^0.10.0",
|
"intersection-observer": "^0.11.0",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-helmet": "^6.0.0",
|
"react-helmet": "^6.1.0",
|
||||||
"react-scrollspy": "^3.4.2",
|
"react-scrollspy": "^3.4.2",
|
||||||
"rehype-react": "^5.0.1",
|
"rehype-react": "^6.0.0",
|
||||||
"remark": "^12.0.0",
|
"remark": "^12.0.0",
|
||||||
"remark-github-plugin": "^1.3.1",
|
"remark-github-plugin": "^1.4.0",
|
||||||
"remark-react": "^7.0.1",
|
"remark-react": "^7.0.1",
|
||||||
"shortid": "^2.2.15",
|
"shortid": "^2.2.15",
|
||||||
"slugify": "^1.4.0",
|
"slugify": "^1.4.4",
|
||||||
"smoothscroll-polyfill": "^0.4.4",
|
"smoothscroll-polyfill": "^0.4.4",
|
||||||
"swagger-client": "^3.10.3"
|
"swagger-client": "^3.10.9"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@svgr/webpack": "^5.4.0",
|
"@svgr/webpack": "^5.4.0",
|
||||||
"dotenv": "^8.2.0",
|
"dotenv": "^8.2.0",
|
||||||
"eslint": "^7.0.0",
|
"eslint": "^7.3.1",
|
||||||
"eslint-config-oceanprotocol": "^1.5.0",
|
"eslint-config-oceanprotocol": "^1.5.0",
|
||||||
"eslint-config-prettier": "^6.11.0",
|
"eslint-config-prettier": "^6.11.0",
|
||||||
"eslint-plugin-prettier": "^3.1.3",
|
"eslint-plugin-prettier": "^3.1.4",
|
||||||
"markdownlint-cli": "^0.23.0",
|
"markdownlint-cli": "^0.23.2",
|
||||||
"node-sass": "^4.14.1",
|
"node-sass": "^4.14.1",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"prettier": "^2.0.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"
|
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
@ -32,7 +32,7 @@
|
|||||||
blockquote {
|
blockquote {
|
||||||
padding: $spacer / 2;
|
padding: $spacer / 2;
|
||||||
background: lighten($brand-grey-light, 36%);
|
background: lighten($brand-grey-light, 36%);
|
||||||
border-left: .25rem solid $brand-grey-light;
|
border-left: 0.25rem solid $brand-grey-light;
|
||||||
border-top-right-radius: $border-radius;
|
border-top-right-radius: $border-radius;
|
||||||
border-bottom-right-radius: $border-radius;
|
border-bottom-right-radius: $border-radius;
|
||||||
|
|
||||||
@ -64,7 +64,7 @@
|
|||||||
:global(.footnote-ref) {
|
:global(.footnote-ref) {
|
||||||
font-size: $font-size-mini;
|
font-size: $font-size-mini;
|
||||||
font-weight: $font-weight-bold;
|
font-weight: $font-weight-bold;
|
||||||
padding-left: .2rem;
|
padding-left: 0.2rem;
|
||||||
padding-right: .2rem;
|
padding-right: 0.2rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
@ -28,9 +28,7 @@ export default function DocFooter({ post, url, externalName }) {
|
|||||||
<a href={url} className={post && !post.html ? styles.active : null}>
|
<a href={url} className={post && !post.html ? styles.active : null}>
|
||||||
<Pencil /> Edit this page on GitHub
|
<Pencil /> Edit this page on GitHub
|
||||||
{externalName && (
|
{externalName && (
|
||||||
<span className={styles.externalRepoName}>
|
<span className={styles.externalRepoName}>{externalName}</span>
|
||||||
{externalName}
|
|
||||||
</span>
|
|
||||||
)}
|
)}
|
||||||
</a>
|
</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
@ -13,9 +13,7 @@ const DocHeader = ({ title, description, prepend }) => {
|
|||||||
<h1 className={styles.title}>
|
<h1 className={styles.title}>
|
||||||
{title} {prepend && prepend}
|
{title} {prepend && prepend}
|
||||||
</h1>
|
</h1>
|
||||||
{description && (
|
{description && <div className={styles.lead}>{descriptionHtml}</div>}
|
||||||
<div className={styles.lead}>{descriptionHtml}</div>
|
|
||||||
)}
|
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -48,8 +48,8 @@ const Footer = () => (
|
|||||||
<Content>
|
<Content>
|
||||||
<small>
|
<small>
|
||||||
© {new Date().getFullYear()}{' '}
|
© {new Date().getFullYear()}{' '}
|
||||||
<a href={social.site}>{siteCompany}</a> — All
|
<a href={social.site}>{siteCompany}</a> — All Rights
|
||||||
Rights Reserved
|
Reserved
|
||||||
</small>
|
</small>
|
||||||
|
|
||||||
<FooterSocial social={social} />
|
<FooterSocial social={social} />
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { Link, StaticQuery, graphql } from 'gatsby'
|
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'
|
import styles from './Header.module.scss'
|
||||||
|
|
||||||
const query = graphql`
|
const query = graphql`
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
@import 'variables';
|
@import 'variables';
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background: $brand-black
|
background: $brand-grey-dimmed url('@oceanprotocol/art/waves/waves.svg')
|
||||||
url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center -6rem;
|
no-repeat center -3rem;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: $spacer / 2 0;
|
padding: $spacer / 2 0;
|
||||||
@ -29,7 +29,6 @@
|
|||||||
.headerLogoImage {
|
.headerLogoImage {
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
fill: #fff;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -68,7 +67,7 @@
|
|||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 3px;
|
width: 3px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
transition: opacity .2s ease-out;
|
transition: opacity 0.2s ease-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -76,14 +75,9 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 $spacer / 2;
|
margin: 0 $spacer / 2;
|
||||||
font-family: $font-family-button;
|
font-family: $font-family-button;
|
||||||
color: $brand-grey-lighter;
|
color: $brand-grey;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: $brand-white;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { StaticQuery, graphql } from 'gatsby'
|
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 Content from '../components/Content'
|
||||||
import styles from './HeaderHome.module.scss'
|
import styles from './HeaderHome.module.scss'
|
||||||
|
|
||||||
@ -24,9 +24,7 @@ const HeaderHome = () => (
|
|||||||
<Content>
|
<Content>
|
||||||
<Logo className={styles.headerLogo} />
|
<Logo className={styles.headerLogo} />
|
||||||
<h1 className={styles.headerTitle}>{siteTitle}</h1>
|
<h1 className={styles.headerTitle}>{siteTitle}</h1>
|
||||||
<p className={styles.headerDescription}>
|
<p className={styles.headerDescription}>{siteDescription}</p>
|
||||||
{siteDescription}
|
|
||||||
</p>
|
|
||||||
</Content>
|
</Content>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
|
@ -2,14 +2,12 @@
|
|||||||
@import 'animations';
|
@import 'animations';
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background: $brand-black
|
background: $brand-grey-dimmed url('@oceanprotocol/art/waves/waves.svg')
|
||||||
url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center
|
no-repeat center 10rem;
|
||||||
4rem;
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: $spacer * 2 0;
|
padding: $spacer * 2 0;
|
||||||
min-height: 30rem;
|
min-height: 30rem;
|
||||||
color: $brand-white;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -19,7 +17,7 @@
|
|||||||
.headerLogo,
|
.headerLogo,
|
||||||
.headerTitle,
|
.headerTitle,
|
||||||
.headerDescription {
|
.headerDescription {
|
||||||
animation: fadeInUp .6s ease-out backwards;
|
animation: fadeInUp 0.6s ease-out backwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerLogo {
|
.headerLogo {
|
||||||
@ -30,7 +28,7 @@
|
|||||||
.headerTitle {
|
.headerTitle {
|
||||||
margin-bottom: $spacer;
|
margin-bottom: $spacer;
|
||||||
font-size: $font-size-h2;
|
font-size: $font-size-h2;
|
||||||
animation-delay: .2s;
|
animation-delay: 0.2s;
|
||||||
|
|
||||||
@media (min-width: $break-point--small) {
|
@media (min-width: $break-point--small) {
|
||||||
font-size: $font-size-h1;
|
font-size: $font-size-h1;
|
||||||
@ -42,7 +40,7 @@
|
|||||||
max-width: $break-point--small;
|
max-width: $break-point--small;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
animation-delay: .4s;
|
animation-delay: 0.4s;
|
||||||
|
|
||||||
@media (min-width: $break-point--small) {
|
@media (min-width: $break-point--small) {
|
||||||
font-size: $font-size-large;
|
font-size: $font-size-large;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@import 'variables';
|
@import 'variables';
|
||||||
|
|
||||||
.headerSection {
|
.headerSection {
|
||||||
border-bottom: .1rem solid $brand-grey-lighter;
|
border-bottom: 0.1rem solid $brand-grey-lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerSectionTitle {
|
.headerSectionTitle {
|
||||||
|
@ -7,9 +7,7 @@ const QuickRun = () => (
|
|||||||
<StaticQuery
|
<StaticQuery
|
||||||
query={graphql`
|
query={graphql`
|
||||||
query {
|
query {
|
||||||
allMarkdownRemark(
|
allMarkdownRemark(filter: { fields: { slug: { eq: "/quickrun/" } } }) {
|
||||||
filter: { fields: { slug: { eq: "/quickrun/" } } }
|
|
||||||
) {
|
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
html
|
html
|
||||||
@ -24,8 +22,8 @@ const QuickRun = () => (
|
|||||||
<h1 className={styles.tldr}>TL;DR</h1>
|
<h1 className={styles.tldr}>TL;DR</h1>
|
||||||
<strong>
|
<strong>
|
||||||
Wanna quickly get an Ocean network with all{' '}
|
Wanna quickly get an Ocean network with all{' '}
|
||||||
<Link to="/concepts/components/">core components</Link>{' '}
|
<Link to="/concepts/components/">core components</Link> running on
|
||||||
running on your machine?
|
your machine?
|
||||||
</strong>
|
</strong>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
@ -11,11 +11,7 @@ const RepositoryList = ({ repositories }) => (
|
|||||||
|
|
||||||
<div className={styles.repositoryList}>
|
<div className={styles.repositoryList}>
|
||||||
{node.items.map((item) => (
|
{node.items.map((item) => (
|
||||||
<Repository
|
<Repository key={item.name} name={item.name} links={item.links} />
|
||||||
key={item.name}
|
|
||||||
name={item.name}
|
|
||||||
links={item.links}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -48,7 +48,7 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 7px;
|
width: 7px;
|
||||||
height: 7px;
|
height: 7px;
|
||||||
transition: opacity .2s ease-out;
|
transition: opacity 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -32,18 +32,14 @@ const Repositories = () => (
|
|||||||
return (
|
return (
|
||||||
<div className={styles.repositories}>
|
<div className={styles.repositories}>
|
||||||
<header>
|
<header>
|
||||||
<h1 className={styles.repositoriesTitle}>
|
<h1 className={styles.repositoriesTitle}>Repositories</h1>
|
||||||
Repositories
|
|
||||||
</h1>
|
|
||||||
<p className={styles.repositoriesText}>
|
<p className={styles.repositoriesText}>
|
||||||
<strong>
|
<strong>
|
||||||
Most of our repositories are open source and we
|
Most of our repositories are open source and we listed the key
|
||||||
listed the key repositories here. Start with the{' '}
|
repositories here. Start with the{' '}
|
||||||
<Link to="/concepts/components/">
|
<Link to="/concepts/components/">software components</Link>{' '}
|
||||||
software components
|
document for an introduction to the components found in a
|
||||||
</Link>{' '}
|
typical Ocean network.
|
||||||
document for an introduction to the components
|
|
||||||
found in a typical Ocean network.
|
|
||||||
</strong>
|
</strong>
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
|
@ -23,13 +23,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-left: -.15rem;
|
margin-left: -0.15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
fill: $brand-grey-light;
|
fill: $brand-grey-light;
|
||||||
margin-bottom: -.1rem;
|
margin-bottom: -0.1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -11,9 +11,7 @@ export default function Title({ name, isFork, parent, releases, url }) {
|
|||||||
{isFork && <Forks />}
|
{isFork && <Forks />}
|
||||||
{name}
|
{name}
|
||||||
{isFork && (
|
{isFork && (
|
||||||
<span className={styles.forkLine}>
|
<span className={styles.forkLine}>{parent.nameWithOwner}</span>
|
||||||
{parent.nameWithOwner}
|
|
||||||
</span>
|
|
||||||
)}
|
)}
|
||||||
</a>
|
</a>
|
||||||
{releases.edges[0] && (
|
{releases.edges[0] && (
|
||||||
|
@ -24,8 +24,8 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
fill: $brand-grey-light;
|
fill: $brand-grey-light;
|
||||||
margin-right: $spacer / 8;
|
margin-right: $spacer / 8;
|
||||||
margin-left: -.2rem;
|
margin-left: -0.2rem;
|
||||||
margin-bottom: -.2rem;
|
margin-bottom: -0.2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -69,8 +69,7 @@ const Repository = ({ name, links, readme }) => (
|
|||||||
<StaticQuery
|
<StaticQuery
|
||||||
query={queryGithub}
|
query={queryGithub}
|
||||||
render={(data) => {
|
render={(data) => {
|
||||||
const repositoriesGitHub =
|
const repositoriesGitHub = data.github.organization.repositories.edges
|
||||||
data.github.organization.repositories.edges
|
|
||||||
const repositoriesYaml = data.allRepositoriesYaml.edges
|
const repositoriesYaml = data.allRepositoriesYaml.edges
|
||||||
|
|
||||||
// just iterate over all repos until we have a name match,
|
// just iterate over all repos until we have a name match,
|
||||||
|
@ -47,9 +47,7 @@ const SidebarList = ({ items, location, toc, tocComponent }) => (
|
|||||||
link={item.link}
|
link={item.link}
|
||||||
title={item.title}
|
title={item.title}
|
||||||
linkClasses={
|
linkClasses={
|
||||||
item.link === location.pathname
|
item.link === location.pathname ? styles.active : styles.link
|
||||||
? styles.active
|
|
||||||
: styles.link
|
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
@ -87,12 +85,7 @@ SidebarGroupTitle.propTypes = {
|
|||||||
const SidebarGroup = ({ i, group, location, ...props }) => (
|
const SidebarGroup = ({ i, group, location, ...props }) => (
|
||||||
<>
|
<>
|
||||||
<SidebarGroupTitle group={group} />
|
<SidebarGroupTitle group={group} />
|
||||||
<SidebarList
|
<SidebarList key={i} items={group.items} location={location} {...props} />
|
||||||
key={i}
|
|
||||||
items={group.items}
|
|
||||||
location={location}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -129,9 +122,7 @@ export default class Sidebar extends Component {
|
|||||||
{sidebarfile.map((group, i) => (
|
{sidebarfile.map((group, i) => (
|
||||||
<div key={i}>
|
<div key={i}>
|
||||||
{collapsed ? (
|
{collapsed ? (
|
||||||
group.items.some(
|
group.items.some((item) => item.link === location.pathname) ? (
|
||||||
(item) => item.link === location.pathname
|
|
||||||
) ? (
|
|
||||||
<SidebarGroup
|
<SidebarGroup
|
||||||
i={i}
|
i={i}
|
||||||
group={group}
|
group={group}
|
||||||
@ -143,11 +134,7 @@ export default class Sidebar extends Component {
|
|||||||
<SidebarGroupTitle group={group} />
|
<SidebarGroupTitle group={group} />
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
<SidebarGroup
|
<SidebarGroup i={i} group={group} location={location} />
|
||||||
i={i}
|
|
||||||
group={group}
|
|
||||||
location={location}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
@ -72,8 +72,8 @@
|
|||||||
color: $brand-grey;
|
color: $brand-grey;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: $spacer / 6 $spacer / 2;
|
padding: $spacer / 6 $spacer / 2;
|
||||||
border-left: .1rem solid transparent;
|
border-left: 0.1rem solid transparent;
|
||||||
margin-left: -.05rem;
|
margin-left: -0.05rem;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
@ -121,7 +121,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-deprecated='true'] code {
|
[data-deprecated='true'] code {
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 42 KiB |
@ -51,19 +51,12 @@ export default class NotFoundPage extends Component {
|
|||||||
<article className={styles.content}>
|
<article className={styles.content}>
|
||||||
<h1>Page not found.</h1>
|
<h1>Page not found.</h1>
|
||||||
<p>
|
<p>
|
||||||
You just hit a route that doesn't exist...
|
You just hit a route that doesn't exist... the sadness.
|
||||||
the sadness. Check your url,{' '}
|
Check your url, <Link to="/">go back to the homepage</Link>, or
|
||||||
<Link to="/">go back to the homepage</Link>, or
|
check out some <em>{tag}</em> gifs, entirely your choice.
|
||||||
check out some <em>{tag}</em> gifs, entirely
|
|
||||||
your choice.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<video
|
<video className="gif" src={this.state.gif} autoPlay loop />
|
||||||
className="gif"
|
|
||||||
src={this.state.gif}
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
|
@ -63,11 +63,7 @@ const IndexPage = ({ data, location }) => (
|
|||||||
<ul className={styles.sections}>
|
<ul className={styles.sections}>
|
||||||
{data.allSectionsYaml.edges.map(({ node }) => (
|
{data.allSectionsYaml.edges.map(({ node }) => (
|
||||||
<li key={node.title} className={styles.section}>
|
<li key={node.title} className={styles.section}>
|
||||||
<SectionLink
|
<SectionLink to={node.link} title={node.title} color={node.color}>
|
||||||
to={node.link}
|
|
||||||
title={node.title}
|
|
||||||
color={node.color}
|
|
||||||
>
|
|
||||||
{node.description}
|
{node.description}
|
||||||
</SectionLink>
|
</SectionLink>
|
||||||
</li>
|
</li>
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
.section {
|
.section {
|
||||||
margin-top: $spacer;
|
margin-top: $spacer;
|
||||||
animation: fadeInUp .6s ease-out backwards;
|
animation: fadeInUp 0.6s ease-out backwards;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: none;
|
display: none;
|
||||||
@ -25,14 +25,14 @@
|
|||||||
@media (min-width: $break-point--medium) {
|
@media (min-width: $break-point--medium) {
|
||||||
flex: 0 0 31%;
|
flex: 0 0 31%;
|
||||||
}
|
}
|
||||||
animation-delay: .4s;
|
animation-delay: 0.4s;
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
animation-delay: .6s;
|
animation-delay: 0.6s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
animation-delay: .8s;
|
animation-delay: 0.8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
@ -46,17 +46,17 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: $spacer $spacer * $line-height;
|
padding: $spacer $spacer * $line-height;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
box-shadow: rgba($brand-black, .1) 0 9px 18px;
|
box-shadow: rgba($brand-black, 0.1) 0 9px 18px;
|
||||||
color: $brand-grey;
|
color: $brand-grey;
|
||||||
background: $brand-white;
|
background: $brand-white;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: rgba($brand-black, .1) 0 12px 20px;
|
box-shadow: rgba($brand-black, 0.1) 0 12px 20px;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
transform: translate3d(.2rem, 0, 0);
|
transform: translate3d(0.2rem, 0, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -114,6 +114,6 @@
|
|||||||
width: $font-size-small;
|
width: $font-size-small;
|
||||||
height: $font-size-small;
|
height: $font-size-small;
|
||||||
fill: $brand-grey-light;
|
fill: $brand-grey-light;
|
||||||
transition: transform .2s ease-out;
|
transition: transform 0.2s ease-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
@keyframes fadeInUp {
|
@keyframes fadeInUp {
|
||||||
0% {
|
0% {
|
||||||
opacity: .01;
|
opacity: 0.01;
|
||||||
transform: translate3d(0, 5rem, 0);
|
transform: translate3d(0, 5rem, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: .01;
|
opacity: 0.01;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
|
@ -24,8 +24,8 @@ samp {
|
|||||||
|
|
||||||
:not(pre) > code {
|
:not(pre) > code {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-left: .3rem;
|
padding-left: 0.3rem;
|
||||||
padding-right: .3rem;
|
padding-right: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a > code {
|
a > code {
|
||||||
@ -65,9 +65,9 @@ pre[data-language]:before {
|
|||||||
color: $brand-grey;
|
color: $brand-grey;
|
||||||
font-size: $font-size-mini;
|
font-size: $font-size-mini;
|
||||||
font-family: $font-family-monospace;
|
font-family: $font-family-monospace;
|
||||||
letter-spacing: .05em;
|
letter-spacing: 0.05em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding: .25rem .5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: $spacer / 2;
|
right: $spacer / 2;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -87,15 +87,15 @@ pre[data-language='bash'] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vscode-highlight-line:only-child {
|
.vscode-highlight-line:only-child {
|
||||||
padding-left: .5rem;
|
padding-left: 0.5rem;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: '$';
|
content: '$';
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: -.5rem;
|
margin-left: -0.5rem;
|
||||||
margin-right: .5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -149,7 +149,7 @@ pre[data-language='toml']:before {
|
|||||||
margin-right: -($spacer / 1.5);
|
margin-right: -($spacer / 1.5);
|
||||||
padding-left: $spacer / 1.85;
|
padding-left: $spacer / 1.85;
|
||||||
padding-right: $spacer / 1.5;
|
padding-right: $spacer / 1.5;
|
||||||
border-left: .25rem solid $brand-grey-light;
|
border-left: 0.25rem solid $brand-grey-light;
|
||||||
width: calc(100% + #{$spacer * 1.5});
|
width: calc(100% + #{$spacer * 1.5});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,7 @@ $brand-grey: #41474e;
|
|||||||
$brand-grey-light: #8b98a9;
|
$brand-grey-light: #8b98a9;
|
||||||
$brand-grey-dark: #303030;
|
$brand-grey-dark: #303030;
|
||||||
$brand-grey-lighter: #e2e2e2;
|
$brand-grey-lighter: #e2e2e2;
|
||||||
|
$brand-grey-dimmed: #f7f7f7;
|
||||||
|
|
||||||
$green: #5fb359;
|
$green: #5fb359;
|
||||||
$red: #d80606;
|
$red: #d80606;
|
||||||
@ -35,8 +36,8 @@ $font-family-monospace: 'Fira Code', 'Fira Mono', menlo, monaco, consolas,
|
|||||||
$font-size-root: 15px;
|
$font-size-root: 15px;
|
||||||
$font-size-base: 1rem;
|
$font-size-base: 1rem;
|
||||||
$font-size-large: 1.2rem;
|
$font-size-large: 1.2rem;
|
||||||
$font-size-small: .85rem;
|
$font-size-small: 0.85rem;
|
||||||
$font-size-mini: .65rem;
|
$font-size-mini: 0.65rem;
|
||||||
$font-size-text: $font-size-base;
|
$font-size-text: $font-size-base;
|
||||||
$font-size-label: $font-size-base;
|
$font-size-label: $font-size-base;
|
||||||
$font-size-title: 1.4rem;
|
$font-size-title: 1.4rem;
|
||||||
@ -53,7 +54,7 @@ $line-height: 1.6;
|
|||||||
|
|
||||||
// Sizes
|
// Sizes
|
||||||
$spacer: 2rem;
|
$spacer: 2rem;
|
||||||
$page-frame: .75rem;
|
$page-frame: 0.75rem;
|
||||||
|
|
||||||
$break-point--small: 640px;
|
$break-point--small: 640px;
|
||||||
$break-point--medium: 860px;
|
$break-point--medium: 860px;
|
||||||
@ -61,6 +62,6 @@ $break-point--large: 1140px;
|
|||||||
$break-point--huge: 1400px;
|
$break-point--huge: 1400px;
|
||||||
$brand-border-width: 1px;
|
$brand-border-width: 1px;
|
||||||
|
|
||||||
$border-radius: .2rem;
|
$border-radius: 0.2rem;
|
||||||
|
|
||||||
$narrowWidth: 35rem;
|
$narrowWidth: 35rem;
|
||||||
|
@ -25,22 +25,18 @@ body {
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@media screen and (min-width: $break-point--small) {
|
|
||||||
padding: $page-frame;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $brand-pink;
|
color: $brand-pink;
|
||||||
transition: .2s ease-out;
|
transition: 0.2s ease-out;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: darken($brand-pink, 15%);
|
color: darken($brand-pink, 15%);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transform: translate3d(0, -.1rem, 0);
|
transform: translate3d(0, -0.1rem, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@ -191,7 +187,7 @@ picture {
|
|||||||
hr {
|
hr {
|
||||||
margin: $spacer 0;
|
margin: $spacer 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: .1rem solid $brand-grey-lighter;
|
border-bottom: 0.1rem solid $brand-grey-lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Quotes
|
// Quotes
|
||||||
@ -215,7 +211,7 @@ blockquote > p {
|
|||||||
blockquote {
|
blockquote {
|
||||||
margin: 0 0 $spacer;
|
margin: 0 0 $spacer;
|
||||||
padding-left: $spacer / 2;
|
padding-left: $spacer / 2;
|
||||||
border-left: .2rem solid $brand-grey-lighter;
|
border-left: 0.2rem solid $brand-grey-lighter;
|
||||||
|
|
||||||
@media screen and (min-width: $break-point--small) {
|
@media screen and (min-width: $break-point--small) {
|
||||||
padding-left: $spacer / $line-height;
|
padding-left: $spacer / $line-height;
|
||||||
@ -277,7 +273,7 @@ table {
|
|||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
.anchor {
|
.anchor {
|
||||||
margin-top: .6rem;
|
margin-top: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import 'code';
|
@import 'code';
|
||||||
|
@ -74,9 +74,7 @@ export default class DocTemplate extends Component {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<Layout location={location}>
|
<Layout location={location}>
|
||||||
<HeaderSection
|
<HeaderSection title={section ? this.sectionTitle : title} />
|
||||||
title={section ? this.sectionTitle : title}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Content>
|
<Content>
|
||||||
{section ? (
|
{section ? (
|
||||||
@ -88,9 +86,7 @@ export default class DocTemplate extends Component {
|
|||||||
collapsed={isApiSection}
|
collapsed={isApiSection}
|
||||||
toc={
|
toc={
|
||||||
isApiSection &&
|
isApiSection &&
|
||||||
!location.pathname.includes(
|
!location.pathname.includes('/references/introduction/')
|
||||||
'/references/introduction/'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
tableOfContents={tableOfContents}
|
tableOfContents={tableOfContents}
|
||||||
/>
|
/>
|
||||||
@ -98,9 +94,7 @@ export default class DocTemplate extends Component {
|
|||||||
<DocMain
|
<DocMain
|
||||||
title={title}
|
title={title}
|
||||||
description={description}
|
description={description}
|
||||||
tableOfContents={
|
tableOfContents={!isApiSection && tableOfContents}
|
||||||
!isApiSection && tableOfContents
|
|
||||||
}
|
|
||||||
post={post}
|
post={post}
|
||||||
/>
|
/>
|
||||||
</main>
|
</main>
|
||||||
|
@ -59,7 +59,7 @@
|
|||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
font-weight: $font-weight-base;
|
font-weight: $font-weight-base;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: .5rem;
|
margin-left: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -77,9 +77,7 @@ const Parameters = ({ parameters }) => (
|
|||||||
|
|
||||||
<p>{description}</p>
|
<p>{description}</p>
|
||||||
|
|
||||||
{schema && (
|
{schema && <ParameterExample properties={schema.properties} />}
|
||||||
<ParameterExample properties={schema.properties} />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
@ -11,19 +11,19 @@
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
&[data-type='get'] {
|
&[data-type='get'] {
|
||||||
background: rgba($green, .4);
|
background: rgba($green, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-type='post'] {
|
&[data-type='post'] {
|
||||||
background: rgba($brand-blue, .4);
|
background: rgba($brand-blue, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-type='put'] {
|
&[data-type='put'] {
|
||||||
background: rgba($brand-violet, .3);
|
background: rgba($brand-violet, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-type='delete'] {
|
&[data-type='delete'] {
|
||||||
background: rgba($red, .4);
|
background: rgba($red, 0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -113,10 +113,7 @@ export default class ApiSwaggerTemplate extends Component {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{(contact || license) && (
|
{(contact || license) && (
|
||||||
<SwaggerMeta
|
<SwaggerMeta contact={contact} license={license} />
|
||||||
contact={contact}
|
|
||||||
license={license}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(host || basePath) && (
|
{(host || basePath) && (
|
||||||
|
@ -19,11 +19,7 @@ const Type = ({ type }) => {
|
|||||||
<div className={styles.type}>
|
<div className={styles.type}>
|
||||||
<span>
|
<span>
|
||||||
{isInternal && (
|
{isInternal && (
|
||||||
<Scroll
|
<Scroll type="id" element={`${name && slugify(name)}`} offset={-20}>
|
||||||
type="id"
|
|
||||||
element={`${name && slugify(name)}`}
|
|
||||||
offset={-20}
|
|
||||||
>
|
|
||||||
{type.name}
|
{type.name}
|
||||||
</Scroll>
|
</Scroll>
|
||||||
)}
|
)}
|
||||||
@ -36,11 +32,7 @@ const Type = ({ type }) => {
|
|||||||
<span>
|
<span>
|
||||||
{typeArguments.map((typeArgument, i) => (
|
{typeArguments.map((typeArgument, i) => (
|
||||||
<span key={shortid.generate()}>
|
<span key={shortid.generate()}>
|
||||||
{i !== 0 && (
|
{i !== 0 && <span className={styles.typeSymbol}>, </span>}
|
||||||
<span className={styles.typeSymbol}>
|
|
||||||
,{' '}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<Type type={typeArgument} />
|
<Type type={typeArgument} />
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
@ -83,14 +75,10 @@ const MethodDetails = ({ property }) => {
|
|||||||
{parameters.map((parameter) => {
|
{parameters.map((parameter) => {
|
||||||
const { name, type, flags, comment } = parameter
|
const { name, type, flags, comment } = parameter
|
||||||
const { isOptional } = flags
|
const { isOptional } = flags
|
||||||
const description =
|
const description = comment && (comment.text || comment.shortText)
|
||||||
comment && (comment.text || comment.shortText)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className={styles.parameters} key={shortid.generate()}>
|
||||||
className={styles.parameters}
|
|
||||||
key={shortid.generate()}
|
|
||||||
>
|
|
||||||
<h5>
|
<h5>
|
||||||
<code>{name}</code>
|
<code>{name}</code>
|
||||||
{isOptional && (
|
{isOptional && (
|
||||||
@ -127,14 +115,7 @@ MethodDetails.propTypes = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
|
const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
|
||||||
const {
|
const { name, kindString, flags, signatures, sources, decorators } = property
|
||||||
name,
|
|
||||||
kindString,
|
|
||||||
flags,
|
|
||||||
signatures,
|
|
||||||
sources,
|
|
||||||
decorators
|
|
||||||
} = property
|
|
||||||
const { isPublic, isStatic } = flags
|
const { isPublic, isStatic } = flags
|
||||||
const signature = signatures && signatures[0]
|
const signature = signatures && signatures[0]
|
||||||
const comment = (signature && signature.comment) || property.comment
|
const comment = (signature && signature.comment) || property.comment
|
||||||
@ -145,8 +126,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
|
|||||||
let deprecatedUse, deprecatedSlug
|
let deprecatedUse, deprecatedSlug
|
||||||
if (deprecation) {
|
if (deprecation) {
|
||||||
deprecatedUse = deprecation.arguments.alternative.replace(/('|")/g, '')
|
deprecatedUse = deprecation.arguments.alternative.replace(/('|")/g, '')
|
||||||
deprecatedSlug =
|
deprecatedSlug = deprecatedUse && slugify(deprecatedUse.replace('.', '-'))
|
||||||
deprecatedUse && slugify(deprecatedUse.replace('.', '-'))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const sourceLink = `${sourceUrl}${fileName}#L${line}`
|
const sourceLink = `${sourceUrl}${fileName}#L${line}`
|
||||||
@ -160,10 +140,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
|
|||||||
>
|
>
|
||||||
<h3 className={styles.propertyName}>{name}</h3>
|
<h3 className={styles.propertyName}>{name}</h3>
|
||||||
|
|
||||||
<div
|
<div className={styles.propertyType} data-type={kindString.toLowerCase()}>
|
||||||
className={styles.propertyType}
|
|
||||||
data-type={kindString.toLowerCase()}
|
|
||||||
>
|
|
||||||
{kindString}
|
{kindString}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -184,11 +161,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
|
|||||||
<div className={styles.deprecation}>
|
<div className={styles.deprecation}>
|
||||||
<strong>Deprecated</strong>: use{' '}
|
<strong>Deprecated</strong>: use{' '}
|
||||||
<code>
|
<code>
|
||||||
<Scroll
|
<Scroll type="id" element={`${deprecatedSlug}`} offset={-20}>
|
||||||
type="id"
|
|
||||||
element={`${deprecatedSlug}`}
|
|
||||||
offset={-20}
|
|
||||||
>
|
|
||||||
{deprecatedUse}
|
{deprecatedUse}
|
||||||
</Scroll>
|
</Scroll>
|
||||||
</code>{' '}
|
</code>{' '}
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
&[data-deprecated='true'] {
|
&[data-deprecated='true'] {
|
||||||
> *:not(.deprecation) {
|
> *:not(.deprecation) {
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
@ -64,19 +64,19 @@
|
|||||||
|
|
||||||
.propertyType {
|
.propertyType {
|
||||||
&[data-type='method'] {
|
&[data-type='method'] {
|
||||||
background: rgba($green, .3);
|
background: rgba($green, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-type='property'] {
|
&[data-type='property'] {
|
||||||
background: rgba($yellow, .3);
|
background: rgba($yellow, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.propertyModifier {
|
.propertyModifier {
|
||||||
background: rgba($red, .2);
|
background: rgba($red, 0.2);
|
||||||
|
|
||||||
&[data-secondary] {
|
&[data-secondary] {
|
||||||
background: rgba($brand-blue, .2);
|
background: rgba($brand-blue, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -120,13 +120,13 @@
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: .6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.typeSymbol {
|
.typeSymbol {
|
||||||
opacity: .6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subHeading {
|
.subHeading {
|
||||||
@ -149,12 +149,12 @@
|
|||||||
font-size: $font-size-small;
|
font-size: $font-size-small;
|
||||||
margin-bottom: $spacer / 4;
|
margin-bottom: $spacer / 4;
|
||||||
margin-right: $spacer / 4;
|
margin-right: $spacer / 4;
|
||||||
margin-left: -(.2rem);
|
margin-left: -(0.2rem);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
padding: .2rem;
|
padding: 0.2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,11 +46,7 @@ export default class Toc extends PureComponent {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<li key={shortid.generate()}>
|
<li key={shortid.generate()}>
|
||||||
<Scroll
|
<Scroll type="id" element={`${name && slugify(name)}`} offset={-20}>
|
||||||
type="id"
|
|
||||||
element={`${name && slugify(name)}`}
|
|
||||||
offset={-20}
|
|
||||||
>
|
|
||||||
<code>{name}</code>
|
<code>{name}</code>
|
||||||
</Scroll>
|
</Scroll>
|
||||||
<Scrollspy
|
<Scrollspy
|
||||||
|
@ -66,20 +66,14 @@ export default class TypedocTemplate extends Component {
|
|||||||
sidebar="references"
|
sidebar="references"
|
||||||
collapsed
|
collapsed
|
||||||
toc
|
toc
|
||||||
tocComponent={
|
tocComponent={<Toc data={this.typedocCleaned} />}
|
||||||
<Toc data={this.typedocCleaned} />
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</aside>
|
</aside>
|
||||||
<article className={stylesDoc.main}>
|
<article className={stylesDoc.main}>
|
||||||
<DocHeader
|
<DocHeader
|
||||||
title={title}
|
title={title}
|
||||||
description={description}
|
description={description}
|
||||||
prepend={
|
prepend={<span className={stylesDoc.version}>{version}</span>}
|
||||||
<span className={stylesDoc.version}>
|
|
||||||
{version}
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Entities
|
<Entities
|
||||||
|
@ -5,9 +5,7 @@ export const cleanTypedocData = (data, useClasses) => {
|
|||||||
.map((node) => {
|
.map((node) => {
|
||||||
const child =
|
const child =
|
||||||
node.children &&
|
node.children &&
|
||||||
node.children.filter(
|
node.children.filter(({ kindString }) => kindString === 'Class')[0]
|
||||||
({ kindString }) => kindString === 'Class'
|
|
||||||
)[0]
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...node,
|
...node,
|
||||||
@ -21,9 +19,7 @@ export const cleanTypedocData = (data, useClasses) => {
|
|||||||
.map((node) => ({
|
.map((node) => ({
|
||||||
...node,
|
...node,
|
||||||
children:
|
children:
|
||||||
node &&
|
node && node.children && node.children.sort((a, b) => a.id - b.id)
|
||||||
node.children &&
|
|
||||||
node.children.sort((a, b) => a.id - b.id)
|
|
||||||
}))
|
}))
|
||||||
|
|
||||||
return cleanData
|
return cleanData
|
||||||
|
Loading…
Reference in New Issue
Block a user