From d9612193aa61f73eb406e0ad37009cffef0cd1c3 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 11 Nov 2018 00:20:57 +0100 Subject: [PATCH] output repo release tag, quick run split up --- README.md | 2 +- src/components/Repositories/QuickRun.jsx | 40 +++++++ .../Repositories/QuickRun.module.scss | 55 ++++++++++ src/components/Repositories/Repository.jsx | 102 ++++++++++++++---- .../Repositories/Repository.module.scss | 13 ++- src/components/Repositories/index.jsx | 31 +----- src/components/Repositories/index.module.scss | 20 ---- src/images/forks.svg | 2 +- src/images/star.svg | 2 +- src/styles/_variables.scss | 2 +- 10 files changed, 193 insertions(+), 76 deletions(-) create mode 100644 src/components/Repositories/QuickRun.jsx create mode 100644 src/components/Repositories/QuickRun.module.scss diff --git a/README.md b/README.md index c65a105e..187b6dba 100644 --- a/README.md +++ b/README.md @@ -85,7 +85,7 @@ Additional information about a repo will then be fetched automatically via [GitH The above example will result in: -screen shot 2018-11-10 at 22 01 59 +screen shot 2018-11-10 at 22 43 41 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: diff --git a/src/components/Repositories/QuickRun.jsx b/src/components/Repositories/QuickRun.jsx new file mode 100644 index 00000000..ec18ad5e --- /dev/null +++ b/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 }) => ( + +) + +QuickRun.propTypes = { + name: PropTypes.string.isRequired +} + +export default QuickRun diff --git a/src/components/Repositories/QuickRun.module.scss b/src/components/Repositories/QuickRun.module.scss new file mode 100644 index 00000000..3a53f772 --- /dev/null +++ b/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; +} diff --git a/src/components/Repositories/Repository.jsx b/src/components/Repositories/Repository.jsx index 15c33bd1..259f62f2 100644 --- a/src/components/Repositories/Repository.jsx +++ b/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 }) => ( +

+ {name} + {releases.edges[0] && ( + + {releases.edges[0].node.tag.name} + + )} +

+) + +Title.propTypes = { + name: PropTypes.string.isRequired, + releases: PropTypes.object.isRequired, + url: PropTypes.string.isRequired +} + +const Links = ({ links, url }) => ( + +) + +Links.propTypes = { + links: PropTypes.array, + url: PropTypes.string.isRequired +} + +const Numbers = ({ stargazers, forkCount, url }) => ( + +) + +Numbers.propTypes = { + stargazers: PropTypes.object.isRequired, + forkCount: PropTypes.number.isRequired, + url: PropTypes.string.isRequired +} + 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 (
-

{name}

+ <p>{!description ? '...' : description}</p> <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> + <Links links={links} url={url} /> + <Numbers + stargazers={stargazers} + forkCount={forkCount} + url={url} + /> </footer> </article> ) diff --git a/src/components/Repositories/Repository.module.scss b/src/components/Repositories/Repository.module.scss index 4de581ce..6fba5ad3 100644 --- a/src/components/Repositories/Repository.module.scss +++ b/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; diff --git a/src/components/Repositories/index.jsx b/src/components/Repositories/index.jsx index d9dac952..8dd742f0 100644 --- a/src/components/Repositories/index.jsx +++ b/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> ) diff --git a/src/components/Repositories/index.module.scss b/src/components/Repositories/index.module.scss index 356dfa08..9e430c8c 100644 --- a/src/components/Repositories/index.module.scss +++ b/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; -} diff --git a/src/images/forks.svg b/src/images/forks.svg index cd1166cd..c09212c5 100644 --- a/src/images/forks.svg +++ b/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> diff --git a/src/images/star.svg b/src/images/star.svg index 805421da..65869c89 100644 --- a/src/images/star.svg +++ b/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> diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 97bdd80c..94f77211 100644 --- a/src/styles/_variables.scss +++ b/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;