pupika/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(blog): add file-based blog with dynamic slugs, MDX content and layout shell

Browse Source 
- Introduced blog routing using Next.js App Router
- Implemented dynamic [slug] pages for blog posts
- Added MDX-based content loading via lib/posts
- Integrated shared TopBar layout with navigation
- Established clear content, lib and component separation
This commit is contained in:
PascalSchattenburg
2026-01-22 14:14:15 +01:00
parent b717952234
commit d147843c76
10412 changed files with 2475583 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/public-web/app/(site)/about/page.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { TopBar, BackLink } from "../../../components/shell/TopBar";
export default function AboutPage() {
return (
<div>
<TopBar title="Info" left={<BackLink href="/" />} />
<main className="mx-auto max-w-3xl px-4 py-10">
<h1 className="text-2xl font-semibold">About</h1>
<p className="mt-3 opacity-80">
Platzhalter. Hier kommt spaeter Brand-Info, Links, Kontakt, etc.
</p>
</main>
</div>
);
}

40
apps/public-web/app/(site)/blog/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { notFound } from "next/navigation";
import { TopBar, BackLink, InfoLink } from "../../../../components/shell/TopBar";
import { getPostBySlug } from "../../../../lib/posts";
type PageProps = {
params: Promise<{
slug: string;
}>;
};
export default async function BlogPostPage({ params }: PageProps) {
const { slug } = await params;
const post = getPostBySlug(slug);
if (!post) return notFound();
return (
<div>
<TopBar
title={post.meta.title}
left={<BackLink href="/blog" />}
right={<InfoLink href="/about" />}
/>
<main className="mx-auto max-w-3xl px-4 py-10">
<div className="text-xs opacity-70">
{post.meta.date}
</div>
<h1 className="mt-2 text-2xl font-semibold">
{post.meta.title}
</h1>
<div className="mt-8 whitespace-pre-wrap leading-relaxed">
{post.content}
</div>
</main>
</div>
);
}

44
apps/public-web/app/(site)/blog/page.tsx Normal file
View File

@@ -0,0 +1,44 @@
import Link from "next/link";
import { TopBar, BackLink, InfoLink } from "../../../components/shell/TopBar";
import { getAllPosts } from "../../../lib/posts";
export default function BlogIndexPage() {
const posts = getAllPosts();
return (
<div>
<TopBar
title="Blog"
left={<BackLink href="/" />}
right={<InfoLink href="/about" />}
/>
<main className="mx-auto max-w-3xl px-4 py-10">
<div className="space-y-6">
{posts.map((p) => (
<article
key={p.slug}
className="border border-black/10 p-4"
>
<div className="text-xs opacity-70">
{p.meta.date}
</div>
<h2 className="text-lg font-semibold">
<Link href={`/blog/${p.slug}`}>
{p.meta.title}
</Link>
</h2>
{p.meta.excerpt ? (
<p className="mt-2 opacity-80">
{p.meta.excerpt}
</p>
) : null}
</article>
))}
</div>
</main>
</div>
);
}

12
apps/public-web/app/(site)/layout.tsx Normal file
View File

@@ -0,0 +1,12 @@
import "../global.css";
import type { ReactNode } from "react";
export default function SiteLaytout({ children }: {children: ReactNode}) {
return (
<html lang="de">
<body className="bg-white text-black">
{children}
</body>
</html>
);
}

23
apps/public-web/app/(site)/page.tsx Normal file
View File

@@ -0,0 +1,23 @@
import Link from "next/link";
import { TopBar, InfoLink } from "../../components/shell/TopBar";
export default function HomePage(){
return(
<div>
<TopBar title="VOYAGE" right={<InfoLink href="/about" />} />
<main className="mx-auto max-w-3xl px-4 py-10">
<h1 className="text-2xl font-semibold">Public Web</h1>
<p className="mt-3 opacity-80">
Das ist das Grundgeruest. Von hier aus baust du Design & Content iterativ.
</p>
<div className="mt-6">
<Link className="underline" href="/blog">
Go to Blog
</Link>
</div>
</main>
</div>
)
}