mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Merge pull request #313 from oceanprotocol/feature/codeclimate
add codeclimate
This commit is contained in:
commit
904931aba2
16
README.md
16
README.md
@ -5,7 +5,7 @@
|
||||
> 🐍 Ocean Protocol's official documentation. https://docs.oceanprotocol.com
|
||||
|
||||
[![Build Status](https://travis-ci.com/oceanprotocol/docs.svg?token=3psqw6c8KMDqfdGQ2x6d&branch=master)](https://travis-ci.com/oceanprotocol/docs)
|
||||
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-7b1173.svg?style=flat-square)](https://github.com/prettier/prettier)
|
||||
[![Maintainability](https://api.codeclimate.com/v1/badges/d39837421591f0bc2550/maintainability)](https://codeclimate.com/github/oceanprotocol/docs/maintainability)
|
||||
[![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
|
||||
[![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb)
|
||||
[![Greenkeeper badge](https://badges.greenkeeper.io/oceanprotocol/docs.svg?token=2757ede2de02f4679c4dfc6597a331a26f2f206fed53bfeb708c64cbe3d5f55f&ts=1541590505792)](https://greenkeeper.io/)
|
||||
@ -18,13 +18,13 @@
|
||||
|
||||
---
|
||||
|
||||
- [Content](#Content)
|
||||
- [Development](#Development)
|
||||
- [Linting & Formatting](#Linting--Formatting)
|
||||
- [Editor Setup: VS Code](#Editor-Setup-VS-Code)
|
||||
- [Deployment](#Deployment)
|
||||
- [Authors](#Authors)
|
||||
- [License](#License)
|
||||
- [Content](#content)
|
||||
- [Development](#development)
|
||||
- [Linting & Formatting](#linting--formatting)
|
||||
- [Editor Setup: VS Code](#editor-setup-vs-code)
|
||||
- [Deployment](#deployment)
|
||||
- [Authors](#authors)
|
||||
- [License](#license)
|
||||
|
||||
## Content
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import RehypeReact from 'rehype-react'
|
||||
import Repository from './Repositories/Repository'
|
||||
import Repository from './Repository'
|
||||
import styles from './DocContent.module.scss'
|
||||
|
||||
const renderAst = new RehypeReact({
|
||||
|
@ -4,7 +4,7 @@ import { ReactComponent as Pencil } from '../images/pencil.svg'
|
||||
import styles from './DocFooter.module.scss'
|
||||
import { social, githubContentPath, githubDevOceanPath } from '../../config'
|
||||
|
||||
const DocFooter = ({ post, url, externalName }) => {
|
||||
export default function DocFooter({ post, url, externalName }) {
|
||||
let path
|
||||
|
||||
if (post) {
|
||||
@ -42,5 +42,3 @@ DocFooter.propTypes = {
|
||||
url: PropTypes.string,
|
||||
externalName: PropTypes.string
|
||||
}
|
||||
|
||||
export default DocFooter
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import { Link, StaticQuery, graphql } from 'gatsby'
|
||||
import Repository from './Repositories/Repository'
|
||||
import Repository from './Repository'
|
||||
import styles from './QuickRun.module.scss'
|
||||
|
||||
const QuickRun = () => (
|
||||
|
@ -1,162 +0,0 @@
|
||||
@import 'variables';
|
||||
|
||||
.repository {
|
||||
padding: $spacer / $line-height;
|
||||
border: 1px solid $brand-grey-lighter;
|
||||
background: $brand-white;
|
||||
border-radius: $border-radius;
|
||||
font-size: $font-size-small;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
p {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.repositoryName {
|
||||
font-size: $font-size-h4;
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer / 2;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
a:first-of-type {
|
||||
color: $brand-black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
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 {
|
||||
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;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.repositoryMeta {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
align-self: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.repositoryLinks {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: -($spacer / $line-height);
|
||||
width: 80%;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-left: $spacer / $line-height;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: $font-family-button;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.repositorynumbers {
|
||||
font-size: $font-size-small;
|
||||
margin-left: -($spacer / 4);
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.repositoryReadme {
|
||||
margin-top: $spacer / $line-height;
|
||||
padding: $spacer / 2;
|
||||
background: darken($brand-white, 2%);
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.repositoryReadmeTitle {
|
||||
font-size: $font-size-small !important; // stylelint-disable-line
|
||||
font-family: $font-family-monospace;
|
||||
font-weight: $font-weight-base;
|
||||
margin: 0;
|
||||
color: $brand-grey-light;
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Repository from './Repository'
|
||||
import Repository from '../Repository'
|
||||
import styles from './RepositoryList.module.scss'
|
||||
|
||||
const RepositoryList = ({ repositories }) => (
|
||||
|
24
src/components/Repository/Links.jsx
Normal file
24
src/components/Repository/Links.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './Links.module.scss'
|
||||
|
||||
export default function Links({ links, url }) {
|
||||
return (
|
||||
<ul className={styles.links}>
|
||||
<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
|
||||
}
|
23
src/components/Repository/Links.module.scss
Normal file
23
src/components/Repository/Links.module.scss
Normal file
@ -0,0 +1,23 @@
|
||||
@import 'variables';
|
||||
|
||||
.links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: -($spacer / $line-height);
|
||||
width: 80%;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-left: $spacer / $line-height;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: $font-family-button;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
88
src/components/Repository/Numbers.jsx
Normal file
88
src/components/Repository/Numbers.jsx
Normal file
@ -0,0 +1,88 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import axios from 'axios'
|
||||
import { ReactComponent as Star } from '../../images/star.svg'
|
||||
import { ReactComponent as Forks } from '../../images/forks.svg'
|
||||
import styles from './Numbers.module.scss'
|
||||
|
||||
export default class Numbers extends PureComponent {
|
||||
static propTypes = {
|
||||
stargazers: PropTypes.object.isRequired,
|
||||
forkCount: PropTypes.number.isRequired,
|
||||
url: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
state = {
|
||||
forks: this.props.forkCount,
|
||||
stars: this.props.stargazers.totalCount
|
||||
}
|
||||
|
||||
url = 'https://oceanprotocol-github.now.sh'
|
||||
|
||||
signal = axios.CancelToken.source()
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchNumbers()
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.signal.cancel()
|
||||
}
|
||||
|
||||
fetchNumbers = async () => {
|
||||
try {
|
||||
const response = await axios({
|
||||
method: 'get',
|
||||
url: this.url,
|
||||
timeout: 10000, // 10 sec.
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
const repo = response.data
|
||||
.map(item => {
|
||||
if (item.name === this.props.name) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
.filter(n => n)
|
||||
|
||||
const { forks, stars } = repo
|
||||
|
||||
// update state only when numbers have changed
|
||||
if (forks && forks !== this.props.forkCount) {
|
||||
this.setState({ forks })
|
||||
}
|
||||
|
||||
if (stars && stars !== this.props.stargazers.totalCount) {
|
||||
this.setState({ stars })
|
||||
}
|
||||
} catch (error) {
|
||||
if (axios.isCancel(error)) {
|
||||
return null
|
||||
} else {
|
||||
console.log(error.message) // eslint-disable-line no-console
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { url } = this.props
|
||||
const { forks, stars } = this.state
|
||||
|
||||
return (
|
||||
<aside className={styles.repositorynumbers}>
|
||||
<a href={`${url}/stargazers`} title="Show Stargazers">
|
||||
<Star /> <span>{stars}</span>
|
||||
</a>
|
||||
{forks > 0 && (
|
||||
<a href={`${url}/network`} title="Show Forks">
|
||||
<Forks /> <span>{forks}</span>
|
||||
</a>
|
||||
)}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
}
|
35
src/components/Repository/Numbers.module.scss
Normal file
35
src/components/Repository/Numbers.module.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@import 'variables';
|
||||
|
||||
.repositorynumbers {
|
||||
font-size: $font-size-small;
|
||||
margin-left: -($spacer / 4);
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
21
src/components/Repository/Readme.jsx
Normal file
21
src/components/Repository/Readme.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React from 'react'
|
||||
import remark from 'remark'
|
||||
import remarkReact from 'remark-react'
|
||||
import styles from './Readme.module.scss'
|
||||
|
||||
export default function Readme({ object }) {
|
||||
const readmeHtml =
|
||||
object &&
|
||||
remark()
|
||||
.use(remarkReact)
|
||||
.processSync(object.text).contents
|
||||
|
||||
return (
|
||||
object && (
|
||||
<aside className={styles.readme}>
|
||||
<h3 className={styles.title}>README.md</h3>
|
||||
{readmeHtml}
|
||||
</aside>
|
||||
)
|
||||
)
|
||||
}
|
30
src/components/Repository/Readme.module.scss
Normal file
30
src/components/Repository/Readme.module.scss
Normal file
@ -0,0 +1,30 @@
|
||||
@import 'variables';
|
||||
|
||||
.readme {
|
||||
margin-top: $spacer / $line-height;
|
||||
padding: $spacer / 2;
|
||||
background: darken($brand-white, 2%);
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $font-size-small !important; // stylelint-disable-line
|
||||
font-family: $font-family-monospace;
|
||||
font-weight: $font-weight-base;
|
||||
margin: 0;
|
||||
color: $brand-grey-light;
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
40
src/components/Repository/Title.jsx
Normal file
40
src/components/Repository/Title.jsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './Title.module.scss'
|
||||
|
||||
import { ReactComponent as Forks } from '../../images/forks.svg'
|
||||
|
||||
export default function Title({ name, isFork, parent, releases, url }) {
|
||||
return (
|
||||
<h1 className={styles.title}>
|
||||
<a href={url}>
|
||||
{isFork && <Forks />}
|
||||
{name}
|
||||
{isFork && (
|
||||
<span className={styles.forkLine}>
|
||||
{parent.nameWithOwner}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
{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,
|
||||
isFork: PropTypes.bool,
|
||||
parent: PropTypes.shape({
|
||||
nameWithOwner: PropTypes.string
|
||||
}),
|
||||
releases: PropTypes.object.isRequired,
|
||||
url: PropTypes.string.isRequired
|
||||
}
|
53
src/components/Repository/Title.module.scss
Normal file
53
src/components/Repository/Title.module.scss
Normal file
@ -0,0 +1,53 @@
|
||||
@import 'variables';
|
||||
|
||||
.title {
|
||||
font-size: $font-size-h4;
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer / 2;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
a:first-of-type {
|
||||
color: $brand-black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
@ -1,12 +1,11 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { StaticQuery, graphql } from 'gatsby'
|
||||
import remark from 'remark'
|
||||
import remarkReact from 'remark-react'
|
||||
import axios from 'axios'
|
||||
import { ReactComponent as Star } from '../../images/star.svg'
|
||||
import { ReactComponent as Forks } from '../../images/forks.svg'
|
||||
import styles from './Repository.module.scss'
|
||||
import Numbers from './Numbers'
|
||||
import Readme from './Readme'
|
||||
import styles from './index.module.scss'
|
||||
import Title from './Title'
|
||||
import Links from './Links'
|
||||
|
||||
const queryGithub = graphql`
|
||||
query GitHubReposInfo {
|
||||
@ -66,155 +65,6 @@ const queryGithub = graphql`
|
||||
}
|
||||
`
|
||||
|
||||
const Title = ({ name, isFork, parent, releases, url }) => (
|
||||
<h1 className={styles.repositoryName}>
|
||||
<a href={url}>
|
||||
{isFork && <Forks />}
|
||||
{name}
|
||||
{isFork && (
|
||||
<span className={styles.forkLine}>{parent.nameWithOwner}</span>
|
||||
)}
|
||||
</a>
|
||||
{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,
|
||||
isFork: PropTypes.bool,
|
||||
parent: PropTypes.shape({
|
||||
nameWithOwner: PropTypes.string
|
||||
}),
|
||||
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
|
||||
}
|
||||
|
||||
class Numbers extends PureComponent {
|
||||
static propTypes = {
|
||||
stargazers: PropTypes.object.isRequired,
|
||||
forkCount: PropTypes.number.isRequired,
|
||||
url: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
state = {
|
||||
forks: this.props.forkCount,
|
||||
stars: this.props.stargazers.totalCount
|
||||
}
|
||||
|
||||
url = 'https://oceanprotocol-github.now.sh'
|
||||
|
||||
signal = axios.CancelToken.source()
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchNumbers()
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.signal.cancel()
|
||||
}
|
||||
|
||||
fetchNumbers = async () => {
|
||||
try {
|
||||
const response = await axios({
|
||||
method: 'get',
|
||||
url: this.url,
|
||||
timeout: 10000, // 10 sec.
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
const repo = response.data
|
||||
.map(item => {
|
||||
if (item.name === this.props.name) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
.filter(n => n)
|
||||
|
||||
const { forks, stars } = repo
|
||||
|
||||
// update state only when numbers have changed
|
||||
if (forks && forks !== this.props.forkCount) {
|
||||
this.setState({ forks })
|
||||
}
|
||||
|
||||
if (stars && stars !== this.props.stargazers.totalCount) {
|
||||
this.setState({ stars })
|
||||
}
|
||||
} catch (error) {
|
||||
if (axios.isCancel(error)) {
|
||||
return null
|
||||
} else {
|
||||
console.log(error.message) // eslint-disable-line no-console
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { url } = this.props
|
||||
const { forks, stars } = this.state
|
||||
|
||||
return (
|
||||
<aside className={styles.repositorynumbers}>
|
||||
<a href={`${url}/stargazers`} title="Show Stargazers">
|
||||
<Star /> <span>{stars}</span>
|
||||
</a>
|
||||
{forks > 0 && (
|
||||
<a href={`${url}/network`} title="Show Forks">
|
||||
<Forks /> <span>{forks}</span>
|
||||
</a>
|
||||
)}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const Readme = ({ object }) => {
|
||||
const readmeHtml =
|
||||
object &&
|
||||
remark()
|
||||
.use(remarkReact)
|
||||
.processSync(object.text).contents
|
||||
|
||||
return (
|
||||
object && (
|
||||
<aside className={styles.repositoryReadme}>
|
||||
<h3 className={styles.repositoryReadmeTitle}>README.md</h3>
|
||||
{readmeHtml}
|
||||
</aside>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const Repository = ({ name, links, readme }) => (
|
||||
<StaticQuery
|
||||
query={queryGithub}
|
25
src/components/Repository/index.module.scss
Normal file
25
src/components/Repository/index.module.scss
Normal file
@ -0,0 +1,25 @@
|
||||
@import 'variables';
|
||||
|
||||
.repository {
|
||||
padding: $spacer / $line-height;
|
||||
border: 1px solid $brand-grey-lighter;
|
||||
background: $brand-white;
|
||||
border-radius: $border-radius;
|
||||
font-size: $font-size-small;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
p {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.repositoryMeta {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
align-self: flex-end;
|
||||
width: 100%;
|
||||
}
|
Loading…
Reference in New Issue
Block a user