From 0c7f9c0c3b376d7325fdf9723e489c3685bd17fe Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 8 Nov 2018 12:33:20 +0100 Subject: [PATCH] navigation concept --- src/components/Content.jsx | 13 ++++ ...Layout.module.scss => Content.module.scss} | 4 +- src/components/Header.module.scss | 5 +- src/components/HeaderSection.jsx | 18 ++++++ src/components/HeaderSection.module.scss | 12 ++++ src/components/Layout.jsx | 3 +- src/components/Sidebar.jsx | 9 +-- src/components/Sidebar.module.scss | 26 +++++++- src/data/sidebars/tutorials.yml | 5 +- src/pages/index.js | 56 +++--------------- src/pages/index.module.scss | 2 + src/pages/setup.js | 57 ++++++++++++++++++ src/pages/tutorials.js | 59 +++++++++++++++++++ src/templates/Doc.jsx | 20 ++++++- src/templates/Doc.module.scss | 16 +++++ 15 files changed, 243 insertions(+), 62 deletions(-) create mode 100644 src/components/Content.jsx rename src/components/{Layout.module.scss => Content.module.scss} (58%) mode change 100755 => 100644 create mode 100644 src/components/HeaderSection.jsx create mode 100644 src/components/HeaderSection.module.scss create mode 100644 src/pages/index.module.scss create mode 100644 src/pages/setup.js create mode 100644 src/pages/tutorials.js create mode 100644 src/templates/Doc.module.scss 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..54d15814 --- /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-h4; + 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 index ed6429c1..b6da1054 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -43,7 +43,7 @@ const SidebarLink = ({ link, title, linkClasses }) => { } const SidebarList = ({ items, location }) => ( -
    +
      {items.map((item, j) => (
    • {groupExpanded(group.items, location.pathname) ? ( <> -

      +

      {group.items[0].link ? ( ) : ( group.group @@ -105,11 +105,12 @@ export default class Sidebar extends Component { /> ) : ( -

      +

      {group.items[0].link ? ( ) : ( group.group diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss index bbdec653..6c894762 100644 --- a/src/components/Sidebar.module.scss +++ b/src/components/Sidebar.module.scss @@ -1,7 +1,31 @@ +@import 'variables'; + +.groupTitle { + font-size: $font-size-large; + margin-bottom: $spacer / 2; +} + +.groupTitleLink { + color: $brand-grey-light; +} + +.list { + list-style: none; + margin: 0; + padding: 0; + + li { + display: block; + } +} + .link { - color: black; + color: $brand-grey-light; + display: inline-block; + padding: $spacer / 6 $spacer / 2; } .active { composes: link; + color: $brand-grey; } diff --git a/src/data/sidebars/tutorials.yml b/src/data/sidebars/tutorials.yml index 39cdd0de..175d2821 100644 --- a/src/data/sidebars/tutorials.yml +++ b/src/data/sidebars/tutorials.yml @@ -1 +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..89ce88b6 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,24 +18,9 @@ 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. @@ -46,37 +33,12 @@ const IndexPage = ({ data, location }) => { 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/templates/Doc.jsx b/src/templates/Doc.jsx index f97e224b..3205e48d 100644 --- a/src/templates/Doc.jsx +++ b/src/templates/Doc.jsx @@ -2,7 +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 = { @@ -17,10 +20,21 @@ export default class DocTemplate extends Component { return ( - + + +
      + -

      {post.frontmatter.title}

      -
      +
      +

      {post.frontmatter.title}

      +
      +
      +
      + ) } diff --git a/src/templates/Doc.module.scss b/src/templates/Doc.module.scss new file mode 100644 index 00000000..7aa91896 --- /dev/null +++ b/src/templates/Doc.module.scss @@ -0,0 +1,16 @@ +@import 'variables'; + +.wrapper { + @media (min-width: $break-point--small) { + display: flex; + justify-content: space-between; + } +} + +.sidebar { + flex: 0 0 25%; +} + +.main { + flex: 0 0 70%; +}