init

frontend/src/pages/posts/[slug].astro

@@ -0,0 +1,64 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import { marked } from 'marked';
+
+const { slug } = Astro.params;
+const API_URL = import.meta.env.PUBLIC_API_URL || 'http://localhost:3000';
+
+interface PostDetail {
+  slug: string;
+  content: string;
+}
+
+let post: PostDetail | null = null;
+let html = '';
+let error = '';
+
+try {
+  const response = await fetch(`${API_URL}/api/posts/${slug}`);
+  if (response.ok) {
+    post = await response.json();
+    if (post) {
+      html = await marked.parse(post.content);
+    }
+  } else {
+    error = 'Post not found';
+  }
+} catch (e) {
+  error = 'Could not connect to backend';
+}
+
+function formatSlug(slug: string) {
+  return slug
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+---
+
+<Layout title={post ? formatSlug(post.slug) : 'Post'}>
+  <article class="glass p-12 mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
+    <header class="mb-12 border-b border-white/5 pb-12">
+      <a href="/" class="text-blue hover:text-sky transition-colors mb-8 inline-flex items-center gap-2 group">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
+        Back to list
+      </a>
+      {post && (
+        <h1 class="text-5xl font-extrabold text-mauve mt-4">
+          {formatSlug(post.slug)}
+        </h1>
+      )}
+    </header>
+
+    {error && (
+      <div class="text-red text-center py-12">
+        <h2 class="text-2xl font-bold mb-4">{error}</h2>
+        <a href="/" class="text-blue underline">Return home</a>
+      </div>
+    )}
+
+    {post && (
+      <div class="prose prose-invert max-w-none" set:html={html} />
+    )}
+  </article>
+</Layout>