many content changes

* auto placeholder for empty content
* split up doc components
* add global footer
* video embedding
* more plugins
* spacing fixes

README.md

@@ -30,6 +30,8 @@ All content lives in the [`/content`](content/) & [`/data`](data/) folders utili
 
 The final navigational organisation of the content is driven through the sidebar files under [`/data/sidebars`](data/sidebars/).
 
+Have a look at [docs.oceanprotocol.com/test/](https://docs.oceanprotocol.com/test/) to see what content elements can be used in the docs.
+
 ### Sections
 
 The documentation is split in multiple sections whose content lives in this repo:

content/setup/keeper.md

@@ -1,7 +1,3 @@
 ---
 title: Set Up a Keeper
 ---
-
-This page is a placeholder for now.
-
--   [💧 keeper-contracts](https://github.com/oceanprotocol/keeper-contracts)

content/setup/publisher.md

@@ -1,5 +1,3 @@
 ---
 title: Publish Data or Services
 ---
-
-This page is a placeholder for now.

content/test.md

@@ -1,6 +1,6 @@
 ---
 title: Content test
-description: This is intended as a quick reference and showcase.
+description: On this site, Markdown is transformed to HTML through Remark following GitHub Flavored Markdown. This page is intended as a quick reference and showcase.
 ---
 
 For more complete info, see [John Gruber's original spec](http://daringfireball.net/projects/markdown/) and the [Github-flavored Markdown info page](http://github.github.com/github-flavored-markdown/).
@@ -18,7 +18,7 @@ For more complete info, see [John Gruber's original spec](http://daringfireball.
 * [Inline HTML](#inline-html)
 * [Horizontal Rule](#horizontal-rule)
 * [Line Breaks](#line-breaks)
-* [YouTube Videos](#youtube-videos)
+* [Videos](#videos)
 
 ## Headers
 
@@ -215,9 +215,6 @@ No language indicated, so no syntax highlighting in Markdown Here (varies on Git
 But let's throw in a <b>tag</b>.
 ```
 
-Again, to see what languages are available for highlighting, and how to write those language names, see the [highlight.js demo page](http://softwaremaniacs.org/media/soft/highlight/test.html).
-
-
 ## Tables
 
 Tables aren't part of the core Markdown spec, but they are part of GFM and *Markdown Here* supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.
@@ -351,17 +348,27 @@ This line is only separated by a single newline, so it's a separate line in the
 
 (Technical note: *Markdown Here* uses GFM line breaks, so there's no need to use MD's two-space line breaks.)
 
-## YouTube Videos
+## Videos
 
-They can't be added directly but you can add an image with a link to the video like this:
+Videos can be embedded like so, works with YouTube, Vimeo, VideoPress, Twitch:
+
+```
+`video: https://www.youtube.com/watch?v=6YRmyUZr2No`
+```
+
+resulting in:
+
+`video: https://www.youtube.com/watch?v=6YRmyUZr2No`
+
+You can also add an image with a link to the video like this:
 
 ```html
-<a href="http://www.youtube.com/watch?feature=player_embedded&v=8AkLfYOgIrE" target="_blank">
+<a href="http://www.youtube.com/watch?feature=player_embedded&v=6YRmyUZr2No" target="_blank">
-    <img src="http://img.youtube.com/vi/8AkLfYOgIrE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" />
+    <img src="http://img.youtube.com/vi/6YRmyUZr2No/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" />
 </a>
 ```
 
-<a href="http://www.youtube.com/watch?feature=player_embedded&v=8AkLfYOgIrE" target="_blank"><img src="http://img.youtube.com/vi/8AkLfYOgIrE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
+<a href="http://www.youtube.com/watch?feature=player_embedded&v=6YRmyUZr2No" target="_blank"><img src="http://img.youtube.com/vi/6YRmyUZr2No/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
 
 Or, in pure Markdown, but losing the image sizing and border:
 

gatsby-config.js

@@ -56,8 +56,11 @@ module.exports = {
                         }
                     },
                     'gatsby-remark-smartypants',
+                    'gatsby-remark-embed-video',
+                    'gatsby-remark-responsive-iframe',
                     'gatsby-remark-prismjs',
-                    'gatsby-remark-autolink-headers'
+                    'gatsby-remark-autolink-headers',
+                    'gatsby-remark-copy-linked-files'
                 ]
             }
         },

gatsby-ssr.js

@@ -1,7 +0,0 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/ssr-apis/
- */
-
-// You can delete this file if you're not using it

package.json

@@ -17,8 +17,11 @@
     "gatsby-plugin-sitemap": "^2.0.2",
     "gatsby-plugin-svgr": "^2.0.0-alpha",
     "gatsby-remark-autolink-headers": "^2.0.11",
+    "gatsby-remark-copy-linked-files": "^2.0.6",
+    "gatsby-remark-embed-video": "^1.4.0",
     "gatsby-remark-images": "^2.0.6",
     "gatsby-remark-prismjs": "^3.0.3",
+    "gatsby-remark-responsive-iframe": "^2.0.6",
     "gatsby-remark-smartypants": "^2.0.6",
     "gatsby-source-filesystem": "^2.0.8",
     "gatsby-transformer-remark": "^2.1.12",

src/components/DocContent.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './DocContent.module.scss'
+
+const DocContent = ({ html }) =>
+    html ? (
+        <div
+            className={styles.docContent}
+            dangerouslySetInnerHTML={{
+                __html: html
+            }}
+        />
+    ) : (
+        <div className={styles.empty}>
+            This is a placeholder for now. Help creating it.
+        </div>
+    )
+
+DocContent.propTypes = {
+    html: PropTypes.string
+}
+
+export default DocContent

src/components/DocContent.module.scss

@@ -0,0 +1,28 @@
+@import 'variables';
+
+.docContent {
+    // handling long text, like URLs
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    padding-bottom: $spacer / $line-height;
+
+    figcaption {
+        font-size: $font-size-small;
+        text-align: center;
+        color: $brand-grey-light;
+        margin-top: $spacer / 2;
+    }
+
+    h1, h2 {
+        margin-top: $spacer * $line-height;
+        margin-bottom: $spacer / $line-height;
+        padding-bottom: $spacer / $line-height;
+        border-bottom: 1px solid $brand-grey-lighter;
+    }
+}
+
+.empty {
+    font-style: italic;
+    margin-bottom: $spacer * 2;
+}

src/components/DocFooter.jsx

@@ -8,7 +8,10 @@ const githubContentPath =
 
 const DocFooter = ({ post }) => (
     <footer className={styles.footer}>
-        <a href={`${githubContentPath}/${post.parent.relativePath}`}>
+        <a
+            href={`${githubContentPath}/${post.parent.relativePath}`}
+            className={!post.html ? styles.active : null}
+        >
             <Pencil /> Edit this page on GitHub
         </a>
     </footer>

src/components/DocFooter.module.scss

@@ -29,3 +29,7 @@
         }
     }
 }
+
+.active {
+    color: $brand-pink !important;
+}

src/components/DocHeader.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './DocHeader.module.scss'
+
+const DocHeader = ({ title, description }) => (
+    <header className={styles.header}>
+        <h1 className={styles.title}>{title}</h1>
+        {description && <p className={styles.lead}>{description}</p>}
+    </header>
+)
+
+DocHeader.propTypes = {
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string
+}
+
+export default DocHeader

src/components/DocHeader.module.scss

@@ -0,0 +1,16 @@
+@import 'variables';
+
+.header {
+    margin-top: $spacer * $line-height;
+    margin-bottom: $spacer * $line-height;
+}
+
+.title {
+    font-size: $font-size-h1;
+    margin-top: 0;
+    margin-bottom: $spacer / $line-height;
+}
+
+.lead {
+    font-size: $font-size-large;
+}

src/components/Footer.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Content from '../components/Content'
+import styles from './Footer.module.scss'
+
+const Footer = () => (
+    <footer className={styles.footer}>
+        <Content>
+            <small>
+                &copy; {new Date().getFullYear()}{' '}
+                <a href="https://oceanprotocol.com">
+                    Ocean Protocol Foundation Ltd.
+                </a>{' '}
+                &mdash; All Rights Reserved
+            </small>
+
+            <nav className={styles.links}>
+                <a href="https://blog.oceanprotocol.com">Blog</a>
+                <a href="https://twitter.com/oceanprotocol">Twitter</a>
+                <a href="https://github.com/oceanprotocol">GitHub</a>
+            </nav>
+        </Content>
+    </footer>
+)
+
+export default Footer

src/components/Footer.module.scss

@@ -0,0 +1,51 @@
+@import 'variables';
+
+.footer {
+    color: $brand-grey-light;
+    width: 100%;
+    text-align: center;
+    margin-top: $spacer;
+    padding-top: $spacer;
+    padding-bottom: $spacer;
+
+    > section {
+        align-self: flex-end;
+
+        @media screen and (min-width: $break-point--small) {
+            text-align: left;
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+
+    &,
+    small {
+        font-size: $font-size-small;
+    }
+
+    a {
+        color: inherit;
+
+        &:hover,
+        &:focus {
+            color: $brand-grey;
+        }
+    }
+}
+
+.links {
+    margin-top: $spacer / 2;
+
+    @media screen and (min-width: $break-point--small) {
+        text-align: right;
+        margin-top: 0;
+    }
+
+    a {
+        padding: 0 $spacer / 4;
+
+        &:last-child {
+            padding-right: 0;
+        }
+    }
+}

src/components/HeaderSection.jsx

@@ -5,7 +5,7 @@ import Content from './Content'
 import styles from './HeaderSection.module.scss'
 
 const HeaderSection = ({ title }) => (
-    <header className={styles.headerSection}>
+    <aside className={styles.headerSection}>
         <Content>
             <h1 className={styles.headerSectionTitle}>
                 <Link className={styles.rootLink} to="/">
@@ -14,7 +14,7 @@ const HeaderSection = ({ title }) => (
                 {title}
             </h1>
         </Content>
-    </header>
+    </aside>
 )
 
 HeaderSection.propTypes = {

src/components/Layout.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Header from './Header'
+import Footer from './Footer'
 
 const Layout = ({ children, header }) => {
     const headerElement = header || <Header />
@@ -9,6 +10,7 @@ const Layout = ({ children, header }) => {
         <>
             {headerElement}
             {children}
+            <Footer />
         </>
     )
 }

src/components/Repositories/index.module.scss

@@ -6,7 +6,7 @@
 
 .quickrun {
     padding-top: $spacer;
-    padding-bottom: $spacer;
+    padding-bottom: $spacer * $line-height;
     text-align: center;
     max-width: $break-point--small;
     margin: auto;

src/pages/index.module.scss

@@ -20,7 +20,7 @@
     &:before { display: none; }
 
     @media (min-width: $break-point--medium) {
-        flex: 0 0 30%;
+        flex: 0 0 31%;
     }
 
     a {

src/templates/Doc.jsx

@@ -5,6 +5,8 @@ import Layout from '../components/Layout'
 import Content from '../components/Content'
 import HeaderSection from '../components/HeaderSection'
 import Sidebar from '../components/Sidebar'
+import DocContent from '../components/DocContent'
+import DocHeader from '../components/DocHeader'
 import DocFooter from '../components/DocFooter'
 import styles from './Doc.module.scss'
 
@@ -40,44 +42,25 @@ export default class DocTemplate extends Component {
                                 <Sidebar
                                     location={location}
                                     sidebar={section}
+                                    isPlaceholder={!post.html}
                                 />
                             </aside>
                             <article className={styles.main}>
-                                <header className={styles.header}>
+                                <DocHeader
-                                    <h1 className={styles.title}>{title}</h1>
+                                    title={title}
-                                    {description && (
+                                    description={description}
-                                        <p className={styles.lead}>
-                                            {description}
-                                        </p>
-                                    )}
-                                </header>
-
-                                <div
-                                    className={styles.docContent}
-                                    dangerouslySetInnerHTML={{
-                                        __html: post.html
-                                    }}
                                 />
-
+                                <DocContent html={post.html} />
                                 <DocFooter post={post} />
                             </article>
                         </main>
                     ) : (
                         <article className={styles.mainSingle}>
-                            <header className={styles.header}>
+                            <DocHeader
-                                <h1 className={styles.title}>{title}</h1>
+                                title={title}
-                                {description && (
+                                description={description}
-                                    <p className={styles.lead}>{description}</p>
-                                )}
-                            </header>
-
-                            <div
-                                className={styles.docContent}
-                                dangerouslySetInnerHTML={{
-                                    __html: post.html
-                                }}
                             />
-
+                            <DocContent html={post.html} />
                             <DocFooter post={post} />
                         </article>
                     )}

src/templates/Doc.module.scss

@@ -21,40 +21,3 @@
     max-width: $break-point--small;
     margin: auto;
 }
-
-.header {
-    margin-top: $spacer * $line-height;
-    margin-bottom: $spacer * $line-height;
-}
-
-.title {
-    font-size: $font-size-h1;
-    margin-top: 0;
-    margin-bottom: $spacer / $line-height;
-}
-
-.lead {
-    font-size: $font-size-large;
-}
-
-.docContent {
-    // handling long text, like URLs
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
-    padding-bottom: $spacer / $line-height;
-
-    figcaption {
-        font-size: $font-size-small;
-        text-align: center;
-        color: $brand-grey-light;
-        margin-top: $spacer / 2;
-    }
-
-    h1, h2 {
-        margin-top: $spacer * $line-height;
-        margin-bottom: $spacer / $line-height;
-        padding-bottom: $spacer / $line-height;
-        border-bottom: 1px solid $brand-grey-lighter;
-    }
-}