From 3930976fd711452b3f9cb94388aa881da75a8555 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 9 Nov 2018 14:42:47 +0100
Subject: [PATCH 1/3] add docs footer, edit on github link

---
 src/components/DocFooter.jsx         | 21 +++++++++++++++++++++
 src/components/DocFooter.module.scss | 17 +++++++++++++++++
 src/templates/Doc.jsx                | 15 +++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 src/components/DocFooter.jsx
 create mode 100644 src/components/DocFooter.module.scss

diff --git a/src/components/DocFooter.jsx b/src/components/DocFooter.jsx
new file mode 100644
index 00000000..b27f7273
--- /dev/null
+++ b/src/components/DocFooter.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './DocFooter.module.scss'
+
+const DocFooter = ({ post }) => (
+    <footer className={styles.footer}>
+        <a
+            href={`https://github.com/oceanprotocol/docs/blob/master/content/${
+                post.parent.relativePath
+            }`}
+        >
+            Edit on GitHub
+        </a>
+    </footer>
+)
+
+DocFooter.propTypes = {
+    post: PropTypes.object.isRequired
+}
+
+export default DocFooter
diff --git a/src/components/DocFooter.module.scss b/src/components/DocFooter.module.scss
new file mode 100644
index 00000000..e55890aa
--- /dev/null
+++ b/src/components/DocFooter.module.scss
@@ -0,0 +1,17 @@
+@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;
+    }
+}
diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx
index a4681dea..9f528ebf 100644
--- a/src/templates/Doc.jsx
+++ b/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
+            }
+        }
+    }
 `

From 553bcd887dbd7b23fbf028f94818c3f265058443 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 9 Nov 2018 14:48:33 +0100
Subject: [PATCH 2/3] edit icon

---
 src/components/DocFooter.jsx         |  3 ++-
 src/components/DocFooter.module.scss | 12 ++++++++++++
 src/images/pencil.svg                |  3 +++
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 src/images/pencil.svg

diff --git a/src/components/DocFooter.jsx b/src/components/DocFooter.jsx
index b27f7273..a011de9e 100644
--- a/src/components/DocFooter.jsx
+++ b/src/components/DocFooter.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { ReactComponent as Pencil } from '../images/pencil.svg'
 import styles from './DocFooter.module.scss'
 
 const DocFooter = ({ post }) => (
@@ -9,7 +10,7 @@ const DocFooter = ({ post }) => (
                 post.parent.relativePath
             }`}
         >
-            Edit on GitHub
+            <Pencil /> Edit this page on GitHub
         </a>
     </footer>
 )
diff --git a/src/components/DocFooter.module.scss b/src/components/DocFooter.module.scss
index e55890aa..6af86c56 100644
--- a/src/components/DocFooter.module.scss
+++ b/src/components/DocFooter.module.scss
@@ -13,5 +13,17 @@
         font-family: $font-family-button;
         text-transform: uppercase;
         color: $brand-grey-light;
+
+        &:hover,
+        &:focus {
+            color: $brand-pink;
+        }
+
+        svg {
+            display: inline-block;
+            margin-right: $spacer / 10;
+            margin-bottom: -1px;
+            fill: $brand-grey-light;
+        }
     }
 }
diff --git a/src/images/pencil.svg b/src/images/pencil.svg
new file mode 100644
index 00000000..9a0ed66c
--- /dev/null
+++ b/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>

From c63ee5ec3fed2032b62cf43a587c2b6de4d721c7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 9 Nov 2018 15:02:35 +0100
Subject: [PATCH 3/3] prepare multiple footer links

---
 src/components/DocFooter.jsx         | 9 ++++-----
 src/components/DocFooter.module.scss | 1 +
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/DocFooter.jsx b/src/components/DocFooter.jsx
index a011de9e..5365322b 100644
--- a/src/components/DocFooter.jsx
+++ b/src/components/DocFooter.jsx
@@ -3,13 +3,12 @@ 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={`https://github.com/oceanprotocol/docs/blob/master/content/${
-                post.parent.relativePath
-            }`}
-        >
+        <a href={`${githubContentPath}/${post.parent.relativePath}`}>
             <Pencil /> Edit this page on GitHub
         </a>
     </footer>
diff --git a/src/components/DocFooter.module.scss b/src/components/DocFooter.module.scss
index 6af86c56..8376a7ad 100644
--- a/src/components/DocFooter.module.scss
+++ b/src/components/DocFooter.module.scss
@@ -13,6 +13,7 @@
         font-family: $font-family-button;
         text-transform: uppercase;
         color: $brand-grey-light;
+        margin: 0 $spacer / 2;
 
         &:hover,
         &:focus {