initial

2025-06-16 16:55:38 +02:00
commit 037c7cd31e
15 changed files with 10687 additions and 0 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-rgb: 255, 255, 255;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: rgb(var(--background-rgb));
+}
+
+.prose img {
+  margin: 2rem auto;
+  border-radius: 0.5rem;
+}
+
+.prose a {
+  color: #2563eb;
+  text-decoration: underline;
+}
+
+.prose a:hover {
+  color: #1d4ed8;
+} 
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+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',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+} 
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,36 @@
+import Link from 'next/link';
+import { getAllPosts } from '@/lib/markdown';
+import { format } from 'date-fns';
+
+export default async function Home() {
+  const posts = await getAllPosts();
+
+  return (
+    <main className="min-h-screen p-8 max-w-4xl mx-auto">
+      <h1 className="text-4xl font-bold mb-8">My 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>
+              <p className="text-gray-700 mb-4">{post.summary}</p>
+              <div className="flex gap-2">
+                {post.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </Link>
+          </article>
+        ))}
+      </div>
+    </main>
+  );
+} 
--- a/src/app/posts/[slug]/page.tsx
+++ b/src/app/posts/[slug]/page.tsx
@@ -0,0 +1,43 @@
+import { getPostBySlug, getAllPosts } from '@/lib/markdown';
+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,
+  }));
+}
+
+export default async function Post({ params }: { params: { slug: string } }) {
+  const post = await getPostBySlug(params.slug);
+
+  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
+      </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>
+      
+      <div className="flex gap-2 mb-8">
+        {post.tags.map((tag) => (
+          <span
+            key={tag}
+            className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+
+      <div
+        className="prose prose-lg max-w-none"
+        dangerouslySetInnerHTML={{ __html: post.content }}
+      />
+    </article>
+  );
+}