Add when a page was last updated into the Docs site (#4341)

* Update husky to 8.0.0

* Init husky

* Update cspell to 5.20.0

* Add frontmatter and update cspell to not error when no files found

* Read frontmatter from mdx files to get 'lastUpdated' property

* Display last updated on page

* Remove unused import

* Add packages to help set up frontmatter in mdx files

* Update custom remark plugin to remove frontmatter

* Add a skip section into switch statement

* Find first element after frontmatter quicker

* Make LastUpdated Provider root element in page.tsx

* Add blockquote check when parsing tree during frontmatter plugin

* Add last updated dates to mdx files during amplify build

* Move addLastUpdated script to preBuild section

* Update yarn.lock

* Update yarn.lock

* Move last updated text into left Menu component

* Add 'sh' to supported language for code blocks

* Change text to page updated

* Add useReducer and useContext to manage state of a page's last updated date

* remove comments

* Pass down the parent Page last updated date into the provider component

* Account for fragments without filterkeys

* remove console log

* update fragments component for tests

* Add comment and table cases for frontmatter plugin

* use forwardRef and useImperativeHandle to allow use of ref on function component

* Remove relative file path from frontmatter

* Set package version for new packages

* Update the types

* remove outdated code

* Add id to html element for page last updated text

---------

Co-authored-by: Tim Nguyen <[email protected]>

Author: timngyn

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn spellcheck-diff
+yarn spellcheck-diff

amplify.yml

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

next.config.js

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

package.json

@@ -30,6 +30,7 @@
     "dotenv": "^16.0.0",
     "emotion": "^10.0.23",
     "extract-mdx-metadata": "^2.0.0",
+    "gray-matter": "4.0.3",
     "html-entities": "^1.2.1",
     "instantsearch.js": "^4.39.1",
     "next": "^12.1.4",
@@ -73,12 +74,14 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.16.0",
     "fs-extra": "^9.0.1",
+    "git-jiggy": "1.1.1",
     "husky": "^8.0.1",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "prettier": "^1.19.1",
     "puppeteer": "1.20.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
+    "tiny-glob": "0.2.9",
     "sass": "^1.54.8",
     "ts-jest": "^26.0.3",
     "ts-node": "^8.5.0",

src/components/FilterChildren/index.tsx

@@ -1,18 +1,20 @@
-import {useRouter} from "next/router";
+import { useRouter } from 'next/router';
 
-export default function FilterChildren({children}) {
+export default function FilterChildren({ children }) {
   const router = useRouter();
 
-  let filterKey = "";
-  if ("platform" in router.query) {
+  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'
   );
+
   return filteredChildren;
 }

src/components/Fragments/index.tsx

@@ -1,9 +1,31 @@
-import FilterChildren from "../FilterChildren";
+import FilterChildren from '../FilterChildren';
+import { useLastUpdatedDatesContext } from '../LastUpdatedProvider';
+import { MdxFrontmatterType } from '../Page';
 
-export default function Fragments({fragments}) {
+export default function Fragments({ fragments }) {
   const children = [];
+  let frontmatter: MdxFrontmatterType;
+
+  const { state, dispatch } = useLastUpdatedDatesContext();
+
   for (const key in fragments) {
     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(<div key={key}>{fragment}</div>);
   }
 

src/components/LastUpdatedProvider/index.tsx

@@ -0,0 +1,69 @@
+import { createContext, useContext, useReducer } from 'react';
+
+type PageLastUpdatedDatesType = {
+  parentPageLastUpdatedDate: string;
+};
+
+type PageLastUpdatedState = {
+  files: PageLastUpdatedDatesType;
+};
+
+const pageLastUpdatedReducer = (
+  state: PageLastUpdatedState,
+  action: { type: string; key: string; lastUpdated: string }
+) => {
+  switch (action.type) {
+    case 'update': {
+      if (!Object.prototype.hasOwnProperty.call(state.files, action.key)) {
+        state.files[action.key] = [];
+        state.files[action.key].push(action.lastUpdated);
+      } else if (!state.files[action.key].includes(action.lastUpdated)) {
+        state.files[action.key].push(action.lastUpdated);
+      }
+
+      return {
+        ...state
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+type LastUpdatedDatesContextType = {
+  state: PageLastUpdatedState;
+  dispatch: any;
+};
+
+const LastUpdatedDatesContext = createContext<LastUpdatedDatesContextType>({
+  state: { files: { parentPageLastUpdatedDate: '' } },
+  dispatch: (action: any) => {
+    /** no-op */
+  }
+});
+
+export default function LastUpdatedDatesProvider({
+  children,
+  parentPageLastUpdatedDate
+}) {
+  const [state, dispatch] = useReducer(pageLastUpdatedReducer, {
+    files: { parentPageLastUpdatedDate: parentPageLastUpdatedDate }
+  });
+
+  return (
+    <LastUpdatedDatesContext.Provider value={{ state, dispatch }}>
+      {children}
+    </LastUpdatedDatesContext.Provider>
+  );
+}
+
+export function useLastUpdatedDatesContext() {
+  const context = useContext(LastUpdatedDatesContext);
+  if (!context) {
+    throw new Error(
+      'useLastUpdatedDatesContext must be used within a LastUpdatedDatesProvider'
+    );
+  }
+
+  return context;
+}