proof of concept for nav sidebar

.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,4 @@
+---
+title: Architecture
+sidebar: concepts
+---

content/concepts/ecosystem.md

@@ -0,0 +1,4 @@
+---
+title: Ecosystem
+sidebar: concepts
+---

content/concepts/introduction.md

@@ -1,5 +1,6 @@
 ---
 title: Introduction
+sidebar: concepts
 ---
 
 What is Ocean Protocol?

content/concepts/security.md

@@ -0,0 +1,4 @@
+---
+title: Security
+sidebar: concepts
+---

content/concepts/terminology.md

@@ -1,5 +1,6 @@
 ---
 title: Terminology
+sidebar: concepts
 ---
 
 There is terminology specific to Ocean Protocol.
@@ -43,4 +44,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,4 @@
+---
+title: Reporting vulnerabilities
+sidebar: concepts
+---

gatsby-config.js

@@ -34,6 +34,7 @@ module.exports = {
                 ]
             }
         },
+        'gatsby-transformer-yaml',
         {
             resolve: 'gatsby-plugin-sass',
             options: {

package.json

@@ -20,6 +20,7 @@
     "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/Sidebar.jsx

@@ -0,0 +1,134 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'gatsby'
+import styles from './Sidebar.module.scss'
+
+function groupExpanded(items, pathname) {
+    var breakException = {}
+
+    try {
+        items.forEach(item => {
+            if (item.link === pathname) {
+                throw breakException
+            }
+        })
+    } catch (e) {
+        if (e !== breakException) {
+            throw e
+        } else {
+            return true
+        }
+    }
+    return false
+}
+
+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 <>{this.props.title}</>
+    }
+}
+
+const SidebarList = ({ items, location }) => (
+    <ul>
+        {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>
+                {sidebarfile.map((group, i) => (
+                    <div key={i}>
+                        {groupExpanded(group.items, location.pathname) ? (
+                            <>
+                                <h4>
+                                    {group.items[0].link ? (
+                                        <SidebarLink
+                                            link={group.items[0].link}
+                                            title={group.group}
+                                            linkClasses="midgrey link"
+                                        />
+                                    ) : (
+                                        group.group
+                                    )}
+                                </h4>
+                                <SidebarList
+                                    key={i}
+                                    items={group.items}
+                                    location={location}
+                                />
+                            </>
+                        ) : (
+                            <h4>
+                                {group.items[0].link ? (
+                                    <SidebarLink
+                                        link={group.items[0].link}
+                                        title={group.group}
+                                    />
+                                ) : (
+                                    group.group
+                                )}
+                            </h4>
+                        )}
+                    </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,7 @@
+.link {
+    color: black;
+}
+
+.active {
+    composes: link;
+}

src/data/sidebars/concepts.yml

@@ -0,0 +1,20 @@
+- group: Getting Started
+  items:
+    - title: What is Ocean Protocol?
+      link: /concepts/introduction/
+    - title: Terminology
+      link: /concepts/terminology/
+    - title: Ecosystem overview
+      link: /concepts/ecosystem/
+
+- 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/templates/Doc.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 import Layout from '../components/Layout'
+import Sidebar from '../components/Sidebar'
 
 export default class DocTemplate extends Component {
     static propTypes = {
@@ -14,6 +15,11 @@ export default class DocTemplate extends Component {
 
         return (
             <Layout location={this.props.location}>
+                <Sidebar
+                    location={this.props.location}
+                    sidebar={post.frontmatter.sidebar}
+                />
+
                 <h1>{post.frontmatter.title}</h1>
                 <div dangerouslySetInnerHTML={{ __html: post.html }} />
             </Layout>
@@ -34,6 +40,7 @@ export const pageQuery = graphql`
             html
             frontmatter {
                 title
+                sidebar
             }
         }
     }