Add auto updating last modified code to blog posts

astro.config.mjs

@@ -1,5 +1,6 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import { remarkModifiedTime } from './remark-modified-time.mjs';
 
 import preact from "@astrojs/preact";
 import tailwind from "@astrojs/tailwind";
@@ -22,4 +23,7 @@ export default defineConfig({
   adapter: node({
     mode: "standalone",
   }),
+  markdown: {
+    remarkPlugins: [remarkModifiedTime],
+  },
 });

package.json

@@ -17,6 +17,7 @@
     "@astrojs/tailwind": "^5.1.5",
     "astro": "^5.4.2",
     "astro-icon": "^1.1.5",
+    "dayjs": "^1.11.13",
     "preact": "^10.26.4",
     "sharp": "^0.33.5",
     "tailwindcss": "^3.4.17",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       astro-icon:
         specifier: ^1.1.5
         version: 1.1.5
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       preact:
         specifier: ^10.26.4
         version: 10.26.4
@@ -1089,6 +1092,9 @@ packages:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -4085,6 +4091,8 @@ snapshots:
     dependencies:
       css-tree: 2.2.1
 
+  dayjs@1.11.13: {}
+
   debug@4.4.0:
     dependencies:
       ms: 2.1.3

remark-modified-time.mjs

@@ -0,0 +1,9 @@
+import { execSync } from "node:child_process";
+
+export function remarkModifiedTime() {
+  return (tree, file) => {
+    const filepath = file.history[0];
+    const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
+    file.data.astro.frontmatter.lastModified = result.toString();
+  };
+}

src/layouts/MarkdownPostLayout.astro

@@ -2,6 +2,7 @@
 import Partition from "../components/Partition.astro";
 import BaseLayout from "./BaseLayout.astro";
 const { frontmatter } = Astro.props;
+const { lastModified }  = Astro.props;
 ---
 
 <BaseLayout pageTitle={frontmatter.title} description={frontmatter.description}>
@@ -9,7 +10,8 @@ const { frontmatter } = Astro.props;
         <p>
             <h1 class="text-xl font-bold underline">{frontmatter.title}</h1>
             <em>{frontmatter.description}</em><br />
-            <sub>Date: {frontmatter.pubDate.toLocaleDateString()}</sub>
+            <sub>Date: {frontmatter.pubDate.toLocaleDateString()}</sub><br />
+            <sub>Last Modified: {lastModified}</sub>
         </p>
     </Partition>
     <Partition>

src/pages/posts/[...slug].astro

@@ -1,5 +1,10 @@
 ---
 import { getCollection, render } from "astro:content";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
+
 import MarkdownPostLayout from "../../layouts/MarkdownPostLayout.astro";
 
 export async function getStaticPaths() {
@@ -11,8 +16,12 @@ export async function getStaticPaths() {
 }
 
 const { post } = Astro.props;
-const { Content } = await render(post);
+const { Content, remarkPluginFrontmatter } = await render(post);
+
+const lastModified = dayjs(remarkPluginFrontmatter.lastModified)
+  .utc()
+  .format("HH:mm:ss DD MMMM YYYY UTC");
 ---
-<MarkdownPostLayout frontmatter={post.data}>
+<MarkdownPostLayout frontmatter={post.data} lastModified={lastModified}>
   <Content />
 </MarkdownPostLayout>