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

components splitup

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-09 17:04:53 +01:00
parent c34682abb2
commit cf8ed79064
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 94 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
data/components.yml
View File

@ -1,3 +1,5 @@
- group: Core Components
items:
- name: keeper-contracts - name: keeper-contracts
description: '💧 Integration of TCRs, CPM and Ocean Tokens in Solidity' description: '💧 Integration of TCRs, CPM and Ocean Tokens in Solidity'
links: links:
@ -24,6 +26,8 @@
- name: GitHub - name: GitHub
url: https://github.com/oceanprotocol/pleuston url: https://github.com/oceanprotocol/pleuston
- group: Libraries
items:
- name: squid-js - name: squid-js
description: '🦑 JavaScript client library for Ocean Protocol' description: '🦑 JavaScript client library for Ocean Protocol'
links: links:

90
src/components/Components.jsx
View File

@ -24,6 +24,44 @@ Component.propTypes = {
links: PropTypes.array.isRequired links: PropTypes.array.isRequired
} }
const ComponentsList = ({ components }) => (
<div className={styles.componentsLists}>
{components.map(({ node }) => (
<div key={node.id} className={styles.componentsList}>
<h3 className={styles.componentsTitle}>{node.group}</h3>
<div className={styles.componentsWrapper}>
{node.items.map(item => (
<Component
key={item.name}
name={item.name}
description={item.description}
links={item.links}
/>
))}
</div>
</div>
))}
</div>
)
ComponentsList.propTypes = {
components: PropTypes.array.isRequired
}
const QuickRun = () => (
<div className={styles.quickrun}>
<strong>
Wanna quickly get an Ocean network running on your machine? Check
out{' '}
<a href="https://github.com/oceanprotocol/docker-images">
🐳 docker-images
</a>
.
</strong>
</div>
)
const Components = () => ( const Components = () => (
<StaticQuery <StaticQuery
query={graphql` query={graphql`
@ -31,6 +69,9 @@ const Components = () => (
allComponentsYaml { allComponentsYaml {
edges { edges {
node { node {
id
group
items {
name name
description description
links { links {
@ -41,58 +82,15 @@ const Components = () => (
} }
} }
} }
}
`} `}
render={data => { render={data => {
const components = data.allComponentsYaml.edges const components = data.allComponentsYaml.edges
return ( return (
<div className={styles.components}> <div className={styles.components}>
<div className={styles.quickrun}> <QuickRun />
<strong> <ComponentsList components={components} />
Wanna quickly get an Ocean network running on your
machine? Check out{' '}
<a href="https://github.com/oceanprotocol/docker-images">
🐳 docker-images
</a>
.
</strong>
</div>
<div className={styles.componentsLists}>
<div className={styles.componentsList}>
<h3 className={styles.componentsTitle}>
Core Components
</h3>
<div className={styles.componentsWrapper}>
{components.map(({ node }) => (
<Component
key={node.name}
name={node.name}
description={node.description}
links={node.links}
/>
))}
</div>
</div>
<div className={styles.componentsList}>
<h3 className={styles.componentsTitle}>
Libraries
</h3>
<div className={styles.componentsWrapper}>
{components.map(({ node }) => (
<Component
key={node.name}
name={node.name}
description={node.description}
links={node.links}
/>
))}
</div>
</div>
</div>
</div> </div>
) )
}} }}