Skip to content

Add a last updated date

  1. Add a lastUpdated filed to the src/content/config.ts file.

    src/content/config.ts
    import { defineCollection, z } from "astro:content";
    const blog = defineCollection({
    type: "content",
    schema: ({ image }) =>
    z.object({
    title: z.string(),
    description: z.string(),
    publicationDate: z.coerce.date(),
    lastUpdated: z.coerce.date().optional(),
    image: image()
    .refine((img) => img.width >= 1200, {
    message: "Image should be 1200px × 630px.",
    })
    .optional(),
    imageAlt: z.string().optional(),
    tags: z.array(z.string()).optional(),
    }),
    });
  2. If the lastUpdated filed is present, render it on screen.

    src/pages/blog/[...slug].astro
    <BaseLayout>
    <SeoPost slot="head" entry={entry} />
    <div>
    {
    entry.data.image && (
    <Image
    src={entry.data.image}
    alt={entry.data.imageAlt || ""}
    class="h-auto w-full"
    />
    )
    }
    <h1 class="mt-3">{entry.data.title}</h1>
    <div>
    <p
    class="text-lightModeForegroundMuted dark:text-darkModeForegroundMuted text-sm"
    >
    Posted: <span
    class="text-lightModeForeground dark:text-darkModeForeground font-mono"
    >{formatDate(entry.data.publicationDate)}</span
    >
    </p>
    {
    entry.data.lastUpdated && (
    <p class="text-lightModeForegroundMuted dark:text-darkModeForegroundMuted text-sm">
    Last updated:
    <span class="text-lightModeForeground dark:text-darkModeForeground font-mono">
    {formatDate(entry.data.lastUpdated)}
    </span>
    </p>
    )
    }
    </div>
    <hr class="opacity-15" />
    <div
    class="prose prose-neutral dark:prose-invert prose-a:text-lightModeLink prose-code:bg-[blue] prose-code:text-darkModeForeground dark:prose-a:text-darkModeLink mx-auto"
    >
    <Content />
    </div>
    </div>
    </BaseLayout>