oceanprotocol
/
docs
mirror of https://github.com/oceanprotocol/docs.git
1
0
Fork 0
Code Releases Activity

Merge pull request #8 from oceanprotocol/feature/component 

components section
This commit is contained in:
Matthias Kretschmann 2018-11-09 17:47:55 +01:00 committed by GitHub
parent bf7060c051 afef8b15b5
commit a256d07f1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 273 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
content/test.md
View File

@ -196,6 +196,13 @@ But let's throw in a <b>tag</b>.
```
</code></pre>
```bash
git clone https://github.com/oceanprotocol/docker-images.git
cd docker-images/
./start_ocean.sh --latest
```
```js
const { Ocean, Logger } = require('@oceanprotocol/squid');

61
data/repositories.yml Normal file
View File

@ -0,0 +1,61 @@
- group: Core Components
items:
- name: keeper-contracts
description: '💧 Integration of TCRs, CPM and Ocean Tokens in Solidity'
links:
- name: GitHub
url: https://github.com/oceanprotocol/keeper-contracts
- name: Documentation
url: https://github.com/oceanprotocol/keeper-contracts/tree/develop/doc
- name: aquarius
description: '🐋 Provides an off-chain database store for metadata about data assets.'
links:
- name: GitHub
url: https://github.com/oceanprotocol/aquarius
- name: API reference
url: https://github.com/oceanprotocol/aquarius/blob/develop/docs/for_api_users/API.md
- name: brizo
description: 'Helping publishers to expose their services'
links:
- name: GitHub
url: https://github.com/oceanprotocol/brizo
- name: pleuston
description: '🦄 Web app for consumers to explore, download, and publish data assets.'
links:
- name: GitHub
url: https://github.com/oceanprotocol/pleuston
- group: Libraries
items:
- name: squid-js
description: '🦑 JavaScript client library for Ocean Protocol'
links:
- name: GitHub
url: https://github.com/oceanprotocol/squid-js
- name: squid-py
description: '🦑 Python client library for Ocean Protocol'
links:
- name: GitHub
url: https://github.com/oceanprotocol/squid-py
- name: squid-java
description: '🦑 Java client library for Ocean Protocol'
links:
- name: GitHub
url: https://github.com/oceanprotocol/squid-java
- name: secret-store-client-js
description: '🔑 JavaScript implementation of the parity secret store for use in ocean.'
links:
- name: GitHub
url: https://github.com/oceanprotocol/secret-store-client-js
- name: secret-store-client-py
description: '🔑 Parity Secret Store Python Client'
links:
- name: GitHub
url: https://github.com/oceanprotocol/secret-store-client-py

7
src/components/Header.jsx
View File

