63 lines
1.8 KiB
Plaintext
63 lines
1.8 KiB
Plaintext
---
|
|
import { getCollection } from "astro:content";
|
|
import Layout from "@layouts/Layout.astro";
|
|
import Container from "@components/container.astro";
|
|
|
|
// Generate a new path for every collection entry
|
|
export async function getStaticPaths() {
|
|
const blogEntries = await getCollection("blog");
|
|
return blogEntries.map((entry) => ({
|
|
params: { slug: entry.slug },
|
|
props: { entry },
|
|
}));
|
|
}
|
|
|
|
// Get the entry directly from the prop on render
|
|
const { entry } = Astro.props;
|
|
const { Content } = await entry.render();
|
|
---
|
|
|
|
<Layout title={entry.data.title}>
|
|
<Container>
|
|
<div class="mx-auto max-w-3xl mt-14">
|
|
<span class="text-blue-400 uppercase tracking-wider text-sm font-medium">
|
|
{entry.data.category}
|
|
</span>
|
|
<h1
|
|
class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight">
|
|
{entry.data.title}
|
|
</h1>
|
|
<div class="flex gap-2 mt-3 items-center flex-wrap md:flex-nowrap">
|
|
<span class="text-gray-400">
|
|
{entry.data.author}
|
|
</span>
|
|
<span class="text-gray-400">•</span>
|
|
<time
|
|
class="text-gray-400"
|
|
datetime={entry.data.publishDate.toISOString()}>
|
|
{entry.data.publishDate.toDateString()}
|
|
</time>
|
|
<span class="text-gray-400 hidden md:block">•</span>
|
|
<div class="w-full md:w-auto flex flex-wrap gap-3">
|
|
{
|
|
entry.data.tags.map((tag) => (
|
|
<span class="text-sm text-gray-500">#{tag}</span>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-auto prose prose-lg mt-6 max-w-3xl">
|
|
<Content />
|
|
</div>
|
|
<div class="text-center mt-8">
|
|
<a
|
|
href="/blog"
|
|
class="bg-gray-100 px-5 py-3 rounded-md hover:bg-gray-200 transition"
|
|
>← Back to Blog</a
|
|
>
|
|
</div>
|
|
</Container>
|
|
</Layout>
|