Last modified on each guide page

gatsby-node.js

@@ -1,4 +1,5 @@
 const path = require(`path`);
+const { execSync } = require('child_process');
 
 const getFileRelativePath = (absolutePath) =>
   absolutePath.replace(`${process.cwd()}/`, '');
@@ -59,6 +60,17 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
 exports.onCreateNode = ({ node, actions }) => {
   // if we don't have a relative path, attempt to get one
+  if (node.internal.type === 'Mdx' && node.fileAbsolutePath) {
+    const gitAuthorTime = execSync(
+      `git log -1 --pretty=format:%aI ${node.fileAbsolutePath}`
+    ).toString();
+    actions.createNodeField({
+      node,
+      name: 'gitAuthorTime',
+      value: gitAuthorTime,
+    });
+  }
+
   if (node.context && !node.context.fileRelativePath) {
     const { createPage } = actions;
     const { path, component } = node;

src/components/Layout.module.scss

@@ -34,12 +34,12 @@
 
 .content {
   flex: 1;
+  margin-bottom: 2rem;
 }
 
 .footer {
   border-top: 1px solid var(--divider-color);
   padding-top: 2rem;
-  margin-top: 4rem;
 }
 
 .hideOnDesktop {

src/templates/GuideTemplate.js

@@ -11,7 +11,7 @@ import styles from './GuideTemplate.module.scss';
 
 const GuideTemplate = ({ data }) => {
   const { mdx } = data;
-  const { frontmatter, body } = mdx;
+  const { frontmatter, body, fields } = mdx;
   const { title, description, duration } = frontmatter;
 
   return (
@@ -27,6 +27,9 @@ const GuideTemplate = ({ data }) => {
         )}
       </div>
       <MDXContainer>{body}</MDXContainer>
+      <div className={styles.lastUpdated}>
+        {`Page last modified on ${fields.gitAuthorTime}`}
+      </div>
     </Layout>
   );
 };
@@ -45,6 +48,9 @@ export const pageQuery = graphql`
         title
         description
       }
+      fields {
+        gitAuthorTime(formatString: "MMMM DD, YYYY")
+      }
     }
   }
 `;

src/templates/GuideTemplate.module.scss

@@ -62,3 +62,12 @@
 .clock {
   margin-right: 0.25rem;
 }
+
+.lastUpdated {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  font-size: 0.875rem;
+  font-style: italic;
+  margin-top: 4rem;
+}