feat: date in frontmatter resolves last modifed date on page (carbon-…

…design-system#1094)

* feat: date in frontmatter resolves last modifed date on page

* fix: removed zombie

* fix: updated the example

* fix: added toLocalDateString logic

* fix: updated language in the docs

* fix: new component name

packages/example/src/pages/contributions.mdx

@@ -1,5 +1,6 @@
 ---
 description: Instructions for developing and contributing to the theme
+date: 27 January 2020
 ---
 
 <!-- Page title left out so it can be generated -->
@@ -259,10 +260,10 @@ its purpose to be included with your pull request.
 
 ## Publishing
 
-1. figure out if it’s patch or feature
-2. from the root of the package run `lerna publish patch` or
-   `lerna publish minor`
-3. git push upstream main --follow-tags
+1. Pull the latest from the main branch, usually by running
+   `git pull upstream main` on your local machine.
+2. From the root of the package run `yarn release`.
+3. Follow the prompts accordingly.
 4. In the project’s
    [release tab](https://github.com/carbon-design-system/gatsby-theme-carbon/releases),
-   edit the new release to include a summary of new changes
+   edit the new release to include a summary of new changes.

packages/example/src/pages/guides/MDX.mdx

@@ -1,6 +1,7 @@
 ---
 title: MDX
 description: guide for working with MDX and gatsby-theme-carbon
+date: 27 January 2021
 ---
 
 export const Title = () => (
@@ -28,6 +29,10 @@ for the theme to use.
 
 - `title`: Main page title: search results and SEO
 - `description`: SEO and search results
+- `date`: Enter a date that the page was last modified to be displayed at the
+  bottom left corner of the page. Refer to the
+  [IBM Style guide](https://www-03preprod.ibm.com/support/knowledgecenter/ibm_style/dates-and-times.html)
+  for the correct syntax.
 - `keywords`: just SEO (optional)
 - `hiddenFromSearch`: if true, page will be excluded from search
 
@@ -36,6 +41,7 @@ for the theme to use.
 title: Markdown
 description: Usage instructions for the Markdown component
 keywords: 'ibm,carbon,gatsby,mdx,markdown'
+date: 27 January 2021
 hiddenFromSearch: true
 ---
 ```

packages/example/src/pages/guides/configuration.mdx

@@ -1,11 +1,11 @@
 ---
 title: Configuration
 description: Guide for configuring the theme’s various settings
+date: 27 January 2021
 ---
 
 <PageDescription>
 
-
 Gatsby themes allow you to override configuration from the theme by defining the
 same property in your `gatsby-config.js` at the root of your project. You can
 see the default configuration provided by the theme’s
@@ -14,7 +14,6 @@ file.
 
 </PageDescription>
 
-
 <AnchorLinks>
   <AnchorLink>Site metadata</AnchorLink>
   <AnchorLink>Manifest</AnchorLink>
@@ -203,13 +202,11 @@ When enabled, your header navigation will look like the image below:
 <Row>
 <Column colMd={8} colLg={8}>
 
-
 ![Header navigation style](header-nav-config.jpg)
 
 </Column>
 </Row>
 
-
 With the header navigation style enabled, the content on your page will be
 further left-aligned to allow for more content space.
 

packages/example/src/pages/guides/shadowing.mdx

@@ -1,6 +1,7 @@
 ---
 title: Shadowing
 description: Guide for shadowing theme components and files
+date: 24 June 2020
 ---
 
 <PageDescription>

packages/gatsby-theme-carbon/src/components/LastModifiedDate/LastModifiedDate.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Row, Column } from '../Grid';
+import styles from './last-modified-date.module.scss';
+
+const LastModifiedDate = ({ date }) => {
+  const options = {
+    day: '2-digit',
+    year: 'numeric',
+    month: 'long',
+  };
+
+  const lastModified = new Date(date);
+
+  return date ? (
+    <Row className={styles.row}>
+      <Column>
+        <div className={styles.text}>
+          Page last updated: {lastModified.toLocaleDateString('en-GB', options)}
+          {/* // https://www-03preprod.ibm.com/support/knowledgecenter/ibm_style/dates-and-times.html */}
+        </div>
+      </Column>
+    </Row>
+  ) : null;
+};
+export default LastModifiedDate;

packages/gatsby-theme-carbon/src/components/LastModifiedDate/index.js

@@ -0,0 +1,3 @@
+import LastModifiedDate from './LastModifiedDate';
+
+export default LastModifiedDate;

packages/gatsby-theme-carbon/src/components/LastModifiedDate/last-modified-date.module.scss

@@ -0,0 +1,8 @@
+.text {
+  @include carbon--type-style('body-short-01');
+}
+
+.row {
+  position: relative;
+  top: 5rem;
+}

packages/gatsby-theme-carbon/src/templates/Default.js

@@ -10,6 +10,7 @@ import NextPrevious from '../components/NextPrevious';
 import PageTabs from '../components/PageTabs';
 import Main from '../components/Main';
 import useMetadata from '../util/hooks/useMetadata';
+import LastModifiedDate from '../components/LastModifiedDate';
 
 const Default = ({ pageContext, children, location, Title }) => {
   const { frontmatter = {}, relativePagePath, titleType } = pageContext;
@@ -19,6 +20,7 @@ const Default = ({ pageContext, children, location, Title }) => {
     theme: frontmatterTheme,
     description,
     keywords,
+    date,
   } = frontmatter;
 
   const { interiorTheme } = useMetadata();
@@ -77,6 +79,7 @@ const Default = ({ pageContext, children, location, Title }) => {
       <Main padded>
         {children}
         <EditLink relativePagePath={relativePagePath} />
+        <LastModifiedDate date={date} />
       </Main>
       <NextPrevious
         pageContext={pageContext}