From f4c142d49e92660020ad77cf66f7bcc297c54ea1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 23 Jul 2019 12:42:25 +0200
Subject: [PATCH] unify quickstart code example syntax highlighting

---
 data/quickrun.md                              |  6 +++
 src/components/QuickRun.jsx                   | 46 +++++++++++++++++++
 .../{Repositories => }/QuickRun.module.scss   | 21 +++++----
 src/components/Repositories/QuickRun.jsx      | 40 ----------------
 src/components/Repositories/index.jsx         |  3 --
 src/pages/index.jsx                           |  3 ++
 src/styles/_code.scss                         |  1 +
 7 files changed, 68 insertions(+), 52 deletions(-)
 create mode 100644 data/quickrun.md
 create mode 100644 src/components/QuickRun.jsx
 rename src/components/{Repositories => }/QuickRun.module.scss (71%)
 delete mode 100644 src/components/Repositories/QuickRun.jsx

diff --git a/data/quickrun.md b/data/quickrun.md
new file mode 100644
index 00000000..0175966e
--- /dev/null
+++ b/data/quickrun.md
@@ -0,0 +1,6 @@
+```bash
+git clone https://github.com/oceanprotocol/barge.git
+cd barge/
+
+./start_ocean.sh
+```
diff --git a/src/components/QuickRun.jsx b/src/components/QuickRun.jsx
new file mode 100644
index 00000000..2a139d62
--- /dev/null
+++ b/src/components/QuickRun.jsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import { Link, StaticQuery, graphql } from 'gatsby'
+import Repository from './Repositories/Repository'
+import styles from './QuickRun.module.scss'
+
+const QuickRun = () => (
+    <StaticQuery
+        query={graphql`
+            query {
+                allMarkdownRemark(
+                    filter: { fields: { slug: { eq: "/quickrun/" } } }
+                ) {
+                    edges {
+                        node {
+                            html
+                        }
+                    }
+                }
+            }
+        `}
+        render={data => (
+            <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/components/">core components</Link>{' '}
+                        running on your machine?
+                    </strong>
+                </header>
+
+                <div className={styles.docker}>
+                    <div
+                        dangerouslySetInnerHTML={{
+                            __html: data.allMarkdownRemark.edges[0].node.html
+                        }}
+                    />
+
+                    <Repository name={'barge'} />
+                </div>
+            </aside>
+        )}
+    />
+)
+
+export default QuickRun
diff --git a/src/components/Repositories/QuickRun.module.scss b/src/components/QuickRun.module.scss
similarity index 71%
rename from src/components/Repositories/QuickRun.module.scss
rename to src/components/QuickRun.module.scss
index 3a53f772..de1e1a3b 100644
--- a/src/components/Repositories/QuickRun.module.scss
+++ b/src/components/QuickRun.module.scss
@@ -1,11 +1,11 @@
 @import 'variables';
 
 .quickrun {
-    padding-top: $spacer;
+    padding-top: $spacer * 4;
     padding-bottom: $spacer * 2.5;
     text-align: center;
 
-    pre {
+    > div {
         text-align: left;
         margin-top: $spacer / $line-height;
     }
@@ -29,19 +29,19 @@
         max-width: none;
         display: flex;
         justify-content: space-between;
+        align-items: center;
 
-        > pre,
+        > div,
         > article {
             flex: 0 0 48%;
-            margin: 0 !important; // stylelint-disable-line
+            margin: 0;
         }
 
         pre {
-            display: flex;
-            align-items: center;
+            margin: 0;
 
-            > code {
-                padding: $spacer / $line-height;
+            code {
+                padding: $spacer / 1.1;
             }
         }
     }
@@ -50,6 +50,9 @@
 .tldr {
     display: block;
     margin-bottom: $spacer / 2;
-    color: $brand-grey-light;
     font-size: $font-size-h4;
+
+    + strong {
+        color: $brand-grey-light;
+    }
 }
diff --git a/src/components/Repositories/QuickRun.jsx b/src/components/Repositories/QuickRun.jsx
deleted file mode 100644
index d5d99bf2..00000000
--- a/src/components/Repositories/QuickRun.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-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/components/">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/barge.git
-                    <br />
-                    <span className="token function">cd</span> barge/
-                    <br />
-                    <br />
-                    ./start_ocean.sh
-                </code>
-            </pre>
-
-            <Repository name={name} />
-        </div>
-    </aside>
-)
-
-QuickRun.propTypes = {
-    name: PropTypes.string.isRequired
-}
-
-export default QuickRun
diff --git a/src/components/Repositories/index.jsx b/src/components/Repositories/index.jsx
index 8bba2f6b..16749f39 100644
--- a/src/components/Repositories/index.jsx
+++ b/src/components/Repositories/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { Link, StaticQuery, graphql } from 'gatsby'
 import RepositoryList from './RepositoryList'
-import QuickRun from './QuickRun'
 import styles from './index.module.scss'
 
 const query = graphql`
@@ -32,8 +31,6 @@ const Repositories = () => (
 
             return (
                 <div className={styles.repositories}>
-                    <QuickRun name="barge" />
-
                     <header>
                         <h1 className={styles.repositoriesTitle}>
                             Repositories
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index de2a6d3a..e0687fb9 100755
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -7,6 +7,7 @@ import Layout from '../components/Layout'
 import Content from '../components/Content'
 import HeaderHome from '../components/HeaderHome'
 import Repositories from '../components/Repositories'
+import QuickRun from '../components/QuickRun'
 import { ReactComponent as Arrow } from '../images/arrow.svg'
 import styles from './index.module.scss'
 
@@ -73,6 +74,8 @@ const IndexPage = ({ data, location }) => (
                     ))}
                 </ul>
 
+                <QuickRun />
+
                 <Repositories />
             </Content>
         </Layout>
diff --git a/src/styles/_code.scss b/src/styles/_code.scss
index 2f95643e..7ff156c5 100644
--- a/src/styles/_code.scss
+++ b/src/styles/_code.scss
@@ -44,6 +44,7 @@ pre {
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     max-height: 800px;
+    width: 100%;
 
     code {
         background: none;