lesssagoo

2025-06-16 17:06:26 +02:00
parent 037c7cd31e
commit 439d673e8f
9 changed files with 323 additions and 52 deletions
--- a/src/app/api/posts/[slug]/route.ts
+++ b/src/app/api/posts/[slug]/route.ts
@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { remark } from 'remark';
+import html from 'remark-html';
+
+const postsDirectory = path.join(process.cwd(), 'posts');
+
+// Function to get file creation date
+function getFileCreationDate(filePath: string): Date {
+  const stats = fs.statSync(filePath);
+  return stats.birthtime;
+}
+
+async function getPostBySlug(slug: string) {
+  const realSlug = slug.replace(/\.md$/, '');
+  const fullPath = path.join(postsDirectory, `${realSlug}.md`);
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
+  const { data, content } = matter(fileContents);
+  const createdAt = getFileCreationDate(fullPath);
+
+  const processedContent = await remark()
+    .use(html)
+    .process(content);
+
+  return {
+    slug: realSlug,
+    title: data.title,
+    date: data.date,
+    tags: data.tags || [],
+    summary: data.summary,
+    content: processedContent.toString(),
+    createdAt: createdAt.toISOString(),
+  };
+}
+
+export async function GET(
+  request: Request,
+  { params }: { params: { slug: string } }
+) {
+  try {
+    const post = await getPostBySlug(params.slug);
+    return NextResponse.json(post);
+  } catch (error) {
+    return NextResponse.json({ error: 'Failed to fetch post' }, { status: 500 });
+  }
+} 
--- a/src/app/api/posts/route.ts
+++ b/src/app/api/posts/route.ts
@@ -0,0 +1,61 @@
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { remark } from 'remark';
+import html from 'remark-html';
+
+const postsDirectory = path.join(process.cwd(), 'posts');
+
+// Function to get file creation date
+function getFileCreationDate(filePath: string): Date {
+  const stats = fs.statSync(filePath);
+  return stats.birthtime;
+}
+
+async function getPostBySlug(slug: string) {
+  const realSlug = slug.replace(/\.md$/, '');
+  const fullPath = path.join(postsDirectory, `${realSlug}.md`);
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
+  const { data, content } = matter(fileContents);
+  const createdAt = getFileCreationDate(fullPath);
+
+  const processedContent = await remark()
+    .use(html)
+    .process(content);
+
+  return {
+    slug: realSlug,
+    title: data.title,
+    date: data.date,
+    tags: data.tags || [],
+    summary: data.summary,
+    content: processedContent.toString(),
+    createdAt: createdAt.toISOString(),
+  };
+}
+
+async function getAllPosts() {
+  const fileNames = fs.readdirSync(postsDirectory);
+  const allPostsData = await Promise.all(
+    fileNames
+      .filter((fileName) => fileName.endsWith('.md'))
+      .map(async (fileName) => {
+        const slug = fileName.replace(/\.md$/, '');
+        return getPostBySlug(slug);
+      })
+  );
+
+  return allPostsData.sort((a, b) => 
+    new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  );
+}
+
+export async function GET() {
+  try {
+    const posts = await getAllPosts();
+    return NextResponse.json(posts);
+  } catch (error) {
+    return NextResponse.json({ error: 'Failed to fetch posts' }, { status: 500 });
+  }
+} 
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,8 +5,8 @@ import './globals.css';
 const inter = Inter({ subsets: ['latin'] });

 export const metadata: Metadata = {
-  title: 'My Markdown Blog',
-  description: 'A blog built with Next.js and Markdown',
+  title: 'Sebastian Zinkls - Blog',
+  description: 'Ein Blog von Sebastian Zinkl, gebaut mit Next.js und Markdown',
 };

 export default function RootLayout({
@@ -15,7 +15,7 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
-    <html lang="en">
+    <html lang="de">
      <body className={inter.className}>{children}</body>
    </html>
  );
--- a/src/app/page.tsx
+++ b/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">
--- a/src/app/posts/[slug]/page.tsx
+++ b/src/app/posts/[slug]/page.tsx
@@ -1,26 +1,57 @@
-import { getPostBySlug, getAllPosts } from '@/lib/markdown';
+'use client';
+
+import { useEffect, useState } from 'react';
 import { format } from 'date-fns';
 import Link from 'next/link';

-export async function generateStaticParams() {
-  const posts = await getAllPosts();
-  return posts.map((post) => ({
-    slug: post.slug,
-  }));
+interface Post {
+  slug: string;
+  title: string;
+  date: string;
+  tags: string[];
+  summary: string;
+  content: string;
+  createdAt: string;
 }

-export default async function Post({ params }: { params: { slug: string } }) {
-  const post = await getPostBySlug(params.slug);
+export default function PostPage({ params }: { params: { slug: string } }) {
+  const [post, setPost] = useState<Post | null>(null);
+
+  useEffect(() => {
+    // Initial load
+    loadPost();
+
+    // Set up polling for changes
+    const interval = setInterval(loadPost, 2000);
+
+    // Cleanup
+    return () => clearInterval(interval);
+  }, [params.slug]);
+
+  const loadPost = async () => {
+    try {
+      const response = await fetch(`/api/posts/${params.slug}`);
+      const data = await response.json();
+      setPost(data);
+    } catch (error) {
+      console.error('Fehler beim Laden des Beitrags:', error);
+    }
+  };
+
+  if (!post) {
+    return <div>Lädt...</div>;
+  }

  return (
    <article className="min-h-screen p-8 max-w-4xl mx-auto">
      <Link href="/" className="text-blue-600 hover:underline mb-8 inline-block">
-        ← Back to posts
+        ← Zurück zu den Beiträgen
      </Link>
      
      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
      <div className="text-gray-600 mb-8">
-        {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>
      
      <div className="flex gap-2 mb-8">