From c34682abb20eac50919a0e4fcdbd0b92352037d1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 9 Nov 2018 16:44:04 +0100
Subject: [PATCH] more data

---
 data/components.yml                   | 50 ++++++++++++++++++++++-----
 src/components/Components.jsx         |  6 ++--
 src/components/Components.module.scss | 20 ++++++++++-
 3 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/data/components.yml b/data/components.yml
index 9fe7c367..8cbf00f8 100644
--- a/data/components.yml
+++ b/data/components.yml
@@ -1,17 +1,49 @@
-- name: 'keeper-contracts'
+- name: keeper-contracts
   description: '💧 Integration of TCRs, CPM and Ocean Tokens in Solidity'
   links:
-    - name: 'GitHub'
-      url: 'https://github.com/oceanprotocol/keeper-contracts'
+    - name: GitHub
+      url: https://github.com/oceanprotocol/keeper-contracts
+    - 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: GitHub
+      url: https://github.com/oceanprotocol/aquarius
 
-- name: 'pleuston'
+- 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'
+    - name: GitHub
+      url: https://github.com/oceanprotocol/pleuston
+
+- 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
diff --git a/src/components/Components.jsx b/src/components/Components.jsx
index 01028fff..d6093b3e 100644
--- a/src/components/Components.jsx
+++ b/src/components/Components.jsx
@@ -8,7 +8,7 @@ const Component = ({ name, description, links }) => (
         <h1 className={styles.componentName}>{name}</h1>
         <p>{description}</p>
 
-        <ul>
+        <ul className={styles.componentLinks}>
             {links.map(link => (
                 <li key={link.url}>
                     <a href={link.url}>{link.name}</a>
@@ -50,9 +50,9 @@ const Components = () => (
                     <div className={styles.quickrun}>
                         <strong>
                             Wanna quickly get an Ocean network running on your
-                            machine?{' '}
+                            machine? Check out{' '}
                             <a href="https://github.com/oceanprotocol/docker-images">
-                                Check out docker-images
+                                🐳 docker-images
                             </a>
                             .
                         </strong>
diff --git a/src/components/Components.module.scss b/src/components/Components.module.scss
index 81e74a5e..08042fa0 100644
--- a/src/components/Components.module.scss
+++ b/src/components/Components.module.scss
@@ -38,7 +38,7 @@
 }
 
 .component {
-    padding: $spacer / 2;
+    padding: $spacer / $line-height;
     border: 1px solid $brand-grey-lighter;
     border-radius: $border-radius;
     margin-bottom: 5%;
@@ -52,3 +52,21 @@
     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 {
+
+    }
+}