rename and refactor

src/components/Components.jsx

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

src/components/Components.module.scss

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

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

src/components/Repositories/index.module.scss

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

src/pages/index.js

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