use repository component in markdown

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
+cp .env.sample .env
-vi .env.development
+vi .env
 # GITHUB_TOKEN=ADD-YOUR-TOKEN-HERE
 ```
 

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)
+<repo name="ocean-bounties"></repo>
+
 -   [Gitcoin](https://gitcoin.co/profile/oceanprotocol)
 -   [bounties.network](https://explorer.bounties.network/explorer?bountyStage=active&search=ocean%20protocol)

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)
+<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>

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)
+<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
 

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 `<repo>` Component requires a `name` to be passed:
+
+```
+<repo name="pleuston"></repo>
+```
+
+Resulting in:
+
+<repo name="pleuston"></repo>
+

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)
+<repo name="mantaray"></repo>

gatsby-config.js

@@ -1,10 +1,4 @@
-let activeEnv = process.env.ACTIVE_ENV || process.env.NODE_ENV || 'development'
+require('dotenv').config()
-
-console.log(`Using environment config: '${activeEnv}'`) // eslint-disable-line
-
-require('dotenv').config({
-    path: `.env.${activeEnv}`
-})
 
 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'
                 ]
             }
         },

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": {

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 ? (
-        <div
+        <div className={styles.docContent}>{renderAst(htmlAst)}</div>
-            className={styles.docContent}
-            dangerouslySetInnerHTML={{
-                __html: html
-            }}
-        />
     ) : (
         <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

src/components/DocContent.module.scss

@@ -14,8 +14,8 @@
         margin-top: $spacer / 2;
     }
 
-    h1,
+    > div > h1,
-    h2 {
+    > div > h2 {
         margin-top: $spacer * $line-height;
         margin-bottom: $spacer / $line-height;
         padding-bottom: $spacer / $line-height;

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;
-
+    width: 100%;
-    @media (min-width: $break-point--small) {
+    margin-bottom: $spacer;
-        flex: 0 0 100%;
-    }
 }
 
 .repositoryName {
     font-size: $font-size-h4;
     margin-top: 0;
+    border: 0;
+    padding: 0;
 }
 
 .repositoryRelease {

src/templates/Doc.jsx

@@ -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