64 lines
2.0 KiB
Plaintext
64 lines
2.0 KiB
Plaintext
---
|
|
import { getCollection, type CollectionEntry } from 'astro:content';
|
|
import { Icon } from 'astro-icon/components';
|
|
import Layout from '../../layouts/Layout.astro';
|
|
|
|
export const prerender = true;
|
|
|
|
export async function getStaticPaths() {
|
|
const posts = await getCollection('posts');
|
|
return posts.map((post: CollectionEntry<'posts'>) => ({
|
|
params: { slug: post.slug },
|
|
props: { post },
|
|
}));
|
|
}
|
|
|
|
const { post }: { post: CollectionEntry<'posts'> } = Astro.props;
|
|
const { Content } = await post.render();
|
|
---
|
|
|
|
<Layout>
|
|
<div class="min-h-screen p-4 md:p-8">
|
|
<div class="max-w-3xl mx-auto">
|
|
<div class="p-4 md:p-8">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">
|
|
{post.data.title}
|
|
</h1>
|
|
|
|
<div class="flex flex-wrap items-center gap-4 mb-6">
|
|
<div class="flex items-center flex-row gap-2 text-base-content opacity-75">
|
|
<Icon name="mdi:clock" class="text-xl" />
|
|
<time datetime={post.data.pubDate.toISOString()}>
|
|
{new Date(post.data.pubDate).toLocaleDateString('en-us', {
|
|
month: 'long',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
})}
|
|
</time>
|
|
</div>
|
|
|
|
{/* Back button */}
|
|
<a href="/posts" class="btn btn-outline btn-primary btn-sm">
|
|
<Icon name="mdi:arrow-left" class="text-lg" />
|
|
Back
|
|
</a>
|
|
</div>
|
|
|
|
{post.data.tags && post.data.tags.length > 0 && (
|
|
<div class="flex gap-2 flex-wrap mb-6">
|
|
{post.data.tags.map((tag: string) => (
|
|
<span class="flex items-center flex-row gap-2 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
|
|
<Icon name="mdi:tag" class="text-lg" />
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<article class="prose prose-lg dark:prose-invert max-w-none mt-6">
|
|
<Content />
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout> |