use repository component in markdown
This commit is contained in:
parent
d9612193aa
commit
0cd438fa97
GPG Key ID:
606EEEF3C479A91F
|
|
@ -143,8 +143,8 @@ An environment variable `GITHUB_TOKEN` needs to present, filled with a [personal
|
|||
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.development
|
||||
vi .env.development
|
||||
cp .env.sample .env
|
||||
vi .env
|
||||
# GITHUB_TOKEN=ADD-YOUR-TOKEN-HERE
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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,10 +1,4 @@
|
|||
let activeEnv = process.env.ACTIVE_ENV || process.env.NODE_ENV || 'development'
|
||||
|
||||
console.log(`Using environment config: '${activeEnv}'`) // eslint-disable-line
|
||||
|
||||
require('dotenv').config({
|
||||
path: `.env.${activeEnv}`
|
||||
})
|
||||
require('dotenv').config()
|
||||
|
||||
if (!process.env.GITHUB_TOKEN) {
|
||||
throw new Error(
|
||||
|
|
@ -84,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",
|
||||
|
|
@ -34,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": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -5,18 +5,17 @@
|
|||
border: 1px solid $brand-grey-lighter;
|
||||
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%;
|
||||
}
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.repositoryName {
|
||||
font-size: $font-size-h4;
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.repositoryRelease {
|
||||
|
|
|
|||
|
|
@ -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