Commit 7f6a6de

@@ -0,0 +1,34 @@
+---
+import type { CollectionEntry } from "astro:content";
+import { DateTime } from "luxon";
+import { SITE_CONFIG } from "@/config";
+
+interface Props {
+  posts: CollectionEntry<"posts">[];
+}
+
+const { posts } = Astro.props;
+---
+
+<nav>
+  <ol class="text-lg lg:text-xl no-counter">
+    {
+      posts.map((post) => {
+        const dt = DateTime.fromJSDate(post.data.date, {
+          zone: SITE_CONFIG.timeZone,
+        });
+        return (
+          <li class="grid grid-rows-1 grid-cols-[1fr_auto] gap-2">
+            <a href={`/posts/${post.id}`}>{post.data.title}</a>
+            <time
+              datetime={dt.toISO()}
+              class="text-sm lg:text-base text-neutral-600 dark:text-neutral-400"
+            >
+              {dt.toISODate()}
+            </time>
+          </li>
+        );
+      })
+    }
+  </ol>
+</nav>

@@ -1,7 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import { DateTime } from "luxon";
-import { SITE_CONFIG } from "@/config";
+import PostsList from "@/components/PostsList.astro";
 import GlobalLayout from "@/layouts/GlobalLayout.astro";
 
 const posts = await getCollection("posts");
@@ -30,26 +29,7 @@ const postsByYear = sortedPosts.reduce(
         .map(([year, posts]) => (
           <section>
             <h2>{year}</h2>
-            <nav>
-              <ol class="text-lg lg:text-xl no-counter">
-                {posts.map((post) => {
-                  const dt = DateTime.fromJSDate(post.data.date, {
-                    zone: SITE_CONFIG.timeZone,
-                  });
-                  return (
-                    <li class="grid grid-rows-1 grid-cols-[1fr_auto] gap-2">
-                      <a href={`/posts/${post.id}`}>{post.data.title}</a>
-                      <time
-                        datetime={dt.toISO()}
-                        class="text-sm lg:text-base text-neutral-600 dark:text-neutral-400"
-                      >
-                        {dt.toISODate()}
-                      </time>
-                    </li>
-                  );
-                })}
-              </ol>
-            </nav>
+            <PostsList posts={posts} />
           </section>
         ))
     }

@@ -1,12 +1,21 @@
 ---
+import { getCollection } from "astro:content";
+import PostsList from "@/components/PostsList.astro";
 import { SITE_CONFIG } from "@/config";
 import Article from "@/contents/home.typ";
 import GlobalLayout from "@/layouts/GlobalLayout.astro";
+
+const posts = await getCollection("posts");
+const sortedPosts = posts.sort(
+  (a, b) => b.data.date.getTime() - a.data.date.getTime(),
+);
 ---
 
 <GlobalLayout>
   <article>
     <h1>{SITE_CONFIG.title}</h1>
     <Article />
+    <h2 id="recent-posts">Recent Posts</h2>
+    <PostsList posts={sortedPosts.slice(0, 4)} />
   </article>
 </GlobalLayout>