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

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
- title: API References
#description: Get the API references for all relevant components.
description: Coming soon.
#link: /api/introduction/
description: Get the API references for all relevant components.
link: /api/squid-js/
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) & {
color: $orange;
}
:global(.api) & {
color: $green;
}
}
.rootLink {

62
src/components/Sidebar.jsx
View File

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

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}
/>
</aside>
<DocMain
title={title}
description={description}
tableOfContents={tableOfContents}
post={post}
/>
{location.pathname.includes('/api/') ? (
<>
<DocMain
title={title}
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>
) : (
<DocMain

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

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