From 88896b9d9b90c3fce7aa0708497589fb36ac92fb Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@newrelic.com>
Date: Thu, 18 Jun 2020 11:21:40 -0700
Subject: [PATCH] feat: Populate edit url

---
 gatsby-node.js                 |  8 +++++++-
 src/components/Footer.js       | 19 +++++++++++++------
 src/components/Layout.js       |  4 +++-
 src/pages/index.js             |  2 +-
 src/templates/GuideTemplate.js |  5 +++--
 5 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index 9eb81e796..406717cb2 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -8,6 +8,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       allMdx(limit: 1000) {
         edges {
           node {
+            fileAbsolutePath
             frontmatter {
               path
               template
@@ -28,7 +29,12 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     createPage({
       path: node.frontmatter.path,
       component: path.resolve(`src/templates/${node.frontmatter.template}.js`),
-      context: {}, // additional data can be passed via context
+      context: {
+        fileRelativePath: node.fileAbsolutePath.replace(
+          `${process.cwd()}/`,
+          ''
+        ),
+      },
     });
   });
 };
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 55ff26683..01af3d44d 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -7,7 +7,9 @@ import FeatherIcon from './FeatherIcon';
 import Logo from './Logo';
 import PropTypes from 'prop-types';
 
-const Footer = ({ className }) => (
+const githubBaseUrl = 'https://github.com/newrelic/developer-website';
+
+const Footer = ({ className, fileRelativePath }) => (
   <footer className={cx(styles.footer, className)}>
     <div className={cx('site-container', styles.container)}>
       <div className={styles.left}>
@@ -24,11 +26,15 @@ const Footer = ({ className }) => (
       </div>
 
       <div className={styles.right}>
-        <Link to="/">
-          <FeatherIcon className={styles.linkIcon} name="edit" size="1rem" />
-          Edit this page
-        </Link>
-        <ExternalLink href="https://github.com/newrelic/developer-website/issues/new/choose">
+        {fileRelativePath && (
+          <ExternalLink
+            href={`${githubBaseUrl}/blob/master/${fileRelativePath}`}
+          >
+            <FeatherIcon className={styles.linkIcon} name="edit" size="1rem" />
+            Edit this page
+          </ExternalLink>
+        )}
+        <ExternalLink href={`${githubBaseUrl}/issues/new/choose`}>
           <FeatherIcon className={styles.linkIcon} name="github" size="1rem" />
           Create an issue
         </ExternalLink>
@@ -39,6 +45,7 @@ const Footer = ({ className }) => (
 
 Footer.propTypes = {
   className: PropTypes.string,
+  fileRelativePath: PropTypes.string,
 };
 
 export default Footer;
diff --git a/src/components/Layout.js b/src/components/Layout.js
index baa03e316..3df4a3ecf 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -10,7 +10,7 @@ import styles from './Layout.module.scss';
 import 'normalize.css';
 import './styles.scss';
 
-const Layout = ({ children }) => {
+const Layout = ({ children, fileRelativePath }) => {
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
 
   return (
@@ -35,6 +35,7 @@ const Layout = ({ children }) => {
         className={cx({
           [styles.hideOnMobile]: isMobileNavOpen,
         })}
+        fileRelativePath={fileRelativePath}
       />
     </div>
   );
@@ -42,6 +43,7 @@ const Layout = ({ children }) => {
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
+  fileRelativePath: PropTypes.string,
 };
 
 export default Layout;
diff --git a/src/pages/index.js b/src/pages/index.js
index a4d64e686..05e290a2d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -54,7 +54,7 @@ const guides = [
 ];
 
 const IndexPage = () => (
-  <Layout>
+  <Layout fileRelativePath="src/pages/index.js">
     <SEO />
     <PageTitle>Observability for every developer</PageTitle>
 
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index 24aeff5b1..bced5c2ef 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -26,7 +26,7 @@ const components = {
   code: (props) => <CodeSnippet {...props} />,
 };
 
-const GuideTemplate = ({ data }) => {
+const GuideTemplate = ({ data, pageContext }) => {
   const { mdx } = data;
   const { frontmatter, body } = mdx;
   const { title, description, duration } = frontmatter;
@@ -34,7 +34,7 @@ const GuideTemplate = ({ data }) => {
 
   return (
     <BreadcrumbContext.Provider value={crumbs}>
-      <Layout>
+      <Layout fileRelativePath={pageContext.fileRelativePath}>
         <SEO title={title} description={description} />
         <div className={styles.header}>
           <PageTitle>{title}</PageTitle>
@@ -57,6 +57,7 @@ const GuideTemplate = ({ data }) => {
 
 GuideTemplate.propTypes = {
   data: PropTypes.object,
+  pageContext: PropTypes.shape({ fileRelativePath: PropTypes.string }),
 };
 
 export const pageQuery = graphql`