Auto-Generated Last Modified Date in Astro

Saturday, 06 Jan 2024

Part of the Astro series

I’m trying to figure out how to use remark plugins in Astro to modify a couple things in posts for me automatically, and along the way I’ve used remark to add a couple quality of life improvements. The first is an auto-generated table of contents for longer posts that I feel need one, and the second is an auto-generated last modified date for pages based on git commit timestamps.

The benefit of an automatically generated last modified date is that I don’t have to remember to update it when I make changes to a page that displays it, like my now page or my links page. I can just commit my changes and the last modified date will update automatically. It’s simple, but it’s kind of beautiful.

I basically did exactly what Astro’s documentation says to do in a helpful recipe called Add last modified time. I created a file called remark-modified-time.mjs and put it in my src/components/utilities folder.

1
import { execSync } from "child_process";
2

3
export function remarkModifiedTime() {
4
  return function (tree, file) {
5
    const filepath = file.history[0];
6
    const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
7
    file.data.astro.frontmatter.lastModified = result.toString();
8
  };
9
}

Then I updated my astro.config.mjs file to reference this as a remark plugin, and to use it in my markdown processing.

1
import { defineConfig } from "astro/config";
2
import expressiveCode from "astro-expressive-code";
3
import icon from "astro-icon";
4
import pagefind from "astro-pagefind";
5
import { remarkModifiedTime } from './src/components/utilities/remark-modified-time.mjs';
6
import remarkToc from 'remark-toc';
7

8
/** @type {import('astro-expressive-code').AstroExpressiveCodeOptions} */
9
const astroExpressiveCodeOptions = {
10
  // Example: Change the themes
11
  themes: ["material-theme-ocean", "light-plus", "github-dark-dimmed"],
12
  themeCssSelector: (theme) => `[data-theme='${theme.name}']`,
13
}
14

15
// https://astro.build/config
16
export default defineConfig({
17
    site: "https://scottwillsey.com/",
18
    integrations: [expressiveCode(astroExpressiveCodeOptions), icon(), pagefind()],
19
    markdown: {
20
    remarkPlugins: [ remarkModifiedTime, [remarkToc, { heading: "contents" } ] ],
21
  },
22
});

Once those are set up, it’s just a matter of referencing remarkPluginFrontMatter.lastModified in the Astro template.

1
---
2
import { getEntry } from "astro:content";
3
import { Icon } from "astro-icon/components";
4
import Base from "../layouts/Base.astro";
5
import { modifieddate } from "../components/utilities/DateFormat.js";
6

7
const now = await getEntry("now", "now");
8
const { Content, remarkPluginFrontmatter } = await now.render();
9

10
let title = now.data.title;
11
let description = now.data.description;
12
---
13

14
<Base title={title} description={description}>
15
  <article>
16
    <h1>{title}</h1>
17
    <p class="now">
18
      The <a href="https://nownownow.com/about">"now page"</a> concept comes from
19
      an idea by <a href="https://sive.rs">Derek Sivers</a> to have people communicate
20
      what they're focused on <b>now</b> at this point in their lives.
21
    </p>
22
    <div class="time">
23
      <Icon name="bi:calendar2-week-fill" />
24
      <time datetime={now.data.date}>
25
        <a href={`/${now.slug}`}
26
          >Last updated {modifieddate(remarkPluginFrontmatter.lastModified)}</a
27
        >
28
      </time>
29
    </div>
30
    <div class="now">
31
      <Content />
32
    </div>
33
  </article>
34
</Base>

That’s it. Now I have auto-generated last modified dates for any page I feel needs one, thanks to Astro using remark to render markdown and therefore making adding remark plugins super simple.