From fc001b14c00f530d106400149b9be69837d6952f Mon Sep 17 00:00:00 2001
From: Kyren223 <Kyren223@proton.me>
Date: Fri, 15 Nov 2024 12:37:54 +0200
Subject: [PATCH] Mostly finished the custom markdown blog, still tweaking a
 bit

---
 ...perience-longer-poooooo-way-longer-yee.md} |  3 +-
 src/pages/blogs/[...slug].astro               | 53 +++++++++++++------
 2 files changed, 40 insertions(+), 16 deletions(-)
 rename src/content/blogs/{my-webdev-experience.md => my-webdev-experience-longer-poooooo-way-longer-yee.md} (84%)

diff --git a/src/content/blogs/my-webdev-experience.md b/src/content/blogs/my-webdev-experience-longer-poooooo-way-longer-yee.md
similarity index 84%
rename from src/content/blogs/my-webdev-experience.md
rename to src/content/blogs/my-webdev-experience-longer-poooooo-way-longer-yee.md
index 9909cf1..6949572 100644
--- a/src/content/blogs/my-webdev-experience.md
+++ b/src/content/blogs/my-webdev-experience-longer-poooooo-way-longer-yee.md
@@ -4,4 +4,5 @@ description: I made a website, here are my thoughts on web development
 date: 2024-12-13
 ---
 
-# My webdev experience
+Lorem ipsum dolor sit
+
diff --git a/src/pages/blogs/[...slug].astro b/src/pages/blogs/[...slug].astro
index b8fa5b4..dbd6b80 100644
--- a/src/pages/blogs/[...slug].astro
+++ b/src/pages/blogs/[...slug].astro
@@ -7,14 +7,20 @@ import TerminalBorder from "@components/TerminalBorder.astro";
 
 export async function getStaticPaths() {
     const blogEntries = await getCollection("blogs");
-    return blogEntries.map((entry) => ({
-        params: { slug: entry.slug },
-        props: { entry },
+    return blogEntries.map((blog) => ({
+        params: { slug: blog.slug },
+        props: { entry: blog },
     }));
 }
 
 const { entry } = Astro.props;
 const { Content } = await entry.render();
+
+const blogs = await getCollection("blogs");
+const sortedBlogs = blogs.sort((a, b) => +b.data.date - +a.data.date);
+const currentIndex = sortedBlogs.findIndex((blog) => blog.slug === entry.slug);
+const previousBlog = sortedBlogs[currentIndex + 1] || undefined;
+const nextBlog = sortedBlogs[currentIndex - 1] || undefined;
 ---
 
 <Terminal path="blogs/">
@@ -30,18 +36,35 @@ const { Content } = await entry.render();
             <div class="markdown">
                 <Content components={{ a: Link }} />
             </div>
-            <div class="ml-[1px] pt-2 grid grid-cols-[1fr_1fr] gap-4">
-                <div class="min-w-0 invisible"></div>
-                <TerminalBorder header="Previous Blog">
-                    <Link href="next" newTab={false}
-                        >vim ~/blogs/next-blog.md</Link
-                    >
-                </TerminalBorder>
-                <TerminalBorder header="Next Blog">
-                    <Link href="next" newTab={false}
-                        >vim ~/blogs/next-blog.md</Link
-                    >
-                </TerminalBorder>
+            <div class="px-[1px] py-2 grid grid-cols-2 gap-4">
+                {
+                    previousBlog ? (
+                        <TerminalBorder header="Previous Blog">
+                            <span class="text-[var(--secondary)] truncate flex-1">
+                                <Link href={previousBlog.slug} newTab={false}>
+                                    vim ~/blogs/{previousBlog.slug}.md
+                                </Link>
+                            </span>
+                        </TerminalBorder>
+                    ) : (
+                        <div class="min-w-0 invisible" />
+                    )
+                }
+                {
+                    nextBlog ? (
+                        <TerminalBorder header="Next Blog">
+                            <div class="w-full  flex items-center">
+                                <span class="text-[var(--secondary)] truncate flex-1">
+                                    <Link href={nextBlog.slug} newTab={false}>
+                                        vim ~/blogs/{nextBlog.slug}.md
+                                    </Link>
+                                </span>
+                            </div>
+                        </TerminalBorder>
+                    ) : (
+                        <div class="min-w-0 invisible" />
+                    )
+                }
             </div>
         </div>
     </div>