github-website/src/pages/blogs/[...slug].astro

---
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="blogs/">
    <div class="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>