add edit on github action

config.js

@@ -20,6 +20,7 @@ module.exports = {
   jsonfeed: '/feed.json',
   typekitID: 'msu4qap',
   itemsPerPage: 20,
+  repoContentPath: 'https://github.com/kremalicious/blog/tree/master/content',
   menu: [
     {
       title: 'Photos',

gatsby/onCreateNode.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
+const { repoContentPath } = require('../config')
 
 // Create slug & date for posts from file path values
 exports.createMarkdownFields = (node, createNodeField, getNode) => {
@@ -36,4 +37,15 @@ exports.createMarkdownFields = (node, createNodeField, getNode) => {
     name: 'date',
     value: date
   })
+
+  // github file link
+  const type = fileNode.sourceInstanceName
+  const file = fileNode.relativePath
+  const githubLink = `${repoContentPath}/${type}/${file}`
+
+  createNodeField({
+    node,
+    name: 'githubLink',
+    value: githubLink
+  })
 }

src/components/Post/PostActions.jsx

@@ -5,6 +5,7 @@ import styles from './PostActions.module.scss'
 
 import { ReactComponent as Twitter } from '../../images/twitter.svg'
 import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
+import { ReactComponent as GitHub } from '../../images/github.svg'
 
 export default class PostActions extends PureComponent {
   state = {
@@ -13,7 +14,8 @@ export default class PostActions extends PureComponent {
 
   static propTypes = {
     slug: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired
+    url: PropTypes.string.isRequired,
+    githubLink: PropTypes.string.isRequired
   }
 
   toggleModal = () => {
@@ -21,28 +23,45 @@ export default class PostActions extends PureComponent {
   }
 
   render() {
-    const { url, slug } = this.props
+    const { url, slug, githubLink } = this.props
 
     return (
       <aside className={styles.actions}>
-        <a
-          className={styles.action}
-          href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${url}${slug}`}
-        >
-          <Twitter />
-          <h1 className={styles.actionTitle}>Have a comment?</h1>
-          <p className={styles.actionText}>
-            Hit me up <span className={styles.link}>@kremalicious</span>.
-          </p>
-        </a>
-        <button className={styles.action} onClick={this.toggleModal}>
-          <Bitcoin />
-          <h1 className={styles.actionTitle}>Found something useful?</h1>
-          <p className={styles.actionText}>
-            Say thanks{' '}
-            <span className={styles.link}>with Bitcoins or Ether</span>.
-          </p>
-        </button>
+        <div>
+          <a
+            className={styles.action}
+            href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${url}${slug}`}
+          >
+            <Twitter />
+            <h1 className={styles.actionTitle}>Have a comment?</h1>
+            <p className={styles.actionText}>
+              Hit me up on Twitter{' '}
+              <span className={styles.link}>@kremalicious</span>.
+            </p>
+          </a>
+        </div>
+
+        <div>
+          <button className={styles.action} onClick={this.toggleModal}>
+            <Bitcoin />
+            <h1 className={styles.actionTitle}>Found something useful?</h1>
+            <p className={styles.actionText}>
+              Say thanks{' '}
+              <span className={styles.link}>with Bitcoins or Ether</span>.
+            </p>
+          </button>
+        </div>
+
+        <div>
+          <a className={styles.action} href={githubLink}>
+            <GitHub />
+            <h1 className={styles.actionTitle}>Edit on GitHub</h1>
+            <p className={styles.actionText}>
+              Contribute to this post on{' '}
+              <span className={styles.link}>GitHub</span>.
+            </p>
+          </a>
+        </div>
 
         {this.state.showModal && (
           <ModalThanks

src/components/Post/PostActions.module.scss

@@ -1,14 +1,33 @@
 @import 'variables';
+@import 'mixins';
 
 .actions {
-    margin-top: $spacer * 3;
-    padding: ($spacer * $line-height) 0 ($spacer * $line-height) 100%;
-    background: rgba(#fff, .5);
-    margin-left: -100%;
+    @include breakoutviewport;
 
-    @media (min-width: $screen-xs) {
-        display: flex;
-        justify-content: space-between;
+    margin-top: $spacer * 3;
+    border-top: 1px dashed $brand-grey-dimmed;
+    border-bottom: 1px dashed $brand-grey-dimmed;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    > div {
+        flex: 0 0 100%;
+        border-bottom: 1px dashed $brand-grey-dimmed;
+
+        &:last-child {
+            border-bottom: 0;
+        }
+
+        @media (min-width: $screen-sm) {
+            flex: 0 0 33.33333%;
+            border-bottom: 0;
+            border-left: 1px dashed $brand-grey-dimmed;
+
+            &:first-child {
+                border-left: 0;
+            }
+        }
     }
 }
 
@@ -18,16 +37,15 @@
 }
 
 .actionTitle {
-    font-size: $font-size-h4;
-    line-height: $line-height;
+    font-size: $font-size-base;
     color: $text-color;
     margin-top: 0;
-    margin-bottom: 0;
+    margin-bottom: $spacer / 4;
     transition: color .2s ease-out;
 }
 
 .actionText {
-    font-size: $font-size-base;
+    font-size: $font-size-small;
     color: $brand-grey-light;
     margin-bottom: 0;
     transition: color .2s ease-out;
@@ -36,22 +54,13 @@
 .action {
     display: block;
     margin: 0;
-    padding-left: 1.75rem;
-    padding-right: $spacer / 2;
+    padding-top: $spacer * $line-height;
+    padding-bottom: $spacer * $line-height;
+    padding-left: $spacer * 2;
+    padding-right: $spacer;
     position: relative;
     text-align: left;
-
-    &:first-child {
-        margin-bottom: $spacer * $line-height;
-    }
-
-    @media (min-width: $screen-xs) {
-        flex: 1 1 50%;
-
-        &:first-child {
-            margin-bottom: 0;
-        }
-    }
+    height: 100%;
 
     &:hover,
     &:focus {
@@ -73,8 +82,8 @@
 
     svg {
         position: absolute;
-        left: 0;
-        top: .4rem;
+        left: $spacer;
+        top: $spacer * $line-height;
         fill: $brand-grey-light;
     }
 }

src/templates/Post.jsx

@@ -28,7 +28,7 @@ const Post = ({ data, location }) => {
     coinhive,
     tags
   } = post.frontmatter
-  const { slug } = post.fields
+  const { slug, githubLink } = post.fields
 
   return (
     <Fragment>
@@ -51,7 +51,7 @@ const Post = ({ data, location }) => {
           {type !== 'photo' && <PostContent post={post} />}
 
           {type === 'link' && <PostLinkActions slug={slug} linkurl={linkurl} />}
-          <PostActions slug={slug} url={meta.siteUrl} />
+          <PostActions slug={slug} url={meta.siteUrl} githubLink={githubLink} />
           <PostMeta post={post} meta={meta} />
         </article>
 
@@ -116,6 +116,7 @@ export const pageQuery = graphql`
       fields {
         slug
         date
+        githubLink
       }
       rawMarkdownBody
     }