Merge pull request #47 from oceanprotocol/feature/frontpage-repos

New front-page repo list layout

data/repositories.yml

@@ -16,12 +16,36 @@
 - group: Libraries
   items:
     - name: squid-js
+      links:
+        - name: API reference
+          url: /concepts/squid/
     - name: squid-py
+      links:
+        - name: API reference
+          url: /concepts/squid/
     - name: squid-java
-    - name: secret-store-client-js
+      links:
-    - name: secret-store-client-py
+        - name: API reference
-    - name: secret-store-client-java
+          url: /concepts/squid/
+
+- group: OceanDB
+  items:
     - name: oceandb-mongodb-driver
     - name: oceandb-bigchaindb-driver
     - name: oceandb-elasticsearch-driver
     - name: oceandb-driver-interface
+
+- group: Parity Secret Store
+  items:
+    - name: secret-store-client-js
+      links:
+        - name: Architecture
+          url: /concepts/secret-store/
+    - name: secret-store-client-py
+      links:
+        - name: Architecture
+          url: /concepts/secret-store/
+    - name: secret-store-client-java
+      links:
+        - name: Architecture
+          url: /concepts/secret-store/

package.json

@@ -24,7 +24,7 @@
   "dependencies": {
     "@oceanprotocol/art": "^1.0.2",
     "classnames": "^2.2.6",
-    "gatsby": "^2.0.50",
+    "gatsby": "^2.0.52",
     "gatsby-image": "^2.0.20",
     "gatsby-plugin-catch-links": "^2.0.8",
     "gatsby-plugin-google-analytics": "^2.0.7",
@@ -34,7 +34,7 @@
     "gatsby-plugin-sass": "^2.0.4",
     "gatsby-plugin-sharp": "^2.0.12",
     "gatsby-plugin-sitemap": "^2.0.2",
-    "gatsby-plugin-svgr": "^2.0.0",
+    "gatsby-plugin-svgr": "^2.0.1",
     "gatsby-remark-autolink-headers": "^2.0.11",
     "gatsby-remark-component": "^1.1.3",
     "gatsby-remark-copy-linked-files": "^2.0.6",
@@ -56,8 +56,8 @@
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-helmet": "^5.2.0",
-    "rehype-react": "^3.0.3",
+    "rehype-react": "^3.1.0",
-    "remark": "^10.0.0",
+    "remark": "^10.0.1",
     "remark-react": "^4.0.3"
   },
   "devDependencies": {

src/components/Repositories/Repository.jsx

@@ -49,7 +49,7 @@ const queryGithub = graphql`
 
 const Title = ({ name, releases, url }) => (
     <h1 className={styles.repositoryName}>
-        {name}
+        <a href={url}>{name}</a>
         {releases.edges[0] && (
             <a
                 href={`${url}/releases`}

src/components/Repositories/Repository.module.scss

@@ -17,6 +17,15 @@
     margin-bottom: $spacer / 2;
     border: 0;
     padding: 0;
+
+    a:first-of-type {
+        color: $brand-black;
+
+        &:hover,
+        &:focus {
+            color: $brand-pink;
+        }
+    }
 }
 
 .repositoryRelease {
@@ -26,6 +35,11 @@
     color: $brand-grey-light;
     display: inline-block;
     margin-left: $spacer / 4;
+
+    &:hover,
+    &:focus {
+        transform: none;
+    }
 }
 
 .repositoryMeta {

src/components/Repositories/RepositoryList.jsx

@@ -4,12 +4,12 @@ import Repository from './Repository'
 import styles from './RepositoryList.module.scss'
 
 const RepositoryList = ({ repositories }) => (
-    <div className={styles.repositoryLists}>
+    <div className={styles.repositoryCategory}>
         {repositories.map(({ node }) => (
-            <div key={node.id} className={styles.repositoryList}>
+            <div key={node.id}>
-                <h3 className={styles.repositoryListTitle}>{node.group}</h3>
+                <h3 className={styles.repositoryCategoryTitle}>{node.group}</h3>
 
-                <div className={styles.repositoryWrapper}>
+                <div className={styles.repositoryList}>
                     {node.items.map(item => (
                         <Repository
                             key={item.name}

src/components/Repositories/RepositoryList.module.scss

@@ -1,28 +1,75 @@
 @import 'variables';
 
-.repositoryLists {
-    @media (min-width: $break-point--medium) {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-}
-
 .repositoryList {
+    white-space: nowrap;
+    overflow-y: hidden;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    display: flex;
+
     @media (min-width: $break-point--medium) {
-        flex: 0 0 48%;
+        margin-left: $spacer;
+        border-left: 1px solid $brand-grey-lighter;
+        padding-left: $spacer;
+        padding-top: $spacer / 4;
     }
+
+    article {
+        white-space: normal;
+        flex: 0 0 25rem;
+        margin-left: $spacer;
+        margin-bottom: $spacer / 4;
+
+        &:first-child {
+            margin-left: $spacer * 1.4;
+
+            @media (min-width: $break-point--medium) {
+                margin-left: 0;
+            }
+        }
+
+        &:last-child {
+            margin-right: $spacer * 1.4;
+        }
+    }
+
+    // custom scrollbar
+    &::-webkit-scrollbar,
+    &::-moz-scrollbar {
+        display: none;
+    }
+
+    &::-webkit-scrollbar {
+        opacity: 0;
+        width: 3px;
+        height: 3px;
+        transition: opacity .2s ease-out;
+    }
+
+    &:hover {
+        &::-webkit-scrollbar {
+            opacity: 1;
+            width: 3px;
+            height: 3px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: lighten($brand-grey-light, 30%);
+        }
+
+        &::-webkit-scrollbar-track {
+            background: $brand-white;
+        }
+    }
+
+
 }
 
-.repositoryWrapper {
+.repositoryCategoryTitle {
-    @media (min-width: $break-point--small) {
+    width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-}
-
-.repositoryListTitle {
     font-size: $font-size-h3;
     color: $brand-grey-light;
+    margin-bottom: $spacer / 2;
 }

src/components/Repositories/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StaticQuery, graphql } from 'gatsby'
+import { Link, StaticQuery, graphql } from 'gatsby'
 import RepositoryList from './RepositoryList'
 import QuickRun from './QuickRun'
 import styles from './index.module.scss'
@@ -33,6 +33,24 @@ const Repositories = () => (
             return (
                 <div className={styles.repositories}>
                     <QuickRun name="docker-images" />
+
+                    <header>
+                        <h1 className={styles.repositoriesTitle}>
+                            Repositories
+                        </h1>
+                        <p className={styles.repositoriesText}>
+                            <strong>
+                                Most of our repositories are open source and we
+                                listed the key repositories here. Start with the{' '}
+                                <Link to="/concepts/components/">
+                                    software components
+                                </Link>{' '}
+                                document for an introduction to the components
+                                creating the Ocean network.
+                            </strong>
+                        </p>
+                    </header>
+
                     <RepositoryList repositories={repositories} />
                 </div>
             )

src/components/Repositories/index.module.scss

@@ -2,4 +2,25 @@
 
 .repositories {
     margin-top: $spacer * 2;
+
+    > header {
+        @media (min-width: $break-point--medium) {
+            max-width: 33rem;
+            margin: auto;
+        }
+    }
+}
+
+.repositoriesTitle {
+    text-align: center;
+    display: block;
+    margin-top: 0;
+    margin-bottom: $spacer / 2;
+    font-size: $font-size-h3;
+}
+
+.repositoriesText {
+    text-align: center;
+    margin-bottom: $spacer;
+    color: $brand-grey-light;
 }