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:
parent
cf8ed79064
commit
07fd09f4d9
@ -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
|
@ -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 {
|
||||
|
||||
}
|
||||
}
|
26
src/components/Repositories/Repository.jsx
Normal file
26
src/components/Repositories/Repository.jsx
Normal 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
31
src/components/Repositories/Repository.module.scss
Normal 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
31
src/components/Repositories/RepositoryList.jsx
Normal 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
28
src/components/Repositories/RepositoryList.module.scss
Normal 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;
|
||||
}
|
54
src/components/Repositories/index.jsx
Normal file
54
src/components/Repositories/index.jsx
Normal 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
|
11
src/components/Repositories/index.module.scss
Normal file
11
src/components/Repositories/index.module.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import 'variables';
|
||||
|
||||
.repositories {
|
||||
margin-top: $spacer * 2;
|
||||
}
|
||||
|
||||
.quickrun {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
text-align: center;
|
||||
}
|
@ -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>
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user