integration Directus cms

src/pages/blog/[slug].astro

@@ -0,0 +1,29 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getBlogPostBySlug, getBlogPosts } from '../../utils/directus';
+
+export async function getStaticPaths() {
+  const posts = await getBlogPosts();
+  return posts.map((post) => ({
+    params: { slug: Array.isArray(post.slug) ? post.slug[0] : post.slug },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+---
+
+<BaseLayout title={`${post.title} | Tiber365 Blog`}>
+  <main class="container mx-auto px-4 py-12">
+    <article class="max-w-3xl mx-auto">
+      <header class="mb-8">
+        <h1 class="text-4xl font-bold mb-4">{post.title}</h1>
+        <p class="text-gray-600 dark:text-gray-300">
+          {new Date(post.date_created).toLocaleDateString()}
+        </p>
+      </header>
+      
+      <div class="prose dark:prose-invert max-w-none" set:html={post.content}></div>
+    </article>
+  </main>
+</BaseLayout>