feat: show last updated time

package.json

@@ -93,7 +93,6 @@
     "vite-plugin-inspect": "^0.7.1"
   },
   "devDependencies": {
-    "pnpm": "7.9.2",
     "@babel/traverse": "^7.19.0",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
@@ -123,10 +122,12 @@
     "eslint-plugin-react": "^7.31.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lint-staged": "^13.0.3",
+    "pnpm": "7.9.2",
     "prettier": "^2.7.1",
     "release-it": "^15.4.2",
     "resolve": "^1.22.1",
     "rollup": "^2.78.1",
+    "simple-git": "^3.14.1",
     "tsup": "^6.2.3",
     "tsx": "^3.8.2",
     "typescript": "^4.7.4",

src/node/plugin-mdx/index.ts

@@ -1,11 +1,16 @@
 import { Plugin } from 'vite';
 import { pluginMdxRollup } from './pluginMdxRollup';
 import { pluginMdxHMR } from './pluginMdxHmr';
+import { pluginMdxGit } from './pluginMdxGit';
 import { SiteConfig } from 'shared/types/index';
 
 export async function pluginMdx(
   config: SiteConfig,
   isServer: boolean
 ): Promise<Plugin[]> {
-  return [await pluginMdxRollup(config, isServer), pluginMdxHMR(config)];
+  return [
+    await pluginMdxRollup(config, isServer),
+    pluginMdxHMR(config),
+    pluginMdxGit()
+  ];
 }

src/node/plugin-mdx/pluginMdxGit.ts

@@ -0,0 +1,36 @@
+import { Plugin } from 'vite';
+import { simpleGit } from 'simple-git';
+import { MD_REGEX } from '../../node/constants';
+
+export function pluginMdxGit(): Plugin {
+  const cache = new Map<string, string>();
+  const git = simpleGit();
+
+  // https://github.com/steveukx/git-js#git-log
+  async function getLastUpdatedTime(path: string) {
+    const { latest } = await git.log({ file: path });
+    return !latest ? '' : latest.date;
+  }
+
+  return <Plugin>{
+    name: 'vite-plugin-mdx-git',
+    async transform(code, id) {
+      if (!MD_REGEX.test(id)) return code;
+
+      let lastUpdatedTime = '';
+      if (cache.has(id)) {
+        lastUpdatedTime = id;
+      } else {
+        const rawTime = await getLastUpdatedTime(id);
+        lastUpdatedTime = new Date(rawTime).toLocaleString();
+        cache.set(id, lastUpdatedTime);
+      }
+
+      code = code.concat(`
+        \n
+export const lastUpdatedTime = "${lastUpdatedTime}"
+      `);
+      return code;
+    }
+  };
+}

src/shared/types/index.ts

@@ -173,6 +173,7 @@ export interface PageData {
   siteData: SiteData<DefaultTheme.Config>;
   pagePath: string;
   relativePagePath: string;
+  lastUpdatedTime: string;
   title?: string;
   meta?: FrontMatterMeta;
   description?: string;

src/theme-default/components/DocFooter/index.tsx

@@ -4,9 +4,9 @@ import { useEditLink, usePrevNextPage } from '../../logic';
 import { normalizeHref } from '../../logic/index';
 
 export function DocFooter() {
-  const { siteData, relativePagePath } = usePageData();
+  const { siteData, relativePagePath, lastUpdatedTime } = usePageData();
   const { prevPage, nextPage } = usePrevNextPage(siteData);
-  const { editLink: rawEditLink } = siteData.themeConfig;
+  const { editLink: rawEditLink, lastUpdatedText } = siteData.themeConfig;
   const editLink = useEditLink(rawEditLink!, relativePagePath);
 
   return (
@@ -20,17 +20,16 @@ export function DocFooter() {
           </div>
         ) : null}
 
-        {/* TODO */}
-        {/* <div className={styles.lastUpdated}>
-          {lastUpdatedText ? (
+        <div className={styles.lastUpdated}>
+          {
             <>
               <p className={styles.lastUpdated}>
-                {editLink?.text || 'Last Updated: '}
+                {`${lastUpdatedText ?? 'Last Updated'}: `}
               </p>
-              <span>{}</span>
+              <span>{lastUpdatedTime}</span>
             </>
-          ) : null}
-        </div> */}
+          }
+        </div>
       </div>
 
       <div className={styles.prevNext}>