Finished /blogs yay

src/components/BlogItem.astro

@@ -5,18 +5,33 @@ interface Props {
     title: string;
     description: string;
     date: string;
+    href: string;
 }
 
-const { title, description, date } = Astro.props;
+const { title, description, date, href } = Astro.props;
 ---
 
-<TerminalBorder footer={date} margin="0 0 20px">
-    <span>
-        <h1 class="text-[130%] text-[var(--accent)]">
-            {title}
-        </h1>
-        <p class="text-[var(--secondary)]">
-            {description}
-        </p>
+<TerminalBorder footer={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">
+                {title}
+            </h1>
+            <p class="text-[var(--secondary)]">
+                {description}
+            </p>
+        </a>
     </span>
 </TerminalBorder>
+
+<style>
+    .section:hover() {
+        position: relative;
+        padding: 10.8rem;
+        padding-top: 0.85rem;
+        display: flex;
+        border-style: solid;
+        border-width: 1px;
+        border-color: var(--alt);
+    }
+</style>

src/components/Link.astro

@@ -1,12 +1,12 @@
 ---
 interface Props {
-  href: string;
-  newTab?: boolean;
+    href: string;
+    newTab?: boolean;
 }
 
 const { href, newTab = true } = Astro.props;
 ---
 
 <a href={href} {...newTab && { target: "_blank", rel: "noopener noreferrer" }}>
-  <slot />
+    <slot />
 </a>

src/components/TerminalBorder.astro

@@ -3,18 +3,12 @@ interface Props {
     header?: string;
     footer?: string;
     margin?: string;
-    class?: string;
 }
 
-const {
-    header = "",
-    footer = "",
-    margin = "-1px",
-    class: htmlClass,
-} = Astro.props;
+const { header = "", footer = "", margin = "-1px" } = Astro.props;
 ---
 
-<div class="section" style={`margin: ${margin};`} class={htmlClass}>
+<div class="section" style={`margin: ${margin};`}>
     <span class="tag-top">{header}</span>
     <span class="tag-bottom">{footer}</span>
     <slot />

src/content/blogs/blog-0.md

@@ -1,3 +1,8 @@
+---
+title: The search for the perfect ed25519 key pair
+date: 2024-12-11
+---
+
 # The search for the perfect ed25519 key pair
 
 Todo write intro to catch attention

src/content/blogs/blog-1.md

@@ -1,3 +1,8 @@
+---
+title: Test
+description: This is a test blog to... well.. test things!
+date: 1970-01-01
+---
 # My Title
 
 ## Secondary

src/pages/blogs/index.astro

@@ -4,19 +4,29 @@ import TerminalBorder from "../../components/TerminalBorder.astro";
 import BlogItem from "../../components/BlogItem.astro";
 import { getCollection } from "astro:content";
 
-const blogEntries = await getCollection("blogs");
+function formatDate(date) {
+    const day = date.getDate();
+    const month = date.toLocaleString("default", { month: "long" }); // Get full month name
+    const year = date.getFullYear();
 
-const blogs = [
-    {
-        title: "The search for the perfect ed25519 key pair",
-        description: `
-This is the description about this thing which shoud be very
-long and cause this to wrap so that I can see how about 3 lines
-of paragraph will look int this so now I am gonna continue
-yapping to make it even longer`.trimStart(),
-        date: "November 12th 2024",
-    },
-];
+    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")).map((blog) => ({
+    title: blog.data.title,
+    description: blog.data.description,
+    date: formatDate(blog.data.date),
+    href: "/blogs/" + blog.slug,
+}));
 ---
 
 <Layout dir="blogs/">
@@ -31,6 +41,7 @@ yapping to make it even longer`.trimStart(),
                         title={blog.title}
                         description={blog.description}
                         date={blog.date}
+                        href={blog.href}
                     />
                 </>
             ))