diff --git a/client/gatsby-node.js b/client/gatsby-node.js index c1d8de35ea..6bde3fe2ad 100644 --- a/client/gatsby-node.js +++ b/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 diff --git a/client/src/templates/Guide/components/ArticleLayout.js b/client/src/templates/Guide/components/ArticleLayout.js index d0ff287cca..0d6a1cdf59 100644 --- a/client/src/templates/Guide/components/ArticleLayout.js +++ b/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 => { {children} + ); }; @@ -61,6 +63,7 @@ export const fragmentQuery = graphql` fragment ArticleLayout on MarkdownRemark { fields { slug + githubPath } frontmatter { title diff --git a/client/src/templates/Guide/components/GuideFooter.js b/client/src/templates/Guide/components/GuideFooter.js new file mode 100644 index 0000000000..3ed7be47c0 --- /dev/null +++ b/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 ( +
+ +
+

Contributing to the Guide

+

+ 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. +

+
    +
  • + + Follow our contributing guidelines for working on guide articles + + . +
  • +
  • + Edit this article on GitHub. +
  • +
+ +
+ ); +}; + +GuideFooter.displayName = 'GuideFooter'; +GuideFooter.propTypes = propTypes; + +export default GuideFooter; diff --git a/client/utils/getGithubPath.js b/client/utils/getGithubPath.js new file mode 100644 index 0000000000..58465c443d --- /dev/null +++ b/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; +};