feat: last updated on each page

gatsby-config.js

@@ -73,7 +73,6 @@ module.exports = {
     'gatsby-plugin-use-dark-mode',
     'gatsby-plugin-sitemap',
     'gatsby-plugin-meta-redirect',
-    'gatsby-plugin-build-date',
     {
       resolve: 'gatsby-plugin-newrelic',
       options: {

gatsby-node.js

@@ -59,6 +59,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
 exports.onCreateNode = ({ node, actions }) => {
   // if we don't have a relative path, attempt to get one
+
   if (node.context && !node.context.fileRelativePath) {
     const { createPage } = actions;
     const { path, component } = node;

package.json

@@ -10,7 +10,6 @@
     "eslint-plugin-react-hooks": "^4.0.4",
     "gatsby": "^2.23.3",
     "gatsby-image": "^2.4.9",
-    "gatsby-plugin-build-date": "^1.0.0",
     "gatsby-plugin-google-tagmanager": "^2.3.5",
     "gatsby-plugin-manifest": "^2.4.11",
     "gatsby-plugin-mdx": "^1.2.14",

src/components/Footer.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Link, useStaticQuery, graphql } from 'gatsby';
+import { Link } from 'gatsby';
 import cx from 'classnames';
 import ExternalLink from './ExternalLink';
 import { PageContext } from './PageContext';
@@ -15,15 +15,6 @@ const Footer = ({ className }) => {
     'src/markdown-pages/components'
   );
 
-  const data = useStaticQuery(graphql`
-    query {
-      currentBuildDate {
-        currentDate
-      }
-    }
-  `);
-  console.log(data, 'footer');
-
   return (
     <footer className={cx(styles.footer, className)}>
       <div className={styles.left}>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { graphql } from 'gatsby';
+import { graphql, useStaticQuery } from 'gatsby';
 import PropTypes from 'prop-types';
 import MDXContainer from '../components/MDXContainer';
 
@@ -11,7 +11,7 @@ import styles from './GuideTemplate.module.scss';
 
 const GuideTemplate = ({ data }) => {
   const { mdx } = data;
-  const { frontmatter, body } = mdx;
+  const { frontmatter, body, parent } = mdx;
   const { title, description, duration } = frontmatter;
 
   return (
@@ -27,6 +27,9 @@ const GuideTemplate = ({ data }) => {
         )}
       </div>
       <MDXContainer>{body}</MDXContainer>
+      <div className={styles.lastUpdated}>
+        {`Last updated on ${parent.modifiedTime}`}
+      </div>
     </Layout>
   );
 };
@@ -45,6 +48,11 @@ export const pageQuery = graphql`
         title
         description
       }
+      parent {
+        ... on File {
+          modifiedTime(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;
+}