lukeonline - src/pages/blog/[id].astro
---
import Base from '../../layouts/Base.astro'
import { getCollection, render } from 'astro:content'
export async function getStaticPaths() {
const posts = await getCollection('blog')
return posts.map((post) => ({
params: {
id: post.id,
},
props: {
post,
},
}))
}
const { post } = Astro.props
const { Content } = await render(post)
---
<Base title={post.data.title}>
<div class="flex flex-col gap-6 [&_a]:text-blue-800 [&_a]:underline">
<div class="flex flex-col gap-2">
<span class="flex flex-col gap-1">
<span class="text-sm font-light">{post.data.date.toDateString()}</span>
<span class="text-gray-600 italic">{post.data.desc}</span>
</span>
</div>
<Content />
</div>
</Base>