Commit 96648fc

@@ -3,17 +3,46 @@ import { getCollection } from "astro:content";
 import GlobalLayout from "@/layouts/GlobalLayout.astro";
 
 const posts = await getCollection("posts");
+const sortedPosts = posts.sort(
+  (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
+);
+const postsByYear = sortedPosts.reduce(
+  (acc, post) => {
+    const year = new Date(post.data.date).getFullYear();
+    if (!acc[year]) {
+      acc[year] = [];
+    }
+    acc[year].push(post);
+    return acc;
+  },
+  {} as Record<number, typeof posts>,
+);
 ---
 
 <GlobalLayout>
-  <h1>Posts</h1>
-  <ul>
+  <div class="article-heading">
+    <h1>Posts</h1>
     {
-      posts.map((post) => (
-        <li>
-          <a href={"posts/" + post.id}>{post.data.title}</a>
-        </li>
-      ))
+      Object.entries(postsByYear)
+        .reverse()
+        .map(([year, posts]) => (
+          <section>
+            <h2>{year}</h2>
+            <ul class="text-lg lg:text-xl [&>li:before]:content-['-'] [&>li:before]:text-neutral-500">
+              {posts.map((post) => (
+                <li class="grid grid-rows-1 grid-cols-[auto_1fr_auto] gap-2">
+                  <a href={`/posts/${post.id}`}>{post.data.title}</a>
+                  <time
+                    datetime={post.data.date.toISOString().split("T")[0]}
+                    class="text-sm lg:text-base text-neutral-600 dark:text-neutral-400"
+                  >
+                    {new Date(post.data.date).toLocaleDateString()}
+                  </time>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ))
     }
-  </ul>
+  </div>
 </GlobalLayout>