oceanprotocol
/
docs
mirror of https://github.com/oceanprotocol/docs.git
1
0
Fork 0
Code Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.editorconfig
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
package-lock.json
yarn.lock
yarn-error.log
.cache

3
.prettierrc
View File

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

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

4
README.md
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:
- ESLint with [eslint-config-oceanprotocol](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
- Stylelint with [stylelint-config-bigchaindb](https://github.com/bigchaindb/stylelint-config-bigchaindb)
- [markdownlint](https://github.com/DavidAnson/markdownlint)
- [Prettier](https://prettier.io)
@ -93,7 +92,6 @@ If you use VS Code as your editor, you can install those extensions to get linti
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [stylelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint)
- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
## Deployment
@ -125,7 +123,7 @@ Requires authorization against AWS with [one of the various ways](https://docs.a
## License
```text
Copyright 2019 Ocean Protocol Foundation Ltd.
Copyright 2020 Ocean Protocol Foundation Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.

9
content/setup/compute-to-data.md
View File

@ -3,10 +3,8 @@ title: Set Up a Compute-to-Data Environment
description: Set Up a Compute-to-Data environment.
---
## Requirements
First, create a folder with the following structure:
```text
@ -38,7 +36,6 @@ Then you need the following parts:
## Customize your Operator Service deployment
The following resources need attention:
| Resource | Variable | Description |
@ -66,7 +63,6 @@ For AWS , please make sure that your class allocates volumes in the same region
We created our own 'standard' class in AWS:
```bash
kubectl get storageclass standard -o yaml
```
@ -107,7 +103,6 @@ kubectl create ns ocean-operator
kubectl create ns ocean-compute
```
## Deploy Operator Service
```bash
@ -121,7 +116,6 @@ kubectl apply -f /ocean/operator-service/role_binding.yaml
kubectl apply -f /ocean/operator-service/service_account.yaml
```
## Deploy Operator Engine
```bash
@ -134,14 +128,12 @@ kubectl apply -f /ocean/operator-engine/workflow-crd.yaml
kubectl create -f /ocean/operator-service/postgres-configmap.yaml
```
## Expose Operator Service
```bash
kubectl expose deployment operator-api --namespace=ocean-operator --port=8050
```
Run a port forward or create your ingress service (not covered here):
```bash
@ -156,7 +148,6 @@ If your cluster is running on example.com:
curl -X POST "http://example.com:8050/api/v1/operator/pgsqlinit" -H "accept: application/json"
```
## Update Brizo
Update Brizo by adding or updating the `OPERATOR_SERVICE_URL` env in `/ocean/barge/compose-files/brizo.yaml`

2
external/dev-ocean vendored

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

5
gatsby-config.js
View File

@ -120,10 +120,7 @@ module.exports = {
{
resolve: 'gatsby-plugin-sass',
options: {
includePaths: [
`${__dirname}/node_modules`,
`${__dirname}/src/styles`
]
includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`]
}
},
'gatsby-transformer-sharp',

27
gatsby-node.js
View File

@ -59,9 +59,7 @@ exports.createPages = ({ graphql, actions }) => {
}
devOceanDocs: allMarkdownRemark(
filter: {
fileAbsolutePath: { regex: "/dev-ocean/doc/" }
}
filter: { fileAbsolutePath: { regex: "/dev-ocean/doc/" } }
) {
edges {
node {
@ -80,26 +78,17 @@ exports.createPages = ({ graphql, actions }) => {
}
squidJs: github {
repository(
name: "squid-js"
owner: "oceanprotocol"
) {
repository(name: "squid-js", owner: "oceanprotocol") {
name
releases(
first: 30
orderBy: {
field: CREATED_AT
direction: DESC
}
orderBy: { field: CREATED_AT, direction: DESC }
) {
edges {
node {
isPrerelease
isDraft
releaseAssets(
first: 1
name: "squid-js.json"
) {
releaseAssets(first: 1, name: "squid-js.json") {
edges {
node {
name
@ -201,9 +190,7 @@ exports.createPages = ({ graphql, actions }) => {
const createTypeDocPage = async (createPage, name, downloadUrl) => {
try {
const typedoc = await fetch(downloadUrl)
const typedocTemplate = path.resolve(
'./src/templates/Typedoc/index.jsx'
)
const typedocTemplate = path.resolve('./src/templates/Typedoc/index.jsx')
const slug = `/references/${name}/`
createPage({
@ -315,9 +302,7 @@ const createSwaggerPages = async (createPage) => {
const petStoreSlug = '/references/petstore/'
try {
const client = await Swagger(
`http://petstore.swagger.io/v2/swagger.json`
)
const client = await Swagger(`http://petstore.swagger.io/v2/swagger.json`)
createPage({
path: petStoreSlug,

25009
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

80
package.json
View File

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

6
src/components/DocContent.module.scss
View File

@ -32,7 +32,7 @@
blockquote {
padding: $spacer / 2;
background: lighten($brand-grey-light, 36%);
border-left: .25rem solid $brand-grey-light;
border-left: 0.25rem solid $brand-grey-light;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
@ -64,7 +64,7 @@
:global(.footnote-ref) {
font-size: $font-size-mini;
font-weight: $font-weight-bold;
padding-left: .2rem;
padding-right: .2rem;
padding-left: 0.2rem;
padding-right: 0.2rem;
display: inline-block;
}

4
src/components/DocFooter.jsx
View File

@ -28,9 +28,7 @@ export default function DocFooter({ post, url, externalName }) {
<a href={url} className={post && !post.html ? styles.active : null}>
<Pencil /> Edit this page on GitHub
{externalName && (
<span className={styles.externalRepoName}>
{externalName}
</span>
<span className={styles.externalRepoName}>{externalName}</span>
)}
</a>
</footer>

4
src/components/DocHeader.jsx
View File

@ -13,9 +13,7 @@ const DocHeader = ({ title, description, prepend }) => {
<h1 className={styles.title}>
{title} {prepend && prepend}
</h1>
{description && (
<div className={styles.lead}>{descriptionHtml}</div>
)}
{description && <div className={styles.lead}>{descriptionHtml}</div>}
</header>
)
}

4
src/components/Footer.jsx
View File

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

2
src/components/Header.jsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { Link, StaticQuery, graphql } from 'gatsby'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
import styles from './Header.module.scss'
const query = graphql`

14
src/components/Header.module.scss
View File

@ -1,8 +1,8 @@
@import 'variables';
.header {
background: $brand-black
url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center -6rem;
background: $brand-grey-dimmed url('@oceanprotocol/art/waves/waves.svg')
no-repeat center -3rem;
background-size: cover;
width: 100%;
padding: $spacer / 2 0;
@ -29,7 +29,6 @@
.headerLogoImage {
width: 4rem;
height: 4rem;
fill: #fff;
margin: 0;
}
@ -68,7 +67,7 @@
&::-webkit-scrollbar {
width: 3px;
height: 3px;
transition: opacity .2s ease-out;
transition: opacity 0.2s ease-out;
}
}
@ -76,14 +75,9 @@
display: inline-block;
margin: 0 $spacer / 2;
font-family: $font-family-button;
color: $brand-grey-lighter;
color: $brand-grey;
&:last-child {
margin-right: 0;
}
&:hover,
&:focus {
color: $brand-white;
}
}

6
src/components/HeaderHome.jsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
import Content from '../components/Content'
import styles from './HeaderHome.module.scss'
@ -24,9 +24,7 @@ const HeaderHome = () => (
<Content>
<Logo className={styles.headerLogo} />
<h1 className={styles.headerTitle}>{siteTitle}</h1>
<p className={styles.headerDescription}>
{siteDescription}
</p>
<p className={styles.headerDescription}>{siteDescription}</p>
</Content>
</header>
)

12
src/components/HeaderHome.module.scss
View File

@ -2,14 +2,12 @@
@import 'animations';
.header {
background: $brand-black
url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center
4rem;
background: $brand-grey-dimmed url('@oceanprotocol/art/waves/waves.svg')
no-repeat center 10rem;
background-size: cover;
width: 100%;
padding: $spacer * 2 0;
min-height: 30rem;
color: $brand-white;
text-align: center;
display: flex;
justify-content: center;
@ -19,7 +17,7 @@
.headerLogo,
.headerTitle,
.headerDescription {
animation: fadeInUp .6s ease-out backwards;
animation: fadeInUp 0.6s ease-out backwards;
}
.headerLogo {
@ -30,7 +28,7 @@
.headerTitle {
margin-bottom: $spacer;
font-size: $font-size-h2;
animation-delay: .2s;
animation-delay: 0.2s;
@media (min-width: $break-point--small) {
font-size: $font-size-h1;
@ -42,7 +40,7 @@
max-width: $break-point--small;
margin-left: auto;
margin-right: auto;
animation-delay: .4s;
animation-delay: 0.4s;
@media (min-width: $break-point--small) {
font-size: $font-size-large;

2
src/components/HeaderSection.module.scss
View File

@ -1,7 +1,7 @@
@import 'variables';
.headerSection {
border-bottom: .1rem solid $brand-grey-lighter;
border-bottom: 0.1rem solid $brand-grey-lighter;
}
.headerSectionTitle {

8
src/components/QuickRun.jsx
View File

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

6
src/components/Repositories/RepositoryList.jsx
View File

@ -11,11 +11,7 @@ const RepositoryList = ({ repositories }) => (
<div className={styles.repositoryList}>
{node.items.map((item) => (
<Repository
key={item.name}
name={item.name}
links={item.links}
/>
<Repository key={item.name} name={item.name} links={item.links} />
))}
</div>
</div>

2
src/components/Repositories/RepositoryList.module.scss
View File

@ -48,7 +48,7 @@
opacity: 0;
width: 7px;
height: 7px;
transition: opacity .2s ease-out;
transition: opacity 0.2s ease-out;
}
&:hover {

16
src/components/Repositories/index.jsx
View File

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

4
src/components/Repository/Numbers.module.scss
View File

@ -23,13 +23,13 @@
}
span {
margin-left: -.15rem;
margin-left: -0.15rem;
}
}
svg {
display: inline-block;
fill: $brand-grey-light;
margin-bottom: -.1rem;
margin-bottom: -0.1rem;
}
}

4
src/components/Repository/Title.jsx
View File

@ -11,9 +11,7 @@ export default function Title({ name, isFork, parent, releases, url }) {
{isFork && <Forks />}
{name}
{isFork && (
<span className={styles.forkLine}>
{parent.nameWithOwner}
</span>
<span className={styles.forkLine}>{parent.nameWithOwner}</span>
)}
</a>
{releases.edges[0] && (

4
src/components/Repository/Title.module.scss
View File

@ -24,8 +24,8 @@
display: inline-block;
fill: $brand-grey-light;
margin-right: $spacer / 8;
margin-left: -.2rem;
margin-bottom: -.2rem;
margin-left: -0.2rem;
margin-bottom: -0.2rem;
}
}

3
src/components/Repository/index.jsx
View File

@ -69,8 +69,7 @@ const Repository = ({ name, links, readme }) => (
<StaticQuery
query={queryGithub}
render={(data) => {
const repositoriesGitHub =
data.github.organization.repositories.edges
const repositoriesGitHub = data.github.organization.repositories.edges
const repositoriesYaml = data.allRepositoriesYaml.edges
// just iterate over all repos until we have a name match,

21
src/components/Sidebar.jsx
View File

@ -47,9 +47,7 @@ const SidebarList = ({ items, location, toc, tocComponent }) => (
link={item.link}
title={item.title}
linkClasses={
item.link === location.pathname
? styles.active
: styles.link
item.link === location.pathname ? styles.active : styles.link
}
/>
</li>
@ -87,12 +85,7 @@ SidebarGroupTitle.propTypes = {
const SidebarGroup = ({ i, group, location, ...props }) => (
<>
<SidebarGroupTitle group={group} />
<SidebarList
key={i}
items={group.items}
location={location}
{...props}
/>
<SidebarList key={i} items={group.items} location={location} {...props} />
</>
)
@ -129,9 +122,7 @@ export default class Sidebar extends Component {
{sidebarfile.map((group, i) => (
<div key={i}>
{collapsed ? (
group.items.some(
(item) => item.link === location.pathname
) ? (
group.items.some((item) => item.link === location.pathname) ? (
<SidebarGroup
i={i}
group={group}
@ -143,11 +134,7 @@ export default class Sidebar extends Component {
<SidebarGroupTitle group={group} />
)
) : (
<SidebarGroup
i={i}
group={group}
location={location}
/>
<SidebarGroup i={i} group={group} location={location} />
)}
</div>
))}

6
src/components/Sidebar.module.scss
View File

@ -72,8 +72,8 @@
color: $brand-grey;
display: inline-block;
padding: $spacer / 6 $spacer / 2;
border-left: .1rem solid transparent;
margin-left: -.05rem;
border-left: 0.1rem solid transparent;
margin-left: -0.05rem;
&:hover,
&:focus {
@ -121,7 +121,7 @@
}
[data-deprecated='true'] code {
opacity: .5;
opacity: 0.5;
}
}

BIN
src/images/share.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 42 KiB

15
src/pages/404.jsx
View File

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

6
src/pages/index.jsx
View File

@ -63,11 +63,7 @@ const IndexPage = ({ data, location }) => (
<ul className={styles.sections}>
{data.allSectionsYaml.edges.map(({ node }) => (
<li key={node.title} className={styles.section}>
<SectionLink
to={node.link}
title={node.title}
color={node.color}
>
<SectionLink to={node.link} title={node.title} color={node.color}>
{node.description}
</SectionLink>
</li>

16
src/pages/index.module.scss
View File

@ -16,7 +16,7 @@
.section {
margin-top: $spacer;
animation: fadeInUp .6s ease-out backwards;
animation: fadeInUp 0.6s ease-out backwards;
&:before {
display: none;
@ -25,14 +25,14 @@
@media (min-width: $break-point--medium) {
flex: 0 0 31%;
}
animation-delay: .4s;
animation-delay: 0.4s;
&:nth-child(2) {
animation-delay: .6s;
animation-delay: 0.6s;
}
&:nth-child(3) {
animation-delay: .8s;
animation-delay: 0.8s;
}
&:last-child {
@ -46,17 +46,17 @@
flex-wrap: wrap;
padding: $spacer $spacer * $line-height;
border-radius: $border-radius;
box-shadow: rgba($brand-black, .1) 0 9px 18px;
box-shadow: rgba($brand-black, 0.1) 0 9px 18px;
color: $brand-grey;
background: $brand-white;
height: 100%;
&:hover,
&:focus {
box-shadow: rgba($brand-black, .1) 0 12px 20px;
box-shadow: rgba($brand-black, 0.1) 0 12px 20px;
svg {
transform: translate3d(.2rem, 0, 0);
transform: translate3d(0.2rem, 0, 0);
}
}
}
@ -114,6 +114,6 @@
width: $font-size-small;
height: $font-size-small;
fill: $brand-grey-light;
transition: transform .2s ease-out;
transition: transform 0.2s ease-out;
}
}

4
src/styles/_animations.scss
View File

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

18
src/styles/_code.scss
View File

@ -24,8 +24,8 @@ samp {
:not(pre) > code {
display: inline-block;
padding-left: .3rem;
padding-right: .3rem;
padding-left: 0.3rem;
padding-right: 0.3rem;
}
a > code {
@ -65,9 +65,9 @@ pre[data-language]:before {
color: $brand-grey;
font-size: $font-size-mini;
font-family: $font-family-monospace;
letter-spacing: .05em;
letter-spacing: 0.05em;
line-height: 1;
padding: .25rem .5rem;
padding: 0.25rem 0.5rem;
position: absolute;
right: $spacer / 2;
top: 0;
@ -87,15 +87,15 @@ pre[data-language='bash'] {
}
.vscode-highlight-line:only-child {
padding-left: .5rem;
padding-left: 0.5rem;
display: block;
&:before {
content: '$';
opacity: .5;
opacity: 0.5;
display: inline-block;
margin-left: -.5rem;
margin-right: .5rem;
margin-left: -0.5rem;
margin-right: 0.5rem;
}
}
}
@ -149,7 +149,7 @@ pre[data-language='toml']:before {
margin-right: -($spacer / 1.5);
padding-left: $spacer / 1.85;
padding-right: $spacer / 1.5;
border-left: .25rem solid $brand-grey-light;
border-left: 0.25rem solid $brand-grey-light;
width: calc(100% + #{$spacer * 1.5});
}
}

9
src/styles/_variables.scss
View File

@ -10,6 +10,7 @@ $brand-grey: #41474e;
$brand-grey-light: #8b98a9;
$brand-grey-dark: #303030;
$brand-grey-lighter: #e2e2e2;
$brand-grey-dimmed: #f7f7f7;
$green: #5fb359;
$red: #d80606;
@ -35,8 +36,8 @@ $font-family-monospace: 'Fira Code', 'Fira Mono', menlo, monaco, consolas,
$font-size-root: 15px;
$font-size-base: 1rem;
$font-size-large: 1.2rem;
$font-size-small: .85rem;
$font-size-mini: .65rem;
$font-size-small: 0.85rem;
$font-size-mini: 0.65rem;
$font-size-text: $font-size-base;
$font-size-label: $font-size-base;
$font-size-title: 1.4rem;
@ -53,7 +54,7 @@ $line-height: 1.6;
// Sizes
$spacer: 2rem;
$page-frame: .75rem;
$page-frame: 0.75rem;
$break-point--small: 640px;
$break-point--medium: 860px;
@ -61,6 +62,6 @@ $break-point--large: 1140px;
$break-point--huge: 1400px;
$brand-border-width: 1px;
$border-radius: .2rem;
$border-radius: 0.2rem;
$narrowWidth: 35rem;

14
src/styles/global.scss
View File

@ -25,22 +25,18 @@ body {
-moz-osx-font-smoothing: grayscale;
position: relative;
margin: 0;
@media screen and (min-width: $break-point--small) {
padding: $page-frame;
}
}
a {
text-decoration: none;
color: $brand-pink;
transition: .2s ease-out;
transition: 0.2s ease-out;
&:hover,
&:focus {
color: darken($brand-pink, 15%);
text-decoration: none;
transform: translate3d(0, -.1rem, 0);
transform: translate3d(0, -0.1rem, 0);
}
&:active {
@ -191,7 +187,7 @@ picture {
hr {
margin: $spacer 0;
border: 0;
border-bottom: .1rem solid $brand-grey-lighter;
border-bottom: 0.1rem solid $brand-grey-lighter;
}
// Quotes
@ -215,7 +211,7 @@ blockquote > p {
blockquote {
margin: 0 0 $spacer;
padding-left: $spacer / 2;
border-left: .2rem solid $brand-grey-lighter;
border-left: 0.2rem solid $brand-grey-lighter;
@media screen and (min-width: $break-point--small) {
padding-left: $spacer / $line-height;
@ -277,7 +273,7 @@ table {
/////////////////////////////////////
.anchor {
margin-top: .6rem;
margin-top: 0.6rem;
}
@import 'code';

12
src/templates/Doc.jsx
View File

@ -74,9 +74,7 @@ export default class DocTemplate extends Component {
/>
<Layout location={location}>
<HeaderSection
title={section ? this.sectionTitle : title}
/>
<HeaderSection title={section ? this.sectionTitle : title} />
<Content>
{section ? (
@ -88,9 +86,7 @@ export default class DocTemplate extends Component {
collapsed={isApiSection}
toc={
isApiSection &&
!location.pathname.includes(
'/references/introduction/'
)
!location.pathname.includes('/references/introduction/')
}
tableOfContents={tableOfContents}
/>
@ -98,9 +94,7 @@ export default class DocTemplate extends Component {
<DocMain
title={title}
description={description}
tableOfContents={
!isApiSection && tableOfContents
}
tableOfContents={!isApiSection && tableOfContents}
post={post}
/>
</main>

2
src/templates/Doc.module.scss
View File

@ -59,7 +59,7 @@
font-family: $font-family-base;
font-weight: $font-weight-base;
display: inline-block;
margin-left: .5rem;
margin-left: 0.5rem;
}
}

4
src/templates/Swagger/Paths.jsx
View File

@ -77,9 +77,7 @@ const Parameters = ({ parameters }) => (
<p>{description}</p>
{schema && (
<ParameterExample properties={schema.properties} />
)}
{schema && <ParameterExample properties={schema.properties} />}
</div>
)
})}

8
src/templates/Swagger/Paths.module.scss
View File

@ -11,19 +11,19 @@
text-transform: uppercase;
&[data-type='get'] {
background: rgba($green, .4);
background: rgba($green, 0.4);
}
&[data-type='post'] {
background: rgba($brand-blue, .4);
background: rgba($brand-blue, 0.4);
}
&[data-type='put'] {
background: rgba($brand-violet, .3);
background: rgba($brand-violet, 0.3);
}
&[data-type='delete'] {
background: rgba($red, .4);
background: rgba($red, 0.4);
}
}

5
src/templates/Swagger/index.jsx
View File

@ -113,10 +113,7 @@ export default class ApiSwaggerTemplate extends Component {
/>
{(contact || license) && (
<SwaggerMeta
contact={contact}
license={license}
/>
<SwaggerMeta contact={contact} license={license} />
)}
{(host || basePath) && (

43
src/templates/Typedoc/Entities.jsx
View File

@ -19,11 +19,7 @@ const Type = ({ type }) => {
<div className={styles.type}>
<span>
{isInternal && (
<Scroll
type="id"
element={`${name && slugify(name)}`}
offset={-20}
>
<Scroll type="id" element={`${name && slugify(name)}`} offset={-20}>
{type.name}
</Scroll>
)}
@ -36,11 +32,7 @@ const Type = ({ type }) => {
<span>
{typeArguments.map((typeArgument, i) => (
<span key={shortid.generate()}>
{i !== 0 && (
<span className={styles.typeSymbol}>
,{' '}
</span>
)}
{i !== 0 && <span className={styles.typeSymbol}>, </span>}
<Type type={typeArgument} />
</span>
))}
@ -83,14 +75,10 @@ const MethodDetails = ({ property }) => {
{parameters.map((parameter) => {
const { name, type, flags, comment } = parameter
const { isOptional } = flags
const description =
comment && (comment.text || comment.shortText)
const description = comment && (comment.text || comment.shortText)
return (
<div
className={styles.parameters}
key={shortid.generate()}
>
<div className={styles.parameters} key={shortid.generate()}>
<h5>
<code>{name}</code>
{isOptional && (
@ -127,14 +115,7 @@ MethodDetails.propTypes = {
}
const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
const {
name,
kindString,
flags,
signatures,
sources,
decorators
} = property
const { name, kindString, flags, signatures, sources, decorators } = property
const { isPublic, isStatic } = flags
const signature = signatures && signatures[0]
const comment = (signature && signature.comment) || property.comment
@ -145,8 +126,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
let deprecatedUse, deprecatedSlug
if (deprecation) {
deprecatedUse = deprecation.arguments.alternative.replace(/('|")/g, '')
deprecatedSlug =
deprecatedUse && slugify(deprecatedUse.replace('.', '-'))
deprecatedSlug = deprecatedUse && slugify(deprecatedUse.replace('.', '-'))
}
const sourceLink = `${sourceUrl}${fileName}#L${line}`
@ -160,10 +140,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
>
<h3 className={styles.propertyName}>{name}</h3>
<div
className={styles.propertyType}
data-type={kindString.toLowerCase()}
>
<div className={styles.propertyType} data-type={kindString.toLowerCase()}>
{kindString}
</div>
@ -184,11 +161,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
<div className={styles.deprecation}>
<strong>Deprecated</strong>: use{' '}
<code>
<Scroll
type="id"
element={`${deprecatedSlug}`}
offset={-20}
>
<Scroll type="id" element={`${deprecatedSlug}`} offset={-20}>
{deprecatedUse}
</Scroll>
</code>{' '}

18
src/templates/Typedoc/Entities.module.scss
View File

@ -21,7 +21,7 @@
&[data-deprecated='true'] {
> *:not(.deprecation) {
opacity: .5;
opacity: 0.5;
}
code {
@ -64,19 +64,19 @@
.propertyType {
&[data-type='method'] {
background: rgba($green, .3);
background: rgba($green, 0.3);
}
&[data-type='property'] {
background: rgba($yellow, .3);
background: rgba($yellow, 0.3);
}
}
.propertyModifier {
background: rgba($red, .2);
background: rgba($red, 0.2);
&[data-secondary] {
background: rgba($brand-blue, .2);
background: rgba($brand-blue, 0.2);
}
}
@ -120,13 +120,13 @@
a {
&:hover {
opacity: .6;
opacity: 0.6;
}
}
}
.typeSymbol {
opacity: .6;
opacity: 0.6;
}
.subHeading {
@ -149,12 +149,12 @@
font-size: $font-size-small;
margin-bottom: $spacer / 4;
margin-right: $spacer / 4;
margin-left: -(.2rem);
margin-left: -(0.2rem);
display: inline-block;
}
code {
padding: .2rem;
padding: 0.2rem;
}
}

6
src/templates/Typedoc/Toc.jsx
View File

@ -46,11 +46,7 @@ export default class Toc extends PureComponent {
return (
<li key={shortid.generate()}>
<Scroll
type="id"
element={`${name && slugify(name)}`}
offset={-20}
>
<Scroll type="id" element={`${name && slugify(name)}`} offset={-20}>
<code>{name}</code>
</Scroll>
<Scrollspy

10
src/templates/Typedoc/index.jsx
View File

@ -66,20 +66,14 @@ export default class TypedocTemplate extends Component {
sidebar="references"
collapsed
toc
tocComponent={
<Toc data={this.typedocCleaned} />
}
tocComponent={<Toc data={this.typedocCleaned} />}
/>
</aside>
<article className={stylesDoc.main}>
<DocHeader
title={title}
description={description}
prepend={
<span className={stylesDoc.version}>
{version}
</span>
}
prepend={<span className={stylesDoc.version}>{version}</span>}
/>
<Entities

8
src/templates/Typedoc/utils.js
View File

@ -5,9 +5,7 @@ export const cleanTypedocData = (data, useClasses) => {
.map((node) => {
const child =
node.children &&
node.children.filter(
({ kindString }) => kindString === 'Class'
)[0]
node.children.filter(({ kindString }) => kindString === 'Class')[0]
return {
...node,
@ -21,9 +19,7 @@ export const cleanTypedocData = (data, useClasses) => {
.map((node) => ({
...node,
children:
node &&
node.children &&
node.children.sort((a, b) => a.id - b.id)
node && node.children && node.children.sort((a, b) => a.id - b.id)
}))
return cleanData