From 0cd438fa971ebad5cebdb102f4bb859e694e68d1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 11 Nov 2018 01:32:05 +0100 Subject: [PATCH] use repository component in markdown --- README.md | 4 ++-- content/concepts/bounties.md | 3 ++- content/concepts/development.md | 5 +++-- content/concepts/ecosystem.md | 10 +++++----- content/test.md | 20 +++++++++++++++++++ content/tutorials/jupyter.md | 2 +- gatsby-config.js | 11 +++------- package.json | 4 +++- src/components/DocContent.jsx | 19 ++++++++++-------- src/components/DocContent.module.scss | 4 ++-- .../Repositories/Repository.module.scss | 9 ++++----- src/templates/Doc.jsx | 12 ++++++++--- 12 files changed, 65 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 187b6dba..80d653ed 100644 --- a/README.md +++ b/README.md @@ -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 ``` diff --git a/content/concepts/bounties.md b/content/concepts/bounties.md index 9349f460..7ca5a4a7 100644 --- a/content/concepts/bounties.md +++ b/content/concepts/bounties.md @@ -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) + + - [Gitcoin](https://gitcoin.co/profile/oceanprotocol) - [bounties.network](https://explorer.bounties.network/explorer?bountyStage=active&search=ocean%20protocol) diff --git a/content/concepts/development.md b/content/concepts/development.md index 542436f7..2ddbf96c 100644 --- a/content/concepts/development.md +++ b/content/concepts/development.md @@ -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) + ## 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. + + diff --git a/content/concepts/ecosystem.md b/content/concepts/ecosystem.md index ac205410..9c652d42 100644 --- a/content/concepts/ecosystem.md +++ b/content/concepts/ecosystem.md @@ -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) + ## 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) + ## 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) + ## 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) + ## 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) + ### Full Ocean network stack diff --git a/content/test.md b/content/test.md index d04240e9..67cabdf5 100644 --- a/content/test.md +++ b/content/test.md @@ -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 [![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](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 `` Component requires a `name` to be passed: + +``` + +``` + +Resulting in: + + + diff --git a/content/tutorials/jupyter.md b/content/tutorials/jupyter.md index 7e7e14d6..bac37b6c 100644 --- a/content/tutorials/jupyter.md +++ b/content/tutorials/jupyter.md @@ -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) + diff --git a/gatsby-config.js b/gatsby-config.js index a2d82bf0..42a4a4a8 100755 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -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' ] } }, diff --git a/package.json b/package.json index 74b6c802..f0674565 100755 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/components/DocContent.jsx b/src/components/DocContent.jsx index ce4237c5..e639bc02 100644 --- a/src/components/DocContent.jsx +++ b/src/components/DocContent.jsx @@ -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 ? ( -
+
{renderAst(htmlAst)}
) : (
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 diff --git a/src/components/DocContent.module.scss b/src/components/DocContent.module.scss index a610bdfe..2296ce31 100644 --- a/src/components/DocContent.module.scss +++ b/src/components/DocContent.module.scss @@ -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; diff --git a/src/components/Repositories/Repository.module.scss b/src/components/Repositories/Repository.module.scss index 6fba5ad3..4ebbdd16 100644 --- a/src/components/Repositories/Repository.module.scss +++ b/src/components/Repositories/Repository.module.scss @@ -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 { diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx index 37a75e57..6a4658e2 100644 --- a/src/templates/Doc.jsx +++ b/src/templates/Doc.jsx @@ -49,7 +49,6 @@ export default class DocTemplate extends Component {
@@ -57,7 +56,10 @@ export default class DocTemplate extends Component { title={title} description={description} /> - +
@@ -67,7 +69,10 @@ export default class DocTemplate extends Component { title={title} description={description} /> - + )} @@ -84,6 +89,7 @@ export const pageQuery = graphql` id excerpt html + htmlAst fileAbsolutePath frontmatter { title