Merge pull request #7 from oceanprotocol/feature/docs-footer

add docs footer, edit on github link

src/components/DocFooter.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { ReactComponent as Pencil } from '../images/pencil.svg'
+import styles from './DocFooter.module.scss'
+
+const githubContentPath =
+    'https://github.com/oceanprotocol/docs/blob/master/content'
+
+const DocFooter = ({ post }) => (
+    <footer className={styles.footer}>
+        <a href={`${githubContentPath}/${post.parent.relativePath}`}>
+            <Pencil /> Edit this page on GitHub
+        </a>
+    </footer>
+)
+
+DocFooter.propTypes = {
+    post: PropTypes.object.isRequired
+}
+
+export default DocFooter

src/components/DocFooter.module.scss

@@ -0,0 +1,30 @@
+@import 'variables';
+
+.footer {
+    margin-top: $spacer;
+    padding-top: $spacer;
+    margin-bottom: $spacer;
+    padding-bottom: $spacer;
+    border-top: .1rem solid $brand-grey-lighter;
+    font-size: $font-size-small;
+    text-align: center;
+
+    a {
+        font-family: $font-family-button;
+        text-transform: uppercase;
+        color: $brand-grey-light;
+        margin: 0 $spacer / 2;
+
+        &:hover,
+        &:focus {
+            color: $brand-pink;
+        }
+
+        svg {
+            display: inline-block;
+            margin-right: $spacer / 10;
+            margin-bottom: -1px;
+            fill: $brand-grey-light;
+        }
+    }
+}

src/images/pencil.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+  <path fill-rule="evenodd" d="M23.782503,105.768469 C23.782503,105.768469 25.325503,99.2184687 25.346503,99.1814687 L30.971503,104.806469 C30.933503,104.826469 24.383503,106.369469 24.383503,106.369469 C24.207503,106.410469 24.033503,106.355469 23.915503,106.236469 C23.793503,106.113469 23.742503,105.936469 23.782503,105.768469 Z M39.2670353,85.2275377 L39.9744353,84.5206378 L45.6296353,90.1798378 L44.9222353,90.8867378 L39.2670353,85.2275377 Z M26.0371733,98.4571969 L38.557793,85.9365772 L44.214593,91.5933771 L31.6939733,104.113997 L26.0371733,98.4571969 Z M46.336503,89.4724688 L40.679503,83.8154687 L41.033503,83.4634688 C41.505503,82.9904688 42.133503,82.7304688 42.801503,82.7304688 C43.469503,82.7304688 44.097503,82.9894688 44.569503,83.4634688 L46.690503,85.5834687 C47.665503,86.5584688 47.665503,88.1444688 46.690503,89.1184688 L46.336503,89.4724688 Z" transform="translate(-23 -82)"/>
+</svg>

src/templates/Doc.jsx

@@ -5,6 +5,7 @@ import Layout from '../components/Layout'
 import Content from '../components/Content'
 import HeaderSection from '../components/HeaderSection'
 import Sidebar from '../components/Sidebar'
+import DocFooter from '../components/DocFooter'
 import styles from './Doc.module.scss'
 
 export default class DocTemplate extends Component {
@@ -57,6 +58,8 @@ export default class DocTemplate extends Component {
                                         __html: post.html
                                     }}
                                 />
+
+                                <DocFooter post={post} />
                             </article>
                         </main>
                     ) : (
@@ -74,6 +77,8 @@ export default class DocTemplate extends Component {
                                     __html: post.html
                                 }}
                             />
+
+                            <DocFooter post={post} />
                         </article>
                     )}
                 </Content>
@@ -94,6 +99,7 @@ export const pageQuery = graphql`
             id
             excerpt
             html
+            fileAbsolutePath
             frontmatter {
                 title
                 description
@@ -101,6 +107,7 @@ export const pageQuery = graphql`
             fields {
                 section
             }
+            ...PageFooter
         }
 
         allSectionsYaml {
@@ -113,4 +120,12 @@ export const pageQuery = graphql`
             }
         }
     }
+
+    fragment PageFooter on MarkdownRemark {
+        parent {
+            ... on File {
+                relativePath
+            }
+        }
+    }
 `