Backup

1 files changed, 52 insertions, 0 deletions

diff --git a/src/pages/blogs.astro b/src/pages/blogs.astro
new file mode 100644
index 0000000..c571090
--- /dev/null
+++ b/src/pages/blogs.astro
@@ -0,0 +1,52 @@
+---
+import Terminal from "../layouts/Terminal.astro";
+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),
+        href: "/blogs/" + blog.slug,
+    }));
+---
+
+<Terminal path="blogs/">
+    <TerminalBorder header="Shell" margin="0.5rem 0 20px">
+        <p>$ ls -lah -t --color=auto ~/blogs</p>
+    </TerminalBorder>
+    <div class="max-h-[18.5rem] overflow-y-auto">
+        {
+            blogs.map((blog) => (
+                <>
+                    <BlogItem
+                        title={blog.title}
+                        description={blog.description ? blog.description : ""}
+                        date={blog.date}
+                        href={blog.href}
+                    />
+                </>
+            ))
+        }
+    </div>
+</Terminal>