1
0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00

rename and refactor

This commit is contained in:
Matthias Kretschmann 2018-11-09 17:17:14 +01:00
parent cf8ed79064
commit 07fd09f4d9
Signed by: m
GPG Key ID: 606EEEF3C479A91F
10 changed files with 183 additions and 174 deletions

View File

@ -1,100 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import styles from './Components.module.scss'
const Component = ({ name, description, links }) => (
<div className={styles.component}>
<h1 className={styles.componentName}>{name}</h1>
<p>{description}</p>
<ul className={styles.componentLinks}>
{links.map(link => (
<li key={link.url}>
<a href={link.url}>{link.name}</a>
</li>
))}
</ul>
</div>
)
Component.propTypes = {
name: PropTypes.string.isRequired,
description: PropTypes.string.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 = () => (
<StaticQuery
query={graphql`
query {
allComponentsYaml {
edges {
node {
id
group
items {
name
description
links {
name
url
}
}
}
}
}
}
`}
render={data => {
const components = data.allComponentsYaml.edges
return (
<div className={styles.components}>
<QuickRun />
<ComponentsList components={components} />
</div>
)
}}
/>
)
export default Components

View File

@ -1,72 +0,0 @@
@import 'variables';
.components {
margin-top: $spacer * 2;
}
.quickrun {
padding-top: $spacer * 2;
padding-bottom: $spacer * 2;
text-align: center;
}
.componentsLists {
@media (min-width: $break-point--medium) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
.componentsList {
@media (min-width: $break-point--medium) {
flex: 0 0 45%;
}
}
.componentsWrapper {
@media (min-width: $break-point--small) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
.componentsTitle {
font-size: $font-size-h4;
color: $brand-grey-light;
}
.component {
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%;
}
}
.componentName {
font-size: $font-size-large;
margin-top: 0;
}
.componentLinks {
margin: 0;
padding: 0;
margin-left: -($spacer / 2);
li {
display: inline-block;
padding: 0;
margin-left: $spacer / 2;
&:before { display: none; }
}
a {
}
}

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

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; }
}
}

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

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;
}

View File

@ -0,0 +1,54 @@
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 running on your machine? Check
out{' '}
<a href="https://github.com/oceanprotocol/docker-images">
🐳 docker-images
</a>
.
</strong>
</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

View File

@ -0,0 +1,11 @@
@import 'variables';
.repositories {
margin-top: $spacer * 2;
}
.quickrun {
padding-top: $spacer * 2;
padding-bottom: $spacer * 2;
text-align: center;
}

View File

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