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

api docs layout setup

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-23 13:49:53 +01:00
parent 315b5e089d
commit ce9b8db632
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 98 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
content/api/squid-js.md Normal file
View File

@ -0,0 +1,12 @@
---
title: squid-js
description: API reference for squid-js.
---
Hello Squid.
## Asset
### getId
### purchase

5
data/sections.yml
View File

@ -14,7 +14,6 @@
color: orange color: orange
- title: API References - title: API References
#description: Get the API references for all relevant components. description: Get the API references for all relevant components.
description: Coming soon. link: /api/squid-js/
#link: /api/introduction/
color: green color: green

4
data/sidebars/api.yml Normal file
View File

@ -0,0 +1,4 @@
- group: squid-js
items:
- title: API reference
link: /api/squid-js/

4
src/components/HeaderSection.module.scss
View File

@ -22,6 +22,10 @@
:global(.tutorials) & { :global(.tutorials) & {
color: $orange; color: $orange;
} }
:global(.api) & {
color: $green;
}
} }
.rootLink { .rootLink {

62
src/components/Sidebar.jsx
View File

@ -44,19 +44,17 @@ const SidebarList = ({ items, location }) => (
export default class Sidebar extends Component { export default class Sidebar extends Component {
static propTypes = { static propTypes = {
sidebar: PropTypes.string, sidebar: PropTypes.string,
location: PropTypes.object.isRequired location: PropTypes.object.isRequired,
toc: PropTypes.bool,
tableOfContents: PropTypes.string
} }
static defaultProps = { static defaultProps = { location: { pathname: `/` } }
location: { pathname: `/` }
}
render() { render() {
const { sidebar, location } = this.props const { sidebar, location, toc, tableOfContents } = this.props
const sidebarfile = sidebar const sidebarfile = sidebar ? require(`../../data/sidebars/${sidebar}.yml`) : [] // eslint-disable-line
? require(`../../data/sidebars/${sidebar}.yml`) // eslint-disable-line
: []
if (!sidebarfile) { if (!sidebarfile) {
return null return null
@ -64,26 +62,38 @@ export default class Sidebar extends Component {
return ( return (
<nav className={styles.sidebar}> <nav className={styles.sidebar}>
{sidebarfile.map((group, i) => ( {toc ? (
<div key={i}> <div>
<h4 className={styles.groupTitle}> <h4 className={styles.groupTitle}>On this page</h4>
{group.items[0].link ? ( <div
<SidebarLink className={styles.toc}
link={group.items[0].link} dangerouslySetInnerHTML={{
title={group.group} __html: tableOfContents
linkClasses={styles.groupTitleLink} }}
/>
) : (
group.group
)}
</h4>
<SidebarList
key={i}
items={group.items}
location={location}
/> />
</div> </div>
))} ) : (
sidebarfile.map((group, i) => (
<div key={i}>
<h4 className={styles.groupTitle}>
{group.items[0].link ? (
<SidebarLink
link={group.items[0].link}
title={group.group}
linkClasses={styles.groupTitleLink}
/>
) : (
group.group
)}
</h4>
<SidebarList
key={i}
items={group.items}
location={location}
/>
</div>
))
)}
</nav> </nav>
) )
} }

57
src/pages/setup.js
View File

@ -1,57 +0,0 @@
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
View File

@ -1,59 +0,0 @@
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
}
}
}
}
}
`

31
src/templates/Doc.jsx
View File

@ -79,12 +79,31 @@ export default class DocTemplate extends Component {
sidebar={section} sidebar={section}
/> />
</aside> </aside>
<DocMain {location.pathname.includes('/api/') ? (
title={title} <>
description={description} <DocMain
tableOfContents={tableOfContents} title={title}
post={post} description={description}
/> post={post}
/>
<aside className={styles.sidebarToc}>
<Sidebar
location={location}
toc
tableOfContents={
tableOfContents
}
/>
</aside>
</>
) : (
<DocMain
title={title}
description={description}
tableOfContents={tableOfContents}
post={post}
/>
)}
</main> </main>
) : ( ) : (
<DocMain <DocMain

15
src/templates/Doc.module.scss
View File

@ -16,12 +16,27 @@
margin-bottom: 0; margin-bottom: 0;
order: 1; order: 1;
:global(.api) & {
width: 17%;
}
+ .main { + .main {
width: 73%; width: 73%;
} }
} }
} }
.sidebarToc {
composes: sidebar;
padding-left: $spacer / 2;
@media (min-width: $break-point--medium) {
:global(.api) & {
width: 19%;
}
}
}
.main { .main {
width: 100%; width: 100%;
background: $brand-white; background: $brand-white;