mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Merge pull request #9 from oceanprotocol/feature/github-integration
GitHub GraphQL API integration
This commit is contained in:
GitHub
commit
ceca19c858
1
.env.sample
Normal file
1
.env.sample
Normal file
@ -0,0 +1 @@
|
||||
GITHUB_TOKEN=
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -5,3 +5,5 @@ yarn-error.log
|
||||
.cache
|
||||
/public
|
||||
.DS_Store
|
||||
.env
|
||||
.env.*
|
||||
|
||||
@ -5,7 +5,7 @@ node_js: node
|
||||
|
||||
script:
|
||||
- npm test
|
||||
- npm run build
|
||||
- 'if [ "$TRAVIS_SECURE_ENV_VARS" = "true" ]; then npm run build; fi'
|
||||
|
||||
notifications:
|
||||
email: false
|
||||
|
||||
82
README.md
82
README.md
@ -23,19 +23,18 @@
|
||||
- [Repositories](#repositories)
|
||||
- [Development](#development)
|
||||
- [Use Docker](#use-docker)
|
||||
- [GitHub GraphQL API](#github-graphql-api)
|
||||
- [Authors](#authors)
|
||||
- [License](#license)
|
||||
|
||||
## Content
|
||||
|
||||
All content lives in the [`/content`](content/) & [`/data`](data/) folders utilizing GitHub Flavored Markdown and YAML. Content is organized into the above mentioned categories through subfolders. Those subfolder names, along with the file name, define the final url of a given piece of content.
|
||||
All content lives in the [`/content`](content/) & [`/data`](data/) folders utilizing GitHub Flavored Markdown and YAML. Content is organized through subfolders corresponding to the sections mentioned below. Those subfolder names, along with the file name, define the final url of a given piece of content.
|
||||
|
||||
The final navigational organisation of the content is driven through the sidebar files under [`/data/sidebars`](data/sidebars/).
|
||||
The final navigational organisation of the content is driven through the sidebar files under [`/data/sidebars`](data/sidebars/). Some global values used throughout the site can be set in [`config.js`](config.js).
|
||||
|
||||
Have a look at [docs.oceanprotocol.com/test/](https://docs.oceanprotocol.com/test/) to see what content elements can be used in the docs.
|
||||
|
||||
Some global values used throughout the site can be set in [`config.js`](config.js).
|
||||
|
||||
### Sections
|
||||
|
||||
The documentation is split in multiple sections whose content lives in this repo:
|
||||
@ -48,12 +47,12 @@ Those sections and their copy are defined in the [`/data/sections.yml`](data/sec
|
||||
|
||||
TODO: Additionally, these docs live in their respective repos and are pulled into this site on build time:
|
||||
|
||||
- API reference
|
||||
- API references
|
||||
- Component docs
|
||||
|
||||
### Editing docs
|
||||
|
||||
Every article on [docs.oceanprotocol.com](https://docs.oceanprotocol.com) ends with an _Edit this page on GitHub_ link. Clicking that will put you to the right place in the repository from where you can hit the _Edit_ pencil icon.
|
||||
Every article on [docs.oceanprotocol.com](https://docs.oceanprotocol.com) ends with an _Edit this page on GitHub_ link. Clicking that will put you to the right place in the repository from where you can hit the _Edit_ pencil icon on GitHub.
|
||||
|
||||
GitHub will automatically fork the repository if you are not part of the `oceanprotocol` organisation on GitHub. Members can simply push to a new branch on the original repo.
|
||||
|
||||
@ -62,17 +61,40 @@ The editing workflow is as follows:
|
||||
1. Make your changes
|
||||
2. Push your changes to a new branch in the repo, or in your fork
|
||||
3. Open a pull request against `master`, automatically asking for review
|
||||
4. Wait for review, possibly make request changes
|
||||
4. Wait for review, possibly make requested changes
|
||||
5. Wait for all checks to pass
|
||||
6. Merge!
|
||||
|
||||
### Adding docs
|
||||
|
||||
...
|
||||
1. Add new Markdown file under one of the folders under [`/content`](content/)
|
||||
2. Add new path to one of the sidebars in [`/data/sidebars`](data/sidebars/)
|
||||
3. ...
|
||||
|
||||
### Repositories
|
||||
|
||||
The repositories list is currently sourced from the [`/data/repositories.yml`](data/repositories.yml) file. The GitHub link is auto generated from the given repository name and will always be added by default.
|
||||
The repositories list is currently sourced from the [`/data/repositories.yml`](data/repositories.yml) file, defining the grouping, the display order, and which repos to include.
|
||||
|
||||
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: 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="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:
|
||||
|
||||
```yaml
|
||||
- name: keeper-contracts
|
||||
links:
|
||||
- name: Documentation
|
||||
url: https://github.com/oceanprotocol/keeper-contracts/tree/develop/doc
|
||||
```
|
||||
|
||||
- [`/data/repositories.yml`](data/repositories.yml)
|
||||
|
||||
@ -112,6 +134,48 @@ docker-compose up
|
||||
|
||||
This will expose a hot-reloading server under [localhost:8000](http://localhost:8000).
|
||||
|
||||
## GitHub GraphQL API
|
||||
|
||||
The GitHub GraphQL API integration is done through [gatsby-source-graphql](https://www.gatsbyjs.org/packages/gatsby-source-graphql/) and requires authorization.
|
||||
|
||||
An environment variable `GITHUB_TOKEN` needs to present, filled with a [personal access token](https://github.com/settings/tokens) with the scope `public_repo`.
|
||||
|
||||
For local development, you can simply [create a personal access token](https://github.com/settings/tokens) and use it in your local .env file:
|
||||
|
||||
```bash
|
||||
cp .env.sample .env
|
||||
vi .env
|
||||
# GITHUB_TOKEN=ADD-YOUR-TOKEN-HERE
|
||||
```
|
||||
|
||||
When running the site locally, you can use the GraphiQL client running under [localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) to explore the whole GraphQL layer of the site (not just the GitHub infos).
|
||||
|
||||
<img width="982" alt="screen shot 2018-11-10 at 18 41 45" src="https://user-images.githubusercontent.com/90316/48304718-66b94e80-e51e-11e8-8333-e5cadbf4d4b8.png">
|
||||
|
||||
This query should get you started to explore what information you can get from GitHub:
|
||||
|
||||
```graphql
|
||||
query {
|
||||
github {
|
||||
organization(login: "oceanprotocol") {
|
||||
repositories(first: 100) {
|
||||
edges {
|
||||
node {
|
||||
name
|
||||
description
|
||||
url
|
||||
forkCount
|
||||
stargazers {
|
||||
totalCount
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Authors
|
||||
|
||||
- Troy McConaghy ([@ttmc](https://github.com/ttmc)) - [Ocean Protocol](https://oceanprotocol.com)
|
||||
|
||||
@ -5,6 +5,7 @@ description: Help with Ocean Protocol development and have Ocean Tokens rain on
|
||||
|
||||
Explain our bounties
|
||||
|
||||
- [🎣 ocean-bounties](https://github.com/oceanprotocol/ocean-bounties/issues)
|
||||
<repo name="ocean-bounties"></repo>
|
||||
|
||||
- [Gitcoin](https://gitcoin.co/profile/oceanprotocol)
|
||||
- [bounties.network](https://explorer.bounties.network/explorer?bountyStage=active&search=ocean%20protocol)
|
||||
|
||||
@ -7,7 +7,7 @@ description: Learn about the engineering process behind Ocean Protocol and how y
|
||||
|
||||
Ocean Protocol uses [C4 Standard process](https://github.com/unprotocols/rfc/blob/master/1/README.md) to manage changes in the source code. Find more details in the respective [OEP-01](https://github.com/oceanprotocol/OEPs/tree/master/1).
|
||||
|
||||
- [🐙 Ocean Protocol Enhancement Proposals (OEPs)](https://github.com/oceanprotocol/OEPs)
|
||||
<repo name="OEPs"></repo>
|
||||
|
||||
## Project management
|
||||
|
||||
@ -16,4 +16,5 @@ We use GitHub as a means for maintaining and tracking issues, roadmap and source
|
||||
- [Ocean Protocol on GitHub](https://github.com/oceanprotocol)
|
||||
- [Business Board (Ocean Roadmap)](https://github.com/oceanprotocol/ocean/projects/1)
|
||||
- [Milestones](https://github.com/oceanprotocol/ocean/milestones?direction=asc&sort=due_date&state=open)
|
||||
- [🕶 dev-ocean](https://github.com/oceanprotocol/dev-ocean): Ocean Engineering Pages with documentation about Development, DevOps, QA, Security, etc.
|
||||
|
||||
<repo name="dev-ocean"></repo>
|
||||
|
||||
@ -7,25 +7,25 @@ description: The Ocean Protocol network consists of various components. Learn ab
|
||||
|
||||
See also [Set Up a Keeper](/setup/keeper/)
|
||||
|
||||
- [💧 keeper-contracts](https://github.com/oceanprotocol/keeper-contracts)
|
||||
<repo name="keeper-contracts"></repo>
|
||||
|
||||
## Aquarius
|
||||
|
||||
Aquarius provides an off-chain database store for metadata about data assets. Every marketplace must run an instance of Aquarius.
|
||||
|
||||
- [🐋 aquarius](https://github.com/oceanprotocol/aquarius)
|
||||
<repo name="aquarius"></repo>
|
||||
|
||||
## Brizo
|
||||
|
||||
Brizo is the technical component executed by Publishers allowing them to provide extended data services. Brizo, as part of the Publisher ecosystem, includes the credentials to interact with the infrastructure (initially cloud, but could be on-premise).
|
||||
|
||||
- [brizo](https://github.com/oceanprotocol/brizo)
|
||||
<repo name="brizo"></repo>
|
||||
|
||||
## Pleuston
|
||||
|
||||
An example marketplace front-end for consumers to explore, download, and publish data assets within the Ocean Protocol network. Implemented using React and squid-js.
|
||||
|
||||
- [🦄 pleuston](https://github.com/oceanprotocol/pleuston)
|
||||
<repo name="pleuston"></repo>
|
||||
|
||||
## Squid
|
||||
|
||||
@ -39,7 +39,7 @@ Client libraries used by applications to interact with Ocean nodes, including Ke
|
||||
|
||||
All of our core components generate Docker images automatically and we provide some handy Docker Compose scripts to help with testing, showcasing, and developing Ocean Protocol.
|
||||
|
||||
- [🐳 docker-images](https://github.com/oceanprotocol/docker-images)
|
||||
<repo name="docker-images"></repo>
|
||||
|
||||
### Full Ocean network stack
|
||||
|
||||
|
||||
@ -19,6 +19,7 @@ For more complete info, see [John Gruber's original spec](http://daringfireball.
|
||||
* [Horizontal Rule](#horizontal-rule)
|
||||
* [Line Breaks](#line-breaks)
|
||||
* [Videos](#videos)
|
||||
* [React Components in Markdown](#react-components-in-markdown)
|
||||
|
||||
## Headers
|
||||
|
||||
@ -375,3 +376,22 @@ Or, in pure Markdown, but losing the image sizing and border:
|
||||
```md
|
||||
[](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
|
||||
```
|
||||
|
||||
## React Components in Markdown
|
||||
|
||||
In all Markdown docs you can use some select React Components. This magic is done with [gatsby-remark-component](https://www.gatsbyjs.org/packages/gatsby-remark-component/).
|
||||
|
||||
Note that the component name in Markdown needs to be always in lowercase, and have a closing tag.
|
||||
|
||||
### Repository
|
||||
|
||||
The `Repository` component fetching and displaying information about a GitHub repo. can be used as `<repo>` Component requires a `name` to be passed:
|
||||
|
||||
```
|
||||
<repo name="pleuston"></repo>
|
||||
```
|
||||
|
||||
Resulting in:
|
||||
|
||||
<repo name="pleuston"></repo>
|
||||
|
||||
|
||||
@ -4,4 +4,4 @@ title: Use Jupyter Notebooks to interact with the Ocean network
|
||||
|
||||
For now, check out [the Mantaray repository](https://github.com/oceanprotocol/mantaray). In the future, we hope to have live online Jupyter notebooks.
|
||||
|
||||
- [mantaray](https://github.com/oceanprotocol/mantaray)
|
||||
<repo name="mantaray"></repo>
|
||||
|
||||
@ -1,36 +1,22 @@
|
||||
- group: Core Components
|
||||
items:
|
||||
- name: keeper-contracts
|
||||
description: '💧 Integration of TCRs, CPM and Ocean Tokens in Solidity'
|
||||
links:
|
||||
- name: Documentation
|
||||
url: https://github.com/oceanprotocol/keeper-contracts/tree/develop/doc
|
||||
|
||||
- name: aquarius
|
||||
description: '🐋 Off-chain database store for data assets metadata.'
|
||||
links:
|
||||
- name: API reference
|
||||
url: https://github.com/oceanprotocol/aquarius/blob/develop/docs/for_api_users/API.md
|
||||
|
||||
- name: brizo
|
||||
description: 'Helping publishers to expose their services'
|
||||
|
||||
- name: pleuston
|
||||
description: '🦄 Web app for consumers to explore, download, and publish data assets.'
|
||||
|
||||
- group: Libraries
|
||||
items:
|
||||
- name: squid-js
|
||||
description: '🦑 JavaScript client library for Ocean Protocol'
|
||||
|
||||
- name: squid-py
|
||||
description: '🦑 Python client library for Ocean Protocol'
|
||||
|
||||
- name: squid-java
|
||||
description: '🦑 Java client library for Ocean Protocol'
|
||||
|
||||
- name: secret-store-client-js
|
||||
description: '🔑 JavaScript implementation of the parity secret store for use in ocean.'
|
||||
|
||||
- name: secret-store-client-py
|
||||
description: '🔑 Parity Secret Store Python Client'
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
require('dotenv').config()
|
||||
|
||||
if (!process.env.GITHUB_TOKEN) {
|
||||
throw new Error(
|
||||
`A GitHub token is required to build the site. Check the README
|
||||
\nhttps://github.com/oceanprotocol/docs.`
|
||||
)
|
||||
}
|
||||
|
||||
const config = require('./config.js')
|
||||
|
||||
module.exports = {
|
||||
@ -36,6 +45,20 @@ module.exports = {
|
||||
path: `${__dirname}/node_modules/@oceanprotocol/art`
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-source-graphql',
|
||||
options: {
|
||||
typeName: 'GitHub',
|
||||
fieldName: 'github',
|
||||
url: 'https://api.github.com/graphql',
|
||||
headers: {
|
||||
Authorization: `bearer ${process.env.GITHUB_TOKEN}`
|
||||
},
|
||||
// Additional options to pass to node-fetch
|
||||
fetchOptions: {},
|
||||
refetchInterval: 300 // 5 min.
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-transformer-remark',
|
||||
options: {
|
||||
@ -55,7 +78,8 @@ module.exports = {
|
||||
'gatsby-remark-responsive-iframe',
|
||||
'gatsby-remark-prismjs',
|
||||
'gatsby-remark-autolink-headers',
|
||||
'gatsby-remark-copy-linked-files'
|
||||
'gatsby-remark-copy-linked-files',
|
||||
'gatsby-remark-component'
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"gatsby-plugin-sitemap": "^2.0.2",
|
||||
"gatsby-plugin-svgr": "^2.0.0-alpha",
|
||||
"gatsby-remark-autolink-headers": "^2.0.11",
|
||||
"gatsby-remark-component": "^1.1.3",
|
||||
"gatsby-remark-copy-linked-files": "^2.0.6",
|
||||
"gatsby-remark-embed-video": "^1.4.0",
|
||||
"gatsby-remark-images": "^2.0.6",
|
||||
@ -25,6 +26,7 @@
|
||||
"gatsby-remark-responsive-iframe": "^2.0.6",
|
||||
"gatsby-remark-smartypants": "^2.0.6",
|
||||
"gatsby-source-filesystem": "^2.0.8",
|
||||
"gatsby-source-graphql": "^2.0.6",
|
||||
"gatsby-transformer-remark": "^2.1.12",
|
||||
"gatsby-transformer-sharp": "^2.1.8",
|
||||
"gatsby-transformer-yaml": "^2.1.5",
|
||||
@ -33,7 +35,8 @@
|
||||
"prismjs": "^1.15.0",
|
||||
"react": "^16.6.1",
|
||||
"react-dom": "^16.6.1",
|
||||
"react-helmet": "^5.2.0"
|
||||
"react-helmet": "^5.2.0",
|
||||
"rehype-react": "^3.0.3"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
@ -49,6 +52,7 @@
|
||||
"test": "npm run lint"
|
||||
},
|
||||
"devDependencies": {
|
||||
"dotenv": "^6.1.0",
|
||||
"eslint": "^5.9.0",
|
||||
"eslint-config-oceanprotocol": "^1.3.0",
|
||||
"eslint-config-prettier": "^3.1.0",
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import RehypeReact from 'rehype-react'
|
||||
import Repository from './Repositories/Repository'
|
||||
import styles from './DocContent.module.scss'
|
||||
|
||||
const DocContent = ({ html }) =>
|
||||
const renderAst = new RehypeReact({
|
||||
createElement: React.createElement,
|
||||
components: { repo: Repository }
|
||||
}).Compiler
|
||||
|
||||
const DocContent = ({ html, htmlAst }) =>
|
||||
html ? (
|
||||
<div
|
||||
className={styles.docContent}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: html
|
||||
}}
|
||||
/>
|
||||
<div className={styles.docContent}>{renderAst(htmlAst)}</div>
|
||||
) : (
|
||||
<div className={styles.empty}>
|
||||
This is a placeholder for now. Help creating it.
|
||||
@ -17,7 +19,8 @@ const DocContent = ({ html }) =>
|
||||
)
|
||||
|
||||
DocContent.propTypes = {
|
||||
html: PropTypes.string
|
||||
html: PropTypes.string,
|
||||
htmlAst: PropTypes.object
|
||||
}
|
||||
|
||||
export default DocContent
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
margin-top: $spacer / 2;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
> div > h1,
|
||||
> div > h2 {
|
||||
margin-top: $spacer * $line-height;
|
||||
margin-bottom: $spacer / $line-height;
|
||||
padding-bottom: $spacer / $line-height;
|
||||
|
||||
40
src/components/Repositories/QuickRun.jsx
Normal file
40
src/components/Repositories/QuickRun.jsx
Normal file
@ -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
|
||||
55
src/components/Repositories/QuickRun.module.scss
Normal file
55
src/components/Repositories/QuickRun.module.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -1,15 +1,69 @@
|
||||
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 Repository = ({ name, description, links }) => (
|
||||
<div className={styles.repository}>
|
||||
<h1 className={styles.repositoryName}>{name}</h1>
|
||||
<p>{description}</p>
|
||||
const queryGithub = graphql`
|
||||
query GitHubReposInfo {
|
||||
github {
|
||||
organization(login: "oceanprotocol") {
|
||||
repositories(first: 100, privacy: PUBLIC, isFork: false) {
|
||||
edges {
|
||||
node {
|
||||
name
|
||||
description
|
||||
url
|
||||
forkCount
|
||||
stargazers {
|
||||
totalCount
|
||||
}
|
||||
releases(
|
||||
first: 1
|
||||
orderBy: { field: CREATED_AT, direction: DESC }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
tag {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
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={`https://github.com/oceanprotocol/${name}`}>GitHub</a>
|
||||
<a href={url}>GitHub</a>
|
||||
</li>
|
||||
{links &&
|
||||
links.map(link => (
|
||||
@ -18,12 +72,77 @@ const Repository = ({ name, description, links }) => (
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
|
||||
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}
|
||||
render={data => {
|
||||
const repositoriesGitHub =
|
||||
data.github.organization.repositories.edges
|
||||
|
||||
// just iterate over all repos until we have a name match,
|
||||
// then return that repo, and then filter out all empty nodes
|
||||
let repoFilteredArray = repositoriesGitHub
|
||||
.map(({ node }) => {
|
||||
if (node.name === name) return node
|
||||
})
|
||||
.filter(n => n)
|
||||
|
||||
const repo = repoFilteredArray[0]
|
||||
|
||||
// safeguard against more empty items,
|
||||
// e.g. when private repos are referenced in repositories.yml
|
||||
if (repo === undefined) return null
|
||||
|
||||
const { url, description, forkCount, stargazers, releases } = repo
|
||||
|
||||
return (
|
||||
<article className={styles.repository}>
|
||||
<Title name={name} releases={releases} url={url} />
|
||||
|
||||
<p>{!description ? '...' : description}</p>
|
||||
|
||||
<footer className={styles.repositoryMeta}>
|
||||
<Links links={links} url={url} />
|
||||
<Numbers
|
||||
stargazers={stargazers}
|
||||
forkCount={forkCount}
|
||||
url={url}
|
||||
/>
|
||||
</footer>
|
||||
</article>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
Repository.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
links: PropTypes.array
|
||||
}
|
||||
|
||||
|
||||
@ -5,16 +5,31 @@
|
||||
border: 1px solid $brand-grey-lighter;
|
||||
background: $brand-white;
|
||||
border-radius: $border-radius;
|
||||
margin-bottom: 4%;
|
||||
|
||||
@media (min-width: $break-point--small) {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
font-size: $font-size-small;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.repositoryName {
|
||||
font-size: $font-size-large;
|
||||
font-size: $font-size-h4;
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
padding: 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;
|
||||
}
|
||||
|
||||
.repositoryLinks {
|
||||
@ -34,7 +49,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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,6 @@ const RepositoryList = ({ repositories }) => (
|
||||
<Repository
|
||||
key={item.name}
|
||||
name={item.name}
|
||||
description={item.description}
|
||||
links={item.links}
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -1,37 +1,10 @@
|
||||
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 Repositories = () => (
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
const query = graphql`
|
||||
query {
|
||||
allRepositoriesYaml {
|
||||
edges {
|
||||
@ -40,7 +13,6 @@ const Repositories = () => (
|
||||
group
|
||||
items {
|
||||
name
|
||||
description
|
||||
links {
|
||||
name
|
||||
url
|
||||
@ -50,13 +22,17 @@ const Repositories = () => (
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
`
|
||||
|
||||
const Repositories = () => (
|
||||
<StaticQuery
|
||||
query={query}
|
||||
render={data => {
|
||||
const repositories = data.allRepositoriesYaml.edges
|
||||
|
||||
return (
|
||||
<div className={styles.repositories}>
|
||||
<QuickRun />
|
||||
<QuickRun name="docker-images" />
|
||||
<RepositoryList repositories={repositories} />
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
1
src/images/forks.svg
Normal file
1
src/images/forks.svg
Normal file
@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 580 B |
1
src/images/star.svg
Normal file
1
src/images/star.svg
Normal file
@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 199 B |
@ -11,6 +11,7 @@ import { ReactComponent as Arrow } from '../images/arrow.svg'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
const SectionLink = ({ to, title, color, children }) => {
|
||||
// eslint-disable-next-line
|
||||
let classNames = classnames(styles.link, {
|
||||
[styles.purple]: color === 'purple',
|
||||
[styles.blue]: color === 'blue',
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -49,7 +49,6 @@ export default class DocTemplate extends Component {
|
||||
<Sidebar
|
||||
location={location}
|
||||
sidebar={section}
|
||||
isPlaceholder={!post.html}
|
||||
/>
|
||||
</aside>
|
||||
<article className={styles.main}>
|
||||
@ -57,7 +56,10 @@ export default class DocTemplate extends Component {
|
||||
title={title}
|
||||
description={description}
|
||||
/>
|
||||
<DocContent html={post.html} />
|
||||
<DocContent
|
||||
html={post.html}
|
||||
htmlAst={post.htmlAst}
|
||||
/>
|
||||
<DocFooter post={post} />
|
||||
</article>
|
||||
</main>
|
||||
@ -67,7 +69,10 @@ export default class DocTemplate extends Component {
|
||||
title={title}
|
||||
description={description}
|
||||
/>
|
||||
<DocContent html={post.html} />
|
||||
<DocContent
|
||||
html={post.html}
|
||||
htmlAst={post.htmlAst}
|
||||
/>
|
||||
<DocFooter post={post} />
|
||||
</article>
|
||||
)}
|
||||
@ -84,6 +89,7 @@ export const pageQuery = graphql`
|
||||
id
|
||||
excerpt
|
||||
html
|
||||
htmlAst
|
||||
fileAbsolutePath
|
||||
frontmatter {
|
||||
title
|
||||
|
||||
Loading…
Reference in New Issue
Block a user