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;
 };