Read frontmatter from mdx files to get 'lastUpdated' property

next.config.js

@@ -24,10 +24,15 @@ module.exports = async (phase, { defaultConfig }) => {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const importPlugin = await require('./src/plugins/import.tsx');
 
+  const locateFragmentsPlugin = await require('./src/plugins/locate-fragments.tsx');
+
+  const frontmatterPlugin = await require('./src/plugins/frontmatter.tsx');
+
   const withMDX = require('@next/mdx')({
     extension: /\.mdx$/,
     options: {
       remarkPlugins: [
+        frontmatterPlugin,
         importPlugin,
         headingLinkPlugin,
         pagePlugin,

src/components/FilterChildren/index.tsx

@@ -1,18 +1,34 @@
-import {useRouter} from "next/router";
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { useLastUpdatedDatesContext } from '../LastUpdatedProvider';
 
-export default function FilterChildren({children}) {
+export default function FilterChildren({ children, frontmatter }) {
   const router = useRouter();
+
+  const lastUpdatedDatesContext = useLastUpdatedDatesContext();
 
-  let filterKey = "";
-  if ("platform" in router.query) {
+  useEffect(() => {
+    lastUpdatedDatesContext.updateLastUpdatedDate(frontmatter.lastUpdated);
+  }, []);
+
+  let filterKey = '';
+  if ('platform' in router.query) {
     filterKey = router.query.platform as string;
-  } else if ("integration" in router.query) {
+  } else if ('integration' in router.query) {
     filterKey = router.query.integration as string;
-  } else if ("framework" in router.query) {
+  } else if ('framework' in router.query) {
     filterKey = router.query.framework as string;
   }
+
   const filteredChildren = children.filter(
-    (el) => el.key === filterKey || el.key === "all",
+    (el) => el.key === filterKey || el.key === 'all'
   );
+
+  if (filteredChildren.length > 0) {
+    return (
+      <div>{filteredChildren}</div>
+    );
+  }
+
   return filteredChildren;
 }

src/components/Fragments/index.tsx

@@ -2,10 +2,12 @@ import FilterChildren from "../FilterChildren";
 
 export default function Fragments({fragments}) {
   const children = [];
+  let frontmatter;
   for (const key in fragments) {
     const fragment = fragments[key]([]);
+    frontmatter = fragment.props.frontmatter;
     children.push(<div key={key}>{fragment}</div>);
   }
 
-  return <FilterChildren>{children}</FilterChildren>;
+  return <FilterChildren frontmatter={frontmatter}>{children}</FilterChildren>;
 }

src/components/LastUpdatedProvider/index.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContext, useState } from 'react';
+
+const LastUpdatedDatesContext = createContext({
+  updateLastUpdatedDate: (date) => {}
+});
+
+export default function LastUpdatedDatesProvider({ updateLastUpdatedDate, children }) {
+  const value = {updateLastUpdatedDate}
+
+  return (
+    <LastUpdatedDatesContext.Provider value={value}>
+      {children}
+    </LastUpdatedDatesContext.Provider>
+  );
+}
+
+export function useLastUpdatedDatesContext() {
+  const context = useContext(LastUpdatedDatesContext);
+  if (!context) {
+    console.error(
+      'useLastUpdatedDatesContext must be used within a LastUpdatedDatesProvider'
+    );
+    return;
+  }
+
+  return context;
+}

src/components/Page/index.tsx

@@ -6,13 +6,13 @@ import Layout from '../Layout/index';
 import Menu from '../Menu/index';
 import TableOfContents from '../TableOfContents/index';
 import NextPrevious from '../NextPrevious/index';
-import { ContentStyle, ChapterTitleStyle } from './styles';
+import { ContentStyle, ChapterTitleStyle, LastUpdatedStyle } from './styles';
 import {
   getChapterDirectory,
   isProductRoot
 } from '../../utils/getLocalDirectory';
 import SidebarLayoutToggle from '../SidebarLayoutToggle';
-import { useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { MQTablet } from '../media';
 import {
   filterMetadataByOption,
@@ -22,27 +22,35 @@ import ChooseFilterPage from '../../pages/ChooseFilterPage';
 import { parseLocalStorage } from '../../utils/parseLocalStorage';
 import { withFilterOverrides } from '../../utils/withFilterOverrides';
 import { FeedbackToggle } from '../Feedback';
+import LastUpdatedDatesProvider from '../LastUpdatedProvider';
 
 export default function Page({
   children,
-  meta
+  meta,
+  frontmatter
 }: {
   children: any;
   meta?: any;
+  frontmatter?: any;
 }) {
   const router = useRouter();
   if (!router.isReady) {
     const [menuIsOpen, setMenuIsOpen] = useState(false);
+    // const [lastUpdatedDate, setLastUpdatedDate] = useState('');
     useRef(null);
     return <></>;
   }
+
+  // const [lastUpdatedDate, setLastUpdatedDate] = useState('');
+
   let url = router.asPath;
   // remove trailing slash.  this is important on pages like /cli/index.mdx
   // or /console/index.mdx where router.asPath has a trailing slash and
   // router.pathname doesn't.
   if (url.endsWith('/')) {
     url = url.slice(0, -1);
   }
+
   const directoryPath = router.pathname;
   let filterKey = '',
     filterKind = '';
@@ -67,7 +75,7 @@ export default function Page({
   const headers = traverseHeadings(children, filterKey);
   let filters = gatherAllFilters(children, filterKind);
   // special cases
-  if (url.startsWith("/sdk")) {
+  if (url.startsWith('/sdk')) {
     filters = filters.filter(
       (filter) => filter !== 'flutter' && filter !== 'js'
     );
@@ -141,6 +149,18 @@ export function metaContent({
   directoryPath,
   menuIsOpen,
   setMenuIsOpen
+}: {
+  title: any;
+  chapterTitle: any;
+  headers: any;
+  children: any;
+  filters: any;
+  filterKey: any;
+  filterKind: any;
+  url: any;
+  directoryPath: any;
+  menuIsOpen: any;
+  setMenuIsOpen: any;
 }) {
   const menuRef = useRef(null);
   // Slice off the "@media " string at the start for use in JS instead of CSS
@@ -150,7 +170,36 @@ export function metaContent({
     typeof window === 'undefined'
       ? false
       : window.matchMedia(MQTabletJS).matches;
-
+
+  const [lastUpdatedDate, setLastUpdatedDate] = useState('');
+
+  function toReadableDate(date) {
+    const dateOptions: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    };
+
+    return new Date(date).toLocaleDateString('en-US', dateOptions);
+  }
+
+  function displayLastUpdatedString(date) {
+    if (date) {
+      return `Last Updated: ${toReadableDate(lastUpdatedDate)}`;
+    }
+
+    return '';
+  }
+
+  function updateLastUpdatedDate(date) {
+    const mostRecentDate =
+      new Date(date).getTime() >= new Date(lastUpdatedDate).getTime()
+        ? date
+        : lastUpdatedDate;
+    setLastUpdatedDate(mostRecentDate);
+    console.log('most recent date', mostRecentDate);
+  }
+
   return (
     <>
       <Menu
@@ -164,12 +213,19 @@ export function metaContent({
       ></Menu>
       <ContentStyle menuIsOpen={menuIsOpen}>
         <div>
-          <ChapterTitleStyle>{chapterTitle}</ChapterTitleStyle>
-          <h1>{title}</h1>
-          <CodeBlockProvider>
-            {children}
-            <NextPrevious url={url} filterKey={filterKey} />
-          </CodeBlockProvider>
+          <LastUpdatedDatesProvider
+            updateLastUpdatedDate={updateLastUpdatedDate}
+          >
+            <div>{displayLastUpdatedString(lastUpdatedDate)}</div>
+            <ChapterTitleStyle>{chapterTitle}</ChapterTitleStyle>
+            <div>
+              <h1>{title}</h1>
+            </div>
+            <CodeBlockProvider>
+              {children}
+              <NextPrevious url={url} filterKey={filterKey} />
+            </CodeBlockProvider>
+          </LastUpdatedDatesProvider>
         </div>
       </ContentStyle>
       <TableOfContents title={title}>{headers}</TableOfContents>
@@ -187,7 +243,7 @@ export function metaContent({
           />
         </SidebarLayoutToggle>
       )}
-      <FeedbackToggle/>
+      <FeedbackToggle />
     </>
   );
 }

src/plugins/frontmatter.tsx

@@ -0,0 +1,38 @@
+module.exports = (async () => {
+  const matter = require('gray-matter');
+  const { visit } = await import('unist-util-visit');
+
+  const frontmatterPlugin = () => (tree, file) => {
+    // Goes through the markdown tree and builds the frontmatter
+    console.log("\ninside frontmatter plugin for file: ", file.path);
+    visit(tree, 'thematicBreak', (node, index) => {
+      // Only visit the 'thematicBreak' at index 0 because that's where the frontmatter will be
+      if (index === 0) {
+        const { data: frontmatter, content } = matter(file.contents);
+
+        tree.children.push({
+          type: 'export',
+          value: `export const frontmatter = ${JSON.stringify(
+            frontmatter,
+            null,
+            2
+          )}`
+        });
+
+        if (tree.children[0].type === 'thematicBreak') {
+          // Find the index of the closing thematicBreak to "remove" the frontmatter from the mdx tree
+          const closingThematicBreakIndex = tree.children.findIndex(
+            (element, currIndex) => currIndex > 0 && element.type === 'thematicBreak'
+          );
+
+          if (closingThematicBreakIndex !== -1) {
+            // Remove the frontmatter
+            tree.children.splice(0, closingThematicBreakIndex + 1);
+          }
+        }
+      }
+    });
+  };
+
+  return frontmatterPlugin;
+})();

src/plugins/page.tsx

@@ -8,7 +8,7 @@ module.exports = (async () => {
           type: 'export',
           default: true,
           value:
-            'export default ({ children }) => <Page meta={meta}>{children}</Page>'
+            'export default ({ children }) => <Page frontmatter={frontmatter} meta={meta}>{children}</Page>'
         });
       }
     });