add updated date display to blog and project entries

.github/workflows/astro.yml

@@ -21,10 +21,10 @@ jobs:
             - name: Checkout your repository using git
               uses: actions/checkout@v6
             - name: Install, build, and upload your site output
-              uses: withastro/action@v5
+              uses: withastro/action@v6
               with:
                   # path: . # The root location of your Astro project inside the repository. (optional)
-                  # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
+                  # node-version: 24 # The specific version of Node that should be used to build your site. Defaults to 24. (optional)
                   package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
 
     deploy:

pnpm-workspace.yaml

@@ -1,3 +1,3 @@
-onlyBuiltDependencies:
-  - esbuild
-  - sharp
+allowBuilds:
+  esbuild: true
+  sharp: true

src/components/ArrowCard.tsx

@@ -22,6 +22,11 @@ export default function ArrowCard({ entry, pill }: Props) {
                     )}
                     <div class="text-sm font-departure uppercase">
                         {formatDate(entry.data.date)}
+                        {entry.data.updated && (
+                            <span class="text-xs text-black/50 dark:text-white/50 ml-1">
+                                (updated {formatDate(entry.data.updated)})
+                            </span>
+                        )}
                     </div>
                 </div>
                 <div class="font-semibold mt-3 text-black dark:text-white">

src/components/Blog.tsx

@@ -10,15 +10,25 @@ type Props = {
 };
 
 export default function Blog({ data, tags }: Props) {
+    function getDateOfLatestUpdate(entry: CollectionEntry<"blog">) {
+        return entry.data.updated ?? entry.data.date;
+    }
+
     function filterPosts(): CollectionEntry<"blog">[] {
-        return data.filter((entry) =>
-            Array.from(filter()).every((value) =>
-                entry.data.tags.some(
-                    (tag: string) =>
-                        tag.toLowerCase() === String(value).toLowerCase(),
+        return data
+            .filter((entry) =>
+                Array.from(filter()).every((value) =>
+                    entry.data.tags.some(
+                        (tag: string) =>
+                            tag.toLowerCase() === String(value).toLowerCase(),
+                    ),
                 ),
-            ),
-        );
+            )
+            .toSorted(
+                (a, b) =>
+                    getDateOfLatestUpdate(b).getTime() -
+                    getDateOfLatestUpdate(a).getTime(),
+            );
     }
 
     const [filter, setFilter] = createSignal(new Set<string>());

src/components/Projects.tsx

@@ -10,15 +10,25 @@ type Props = {
 };
 
 export default function Projects({ data, tags }: Props) {
+    function getDateOfLatestUpdate(entry: CollectionEntry<"projects">) {
+        return entry.data.updated ?? entry.data.date;
+    }
+
     function filterProjects(): CollectionEntry<"projects">[] {
-        return data.filter((entry) =>
-            Array.from(filter()).every((value) =>
-                entry.data.tags.some(
-                    (tag: string) =>
-                        tag.toLowerCase() === String(value).toLowerCase(),
+        return data
+            .filter((entry) =>
+                Array.from(filter()).every((value) =>
+                    entry.data.tags.some(
+                        (tag: string) =>
+                            tag.toLowerCase() === String(value).toLowerCase(),
+                    ),
                 ),
-            ),
-        );
+            )
+            .toSorted(
+                (a, b) =>
+                    getDateOfLatestUpdate(b).getTime() -
+                    getDateOfLatestUpdate(a).getTime(),
+            );
     }
 
     const [filter, setFilter] = createSignal(new Set<string>());

src/content.config.ts

@@ -31,6 +31,7 @@ const blog = defineCollection({
         title: z.string(),
         summary: z.string(),
         date: z.date(),
+        updated: z.date().optional(),
         tags: z.array(z.string()),
         draft: z.boolean().optional(),
     }),
@@ -42,6 +43,7 @@ const projects = defineCollection({
         title: z.string(),
         summary: z.string(),
         date: z.date(),
+        updated: z.date().optional(),
         tags: z.array(z.string()),
         draft: z.boolean().optional(),
         demoUrl: z.string().optional(),

src/layouts/ArticleTopLayout.astro

@@ -47,6 +47,17 @@ const repoUrl = collection === "projects" ? data.repoUrl : null;
             <Icon name="pixelarticons:calendar-2" class:list="size-5" />
             {formatDate(date)}
         </div>
+        {
+            entry.data.updated && (
+                <div class="flex items-center gap-2">
+                    <Icon
+                        name="pixelarticons:calendar-range"
+                        class:list="size-5"
+                    />
+                    Updated {formatDate(entry.data.updated)}
+                </div>
+            )
+        }
         <div class="flex items-center gap-2">
             <Icon name="pixelarticons:book-open" class:list="size-5" />
             {readingTime(body ?? "")}