feat: sort posts by pubDate

src/components/Post.astro

@@ -1,18 +1,24 @@
 ---
+import Badge from "./Badge.astro";
+
 interface Props {
   title: string;
   description: string;
   url: string;
+  index: number;
 }
 
-const { title, description, url } = Astro.props;
+const { title, description, url, index } = Astro.props;
 ---
 
 <div class="hover:bg-neutral-100 dark:hover:bg-[#242424] px-2 py-4 rounded-md">
   <a href={url}>
-    <h2 class="text-lg font-semibold">
-      {title}
-    </h2>
+    <div class="flex items-center gap-4">
+      <h2 class="text-lg font-semibold">
+        {title}
+      </h2>
+      {index === 0 && <Badge>new!</Badge>}
+    </div>
     <p>{description}</p>
   </a>
 </div>

src/pages/posts/index.astro

@@ -2,21 +2,28 @@
 import "@/styles/globals.css";
 import Post from "@/components/Post.astro";
 import Layout from "@/layouts/Layout.astro";
-
-const posts = await getCollection("posts");
 import { getCollection } from "astro:content";
+
+let posts = await getCollection("posts");
+
+posts = posts.sort(
+  (a, b) =>
+    Date.parse(b.data.pubDate.toISOString()) -
+    Date.parse(a.data.pubDate.toISOString()),
+);
 ---
 
 <Layout title="posts | renan leonel">
   <main class="space-y-4">
     <h1 class="text-xl font-bold">Posts</h1>
     <div class="space-y-4">
       {
-        posts.map((post) => (
+        posts.map((post, i) => (
           <Post
             title={post.data.title}
             description={post.data.description}
             url={`/posts/${post.slug}/`}
+            index={i}
           />
         ))
       }