diff --git a/.editorconfig b/.editorconfig index ab597856..85216e5f 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,5 +8,5 @@ indent_style = space insert_final_newline = true trim_trailing_whitespace = true -[*.json] +[*.{json,yml,yaml}] indent_size = 2 diff --git a/content/concepts/architecture.md b/content/concepts/architecture.md new file mode 100644 index 00000000..21252d12 --- /dev/null +++ b/content/concepts/architecture.md @@ -0,0 +1,6 @@ +--- +title: Architecture +description: The architecture of Ocean Protocol with all its components and how they work together. +--- + +![Ocean Protocol Components](../images/components.png 'Ocean Protocol Components') diff --git a/content/concepts/ecosystem.md b/content/concepts/ecosystem.md new file mode 100644 index 00000000..8f74a440 --- /dev/null +++ b/content/concepts/ecosystem.md @@ -0,0 +1,12 @@ +--- +title: Ecosystem +description: The Ocean Protocol network consists of various components. +--- + +Learn about all of them here. + +- 💧 keeper +- 🐋 aquarius +- brizo +- 🦄 pleuston +- 🦑 squid diff --git a/content/concepts/introduction.md b/content/concepts/introduction.md index cda8255c..3d71dac7 100644 --- a/content/concepts/introduction.md +++ b/content/concepts/introduction.md @@ -1,5 +1,6 @@ --- title: Introduction +description: Get up to speed with Ocean Protocol --- What is Ocean Protocol? diff --git a/content/concepts/security.md b/content/concepts/security.md new file mode 100644 index 00000000..77350687 --- /dev/null +++ b/content/concepts/security.md @@ -0,0 +1,3 @@ +--- +title: Security +--- diff --git a/content/concepts/terminology.md b/content/concepts/terminology.md index b0382e7a..746182fe 100644 --- a/content/concepts/terminology.md +++ b/content/concepts/terminology.md @@ -1,9 +1,8 @@ --- title: Terminology +description: Terminology specific to Ocean Protocol. --- -There is terminology specific to Ocean Protocol. - ## Asset A data set or data service. @@ -43,4 +42,3 @@ A set of software libraries to interact with Ocean network participants, includi ## Pleuston An example marketplace frontend implemented using React and Squid-JavaScript. - diff --git a/content/concepts/vulnerabilities.md b/content/concepts/vulnerabilities.md new file mode 100644 index 00000000..e1c53f98 --- /dev/null +++ b/content/concepts/vulnerabilities.md @@ -0,0 +1,3 @@ +--- +title: Reporting vulnerabilities +--- diff --git a/content/images/components.png b/content/images/components.png new file mode 100644 index 00000000..a23edb59 Binary files /dev/null and b/content/images/components.png differ diff --git a/gatsby-config.js b/gatsby-config.js index db72f0e4..fcfe2ae7 100755 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -26,14 +26,20 @@ module.exports = { { resolve: 'gatsby-remark-images', options: { - maxWidth: 600 + maxWidth: 756, + quality: 80, + withWebp: true, + linkImagesToOriginal: false, + showCaptions: true } }, + 'gatsby-remark-smartypants', 'gatsby-remark-prismjs', 'gatsby-remark-autolink-headers' ] } }, + 'gatsby-transformer-yaml', { resolve: 'gatsby-plugin-sass', options: { diff --git a/package.json b/package.json index c9dc0390..102ca927 100755 --- a/package.json +++ b/package.json @@ -17,9 +17,11 @@ "gatsby-remark-autolink-headers": "^2.0.10", "gatsby-remark-images": "^2.0.6", "gatsby-remark-prismjs": "^3.0.3", + "gatsby-remark-smartypants": "^2.0.6", "gatsby-source-filesystem": "^2.0.7", "gatsby-transformer-remark": "^2.1.11", "gatsby-transformer-sharp": "^2.1.8", + "gatsby-transformer-yaml": "^2.1.4", "intersection-observer": "^0.5.1", "node-sass": "^4.10.0", "prismjs": "^1.15.0", diff --git a/src/components/Content.jsx b/src/components/Content.jsx new file mode 100644 index 00000000..27dc7a2f --- /dev/null +++ b/src/components/Content.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styles from './Content.module.scss' + +const Content = ({ children }) => ( +
{children}
+) + +Content.propTypes = { + children: PropTypes.any.isRequired +} + +export default Content diff --git a/src/components/Layout.module.scss b/src/components/Content.module.scss old mode 100755 new mode 100644 similarity index 58% rename from src/components/Layout.module.scss rename to src/components/Content.module.scss index e8698931..30ffc405 --- a/src/components/Layout.module.scss +++ b/src/components/Content.module.scss @@ -1,7 +1,7 @@ @import 'variables'; -.main { +.content { padding: 0 $spacer; - max-width: 45rem; + max-width: $break-point--large; margin: auto; } diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss index 08042dbe..0d01ee5b 100644 --- a/src/components/Header.module.scss +++ b/src/components/Header.module.scss @@ -3,17 +3,18 @@ .header { background: $brand-black; width: 100%; - padding: $spacer / 2; + padding: $spacer / 2 0; padding-right: $spacer / 1.5; } .headerContent { - max-width: $break-point--huge; + max-width: $break-point--large; margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; align-items: center; + padding: 0 $spacer; } .headerLogo { diff --git a/src/components/HeaderSection.jsx b/src/components/HeaderSection.jsx new file mode 100644 index 00000000..536a05a0 --- /dev/null +++ b/src/components/HeaderSection.jsx @@ -0,0 +1,18 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Content from './Content' +import styles from './HeaderSection.module.scss' + +const HeaderSection = ({ title }) => ( +
+ +

{title}

+ +
+) + +HeaderSection.propTypes = { + title: PropTypes.string +} + +export default HeaderSection diff --git a/src/components/HeaderSection.module.scss b/src/components/HeaderSection.module.scss new file mode 100644 index 00000000..d8b06daf --- /dev/null +++ b/src/components/HeaderSection.module.scss @@ -0,0 +1,12 @@ +@import 'variables'; + +.headerSection { + padding: $spacer / 2 0; + border-bottom: .1rem solid $brand-grey-lighter; +} + +.headerSectionTitle { + margin: 0; + font-size: $font-size-large; + color: $brand-grey-light; +} diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 586e8beb..92bc88ed 100755 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -4,7 +4,6 @@ import Helmet from 'react-helmet' import { StaticQuery, graphql } from 'gatsby' import Header from './Header' -import styles from './Layout.module.scss' const Layout = ({ children }) => ( (
-
{children}
+
{children}
)} /> diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx new file mode 100644 index 00000000..c7677c05 --- /dev/null +++ b/src/components/Sidebar.jsx @@ -0,0 +1,101 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Link } from 'gatsby' +import styles from './Sidebar.module.scss' + +const SidebarLink = ({ link, title, linkClasses }) => { + if (link) { + if (link.match(/^\s?http(s?)/gi)) { + return ( + + {title} + + ) + } else { + return ( + + {title} + + ) + } + } else { + return title + } +} + +const SidebarList = ({ items, location }) => ( + +) + +export default class Sidebar extends Component { + static propTypes = { + sidebar: PropTypes.string, + location: PropTypes.object.isRequired + } + + static defaultProps = { + location: { pathname: `/` } + } + + render() { + const { sidebar, location } = this.props + + const sidebarfile = sidebar + ? require(`../data/sidebars/${sidebar}.yml`) // eslint-disable-line + : [] + + if (!sidebarfile) { + return null + } + + return ( + + ) + } +} + +SidebarLink.propTypes = { + link: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + linkClasses: PropTypes.string +} + +SidebarList.propTypes = { + items: PropTypes.array.isRequired, + location: PropTypes.object.isRequired +} diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss new file mode 100644 index 00000000..bd6d36a0 --- /dev/null +++ b/src/components/Sidebar.module.scss @@ -0,0 +1,55 @@ +@import 'variables'; + +.sidebar { + padding-top: $spacer / 2; +} + +.groupTitle { + font-size: $font-size-small; + font-family: $font-family-button; + text-transform: uppercase; + margin-top: $spacer; + margin-bottom: $spacer / 4; +} + +.groupTitleLink { + color: $brand-grey-light; + + &:hover, + &:focus { + transform: none; + color: $brand-grey-light; + } +} + +.list { + list-style: none; + margin: 0; + padding: 0; + border-left: 1px solid $brand-grey-lighter; + margin-left: $spacer / 2; + + li { + display: block; + } +} + +.link { + color: $brand-grey; + display: inline-block; + padding: $spacer / 6 $spacer / 2; + border-left: .1rem solid transparent; + margin-left: -.05rem; + + &:hover, + &:focus { + transform: none; + color: $brand-purple; + } +} + +.active { + composes: link; + color: $brand-purple; + border-left-color: $brand-purple; +} diff --git a/src/data/sidebars.yml b/src/data/sidebars.yml deleted file mode 100644 index e69de29b..00000000 diff --git a/src/data/sidebars/concepts.yml b/src/data/sidebars/concepts.yml new file mode 100644 index 00000000..92dce312 --- /dev/null +++ b/src/data/sidebars/concepts.yml @@ -0,0 +1,20 @@ +- group: Getting Started + items: + - title: What is Ocean Protocol? + link: /concepts/introduction/ + - title: Ecosystem overview + link: /concepts/ecosystem/ + - title: Terminology + link: /concepts/terminology/ + +- group: Architecture + items: + - title: Overview + link: /concepts/architecture/ + +- group: Security + items: + - title: Overview + link: /concepts/security/ + - title: Reporting vulnerabilities + link: /concepts/vulnerabilities/ diff --git a/src/data/sidebars/setup.yml b/src/data/sidebars/setup.yml new file mode 100644 index 00000000..39e5740d --- /dev/null +++ b/src/data/sidebars/setup.yml @@ -0,0 +1,8 @@ +- group: Setup Guides + items: + - title: Set Up a Keeper + link: /setup/keeper/ + - title: Set Up a Marketplace + link: /setup/marketplace/ + - title: Publish Data or Services + link: /setup/publisher/ diff --git a/src/data/sidebars/tutorials.yml b/src/data/sidebars/tutorials.yml new file mode 100644 index 00000000..175d2821 --- /dev/null +++ b/src/data/sidebars/tutorials.yml @@ -0,0 +1,4 @@ +- group: Tutorials + items: + - title: Jupyter Notebooks + link: /tutorials/jupyter/ diff --git a/src/pages/index.js b/src/pages/index.js index 40752c0e..00eaa03e 100755 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,7 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' -import { Link, graphql } from 'gatsby' +import { Link } from 'gatsby' import Layout from '../components/Layout' +import Content from '../components/Content' +// import styles from './index.module.scss' const SectionLink = ({ to, title, children }) => ( @@ -16,67 +18,27 @@ SectionLink.propTypes = { children: PropTypes.any } -const IndexPage = ({ data, location }) => { - const { edges } = data.allMarkdownRemark - - const DocsList = edges.map(({ node }) => { - const { title } = node.frontmatter - const { slug } = node.fields - - return ( -
  • - {title} -
    • - ) - }) - - return ( - -

    Hi there

    - +const IndexPage = ({ location }) => ( + + Understand the fundamentals of Ocean Protocol. - + Setting up the Ocean Protocol components. - + Browse tutorials for most common setup and development use-cases. - -

    Docs list

    - -
      {DocsList}
    -     - ) -} + +     +) IndexPage.propTypes = { - data: PropTypes.object.isRequired, location: PropTypes.object.isRequired } export default IndexPage - -export const indexQuery = graphql` - query { - allMarkdownRemark { - edges { - node { - id - html - excerpt(pruneLength: 250) - frontmatter { - title - } - fields { - slug - } - } - } - } - } -` diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss new file mode 100644 index 00000000..878d9373 --- /dev/null +++ b/src/pages/index.module.scss @@ -0,0 +1,2 @@ +@import 'variables'; + diff --git a/src/pages/setup.js b/src/pages/setup.js new file mode 100644 index 00000000..107ef468 --- /dev/null +++ b/src/pages/setup.js @@ -0,0 +1,57 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Link, graphql } from 'gatsby' +import Layout from '../components/Layout' +import HeaderSection from '../components/HeaderSection' +import Content from '../components/Content' + +const SetupIndexPage = ({ data, location }) => { + const { edges } = data.allMarkdownRemark + + const SetupList = edges.map(({ node }) => { + const { title } = node.frontmatter + const { slug } = node.fields + + return ( +
  • + {title} +
    • + ) + }) + + return ( + + + +
      {SetupList}
    +     +     + ) +} + +export default SetupIndexPage + +SetupIndexPage.propTypes = { + data: PropTypes.object.isRequired, + location: PropTypes.object.isRequired +} + +export const indexQuery = graphql` + query { + allMarkdownRemark(filter: { fields: { section: { eq: "setup" } } }) { + edges { + node { + id + html + excerpt(pruneLength: 250) + frontmatter { + title + } + fields { + slug + } + } + } + } + } +` diff --git a/src/pages/tutorials.js b/src/pages/tutorials.js new file mode 100644 index 00000000..1f32110d --- /dev/null +++ b/src/pages/tutorials.js @@ -0,0 +1,59 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Link, graphql } from 'gatsby' +import Layout from '../components/Layout' +import HeaderSection from '../components/HeaderSection' +import Content from '../components/Content' + +const TutorialsIndexPage = ({ data, location }) => { + const { edges } = data.allMarkdownRemark + + const TutorialsList = edges.map(({ node }) => { + const { title } = node.frontmatter + const { slug } = node.fields + + return ( +
  • + {title} +
    • + ) + }) + + return ( + + + +
      {TutorialsList}
    +     +     + ) +} + +export default TutorialsIndexPage + +TutorialsIndexPage.propTypes = { + data: PropTypes.object.isRequired, + location: PropTypes.object.isRequired +} + +export const indexQuery = graphql` + query { + allMarkdownRemark( + filter: { fields: { section: { eq: "tutorials" } } } + ) { + edges { + node { + id + html + excerpt(pruneLength: 250) + frontmatter { + title + } + fields { + slug + } + } + } + } + } +` diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 352d4c03..7c47e225 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -30,9 +30,9 @@ $font-size-mini: .65rem; $font-size-text: $font-size-base; $font-size-label: $font-size-base; $font-size-title: 1.4rem; -$font-size-h1: 3.4rem; -$font-size-h2: 2.7rem; -$font-size-h3: 2rem; +$font-size-h1: 3rem; +$font-size-h2: 2rem; +$font-size-h3: 1.7rem; $font-size-h4: 1.5rem; $font-size-h5: 1.125rem; diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx index b6770b8d..9881e183 100644 --- a/src/templates/Doc.jsx +++ b/src/templates/Doc.jsx @@ -2,6 +2,10 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { graphql } from 'gatsby' import Layout from '../components/Layout' +import Content from '../components/Content' +import HeaderSection from '../components/HeaderSection' +import Sidebar from '../components/Sidebar' +import styles from './Doc.module.scss' export default class DocTemplate extends Component { static propTypes = { @@ -10,12 +14,35 @@ export default class DocTemplate extends Component { } render() { + const { location } = this.props const post = this.props.data.markdownRemark + const { section } = post.fields + const { title, description } = post.frontmatter return ( - -

    {post.frontmatter.title}

    -
    + + + +
    + + +
    +
    +

    {title}

    + {description && ( +

    {description}

    + )} +
    + +
    +
    +
    +     ) } @@ -34,6 +61,10 @@ export const pageQuery = graphql` html frontmatter { title + description + } + fields { + section } } } diff --git a/src/templates/Doc.module.scss b/src/templates/Doc.module.scss new file mode 100644 index 00000000..60381650 --- /dev/null +++ b/src/templates/Doc.module.scss @@ -0,0 +1,40 @@ +@import 'variables'; + +.wrapper { + @media (min-width: $break-point--medium) { + display: flex; + justify-content: space-between; + } +} + +.sidebar { + flex: 0 0 25%; +} + +.main { + flex: 0 0 70%; +} + +.header { + margin-top: $spacer; + margin-bottom: $spacer * $line-height; +} + +.title { + font-size: $font-size-h1; + margin-top: 0; + margin-bottom: $spacer / $line-height; +} + +.lead { + font-size: $font-size-large; +} + +.docContent { + figcaption { + font-size: $font-size-small; + text-align: center; + color: $brand-grey-light; + margin-top: $spacer / 2; + } +}