1
0
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:
Matthias Kretschmann 2020-07-01 11:24:21 +02:00
parent 40e160c4c7
commit 7014ee27a7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
75 changed files with 28366 additions and 3525 deletions

View File

@ -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
View File

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

View File

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

View File

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

View File

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

View File

@ -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

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

View File

@ -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',

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -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;
} }

View File

@ -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>

View File

@ -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>
) )
} }

View File

@ -48,8 +48,8 @@ const Footer = () => (
<Content> <Content>
<small> <small>
&copy; {new Date().getFullYear()}{' '} &copy; {new Date().getFullYear()}{' '}
<a href={social.site}>{siteCompany}</a> &mdash; All <a href={social.site}>{siteCompany}</a> &mdash; All Rights
Rights Reserved Reserved
</small> </small>
<FooterSocial social={social} /> <FooterSocial social={social} />

View File

@ -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`

View File

@ -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;
}
} }

View File

@ -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>
) )

View File

@ -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;

View File

@ -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 {

View File

@ -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>

View File

@ -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>

View File

@ -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 {

View File

@ -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>

View File

@ -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;
} }
} }

View File

@ -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] && (

View File

@ -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;
} }
} }

View File

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

View File

@ -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>
))} ))}

View File

@ -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

View File

@ -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&#39;t exist... You just hit a route that doesn&#39;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

View File

@ -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>

View File

@ -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;
} }
} }

View File

@ -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% {

View File

@ -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});
} }
} }

View File

@ -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;

View File

@ -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';

View File

@ -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>

View File

@ -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;
} }
} }

View File

@ -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>
) )
})} })}

View File

@ -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);
} }
} }

View File

@ -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) && (

View File

@ -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>{' '}

View File

@ -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;
} }
} }

View File

@ -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

View File

@ -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

View File

@ -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