101 lines
4.3 KiB
TypeScript
101 lines
4.3 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import { notFound } from "next/navigation";
|
||
import Nav from "@/components/nav";
|
||
import Footer from "@/components/footer";
|
||
import { getGuide, GUIDES } from "@/lib/guides";
|
||
|
||
const SITE_URL = "https://entscheidomat.com";
|
||
|
||
export function generateStaticParams() {
|
||
return GUIDES.map(({ slug }) => ({ slug }));
|
||
}
|
||
|
||
export async function generateMetadata({ params }: PageProps<"/ratgeber/[slug]">): Promise<Metadata> {
|
||
const { slug } = await params;
|
||
const guide = getGuide(slug);
|
||
if (!guide) return {};
|
||
|
||
return {
|
||
title: guide.title,
|
||
description: guide.description,
|
||
alternates: { canonical: `/ratgeber/${guide.slug}` },
|
||
openGraph: {
|
||
type: "article",
|
||
locale: "de_DE",
|
||
url: `${SITE_URL}/ratgeber/${guide.slug}`,
|
||
title: guide.title,
|
||
description: guide.description,
|
||
publishedTime: "2026-08-03T08:00:00+02:00",
|
||
modifiedTime: "2026-08-03T08:00:00+02:00",
|
||
},
|
||
};
|
||
}
|
||
|
||
export default async function GuidePage({ params }: PageProps<"/ratgeber/[slug]">) {
|
||
const { slug } = await params;
|
||
const guide = getGuide(slug);
|
||
if (!guide) notFound();
|
||
|
||
const url = `${SITE_URL}/ratgeber/${guide.slug}`;
|
||
const jsonLd = {
|
||
"@context": "https://schema.org",
|
||
"@type": "Article",
|
||
headline: guide.title,
|
||
description: guide.description,
|
||
datePublished: "2026-08-03",
|
||
dateModified: "2026-08-03",
|
||
inLanguage: "de-DE",
|
||
mainEntityOfPage: url,
|
||
author: { "@type": "Person", name: "Timo Knuth" },
|
||
publisher: { "@type": "Organization", name: "Entscheidomat", url: SITE_URL },
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }} />
|
||
<Nav />
|
||
<main className="flex-1 bg-paper pb-20 pt-28 sm:pt-32">
|
||
<article className="mx-auto w-full max-w-3xl px-5 sm:px-8">
|
||
<nav aria-label="Breadcrumb" className="text-sm text-ink-soft">
|
||
<Link href="/" className="hover:text-[#0d7a57]">Entscheidomat</Link>
|
||
<span aria-hidden className="px-2">/</span>
|
||
<Link href="/ratgeber" className="hover:text-[#0d7a57]">Ratgeber</Link>
|
||
</nav>
|
||
<header className="mt-8 border-b border-line pb-10">
|
||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">{guide.readingTime}</p>
|
||
<h1 className="mt-4 text-balance font-display text-5xl font-semibold leading-[0.95] tracking-[-0.045em] text-ink sm:text-6xl">{guide.title}</h1>
|
||
<p className="mt-6 text-lg leading-relaxed text-ink-soft">{guide.description}</p>
|
||
<p className="mt-6 text-sm text-ink-soft">Von Timo Knuth · Veröffentlicht und aktualisiert am {guide.updated}</p>
|
||
</header>
|
||
<div className="mt-10 space-y-10 text-[1.0625rem] leading-8 text-ink-soft">
|
||
{guide.sections.map((section) => (
|
||
<section key={section.heading}>
|
||
<h2 className="font-display text-3xl font-semibold leading-tight text-ink">{section.heading}</h2>
|
||
<div className="mt-4 space-y-4">
|
||
{section.paragraphs.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}
|
||
</div>
|
||
{section.bullets && (
|
||
<ul className="mt-5 space-y-3 border-l-2 border-[#0d7a57]/30 pl-5">
|
||
{section.bullets.map((bullet) => <li key={bullet}>{bullet}</li>)}
|
||
</ul>
|
||
)}
|
||
</section>
|
||
))}
|
||
</div>
|
||
<aside className="mt-12 rounded-3xl border border-emerald-line bg-emerald-soft p-6 text-ink">
|
||
<h2 className="font-display text-2xl font-semibold">Passendes Tool auswählen</h2>
|
||
<p className="mt-2 leading-relaxed text-ink-soft">Für spielerische, folgenarme Entscheidungen kannst du die kostenlosen Tools direkt im Browser nutzen – ohne Anmeldung.</p>
|
||
<div className="mt-4 flex flex-wrap gap-4 text-sm font-semibold text-[#0d7a57]">
|
||
<Link href="/muenze-werfen" className="hover:underline">Münze werfen</Link>
|
||
<Link href="/gluecksrad" className="hover:underline">Glücksrad</Link>
|
||
<Link href="/namen-auslosen" className="hover:underline">Namen auslosen</Link>
|
||
</div>
|
||
</aside>
|
||
</article>
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
);
|
||
}
|