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>
+  );
+} 
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -0,0 +1,55 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { remark } from 'remark';
+import html from 'remark-html';
+
+export interface Post {
+  slug: string;
+  title: string;
+  date: string;
+  tags: string[];
+  summary: string;
+  content: string;
+}
+
+const postsDirectory = path.join(process.cwd(), 'posts');
+
+export async function getPostBySlug(slug: string): Promise<Post> {
+  const realSlug = slug.replace(/\.md$/, '');
+  const fullPath = path.join(postsDirectory, `${realSlug}.md`);
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
+  const { data, content } = matter(fileContents);
+
+  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(),
+  };
+}
+
+export async function getAllPosts(): Promise<Post[]> {
+  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) => (a.date < b.date ? 1 : -1));
+}
+
+export async function getPostsByTag(tag: string): Promise<Post[]> {
+  const allPosts = await getAllPosts();
+  return allPosts.filter((post) => post.tags.includes(tag));
+}