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';
.main {
.content {
padding: 0 $spacer;
max-width: 45rem;
max-width: $break-point--large;
margin: auto;
}

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

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

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 Header from './Header'
import styles from './Layout.module.scss'
const Layout = ({ children }) => (
<StaticQuery
@ -29,7 +28,7 @@ const Layout = ({ children }) => (
<html lang="en" />
</Helmet>
<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 }) => (
<ul>
<ul className={styles.list}>
{items.map((item, j) => (
<li key={j}>
<SidebarLink
@ -87,12 +87,12 @@ export default class Sidebar extends Component {
<div key={i}>
{groupExpanded(group.items, location.pathname) ? (
<>
<h4>
<h4 className={styles.groupTitle}>
{group.items[0].link ? (
<SidebarLink
link={group.items[0].link}
title={group.group}
linkClasses="midgrey link"
linkClasses={styles.groupTitleLink}
/>
) : (
group.group
@ -105,11 +105,12 @@ export default class Sidebar extends Component {
/>
</>
) : (
<h4>
<h4 className={styles.groupTitle}>
{group.items[0].link ? (
<SidebarLink
link={group.items[0].link}
title={group.group}
linkClasses={styles.groupTitleLink}
/>
) : (
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 {
color: black;
color: $brand-grey-light;
display: inline-block;
padding: $spacer / 6 $spacer / 2;
}
.active {
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 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 }) => (
<Link to={to}>
@ -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 (
<li key={node.id}>
<Link to={slug}>{title}</Link>
</li>
)
})
return (
<Layout location={location}>
<h1>Hi there</h1>
const IndexPage = ({ location }) => (
<Layout location={location}>
<Content>
<SectionLink to="/concepts/introduction/" title="Core Concepts">
Understand the fundamentals of Ocean Protocol.
</SectionLink>
@ -46,37 +33,12 @@ const IndexPage = ({ data, location }) => {
Browse tutorials for most common setup and development
use-cases.
</SectionLink>
<h1>Docs list</h1>
<ul>{DocsList}</ul>
</Layout>
)
}
</Content>
</Layout>
)
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
}
}
}
}
}
`

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 { 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 (
<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>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
<main className={styles.main}>
<h1>{post.frontmatter.title}</h1>
<div
dangerouslySetInnerHTML={{ __html: post.html }}
/>
</main>
</div>
</Content>
</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%;
}