lesssagoo

src/app/page.tsx

@@ -1,20 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { getAllPosts } from '@/lib/markdown';
 import { format } from 'date-fns';
 
-export default async function Home() {
-  const posts = await getAllPosts();
+interface Post {
+  slug: string;
+  title: string;
+  date: string;
+  tags: string[];
+  summary: string;
+  content: string;
+  createdAt: string;
+}
+
+export default function Home() {
+  const [posts, setPosts] = useState<Post[]>([]);
+
+  useEffect(() => {
+    // Initial load
+    loadPosts();
+
+    // Set up polling for changes
+    const interval = setInterval(loadPosts, 2000);
+
+    // Cleanup
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadPosts = async () => {
+    try {
+      const response = await fetch('/api/posts');
+      const data = await response.json();
+      setPosts(data);
+    } catch (error) {
+      console.error('Fehler beim Laden der Beiträge:', error);
+    }
+  };
 
   return (
     <main className="min-h-screen p-8 max-w-4xl mx-auto">
-      <h1 className="text-4xl font-bold mb-8">My Blog</h1>
+      <h1 className="text-4xl font-bold mb-8">Sebastian Zinkls - Blog</h1>
       <div className="grid gap-8">
         {posts.map((post) => (
           <article key={post.slug} className="border rounded-lg p-6 hover:shadow-lg transition-shadow">
             <Link href={`/posts/${post.slug}`}>
               <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
               <div className="text-gray-600 mb-4">
-                {format(new Date(post.date), 'MMMM d, yyyy')}
+                <div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div>
+                <div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
               </div>
               <p className="text-gray-700 mb-4">{post.summary}</p>
               <div className="flex gap-2">