Merge pull request #104 from kremalicious/feature/github-link

add edit on github action

README.md

@@ -54,7 +54,7 @@ In the end looks like this, including location display with [pigeon-maps](https:
 If you want to know how this works, have a look at the respective component under
 
 - [`src/components/atoms/Exif.jsx`](src/components/atoms/Exif.jsx)
-- the EXIF node fields creation [`gatsby/exif.js`](gatsby/exif.js) running in [`gatsby-node.js`](gatsby-node.js)
+- the EXIF node fields creation [`gatsby/createExifFields.js`](gatsby/createExifFields.js) running in [`gatsby-node.js`](gatsby-node.js)
 
 ### 💰 Cryptocurrency donation via Web3/MetaMask
 

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-node.js

@@ -1,5 +1,5 @@
-const { createMarkdownFields } = require('./gatsby/onCreateNode')
-const { createExifFields } = require('./gatsby/exif')
+const { createMarkdownFields } = require('./gatsby/createMarkdownFields')
+const { createExifFields } = require('./gatsby/createExifFields')
 const {
   generatePostPages,
   generateTagPages,

gatsby/createMarkdownFields.js

@@ -1,7 +1,8 @@
 const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
+const { repoContentPath } = require('../config')
 
-// Create slug & date for posts from file path values
+// Create slug, date & github file link for posts from file path values
 exports.createMarkdownFields = (node, createNodeField, getNode) => {
   const fileNode = getNode(node.parent)
   const parsedFilePath = path.parse(fileNode.relativePath)
@@ -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,65 @@ 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'
+
+const ActionContent = ({ title, text, textLink }) => (
+  <>
+    <h1 className={styles.actionTitle}>{title}</h1>
+    <p className={styles.actionText}>
+      {text} <span className={styles.link}>{textLink}</span>
+    </p>
+  </>
+)
+
+const ActionTwitter = ({ url, slug }) => (
+  <a
+    className={styles.action}
+    href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${url}${slug}`}
+  >
+    <Twitter />
+    <ActionContent
+      title="Have a comment?"
+      text="Hit me up on Twitter"
+      textLink="@kremalicious"
+    />
+  </a>
+)
+
+ActionTwitter.propTypes = {
+  url: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired
+}
+
+const ActionCrypto = ({ toggleModal }) => (
+  <button className={styles.action} onClick={toggleModal}>
+    <Bitcoin />
+    <ActionContent
+      title="Found something useful?"
+      text="Say thanks with"
+      textLink="Bitcoins or Ether"
+    />
+  </button>
+)
+
+ActionCrypto.propTypes = {
+  toggleModal: PropTypes.func.isRequired
+}
+
+const ActionGitHub = ({ githubLink }) => (
+  <a className={styles.action} href={githubLink}>
+    <GitHub />
+    <ActionContent
+      title="Edit on GitHub"
+      text="Contribute to this post on"
+      textLink="GitHub"
+    />
+  </a>
+)
+
+ActionGitHub.propTypes = {
+  githubLink: PropTypes.string.isRequired
+}
 
 export default class PostActions extends PureComponent {
   state = {
@@ -13,7 +72,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 +81,21 @@ 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>
+          <ActionTwitter url={url} slug={slug} />
+        </div>
+
+        <div>
+          <ActionCrypto toggleModal={this.toggleModal} />
+        </div>
+
+        <div>
+          <ActionGitHub githubLink={githubLink} />
+        </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
     }