diff --git a/src/components/Repositories/Repository.jsx b/src/components/Repositories/Repository.jsx index d84bf028..04d5dd59 100644 --- a/src/components/Repositories/Repository.jsx +++ b/src/components/Repositories/Repository.jsx @@ -19,6 +19,10 @@ const queryGithub = graphql` description url forkCount + isFork + parent { + nameWithOwner + } stargazers { totalCount } @@ -62,9 +66,15 @@ const queryGithub = graphql` } ` -const Title = ({ name, releases, url }) => ( +const Title = ({ name, isFork, parent, releases, url }) => (

- {name} + + {isFork && } + {name} + {isFork && ( + {parent.nameWithOwner} + )} + {releases.edges[0] && ( ( Title.propTypes = { name: PropTypes.string.isRequired, + isFork: PropTypes.bool, + parent: PropTypes.shape({ + nameWithOwner: PropTypes.string + }), releases: PropTypes.object.isRequired, url: PropTypes.string.isRequired } @@ -226,6 +240,8 @@ const Repository = ({ name, links, readme }) => ( url, description, forkCount, + isFork, + parent, stargazers, releases, object @@ -247,7 +263,13 @@ const Repository = ({ name, links, readme }) => ( return (
- + <Title + name={name} + releases={releases} + url={url} + isFork={isFork} + parent={parent} + /> <p>{!description ? '...' : description}</p> diff --git a/src/components/Repositories/Repository.module.scss b/src/components/Repositories/Repository.module.scss index c368fc24..b2966208 100644 --- a/src/components/Repositories/Repository.module.scss +++ b/src/components/Repositories/Repository.module.scss @@ -24,6 +24,7 @@ border: 0; padding: 0; width: 100%; + position: relative; a:first-of-type { color: $brand-black; @@ -33,6 +34,25 @@ color: $brand-pink; } } + + svg { + width: 1em; + height: 1em; + display: inline-block; + fill: $brand-grey-light; + margin-right: $spacer / 8; + margin-left: -.2rem; + margin-bottom: -.2rem; + } +} + +.forkLine { + display: inline; + margin-left: $spacer / 4; + font-size: $font-size-mini; + font-family: $font-family-monospace; + font-weight: $font-weight-base; + color: $brand-grey-light; } .repositoryRelease {