Update how we display page last updated (aws-amplify#6110)

* Rename script to add last updated dates

* Update to use imports

* Add when page was last updated to left menu

* Run script to flatten directory during prebuild command; add null check for directory data

* Update amplify.yml to not run script to get last updated dates

* Remove old LastUpdatedProvider

* Remove old custom frontmatter remark plugin since we're no longer using it

* Update src/styles/page-last-updated.scss

Co-authored-by: Heather Buchel <[email protected]>

* Add back layout changes (mistake from rebase)

* Add page prop to show/hide page last updated date

* Hide page last updated on home and overview pages

---------

Co-authored-by: Heather Buchel <[email protected]>

Author: timngyn

.gitignore

@@ -70,6 +70,7 @@ amplify/backend/function/submissionsLambda/src/controllers
 public/**/**/nextImageExportOptimizer/
 public/next-image-export-optimizer-hashes.json
 src/directory/directory.json
+src/directory/flatDirectory.json
 
 #amplify-do-not-edit-begin
 amplify/\#current-cloud-backend

amplify.yml

@@ -4,7 +4,6 @@ frontend:
     preBuild:
       commands:
         - yarn install
-        - node tasks/addLastUpdatedToMdxFiles.js
     build:
       commands:
         - echo "BUILD_ENV=$BUILD_ENV" >> .env.custom

next.config.mjs

@@ -10,8 +10,6 @@ export default async () => {
   const withMDX = createMDX({
     extension: /\.mdx$/,
     options: {
-      // TODO: Fix this frontmatter plugin
-      // remarkPlugins: [frontmatterPlugin],
       rehypePlugins: [[rehypeImgSize, { dir: 'public' }]]
     }
   });

package.json

@@ -153,6 +153,6 @@
     "next-start": "next start",
     "prepare": "husky install",
     "analyze": "ANALYZE=true yarn next-build",
-    "prebuild": "node src/directory/generateDirectory.mjs"
+    "prebuild": "node src/directory/generateDirectory.mjs && node src/directory/generateFlatDirectory.mjs"
   }
 }

src/components/Fragments/index.tsx

@@ -1,36 +1,18 @@
 import { Fragment } from 'react';
 import FilterChildren from '../FilterChildren';
