70 lines
2.6 KiB
Plaintext
70 lines
2.6 KiB
Plaintext
---
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
import Header from '../../components/Header.astro';
|
|
import Footer from '../../components/Footer.astro';
|
|
import { getBlogPostBySlug, getBlogPosts } from '../../utils/directus';
|
|
import { useTranslations } from '../../utils/i18n';
|
|
|
|
export async function getStaticPaths() {
|
|
const posts = await getBlogPosts();
|
|
|
|
return posts
|
|
.filter((post) => typeof post.slug === 'string' && post.slug.trim() !== '')
|
|
.map((post) => ({
|
|
params: { slug: post.slug },
|
|
props: { post },
|
|
}));
|
|
}
|
|
|
|
const { post } = Astro.props;
|
|
const t = await useTranslations('en');
|
|
---
|
|
|
|
<BaseLayout title={`${post.title} | ${t('blog.title')}`} description={post.content.replace(/<[^>]+>/g, '').substring(0, 160)}>
|
|
<Header />
|
|
|
|
<main class="flex-1">
|
|
<!-- Hero Section -->
|
|
<section class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 py-20">
|
|
<div class="container-custom">
|
|
<div class="max-w-4xl mx-auto">
|
|
<nav class="mb-6">
|
|
<a href="/en/blog" class="text-primary hover:underline flex items-center">
|
|
← {t('blog.backToBlog')}
|
|
</a>
|
|
</nav>
|
|
<header class="text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
|
{post.title}
|
|
</h1>
|
|
<p class="text-xl text-gray-600 dark:text-gray-300">
|
|
{new Date(post.date_created).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</p>
|
|
</header>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Article Content -->
|
|
<section class="py-16">
|
|
<div class="container-custom">
|
|
<article class="max-w-4xl mx-auto">
|
|
<div class="prose prose-lg dark:prose-invert max-w-none prose-headings:text-gray-900 dark:prose-headings:text-white prose-p:text-gray-700 dark:prose-p:text-gray-300 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-gray-900 dark:prose-strong:text-white prose-code:text-primary prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1 prose-code:py-0.5 prose-code:rounded" set:html={post.content}></div>
|
|
|
|
<!-- Back to Blog Button -->
|
|
<div class="mt-12 pt-8 border-t border-border text-center">
|
|
<a href="/en/blog" class="btn btn-primary">
|
|
← {t('blog.backToBlog')}
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
</BaseLayout> |