Merge pull request #8 from oceanprotocol/feature/component

components section

content/test.md

@@ -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');
 

data/repositories.yml

@@ -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

src/components/Header.jsx

@@ -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

src/components/Repositories/Repository.jsx

@@ -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

src/components/Repositories/Repository.module.scss

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

src/components/Repositories/RepositoryList.jsx

@@ -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

src/components/Repositories/RepositoryList.module.scss

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

src/components/Repositories/index.jsx

@@ -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

src/components/Repositories/index.module.scss

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

src/pages/index.js

@@ -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>
 )

src/styles/global.scss

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