-import { useLastUpdatedDatesContext } from '../LastUpdatedProvider';
 
 type MdxFrontmatterType = {
   lastUpdated: string;
 };
 
 export default function Fragments({ fragments }) {
   const children: React.ReactNode[] = [];
-  let frontmatter: MdxFrontmatterType;
 
-  const { state, dispatch } = useLastUpdatedDatesContext();
   let filterKey = '';
 
   for (const key in fragments) {
     if (!filterKey) filterKey = key;
     const fragment = fragments[key]([]);
-    frontmatter = fragment.props.frontmatter;
-
-    if (frontmatter && frontmatter.lastUpdated) {
-      if (
-        state.files[key] === undefined ||
-        (state.files[key] &&
-          !state.files[key].includes(frontmatter.lastUpdated))
-      ) {
-        dispatch({
-          type: 'update',
-          key: key,
-          lastUpdated: frontmatter.lastUpdated
-        });
-      }
-    }
 
     children.push(<Fragment key={key}>{fragment}</Fragment>);
   }

src/components/LastUpdatedProvider/index.tsx

@@ -31,9 +31,11 @@ import { TableOfContents } from '@/components/TableOfContents';
 import type { Heading } from '@/components/TableOfContents/TableOfContents';
 import { PlatformNavigator } from '@/components/PlatformNavigator';
 import directory from 'src/directory/directory.json';
+import flatDirectory from 'src/directory/flatDirectory.json';
 import { PageNode } from 'src/directory/directory';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { debounce } from '@/utils/debounce';
+import { PageLastUpdated } from '../PageLastUpdated';
 
 export const Layout = ({
   children,
@@ -42,7 +44,8 @@ export const Layout = ({
   pageTitle,
   pageType = 'inner',
   platform,
-  url
+  url,
+  showLastUpdatedDate = true
 }: {
   children: any;
   hasTOC?: boolean;
@@ -51,6 +54,7 @@ export const Layout = ({
   pageType?: 'home' | 'inner';
   platform?: Platform;
   url?: string;
+  showLastUpdatedDate: boolean;
 }) => {
   const [menuOpen, toggleMenuOpen] = useState(false);
   const [tocHeadings, setTocHeadings] = useState<Heading[]>([]);
@@ -261,6 +265,14 @@ export const Layout = ({
                         }}
                       />
                     )}
+                    <div className="layout-sidebar-feedback">
+                      [ Feedback widget goes here ]
+                    </div>
+                    {showLastUpdatedDate && (
+                      <PageLastUpdated
+                        directoryData={flatDirectory[router.pathname]}
+                      />
+                    )}
                   </div>
                 </View>
               </View>

src/components/Layout/Layout.tsx

@@ -0,0 +1,38 @@
+import { Text, View } from '@aws-amplify/ui-react';
+import { PageNode } from 'src/directory/directory';
+
+type PageLastUpdatedProps = {
+  directoryData: PageNode;
+};
+
+export function PageLastUpdated({ directoryData }: PageLastUpdatedProps) {
+  if (directoryData) {
+    const lastUpdated = directoryData['lastUpdated'];
+
+    if (!lastUpdated) {
+      return <></>;
+    }
+
+    const date = toReadableDate(lastUpdated);
+
+    return (
+      <View className="page-last-updated">
+        <View className="page-last-updated__inner">
+          <Text fontSize="14px">Page updated {date}</Text>{' '}
+        </View>
+      </View>
+    );
+  }
+
+  return <></>;
+}
+
+function toReadableDate(date) {
+  const dateOptions: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  };
+
+  return new Date(date).toLocaleDateString('en-US', dateOptions);
+}

src/components/PageLastUpdated/PageLastUpdated.tsx

@@ -0,0 +1 @@
+export { PageLastUpdated } from './PageLastUpdated';

src/components/PageLastUpdated/index.ts

@@ -40,4 +40,9 @@ export type PageNode = {
    * Root url for the home page
    */
   url?: string;
+
+  /**
+   * String representing when file was last edited
+   */
+  lastUpdated?: string;
 };

src/directory/directory.d.ts

@@ -5,6 +5,7 @@ import path from 'path';
 import JSON5 from 'json5';
 import { directory } from './directory.mjs';
 import { writeFile } from 'fs/promises';
+import { getLastModifiedDate } from 'git-jiggy';
 
 /**
  * Helper function to use RegEx to grab the "meta" object
@@ -51,6 +52,11 @@ async function traverseDirectoryObject(directoryNode) {
           directoryNode[key] = metaObj[key];
         }
 
+        // Get the last updated date
+        directoryNode['lastUpdated'] = await getLastModifiedDate(
+          directoryNode.path
+        );
+
         const relativePath = path.relative(rootPath, directoryNode.path);
         const parsedPath = path.parse(relativePath);
 

src/directory/generateDirectory.mjs

@@ -0,0 +1,41 @@
+import { fileURLToPath } from 'url';
+import path from 'path';
+import { writeFile } from 'fs/promises';
+import directory from './directory.json' assert { type: 'json' };
+
+function flattenJSON(jsonObj, flattened = {}) {
+  if (Array.isArray(jsonObj.children)) {
+    jsonObj.children.forEach((child) => flattenJSON(child, flattened));
+  }
+  if (jsonObj.route) {
+    flattened[jsonObj.route] = { ...jsonObj };
+    // Remove the 'children' property since we don't need it in the "flat" structure
+    delete flattened[jsonObj.route].children;
+  }
+  return flattened;
+}
+
+/**
+ * Generate a "flat" version of directory.json
+ */
+async function generateFlatDirectory() {
+  const flatDirectory = flattenJSON(directory);
+
+  try {
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
+
+    const filePath = path.join(__dirname, 'flatDirectory.json');
+
+    const json = JSON.stringify(flatDirectory, null, 2);
+
+    await writeFile(filePath, json, 'utf-8');
+
+    console.log('Directory object has been written to', filePath);
+  } catch (err) {
+    throw new Error(`Error saving to flatDirectory.json: ${err}`);
+  }
+}
+
+console.log('Generating flatDirectory.json...');
+generateFlatDirectory();

src/directory/generateFlatDirectory.mjs

@@ -32,6 +32,7 @@ export function getStaticProps(context) {
     props: {
       platform: context.params.platform,
       hasTOC: false,
+      showLastUpdatedDate: false,
       pageType: 'home',
       meta
     }

src/pages/[platform]/index.tsx

@@ -8,7 +8,8 @@ import { useRouter } from 'next/router';
 
 function MyApp({ Component, pageProps }) {
   const router = useRouter();
-  const { meta, platform, url, hasTOC, pageType } = pageProps;
+  const { meta, platform, url, hasTOC, pageType, showLastUpdatedDate } =
+    pageProps;
   const getLayout =
     Component.getLayout ||
     ((page) => (
@@ -20,6 +21,7 @@ function MyApp({ Component, pageProps }) {
         url={url}
         platform={platform ? platform : ''}
         hasTOC={hasTOC}
+        showLastUpdatedDate={showLastUpdatedDate}
       >
         {page}
       </Layout>

src/pages/_app.tsx

@@ -22,6 +22,7 @@ export function getStaticProps() {
   return {
     props: {
       hasTOC: false,
+      showLastUpdatedDate: false,
       pageType: 'home',
       meta
     }