output repo release tag, quick run split up

README.md

@@ -85,7 +85,7 @@ Additional information about a repo will then be fetched automatically via [GitH
 
 The above example will result in:
 
-<img width="539" alt="screen shot 2018-11-10 at 22 01 59" src="https://user-images.githubusercontent.com/90316/48305989-4dbb9800-e534-11e8-8ee1-946c40ba7657.png">
+<img width="547" alt="screen shot 2018-11-10 at 22 43 41" src="https://user-images.githubusercontent.com/90316/48306511-164fea00-e53a-11e8-97d6-c481ea087c7d.png">
 
 Additionally, you can attach multiple links to a repo. The GitHub link is automatically added for every repository and will always be displayed. Add more links like so:
 

src/components/Repositories/QuickRun.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'gatsby'
+import Repository from './Repository'
+import styles from './QuickRun.module.scss'
+
+const QuickRun = ({ name }) => (
+    <aside className={styles.quickrun}>
+        <header className={styles.header}>
+            <h1 className={styles.tldr}>TL;DR</h1>
+            <strong>
+                Wanna quickly get an Ocean network with all{' '}
+                <Link to="/concepts/ecosystem/">core components</Link> running
+                on your machine?
+            </strong>
+        </header>
+
+        <div className={styles.docker}>
+            <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>
+
+            <Repository name={name} />
+        </div>
+    </aside>
+)
+
+QuickRun.propTypes = {
+    name: PropTypes.string.isRequired
+}
+
+export default QuickRun

src/components/Repositories/QuickRun.module.scss

@@ -0,0 +1,55 @@
+@import 'variables';
+
+.quickrun {
+    padding-top: $spacer;
+    padding-bottom: $spacer * 2.5;
+    text-align: center;
+
+    pre {
+        text-align: left;
+        margin-top: $spacer / $line-height;
+    }
+}
+
+.header,
+.docker {
+    margin: auto;
+
+    @media (min-width: $break-point--medium) {
+        max-width: 33rem;
+    }
+}
+
+.header {
+    margin-bottom: $spacer;
+}
+
+.docker {
+    @media (min-width: $break-point--large) {
+        max-width: none;
+        display: flex;
+        justify-content: space-between;
+
+        > pre,
+        > article {
+            flex: 0 0 48%;
+            margin: 0 !important; // stylelint-disable-line
+        }
+
+        pre {
+            display: flex;
+            align-items: center;
+
+            > code {
+                padding: $spacer / $line-height;
+            }
+        }
+    }
+}
+
+.tldr {
+    display: block;
+    margin-bottom: $spacer / 2;
+    color: $brand-grey-light;
+    font-size: $font-size-h4;
+}

src/components/Repositories/Repository.jsx

@@ -19,6 +19,18 @@ const queryGithub = graphql`
                             stargazers {
                                 totalCount
                             }
+                            releases(
+                                first: 1
+                                orderBy: { field: CREATED_AT, direction: DESC }
+                            ) {
+                                edges {
+                                    node {
+                                        tag {
+                                            name
+                                        }
+                                    }
+                                }
+                            }
                         }
                     }
                 }
@@ -27,6 +39,65 @@ const queryGithub = graphql`
     }
 `
 
+const Title = ({ name, releases, url }) => (
+    <h1 className={styles.repositoryName}>
+        {name}
+        {releases.edges[0] && (
+            <a
+                href={`${url}/releases`}
+                className={styles.repositoryRelease}
+                title="Latest release"
+            >
+                {releases.edges[0].node.tag.name}
+            </a>
+        )}
+    </h1>
+)
+
+Title.propTypes = {
+    name: PropTypes.string.isRequired,
+    releases: PropTypes.object.isRequired,
+    url: PropTypes.string.isRequired
+}
+
+const Links = ({ links, url }) => (
+    <ul className={styles.repositoryLinks}>
+        <li>
+            <a href={url}>GitHub</a>
+        </li>
+        {links &&
+            links.map(link => (
+                <li key={link.url}>
+                    <a href={link.url}>{link.name}</a>
+                </li>
+            ))}
+    </ul>
+)
+
+Links.propTypes = {
+    links: PropTypes.array,
+    url: PropTypes.string.isRequired
+}
+
+const Numbers = ({ stargazers, forkCount, url }) => (
+    <aside className={styles.repositorynumbers}>
+        <a href={`${url}/stargazers`}>
+            <Star /> <span>{stargazers.totalCount}</span>
+        </a>
+        {forkCount > 0 && (
+            <a href={`${url}/network`}>
+                <Forks /> <span>{forkCount}</span>
+            </a>
+        )}
+    </aside>
+)
+
+Numbers.propTypes = {
+    stargazers: PropTypes.object.isRequired,
+    forkCount: PropTypes.number.isRequired,
+    url: PropTypes.string.isRequired
+}
+
 const Repository = ({ name, links }) => (
     <StaticQuery
         query={queryGithub}
@@ -48,36 +119,21 @@ const Repository = ({ name, links }) => (
             // e.g. when private repos are referenced in repositories.yml
             if (repo === undefined) return null
 
-            const { url, description, forkCount, stargazers } = repo
+            const { url, description, forkCount, stargazers, releases } = repo
 
             return (
                 <article className={styles.repository}>
-                    <h1 className={styles.repositoryName}>{name}</h1>
+                    <Title name={name} releases={releases} url={url} />
 
                     <p>{!description ? '...' : description}</p>
 
                     <footer className={styles.repositoryMeta}>
-                        <ul className={styles.repositoryLinks}>
+                        <Links links={links} url={url} />
-                            <li>
+                        <Numbers
-                                <a href={url}>GitHub</a>
+                            stargazers={stargazers}
-                            </li>
+                            forkCount={forkCount}
-                            {links &&
+                            url={url}
-                                links.map(link => (
+                        />
-                                    <li key={link.url}>
-                                        <a href={link.url}>{link.name}</a>
-                                    </li>
-                                ))}
-                        </ul>
-                        <aside className={styles.repositorynumbers}>
-                            <a href={`${url}/stargazers`}>
-                                <Star /> <span>{stargazers.totalCount}</span>
-                            </a>
-                            {forkCount > 0 && (
-                                <a href={`${url}/network`}>
-                                    <Forks /> <span>{forkCount}</span>
-                                </a>
-                            )}
-                        </aside>
                     </footer>
                 </article>
             )

src/components/Repositories/Repository.module.scss

@@ -6,6 +6,8 @@
     background: $brand-white;
     border-radius: $border-radius;
     margin-bottom: 4%;
+    font-size: $font-size-small;
+    text-align: left;
 
     @media (min-width: $break-point--small) {
         flex: 0 0 100%;
@@ -13,10 +15,19 @@
 }
 
 .repositoryName {
-    font-size: $font-size-h3;
+    font-size: $font-size-h4;
     margin-top: 0;
 }
 
+.repositoryRelease {
+    font-family: $font-family-base;
+    font-weight: $font-weight-base;
+    font-size: $font-size-small;
+    color: $brand-grey-light;
+    display: inline-block;
+    margin-left: $spacer / 4;
+}
+
 .repositoryMeta {
     display: flex;
     align-items: center;

src/components/Repositories/index.jsx

@@ -1,34 +1,9 @@
 import React from 'react'
-import { StaticQuery, graphql, Link } from 'gatsby'
+import { StaticQuery, graphql } from 'gatsby'
 import RepositoryList from './RepositoryList'
+import QuickRun from './QuickRun'
 import styles from './index.module.scss'
 
-const QuickRun = () => (
-    <div className={styles.quickrun}>
-        <strong className={styles.tldr}>TL;DR</strong>
-        <strong>
-            Wanna quickly get an Ocean network with all{' '}
-            <Link to="/concepts/ecosystem/">core components</Link> 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 query = graphql`
     query {
         allRepositoriesYaml {
@@ -57,7 +32,7 @@ const Repositories = () => (
 
             return (
                 <div className={styles.repositories}>
-                    <QuickRun />
+                    <QuickRun name="docker-images" />
                     <RepositoryList repositories={repositories} />
                 </div>
             )

src/components/Repositories/index.module.scss

@@ -3,23 +3,3 @@
 .repositories {
     margin-top: $spacer * 2;
 }
-
-.quickrun {
-    padding-top: $spacer;
-    padding-bottom: $spacer * $line-height;
-    text-align: center;
-    max-width: $break-point--small;
-    margin: auto;
-
-    pre {
-        text-align: left;
-        margin-top: $spacer / $line-height;
-    }
-}
-
-.tldr {
-    display: block;
-    margin-bottom: $spacer / 2;
-    color: $brand-grey-light;
-    font-size: $font-size-h4;
-}

src/images/forks.svg

@@ -1 +1 @@
-<svg aria-label="forks" viewBox="0 0 10 16" version="1.1" width="10" height="16" role="img"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
+<svg viewBox="0 0 10 16" version="1.1" width="10" height="16" role="img"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>

src/images/star.svg

@@ -1 +1 @@
-<svg aria-label="stars" viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
+<svg viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>

src/styles/_variables.scss

@@ -31,7 +31,7 @@ $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
 $font-size-root: 15px;
 $font-size-base: 1rem;
 $font-size-large: 1.2rem;
-$font-size-small: .8rem;
+$font-size-small: .85rem;
 $font-size-mini: .65rem;
 $font-size-text: $font-size-base;
 $font-size-label: $font-size-base;