From 497cd07d5541b2e83c6f5f266843322222958208 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 23 Nov 2018 15:08:58 +0100 Subject: [PATCH] different navigation tactic --- content/api/introduction.md | 15 +++ data/sections.yml | 2 +- data/sidebars/api.yml | 10 ++ src/components/Sidebar.jsx | 174 +++++++++++++++++++---------- src/components/Sidebar.module.scss | 25 ++++- src/templates/Doc.jsx | 45 ++++---- src/templates/Doc.module.scss | 15 --- 7 files changed, 182 insertions(+), 104 deletions(-) create mode 100644 content/api/introduction.md diff --git a/content/api/introduction.md b/content/api/introduction.md new file mode 100644 index 00000000..69058d2c --- /dev/null +++ b/content/api/introduction.md @@ -0,0 +1,15 @@ +--- +title: API References +description: API references for Ocean Protocol components. +--- + +The following components expose a consumable API: + + + + +Those libraries ...: + + + + diff --git a/data/sections.yml b/data/sections.yml index a494cbaa..26e270d6 100644 --- a/data/sections.yml +++ b/data/sections.yml @@ -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 diff --git a/data/sidebars/api.yml b/data/sidebars/api.yml index b514d766..3bca2d21 100644 --- a/data/sidebars/api.yml +++ b/data/sidebars/api.yml @@ -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 diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 5a5a1b37..9ef37a36 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -7,7 +7,12 @@ const SidebarLink = ({ link, title, linkClasses }) => { if (link) { if (link.match(/^\s?http(s?)/gi)) { return ( - + {title} ) @@ -23,38 +28,103 @@ const SidebarLink = ({ link, title, linkClasses }) => { } } -const SidebarList = ({ items, location }) => ( - +SidebarLink.propTypes = { + link: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + linkClasses: PropTypes.string +} + +const SidebarList = ({ items, location, toc, tableOfContents }) => ( +
+ {toc ? ( +
+ ) : ( +
    + {items.map((item, j) => ( +
  • + +
    • + ))} +
+ )} +
+) + +SidebarList.propTypes = { + items: PropTypes.array.isRequired, + location: PropTypes.object.isRequired, + toc: PropTypes.bool, + tableOfContents: PropTypes.string +} + +const SidebarGroupTitle = ({ group }) => ( +

+ {group.items[0].link ? ( + + ) : ( + group.group + )} +

+) + +SidebarGroupTitle.propTypes = { + group: PropTypes.object.isRequired +} + +const SidebarGroup = ({ i, group, 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 ( ) } } - -SidebarLink.propTypes = { - link: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - linkClasses: PropTypes.string -} - -SidebarList.propTypes = { - items: PropTypes.array.isRequired, - location: PropTypes.object.isRequired -} diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss index b1e20696..b5ddce1d 100644 --- a/src/components/Sidebar.module.scss +++ b/src/components/Sidebar.module.scss @@ -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; diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx index 24f2b8b0..4562a77a 100644 --- a/src/templates/Doc.jsx +++ b/src/templates/Doc.jsx @@ -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 ( <> @@ -77,33 +79,24 @@ export default class DocTemplate extends Component { - {location.pathname.includes('/api/') ? ( - <> - - - - ) : ( - - )} + ) : (