mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 20:41:09 +02:00
95 lines
2.6 KiB
Text
95 lines
2.6 KiB
Text
---
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
import { getCollection } from 'astro:content';
|
|
import type { CollectionEntry } from 'astro:content';
|
|
|
|
export async function getStaticPaths() {
|
|
const posts = await getCollection('blog');
|
|
return posts.map((post) => ({
|
|
params: { slug: post.slug },
|
|
props: { post },
|
|
}));
|
|
}
|
|
|
|
type Props = { post: CollectionEntry<'blog'> };
|
|
const { post } = Astro.props;
|
|
const { Content } = await post.render();
|
|
|
|
function formatDate(date: Date): string {
|
|
return new Intl.DateTimeFormat('de-DE', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
}).format(date);
|
|
}
|
|
---
|
|
|
|
<BaseLayout title={post.data.title} description={post.data.description}>
|
|
<article class="px-4 py-16 sm:px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl">
|
|
<!-- Header -->
|
|
<header class="mb-12">
|
|
<a
|
|
href="/blog"
|
|
class="inline-flex items-center gap-2 text-sm text-primary-600 hover:underline mb-6"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
Zurück zum Blog
|
|
</a>
|
|
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl mb-4">
|
|
{post.data.title}
|
|
</h1>
|
|
<div class="flex items-center gap-4 text-gray-500">
|
|
<time datetime={post.data.pubDate.toISOString()}>
|
|
{formatDate(post.data.pubDate)}
|
|
</time>
|
|
{
|
|
post.data.author && (
|
|
<>
|
|
<span>•</span>
|
|
<span>{post.data.author}</span>
|
|
</>
|
|
)
|
|
}
|
|
</div>
|
|
{
|
|
post.data.tags && (
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
{post.data.tags.map((tag) => (
|
|
<span class="inline-block rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-600">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
</header>
|
|
|
|
<!-- Content -->
|
|
<div
|
|
class="prose prose-lg prose-gray max-w-none prose-headings:font-bold prose-a:text-primary-600 prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded"
|
|
>
|
|
<Content />
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="mt-16 pt-8 border-t border-gray-200">
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<a href="/blog" class="text-primary-600 hover:underline"> ← Alle Artikel </a>
|
|
<a
|
|
href="https://app.ulo.ad/register"
|
|
class="inline-block rounded-lg bg-primary-600 px-6 py-2 font-medium text-white transition hover:bg-primary-700"
|
|
>
|
|
Jetzt uLoad testen
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</BaseLayout>
|