oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

navigation concept

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-08 12:33:20 +01:00
parent 1e8cacd7f1
commit 0c7f9c0c3b
Signed by: m
GPG Key ID: 606EEEF3C479A91F
15 changed files with 243 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Content.jsx Normal file
View File

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

4
src/components/Layout.module.scss → src/components/Content.module.scss Executable file → Normal file
View File

@ -1,7 +1,7 @@
@import 'variables'; @import 'variables';
.main { .content {
padding: 0 $spacer; padding: 0 $spacer;
max-width: 45rem; max-width: $break-point--large;
margin: auto; margin: auto;
} }

5
src/components/Header.module.scss
View File

@ -3,17 +3,18 @@
.header { .header {
background: $brand-black; background: $brand-black;
width: 100%; width: 100%;
padding: $spacer / 2; padding: $spacer / 2 0;
padding-right: $spacer / 1.5; padding-right: $spacer / 1.5;
} }
.headerContent { .headerContent {
max-width: $break-point--huge; max-width: $break-point--large;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 $spacer;
} }
.headerLogo { .headerLogo {

18
src/components/HeaderSection.jsx Normal file
View File

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

12
src/components/HeaderSection.module.scss Normal file
View File

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

3
src/components/Layout.jsx
View File

@ -4,7 +4,6 @@ import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby' import { StaticQuery, graphql } from 'gatsby'
import Header from './Header' import Header from './Header'
import styles from './Layout.module.scss'
const Layout = ({ children }) => ( const Layout = ({ children }) => (
<StaticQuery <StaticQuery
@ -29,7 +28,7 @@ const Layout = ({ children }) => (
<html lang="en" /> <html lang="en" />
</Helmet> </Helmet>
<Header siteTitle={data.site.siteMetadata.title} /> <Header siteTitle={data.site.siteMetadata.title} />
<main className={styles.main}>{children}</main> <section>{children}</section>
</> </>
)} )}
/> />

9
src/components/Sidebar.jsx
View File

@ -43,7 +43,7 @@ const SidebarLink = ({ link, title, linkClasses }) => {
} }
const SidebarList = ({ items, location }) => ( const SidebarList = ({ items, location }) => (
<ul> <ul className={styles.list}>
{items.map((item, j) => ( {items.map((item, j) => (
<li key={j}> <li key={j}>
<SidebarLink <SidebarLink
@ -87,12 +87,12 @@ export default class Sidebar extends Component {
<div key={i}> <div key={i}>
{groupExpanded(group.items, location.pathname) ? ( {groupExpanded(group.items, location.pathname) ? (
<> <>
<h4> <h4 className={styles.groupTitle}>
{group.items[0].link ? ( {group.items[0].link ? (
<SidebarLink <SidebarLink
link={group.items[0].link} link={group.items[0].link}
title={group.group} title={group.group}
linkClasses="midgrey link" linkClasses={styles.groupTitleLink}
/> />
) : ( ) : (
group.group group.group
@ -105,11 +105,12 @@ export default class Sidebar extends Component {
/> />
</> </>
) : ( ) : (
<h4> <h4 className={styles.groupTitle}>
{group.items[0].link ? ( {group.items[0].link ? (
<SidebarLink <SidebarLink
link={group.items[0].link} link={group.items[0].link}
title={group.group} title={group.group}
linkClasses={styles.groupTitleLink}
/> />
) : ( ) : (
group.group group.group

26
src/components/Sidebar.module.scss
View File

@ -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 { .link {
color: black; color: $brand-grey-light;
display: inline-block;
padding: $spacer / 6 $spacer / 2;
} }
.active { .active {
composes: link; composes: link;
color: $brand-grey;
} }

5
src/data/sidebars/tutorials.yml
View File

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

56
src/pages/index.js
View File

@ -1,7 +1,9 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby' import { Link } from 'gatsby'
import Layout from '../components/Layout' import Layout from '../components/Layout'
import Content from '../components/Content'
// import styles from './index.module.scss'
const SectionLink = ({ to, title, children }) => ( const SectionLink = ({ to, title, children }) => (
<Link to={to}> <Link to={to}>
@ -16,24 +18,9 @@ SectionLink.propTypes = {
children: PropTypes.any children: PropTypes.any
} }
const IndexPage = ({ data, location }) => { const IndexPage = ({ location }) => (
const { edges } = data.allMarkdownRemark <Layout location={location}>
<Content>
const DocsList = edges.map(({ node }) => {
const { title } = node.frontmatter
const { slug } = node.fields
return (
<li key={node.id}>
<Link to={slug}>{title}</Link>
</li>
)
})
return (
<Layout location={location}>
<h1>Hi there</h1>
<SectionLink to="/concepts/introduction/" title="Core Concepts"> <SectionLink to="/concepts/introduction/" title="Core Concepts">
Understand the fundamentals of Ocean Protocol. Understand the fundamentals of Ocean Protocol.
</SectionLink> </SectionLink>
@ -46,37 +33,12 @@ const IndexPage = ({ data, location }) => {
Browse tutorials for most common setup and development Browse tutorials for most common setup and development
use-cases. use-cases.
</SectionLink> </SectionLink>
</Content>
<h1>Docs list</h1> </Layout>
)
<ul>{DocsList}</ul>
</Layout>
)
}
IndexPage.propTypes = { IndexPage.propTypes = {
data: PropTypes.object.isRequired,
location: PropTypes.object.isRequired location: PropTypes.object.isRequired
} }
export default IndexPage export default IndexPage
export const indexQuery = graphql`
query {
allMarkdownRemark {
edges {
node {
id
html
excerpt(pruneLength: 250)
frontmatter {
title
}
fields {
slug
}
}
}
}
}
`

2
src/pages/index.module.scss Normal file
View File

@ -0,0 +1,2 @@
@import 'variables';

57
src/pages/setup.js Normal file
View File

@ -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 (
<li key={node.id}>
<Link to={slug}>{title}</Link>
</li>
)
})
return (
<Layout location={location}>
<HeaderSection title="Setup Guides" />
<Content>
<ul>{SetupList}</ul>
</Content>
</Layout>
)
}
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
}
}
}
}
}
`

59
src/pages/tutorials.js Normal file
View File

@ -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 (
<li key={node.id}>
<Link to={slug}>{title}</Link>
</li>
)
})
return (
<Layout location={location}>
<HeaderSection title="Tutorials" />
<Content>
<ul>{TutorialsList}</ul>
</Content>
</Layout>
)
}
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
}
}
}
}
}
`

20
src/templates/Doc.jsx
View File

@ -2,7 +2,10 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import Layout from '../components/Layout' import Layout from '../components/Layout'
import Content from '../components/Content'
import HeaderSection from '../components/HeaderSection'
import Sidebar from '../components/Sidebar' import Sidebar from '../components/Sidebar'
import styles from './Doc.module.scss'
export default class DocTemplate extends Component { export default class DocTemplate extends Component {
static propTypes = { static propTypes = {
@ -17,10 +20,21 @@ export default class DocTemplate extends Component {
return ( return (
<Layout location={location}> <Layout location={location}>
<Sidebar location={location} sidebar={section} /> <HeaderSection title={section} />
<Content>
<div className={styles.wrapper}>
<aside className={styles.sidebar}>
<Sidebar location={location} sidebar={section} />
</aside>
<h1>{post.frontmatter.title}</h1> <main className={styles.main}>
<div dangerouslySetInnerHTML={{ __html: post.html }} /> <h1>{post.frontmatter.title}</h1>
<div
dangerouslySetInnerHTML={{ __html: post.html }}
/>
</main>
</div>
</Content>
</Layout> </Layout>
) )
} }

16
src/templates/Doc.module.scss Normal file
View File

@ -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%;
}