components splitup

data/components.yml

@@ -1,4 +1,6 @@
-- name: keeper-contracts
+- group: Core Components
+  items:
+    - name: keeper-contracts
       description: '💧 Integration of TCRs, CPM and Ocean Tokens in Solidity'
       links:
         - name: GitHub
@@ -6,43 +8,45 @@
         - name: Documentation
           url: https://github.com/oceanprotocol/keeper-contracts/tree/develop/doc
 
-- name: aquarius
+    - name: aquarius
       description: '🐋 Ocean Metadata API'
       links:
         - name: GitHub
           url: https://github.com/oceanprotocol/aquarius
 
-- name: brizo
+    - name: brizo
       description: 'Helping publishers to expose their services'
       links:
         - name: GitHub
           url: https://github.com/oceanprotocol/brizo
 
-- name: pleuston
+    - name: pleuston
       description: '🦄 Web app for consumers to explore, download, and publish data assets.'
       links:
         - name: GitHub
           url: https://github.com/oceanprotocol/pleuston
 
-- name: squid-js
+- 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
+    - name: squid-py
       description: '🦑 Python client library for Ocean Protocol'
       links:
         - name: GitHub
           url: https://github.com/oceanprotocol/squid-py
 
-- name: squid-java
+    - 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
+    - name: secret-store-client-js
       description: '🔑JavaScript implementation of the parity secret store for use in ocean.'
       links:
         - name: GitHub

src/components/Components.jsx

@@ -24,6 +24,44 @@ Component.propTypes = {
     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`
@@ -31,6 +69,9 @@ const Components = () => (
                 allComponentsYaml {
                     edges {
                         node {
+                            id
+                            group
+                            items {
                                 name
                                 description
                                 links {
@@ -41,58 +82,15 @@ const Components = () => (
                         }
                     }
                 }
+            }
         `}
         render={data => {
             const components = data.allComponentsYaml.edges
 
             return (
                 <div className={styles.components}>
-                    <div className={styles.quickrun}>
+                    <QuickRun />
-                        <strong>
+                    <ComponentsList components={components} />
-                            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>
-
-                    <div className={styles.componentsLists}>
-                        <div className={styles.componentsList}>
-                            <h3 className={styles.componentsTitle}>
-                                Core Components
-                            </h3>
-
-                            <div className={styles.componentsWrapper}>
-                                {components.map(({ node }) => (
-                                    <Component
-                                        key={node.name}
-                                        name={node.name}
-                                        description={node.description}
-                                        links={node.links}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-
-                        <div className={styles.componentsList}>
-                            <h3 className={styles.componentsTitle}>
-                                Libraries
-                            </h3>
-
-                            <div className={styles.componentsWrapper}>
-                                {components.map(({ node }) => (
-                                    <Component
-                                        key={node.name}
-                                        name={node.name}
-                                        description={node.description}
-                                        links={node.links}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                    </div>
                 </div>
             )
         }}