@ -1,10 +1,9 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Link, StaticQuery, graphql } from 'gatsby'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
import styles from './Header.module.scss'
const Header = ({ siteTitle }) => (
const Header = () => (
<StaticQuery
query={graphql`
query {
@ -55,8 +54,4 @@ const Header = ({ siteTitle }) => (
/>
)
Header.propTypes = {
siteTitle: PropTypes.string
}
export default Header

26
src/components/Repositories/Repository.jsx Normal file
View File

@ -0,0 +1,26 @@
import React from 'react'
import PropTypes from 'prop-types'
import styles from './Repository.module.scss'
const Repository = ({ name, description, links }) => (
<div className={styles.repository}>
<h1 className={styles.repositoryName}>{name}</h1>
<p>{description}</p>
<ul className={styles.repositoryLinks}>
{links.map(link => (
<li key={link.url}>
<a href={link.url}>{link.name}</a>
</li>
))}
</ul>
</div>
)
Repository.propTypes = {
name: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
links: PropTypes.array.isRequired
}
export default Repository

31
src/components/Repositories/Repository.module.scss Normal file
View File

@ -0,0 +1,31 @@
@import 'variables';
.repository {
padding: $spacer / $line-height;
border: 1px solid $brand-grey-lighter;
border-radius: $border-radius;
margin-bottom: 5%;
@media (min-width: $break-point--small) {
flex: 0 0 100%;
}
}
.repositoryName {
font-size: $font-size-large;
margin-top: 0;
}
.repositoryLinks {
margin: 0;
padding: 0;
margin-left: -($spacer / 2);
li {
display: inline-block;
padding: 0;
margin-left: $spacer / 2;
&:before { display: none; }
}
}

31
src/components/Repositories/RepositoryList.jsx Normal file
View File

@ -0,0 +1,31 @@
import React from 'react'
import PropTypes from 'prop-types'
import Repository from './Repository'
import styles from './RepositoryList.module.scss'
const RepositoryList = ({ repositories }) => (
<div className={styles.repositoryLists}>
{repositories.map(({ node }) => (
<div key={node.id} className={styles.repositoryList}>
<h3 className={styles.repositoryListTitle}>{node.group}</h3>
<div className={styles.repositoryWrapper}>
{node.items.map(item => (
<Repository
key={item.name}
name={item.name}
description={item.description}
links={item.links}
/>
))}
</div>
</div>
))}
</div>
)
RepositoryList.propTypes = {
repositories: PropTypes.array.isRequired
}
export default RepositoryList

28
src/components/Repositories/RepositoryList.module.scss Normal file
View File

@ -0,0 +1,28 @@
@import 'variables';
.repositoryLists {
@media (min-width: $break-point--medium) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
.repositoryList {
@media (min-width: $break-point--medium) {
flex: 0 0 45%;
}
}
.repositoryWrapper {
@media (min-width: $break-point--small) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
.repositoryListTitle {
font-size: $font-size-h4;
color: $brand-grey-light;
}

65
src/components/Repositories/index.jsx Normal file
View File

@ -0,0 +1,65 @@
import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import RepositoryList from './RepositoryList'
import styles from './index.module.scss'
const QuickRun = () => (
<div className={styles.quickrun}>
<strong>
Wanna quickly get an Ocean network with all core components running
on your machine? Check out{' '}
<a href="https://github.com/oceanprotocol/docker-images">
🐳 docker-images
</a>
.
</strong>
<pre className="language-bash">
<code className="language-bash">
<span className="token function">git</span> clone
https://github.com/oceanprotocol/docker-images.git
<br />
<span className="token function">cd</span> docker-images/
<br />
<br />
./start_ocean.sh --latest
</code>
</pre>
</div>
)
const Repositories = () => (
<StaticQuery
query={graphql`
query {
allRepositoriesYaml {
edges {
node {
id
group
items {
name
description
links {
name
url
}
}
}
}
}
}
`}
render={data => {
const repositories = data.allRepositoriesYaml.edges
return (
<div className={styles.repositories}>
<QuickRun />
<RepositoryList repositories={repositories} />
</div>
)
}}
/>
)
export default Repositories

18
src/components/Repositories/index.module.scss Normal file
View File

@ -0,0 +1,18 @@
@import 'variables';
.repositories {
margin-top: $spacer * 2;
}
.quickrun {
padding-top: $spacer * 2;
padding-bottom: $spacer;
text-align: center;
max-width: $break-point--small;
margin: auto;
pre {
text-align: left;
margin-top: $spacer / $line-height;
}
}

3
src/pages/index.js
View File

@ -4,6 +4,7 @@ import { Link, graphql } from 'gatsby'
import Layout from '../components/Layout'
import Content from '../components/Content'
import HeaderHome from '../components/HeaderHome'
import Repositories from '../components/Repositories'
import { ReactComponent as Arrow } from '../images/arrow.svg'
import styles from './index.module.scss'
@ -35,6 +36,8 @@ const IndexPage = ({ data, location }) => (
</li>
))}
</ul>
<Repositories />
</Content>
</Layout>
)

4
src/styles/global.scss
View File

@ -275,12 +275,12 @@ pre {
/////////////////////////////////////
::-moz-selection {
background: $brand-black;
background: $brand-grey-light;
color: #fff;
}
::selection {
background: $brand-black;
background: $brand-grey-light;
color: #fff;
}