feat: Populate edit url

newrelic · Jun 18, 2020 · 88896b9 · 88896b9
1 parent ab6ff92
commit 88896b9
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,13 +35,15 @@ const Layout = ({ children }) => {
         className={cx({
           [styles.hideOnMobile]: isMobileNavOpen,
         })}
+        fileRelativePath={fileRelativePath}
       />
     </div>
   );
 };
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
+  fileRelativePath: PropTypes.string,
 };
 
 export default Layout;
diff --git 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
@@ -26,15 +26,15 @@ 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;
   const crumbs = createBreadcrumbs(frontmatter.path, pages);
 
   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`