From cb324911394caff5e3e69cc4380d00d3e23d520f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 8 Nov 2018 10:44:46 +0100 Subject: [PATCH] proof of concept for nav sidebar --- .editorconfig | 2 +- content/concepts/architecture.md | 4 + content/concepts/ecosystem.md | 4 + content/concepts/introduction.md | 1 + content/concepts/security.md | 4 + content/concepts/terminology.md | 2 +- content/concepts/vulnerabilities.md | 4 + gatsby-config.js | 1 + package.json | 1 + src/components/Sidebar.jsx | 134 ++++++++++++++++++ src/components/Sidebar.module.scss | 7 + src/data/sidebars/concepts.yml | 20 +++ src/data/sidebars/setup.yml | 8 ++ .../{sidebars.yml => sidebars/tutorials.yml} | 0 src/templates/Doc.jsx | 7 + 15 files changed, 197 insertions(+), 2 deletions(-) create mode 100644 content/concepts/architecture.md create mode 100644 content/concepts/ecosystem.md create mode 100644 content/concepts/security.md create mode 100644 content/concepts/vulnerabilities.md create mode 100644 src/components/Sidebar.jsx create mode 100644 src/components/Sidebar.module.scss create mode 100644 src/data/sidebars/concepts.yml create mode 100644 src/data/sidebars/setup.yml rename src/data/{sidebars.yml => sidebars/tutorials.yml} (100%) 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..c143375d --- /dev/null +++ b/content/concepts/architecture.md @@ -0,0 +1,4 @@ +--- +title: Architecture +sidebar: concepts +--- diff --git a/content/concepts/ecosystem.md b/content/concepts/ecosystem.md new file mode 100644 index 00000000..b4bf543d --- /dev/null +++ b/content/concepts/ecosystem.md @@ -0,0 +1,4 @@ +--- +title: Ecosystem +sidebar: concepts +--- diff --git a/content/concepts/introduction.md b/content/concepts/introduction.md index cda8255c..00e90997 100644 --- a/content/concepts/introduction.md +++ b/content/concepts/introduction.md @@ -1,5 +1,6 @@ --- title: Introduction +sidebar: concepts --- What is Ocean Protocol? diff --git a/content/concepts/security.md b/content/concepts/security.md new file mode 100644 index 00000000..d5bebeb6 --- /dev/null +++ b/content/concepts/security.md @@ -0,0 +1,4 @@ +--- +title: Security +sidebar: concepts +--- diff --git a/content/concepts/terminology.md b/content/concepts/terminology.md index b0382e7a..5d23a14c 100644 --- a/content/concepts/terminology.md +++ b/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. - diff --git a/content/concepts/vulnerabilities.md b/content/concepts/vulnerabilities.md new file mode 100644 index 00000000..ae29d92b --- /dev/null +++ b/content/concepts/vulnerabilities.md @@ -0,0 +1,4 @@ +--- +title: Reporting vulnerabilities +sidebar: concepts +--- diff --git a/gatsby-config.js b/gatsby-config.js index db72f0e4..6b220479 100755 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -34,6 +34,7 @@ module.exports = { ] } }, + 'gatsby-transformer-yaml', { resolve: 'gatsby-plugin-sass', options: { diff --git a/package.json b/package.json index c9dc0390..b2a79ab2 100755 --- a/package.json +++ b/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", diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx new file mode 100644 index 00000000..e5ea074c --- /dev/null +++ b/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 ( + + {title} + + ) + } else { + return ( + + {title} + + ) + } + } else { + return <>{this.props.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..bbdec653 --- /dev/null +++ b/src/components/Sidebar.module.scss @@ -0,0 +1,7 @@ +.link { + color: black; +} + +.active { + composes: link; +} diff --git a/src/data/sidebars/concepts.yml b/src/data/sidebars/concepts.yml new file mode 100644 index 00000000..2405dd8d --- /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: 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/ 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.yml b/src/data/sidebars/tutorials.yml similarity index 100% rename from src/data/sidebars.yml rename to src/data/sidebars/tutorials.yml diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx index b6770b8d..3c877ac7 100644 --- a/src/templates/Doc.jsx +++ b/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 ( + +

{post.frontmatter.title}

@@ -34,6 +40,7 @@ export const pageQuery = graphql` html frontmatter { title + sidebar } } }