attach readme contents to all repos

content/concepts/components.md

@@ -11,7 +11,7 @@ Every marketplace must run an instance of Aquarius.
 Aquarius provides an API to an off-chain database ("OceanDB") to store and manage metadata about data assets: the assets listed in that marketplace.
 The off-chain database might be MongoDB, Elasticsearch or BigchainDB.
 
-<repo name="aquarius"></repo>
+<repo name="aquarius" readme="true"></repo>
 
 ## Brizo
 

content/test.md

@@ -359,10 +359,21 @@ Note that the component name in Markdown needs to be always in lowercase, and ha
 
 The `Repository` component fetching and displaying information about a GitHub repo. Component can be used in Markdown as `<repo>`, it requires a `name` to be passed:
 
-```HTML
+```html
 <repo name="pleuston"></repo>
 ```
 
 Resulting in:
 
 <repo name="pleuston"></repo>
+
+You can also pass `readme="true"` and the readme contents of the repo will be rendered:
+
+```html
+<repo name="aquarius" readme="true"></repo>
+```
+
+Resulting in:
+
+<repo name="aquarius" readme="true"></repo>
+

package.json

@@ -54,7 +54,9 @@
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
     "react-helmet": "^5.2.0",
-    "rehype-react": "^3.0.3"
+    "rehype-react": "^3.0.3",
+    "remark": "^10.0.0",
+    "remark-react": "^4.0.3"
   },
   "devDependencies": {
     "@svgr/webpack": "^4.0.2",

src/components/Repositories/Repository.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
+import remark from 'remark'
+import remarkReact from 'remark-react'
 import { ReactComponent as Star } from '../../images/star.svg'
 import { ReactComponent as Forks } from '../../images/forks.svg'
 import styles from './Repository.module.scss'
@@ -31,6 +33,12 @@ const queryGithub = graphql`
                                     }
                                 }
                             }
+                            object(expression: "develop:README.md") {
+                                id
+                                ... on GitHub_Blob {
+                                    text
+                                }
+                            }
                         }
                     }
                 }
@@ -98,7 +106,7 @@ Numbers.propTypes = {
     url: PropTypes.string.isRequired
 }
 
-const Repository = ({ name, links }) => (
+const Repository = ({ name, links, readme }) => (
     <StaticQuery
         query={queryGithub}
         render={data => {
@@ -119,7 +127,18 @@ const Repository = ({ name, links }) => (
             // e.g. when private repos are referenced in repositories.yml
             if (repo === undefined) return null
 
-            const { url, description, forkCount, stargazers, releases } = repo
+            const {
+                url,
+                description,
+                forkCount,
+                stargazers,
+                releases,
+                object
+            } = repo
+
+            const readmeHtml = remark()
+                .use(remarkReact)
+                .processSync(object.text).contents
 
             return (
                 <article className={styles.repository}>
@@ -135,6 +154,15 @@ const Repository = ({ name, links }) => (
                             url={url}
                         />
                     </footer>
+
+                    {readme && (
+                        <aside className={styles.repositoryReadme}>
+                            <h3 className={styles.repositoryReadmeTitle}>
+                                README.md
+                            </h3>
+                            {readmeHtml}
+                        </aside>
+                    )}
                 </article>
             )
         }}
@@ -143,7 +171,8 @@ const Repository = ({ name, links }) => (
 
 Repository.propTypes = {
     name: PropTypes.string.isRequired,
-    links: PropTypes.array
+    links: PropTypes.array,
+    readme: PropTypes.bool
 }
 
 export default Repository

src/components/Repositories/Repository.module.scss

@@ -87,3 +87,26 @@
         margin-bottom: -.1rem;
     }
 }
+
+.repositoryReadme {
+    margin-top: $spacer;
+
+    h1,
+    h2 {
+        font-size: $font-size-large;
+    }
+
+    h3,
+    h4 {
+        font-size: $font-size-base;
+    }
+}
+
+.repositoryReadmeTitle {
+    font-size: $font-size-small !important; // stylelint-disable-line
+    margin: 0;
+    color: $brand-grey-light;
+    margin-bottom: $spacer / 2;
+    padding-bottom: $spacer / 3;
+    border-bottom: 1px solid $brand-grey-lighter;
+}