nav concept

.editorconfig

@@ -8,5 +8,5 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.json]
+[*.{json,yml,yaml}]
 indent_size = 2

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

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

content/concepts/introduction.md

@@ -1,5 +1,6 @@
 ---
 title: Introduction
+description: Get up to speed with Ocean Protocol
 ---
 
 What is Ocean Protocol?

content/concepts/security.md

@@ -0,0 +1,3 @@
+---
+title: Security
+---

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

content/concepts/vulnerabilities.md

@@ -0,0 +1,3 @@
+---
+title: Reporting vulnerabilities
+---

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

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

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 }) => (
+    <div className={styles.content}>{children}</div>
+)
+
+Content.propTypes = {
+    children: PropTypes.any.isRequired
+}
+
+export default Content

src/components/Layout.module.scss → 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;
 }

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 {

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 }) => (
+    <header className={styles.headerSection}>
+        <Content>
+            <h1 className={styles.headerSectionTitle}>{title}</h1>
+        </Content>
+    </header>
+)
+
+HeaderSection.propTypes = {
+    title: PropTypes.string
+}
+
+export default HeaderSection

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

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 }) => (
     <StaticQuery
@@ -29,7 +28,7 @@ const Layout = ({ children }) => (
                     <html lang="en" />
                 </Helmet>
                 <Header siteTitle={data.site.siteMetadata.title} />
-                <main className={styles.main}>{children}</main>
+                <section>{children}</section>
             </>
         )}
     />

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 (
+                <a href={link} target="_blank" rel="noopener noreferrer">
+                    {title}
+                </a>
+            )
+        } else {
+            return (
+                <Link to={link} className={linkClasses}>
+                    {title}
+                </Link>
+            )
+        }
+    } else {
+        return title
+    }
+}
+
+const SidebarList = ({ items, location }) => (
+    <ul className={styles.list}>
+        {items.map((item, j) => (
+            <li key={j}>
+                <SidebarLink
+                    link={item.link}
+                    title={item.title}
+                    linkClasses={
+                        item.link === location.pathname
+                            ? styles.active
+                            : styles.link
+                    }
+                />
+            </li>
+        ))}
+    </ul>
+)
+
+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 (
+            <nav className={styles.sidebar}>
+                {sidebarfile.map((group, i) => (
+                    <div key={i}>
+                        <h4 className={styles.groupTitle}>
+                            {group.items[0].link ? (
+                                <SidebarLink
+                                    link={group.items[0].link}
+                                    title={group.group}
+                                    linkClasses={styles.groupTitleLink}
+                                />
+                            ) : (
+                                group.group
+                            )}
+                        </h4>
+                        <SidebarList
+                            key={i}
+                            items={group.items}
+                            location={location}
+                        />
+                    </div>
+                ))}
+            </nav>
+        )
+    }
+}
+
+SidebarLink.propTypes = {
+    link: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    linkClasses: PropTypes.string
+}
+
+SidebarList.propTypes = {
+    items: PropTypes.array.isRequired,
+    location: PropTypes.object.isRequired
+}

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

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/

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/

src/data/sidebars/tutorials.yml

@@ -0,0 +1,4 @@
+- group: Tutorials
+  items:
+    - title: Jupyter Notebooks
+      link: /tutorials/jupyter/