Added latest blog to home page

src/components/BlogItem.astro

@@ -1,17 +1,35 @@
 ---
 import TerminalBorder from "../components/TerminalBorder.astro";
 
+function formatDate(date: Date) {
+    const day = date.getDate();
+    const month = date.toLocaleString("default", { month: "long" });
+    const year = date.getFullYear();
+
+    let suffix = "th";
+    if (day === 1 || day === 21 || day === 31) {
+        suffix = "st";
+    } else if (day === 2 || day === 22) {
+        suffix = "nd";
+    } else if (day === 3 || day === 23) {
+        suffix = "rd";
+    }
+
+    return `${month} ${day}${suffix} ${year}`;
+}
+
 interface Props {
     title: string;
     description: string;
-    date: string;
+    date: Date;
     href: string;
+    header?: string;
 }
 
-const { title, description, date, href } = Astro.props;
+const { title, description, date, href, header } = Astro.props;
 ---
 
-<TerminalBorder footer={date} margin="0 0 20px;">
+<TerminalBorder header={header} footer={formatDate(date)} margin="0 0 20px;">
     <span class="cursor-pointer group block w-full">
         <a href={href} style="all: unset;">
             <h1 class="text-[130%] text-[var(--accent)] group-hover:underline">

src/pages/blogs.astro

@@ -4,29 +4,12 @@ import TerminalBorder from "../components/TerminalBorder.astro";
 import BlogItem from "../components/BlogItem.astro";
 import { getCollection } from "astro:content";
 
-function formatDate(date: Date) {
-    const day = date.getDate();
-    const month = date.toLocaleString("default", { month: "long" });
-    const year = date.getFullYear();
-
-    let suffix = "th";
-    if (day === 1 || day === 21 || day === 31) {
-        suffix = "st";
-    } else if (day === 2 || day === 22) {
-        suffix = "nd";
-    } else if (day === 3 || day === 23) {
-        suffix = "rd";
-    }
-
-    return `${month} ${day}${suffix} ${year}`;
-}
-
 const blogs = (await getCollection("blogs"))
     .sort((a, b) => +new Date(b.data.date) - +new Date(a.data.date))
     .map((blog) => ({
         title: blog.data.title,
         description: blog.data.description,
-        date: formatDate(blog.data.date),
+        date: blog.data.date,
         href: "/blogs/" + blog.slug,
     }));
 ---

src/pages/index.astro

@@ -1,7 +1,14 @@
 ---
+import { getCollection } from "astro:content";
 import Terminal from "../layouts/Terminal.astro";
 import TerminalBorder from "../components/TerminalBorder.astro";
 import Link from "../components/Link.astro";
+import BlogItem from "../components/BlogItem.astro";
+
+const latestBlog = (await getCollection("blogs")).reduce((latest, blog) => {
+    const blogDate = new Date(blog.data.date);
+    return blogDate > new Date(latest.data.date) ? blog : latest;
+});
 
 const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIO7P9K9D5RkBk+JCRRS6AtHuTAc6cRpXfRfRMg/Kyren`;
 const fingerprint = `
@@ -108,17 +115,13 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
             <TerminalBorder header="About Me" margin="20px 0">
                 <p>{aboutMe}</p>
             </TerminalBorder>
-            <TerminalBorder header="Links">
-                <p>
-                    <Link href="https://github.com/Kyren223"
-                        >github.com/Kyren223</Link
-                    >
-                    <br />
-                    <Link href="https://discord.com/users/481884415090229258"
-                        >discord.com/Kyren223</Link
-                    >
-                </p>
-            </TerminalBorder>
+            <BlogItem
+                header="Latest Blog Post"
+                title={latestBlog.data.title}
+                description={latestBlog.data.description}
+                date={latestBlog.data.date}
+                href={"/blogs/" + latestBlog.slug}
+            />
         </div>
     </div>
 </Terminal>