show stars & forks count

README.md

@@ -78,16 +78,16 @@ The repositories list is currently sourced from the [`/data/repositories.yml`](d
 Including a repo requires only the `name` key and value, and it needs to be exactly the same as the repo name on GitHub:
 
 ```yaml
-- name: brizo
+- name: pleuston
 ```
 
 Additional information about a repo will then be fetched automatically via [GitHub's GraphQL API](https://developer.github.com/v4/) on build time, and re-fetched every 5 minutes on client side. You can also add a private repo to prepare for a release, it will show up as soon as it is made public on GitHub.
 
 The above example will result in:
 
-<img width="541" alt="screen shot 2018-11-10 at 20 20 48" src="https://user-images.githubusercontent.com/90316/48305170-32e22700-e526-11e8-8ccb-88a288b77983.png">
+<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">
 
-Additionally, you can attach multiple links to a repo. The GitHub link is automatically added for every repository name and will always be displayed. Add more links like so:
+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:
 
 ```yaml
 - name: keeper-contracts
@@ -164,6 +164,10 @@ query {
                         name
                         description
                         url
+                        forkCount
+                        stargazers {
+                            totalCount
+                        }
                     }
                 }
             }

src/components/Repositories/Repository.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
+import { ReactComponent as Star } from '../../images/star.svg'
+import { ReactComponent as Forks } from '../../images/forks.svg'
 import styles from './Repository.module.scss'
 
 const queryGithub = graphql`
@@ -13,6 +15,10 @@ const queryGithub = graphql`
                             name
                             description
                             url
+                            forkCount
+                            stargazers {
+                                totalCount
+                            }
                         }
                     }
                 }
@@ -42,26 +48,38 @@ const Repository = ({ name, links }) => (
             // e.g. when private repos are referenced in repositories.yml
             if (repo === undefined) return null
 
-            const { url, description } = repo
+            const { url, description, forkCount, stargazers } = repo
 
             return (
-                <div className={styles.repository}>
+                <article className={styles.repository}>
                     <h1 className={styles.repositoryName}>{name}</h1>
 
                     <p>{!description ? '...' : description}</p>
 
-                    <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>
-                </div>
+                    <footer className={styles.repositoryMeta}>
+                        <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>
+                        <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

@@ -13,10 +13,15 @@
 }
 
 .repositoryName {
-    font-size: $font-size-large;
+    font-size: $font-size-h3;
     margin-top: 0;
 }
 
+.repositoryMeta {
+    display: flex;
+    align-items: center;
+}
+
 .repositoryLinks {
     margin: 0;
     padding: 0;
@@ -34,7 +39,40 @@
 
     a {
         font-family: $font-family-button;
-        font-size: $font-size-small;
         font-weight: $font-weight-bold;
     }
 }
+
+.repositorynumbers {
+    font-size: $font-size-small;
+    margin-left: -($spacer / 4);
+    margin-bottom: -.2rem;
+    flex: 1;
+    text-align: right;
+
+    a {
+        color: $brand-grey-light;
+        margin-left: $spacer / 4;
+        display: inline-block;
+
+        &:hover,
+        &:focus {
+            color: $brand-pink;
+            transform: none;
+
+            svg {
+                fill: $brand-pink;
+            }
+        }
+
+        span {
+            margin-left: -.15rem;
+        }
+    }
+
+    svg {
+        display: inline-block;
+        fill: $brand-grey-light;
+        margin-bottom: -.1rem;
+    }
+}

src/images/forks.svg

@@ -0,0 +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>

src/images/star.svg

@@ -0,0 +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>