1 files changed, 132 insertions, 0 deletions
diff --git a/old_stuff/src/pages/blogs/[...slug].astro b/old_stuff/src/pages/blogs/[...slug].astro
new file mode 100644
index 0000000..a7394ca
--- /dev/null
+++ b/old_stuff/src/pages/blogs/[...slug].astro
@@ -0,0 +1,132 @@
+---
+import { getCollection } from "astro:content";
+import Terminal from "@layouts/Terminal.astro";
+import BlogItem from "@components/BlogItem.astro";
+import Link from "@components/Link.astro";
+import TerminalBorder from "@components/TerminalBorder.astro";
+
+export async function getStaticPaths() {
+    const blogEntries = await getCollection("blogs");
+    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="/home/kyren/blogs/">
+    <div class="blog-scroll w-full h-[85svh] sm:h-[30vw] overflow-y-auto pr-[1.25vw] border-box">
+        <div class="text-[130%] h-full">
+            <div class="text-[110%]">
+                <BlogItem
+                    title={entry.data.title}
+                    description={entry.data.description ?? ""}
+                    date={entry.data.date}
+                />
+            </div>
+            <div class="markdown">
+                <Content components={{ a: Link }} />
+            </div>
+            <div class="mt-[1vw] px-[0.1vw] py-[0.625vw] grid grid-cols-2 gap-[1.25vw]">
+                {
+                    previousBlog ? (
+                        <TerminalBorder header="Previous Blog">
+                            <span class="text-[var(--secondary)] truncate flex-1">
+                                <Link href=`/blogs/${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=`/blogs/${nextBlog.slug}` newTab={false}>
+                                        vim ~/blogs/{nextBlog.slug}.md
+                                    </Link>
+                                </span>
+                            </div>
+                        </TerminalBorder>
+                    ) : (
+                        <div class="min-w-0 invisible" />
+                    )
+                }
+            </div>
+        </div>
+    </div>
+</Terminal>
+
+<style is:global>
+    .markdown {
+        user-select: text;
+        font-size: 1.1rem;
+    }
+    .markdown a {
+        display: inline-block;
+        font-weight: normal;
+    }
+    .markdown code {
+        background: #333333;
+        color: var(--accent);
+        padding: 0 0.5em;
+    }
+    .markdown ul {
+        list-style-type: square;
+        margin-left: 1em;
+        margin-bottom: 1em;
+        font-size: 90%;
+    }
+    .markdown li {
+        margin-bottom: 0.5em;
+    }
+    .markdown p {
+        margin-bottom: 1em;
+        user-select: text;
+    }
+    .markdown strong {
+        font-weight: bold;
+    }
+    .markdown h2 {
+        color: var(--secondary);
+        font-size: 125%;
+        margin-bottom: 0.5em;
+    }
+    .markdown h3 {
+        color: var(--secondary);
+        font-size: 110%;
+        margin-bottom: 0.25em;
+    }
+    .expressive-code {
+        margin-bottom: 1em;
+    }
+</style>
+
+<script>
+  document.addEventListener('wheel', (e) => {
+    const box = document.querySelector('.blog-scroll');
+    if (!box) return;
+
+    // If scrolling the page itself, forward it to the box
+    const atTop = box.scrollTop === 0 && e.deltaY < 0;
+    const atBottom = box.scrollHeight - box.scrollTop === box.clientHeight && e.deltaY > 0;
+
+    if (!atTop && !atBottom) {
+      box.scrollTop += e.deltaY;
+      e.preventDefault();
+    }
+  }, { passive: false });
+</script>