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

different navigation tactic

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-23 15:08:58 +01:00
parent ce9b8db632
commit 497cd07d55
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 182 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
content/api/introduction.md Normal file
View File

@ -0,0 +1,15 @@
---
title: API References
description: API references for Ocean Protocol components.
---
The following components expose a consumable API:
<repo name="aquarius"></repo>
<repo name="brizo"></repo>
Those libraries ...:
<repo name="squid-js"></repo>
<repo name="squid-py"></repo>
<repo name="squid-java"></repo>

2
data/sections.yml
View File

@ -15,5 +15,5 @@
- title: API References
description: Get the API references for all relevant components.
link: /api/squid-js/
link: /api/introduction/
color: green

10
data/sidebars/api.yml
View File

@ -1,4 +1,14 @@
- group: Overview
items:
- title: API References
link: /api/introduction/
- group: squid-js
items:
- title: API reference
link: /api/squid-js/
- group: aquarius
items:
- title: API reference
link: https://github.com/oceanprotocol/aquarius/blob/develop/docs/for_api_users/API.md

174
src/components/Sidebar.jsx
View File

@ -7,7 +7,12 @@ const SidebarLink = ({ link, title, linkClasses }) => {
if (link) {
if (link.match(/^\s?http(s?)/gi)) {
return (
<a href={link} target="_blank" rel="noopener noreferrer">
<a
href={link}
className={linkClasses}
target="_blank"
rel="noopener noreferrer"
>
{title}
</a>
)
@ -23,38 +28,103 @@ const SidebarLink = ({ link, title, linkClasses }) => {
}
}
const SidebarList = ({ items, location }) => (
<ul className={styles.list}>
{items.map((item, j) => (
<li key={j}>
<SidebarLink
link={item.link}
title={item.title}
linkClasses={
item.link === location.pathname
? styles.active
: styles.link
}
/>
</li>
))}
</ul>
SidebarLink.propTypes = {
link: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
linkClasses: PropTypes.string
}
const SidebarList = ({ items, location, toc, tableOfContents }) => (
<div className={styles.list}>
{toc ? (
<div
className={styles.toc}
dangerouslySetInnerHTML={{ __html: tableOfContents }}
/>
) : (
<ul>
{items.map((item, j) => (
<li key={j}>
<SidebarLink
link={item.link}
title={item.title}
linkClasses={
item.link === location.pathname
? styles.active
: styles.link
}
/>
</li>
))}
</ul>
)}
</div>
)
SidebarList.propTypes = {
items: PropTypes.array.isRequired,
location: PropTypes.object.isRequired,
toc: PropTypes.bool,
tableOfContents: PropTypes.string
}
const SidebarGroupTitle = ({ group }) => (
<h4 className={styles.groupTitle}>
{group.items[0].link ? (
<SidebarLink
link={group.items[0].link}
title={group.group}
linkClasses={styles.groupTitleLink}
/>
) : (
group.group
)}
</h4>
)
SidebarGroupTitle.propTypes = {
group: PropTypes.object.isRequired
}
const SidebarGroup = ({ i, group, location, ...props }) => (
<>
<SidebarGroupTitle group={group} />
<SidebarList
key={i}
items={group.items}
location={location}
{...props}
/>
</>
)
export default class Sidebar extends Component {
static propTypes = {
sidebar: PropTypes.string,
location: PropTypes.object.isRequired,
collapsed: PropTypes.bool,
toc: PropTypes.bool,
tableOfContents: PropTypes.string
}
static defaultProps = { location: { pathname: `/` } }
static defaultProps = { location: { pathname: '/' } }
render() {
const { sidebar, location, toc, tableOfContents } = this.props
const {
sidebar,
location,
collapsed,
toc,
tableOfContents
} = this.props
const sidebarfile = sidebar ? require(`../../data/sidebars/${sidebar}.yml`) : [] // eslint-disable-line
if (sidebar) {
try {
var sidebarfile = require(`../../data/sidebars/${sidebar}.yml`) // eslint-disable-line
} catch (e) {
throw e
}
}
if (!sidebarfile) {
return null
@ -62,50 +132,32 @@ export default class Sidebar extends Component {
return (
<nav className={styles.sidebar}>
{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}
{sidebarfile.map((group, i) => (
<div key={i}>
{collapsed ? (
group.items.some(
item => item.link === location.pathname
) ? (
<SidebarGroup
i={i}
group={group}
location={location}
toc={toc}
tableOfContents={tableOfContents}
/>
) : (
<SidebarGroupTitle group={group} />
)
) : (
<SidebarGroup
i={i}
group={group}
location={location}
/>
</div>
))
)}
)}
</div>
))}
</nav>
)
}
}
SidebarLink.propTypes = {
link: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
linkClasses: PropTypes.string
}
SidebarList.propTypes = {
items: PropTypes.array.isRequired,
location: PropTypes.object.isRequired
}

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

@ -54,6 +54,10 @@
border-left: 1px solid $brand-grey-lighter;
margin-left: $spacer / 2;
> ul {
padding-left: 0;
}
li {
display: block;
@ -63,7 +67,8 @@
}
}
.link {
.link,
.toc a {
color: $brand-grey;
display: inline-block;
padding: $spacer / 6 $spacer / 2;
@ -77,6 +82,24 @@
}
}
.toc {
ul {
padding-left: 0;
ul {
padding-left: $spacer / 2;
margin: 0;
}
}
li {
margin: 0;
}
a {
}
}
.active {
composes: link;
color: $brand-purple;

45
src/templates/Doc.jsx
View File

@ -27,7 +27,7 @@ const DocMain = ({ title, description, tableOfContents, post, single }) => (
DocMain.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
tableOfContents: PropTypes.string.isRequired,
tableOfContents: PropTypes.string,
post: PropTypes.object.isRequired,
single: PropTypes.bool
}
@ -54,6 +54,8 @@ export default class DocTemplate extends Component {
}
})
const isApiSection = location.pathname.includes('/api/')
return (
<>
<Helmet>
@ -77,33 +79,24 @@ export default class DocTemplate extends Component {
<Sidebar
location={location}
sidebar={section}
collapsed={isApiSection}
toc={
isApiSection &&
!location.pathname.includes(
'/api/introduction/'
)
}
tableOfContents={tableOfContents}
/>
</aside>
{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}
/>
)}
<DocMain
title={title}
description={description}
tableOfContents={
!isApiSection && tableOfContents
}
post={post}
/>
</main>
) : (
<DocMain

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

@ -16,27 +16,12 @@
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;