feat(guide): add footer link to article source on GitHub

fix/suggested-changes

client/gatsby-node.js

@@ -4,6 +4,7 @@ const { createFilePath } = require('gatsby-source-filesystem');
 
 const { dasherize } = require('./utils');
 const { blockNameify } = require('./utils/blockNameify');
+const { getGithubPath } = require('./utils/getGithubPath');
 const {
   createChallengePages,
   createBlockIntroPages,
@@ -33,10 +34,16 @@ exports.onCreateNode = function onCreateNode({ node, actions, getNode }) {
     const slug = createFilePath({ node, getNode });
     if (!slug.includes('LICENSE')) {
       const {
+        fileAbsolutePath,
         frontmatter: { component = '' }
       } = node;
       createNodeField({ node, name: 'slug', value: slug });
       createNodeField({ node, name: 'component', value: component });
+      createNodeField({
+        node,
+        name: 'githubPath',
+        value: getGithubPath(fileAbsolutePath)
+      });
     }
   }
 };
@@ -79,6 +86,7 @@ exports.createPages = function createPages({ graphql, actions }) {
                   slug
                   nodeIdentity
                   component
+                  githubPath
                 }
                 frontmatter {
                   block

client/src/templates/Guide/components/ArticleLayout.js

@@ -4,6 +4,7 @@ import { graphql } from 'gatsby';
 import Helmet from 'react-helmet';
 
 import Breadcrumbs from './Breadcrumbs';
+import GuideFooter from './GuideFooter';
 
 const propTypes = {
   children: PropTypes.any,
@@ -20,7 +21,7 @@ const ArticleLayout = props => {
     location: { pathname },
     data: {
       markdownRemark: {
-        fields: { slug },
+        fields: { slug, githubPath },
         frontmatter: { title }
       }
     },
@@ -48,6 +49,7 @@ const ArticleLayout = props => {
       </Helmet>
       <Breadcrumbs path={pathname} />
       {children}
+      <GuideFooter githubPath={githubPath} />
     </Fragment>
   );
 };
@@ -61,6 +63,7 @@ export const fragmentQuery = graphql`
   fragment ArticleLayout on MarkdownRemark {
     fields {
       slug
+      githubPath
     }
     frontmatter {
       title

client/src/templates/Guide/components/GuideFooter.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, Spacer } from '../../../components/helpers';
+
+const propTypes = {
+  githubPath: PropTypes.string
+};
+const GuideFooter = props => {
+  const { githubPath } = props;
+  return (
+    <div>
+      <Spacer />
+      <hr />
+      <h4>Contributing to the Guide</h4>
+      <p>
+        This open source guide is curated by thousands of contributors. You can
+        help by researching, writing and updating these articles. It is an easy
+        and fun way to get started with contributing to open source.
+      </p>
+      <ul>
+        <li>
+          <Link to='https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md#research-write-and-update-our-guide-articles'>
+            Follow our contributing guidelines for working on guide articles
+          </Link>
+          .
+        </li>
+        <li>
+          <Link to={githubPath}>Edit this article on GitHub</Link>.
+        </li>
+      </ul>
+      <Spacer />
+    </div>
+  );
+};
+
+GuideFooter.displayName = 'GuideFooter';
+GuideFooter.propTypes = propTypes;
+
+export default GuideFooter;

client/utils/getGithubPath.js

@@ -0,0 +1,12 @@
+exports.getGithubPath = function getGithubPath(fileAbsolutePath) {
+  const { NODE_ENV: env } = process.env;
+  const guideType = env === 'production' ? 'guide' : 'mock-guide';
+  let githubFilePath =
+    'https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md#research-write-and-update-our-guide-articles';
+  const pathIndex = fileAbsolutePath.indexOf(`/${guideType}`);
+  if (pathIndex > -1) {
+    const newPath = fileAbsolutePath.slice(pathIndex);
+    githubFilePath = `https://github.com/freeCodeCamp/freeCodeCamp/blob/master${newPath}`;
+  }
+  return githubFilePath;
+};