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

---
 ...dev-experience-longer-poooooo-way-longer-yee.md |  8 ++++
 src/content/blogs/my-webdev-experience.md          |  7 ---
 src/pages/blogs/[...slug].astro                    | 53 ++++++++++++++++------
 3 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 src/content/blogs/my-webdev-experience-longer-poooooo-way-longer-yee.md
 delete mode 100644 src/content/blogs/my-webdev-experience.md

(limited to 'src')

diff --git a/src/content/blogs/my-webdev-experience-longer-poooooo-way-longer-yee.md b/src/content/blogs/my-webdev-experience-longer-poooooo-way-longer-yee.md
new file mode 100644
index 0000000..6949572
--- /dev/null
+++ b/src/content/blogs/my-webdev-experience-longer-poooooo-way-longer-yee.md
@@ -0,0 +1,8 @@
+---
+title: My webdev experience
+description: I made a website, here are my thoughts on web development
+date: 2024-12-13
+---
+
+Lorem ipsum dolor sit
+
diff --git a/src/content/blogs/my-webdev-experience.md b/src/content/blogs/my-webdev-experience.md
deleted file mode 100644
index 9909cf1..0000000
--- a/src/content/blogs/my-webdev-experience.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: My webdev experience
-description: I made a website, here are my thoughts on web development
-date: 2024-12-13
----
-
-# My webdev experience
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>
-- 
cgit v1.3.1