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 }) => (
+
+)
+
+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}
+
)}
/>
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
-
-
-
- )
-}
+
+
+)
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 (
+
+
+
+
+
+
+ )
+}
+
+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 (
+
+
+
+
+
+
+ )
+}
+
+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}
+
+
+