59 lines
2.2 KiB
Plaintext
59 lines
2.2 KiB
Plaintext
---
|
|
import Layout from "../../layouts/Layout.astro";
|
|
import { getAllProjects, getProject } from "../../lib/sanity";
|
|
import { toHTML } from "@portabletext/to-html";
|
|
|
|
export async function getStaticPaths() {
|
|
const projects = await getAllProjects();
|
|
return projects.map((p: any) => ({ params: { slug: p.slug.current } }));
|
|
}
|
|
|
|
const { slug } = Astro.params;
|
|
const project = await getProject(slug!);
|
|
|
|
if (!project) return Astro.redirect("/projekte");
|
|
|
|
const bodyHtml = project.body ? toHTML(project.body) : "";
|
|
---
|
|
|
|
<Layout
|
|
title={project.title}
|
|
description={project.summary}
|
|
ogImage={project.image?.asset?.url}
|
|
>
|
|
<!-- Breadcrumb -->
|
|
<div class="max-w-6xl mx-auto px-4 pt-6">
|
|
<a href="/projekte" class="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-primary)]">← Alle Projekte</a>
|
|
</div>
|
|
|
|
{project.image?.asset?.url && (
|
|
<div class="max-w-6xl mx-auto px-4 mt-6">
|
|
<div class="aspect-video rounded-3xl overflow-hidden">
|
|
<img src={`${project.image.asset.url}?w=1200&auto=format`} alt={project.title} class="w-full h-full object-cover" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<section class="section">
|
|
<div class="max-w-3xl">
|
|
<div class="flex items-center gap-3 mb-4 text-sm text-[var(--color-text-muted)]">
|
|
{project.date && <span>📅 {project.date}</span>}
|
|
{project.targetGroup && <span>👥 {project.targetGroup}</span>}
|
|
</div>
|
|
<h1 class="font-brand text-4xl md:text-5xl text-[var(--color-text)] mb-6">{project.title}</h1>
|
|
<p class="text-xl text-[var(--color-text-muted)] leading-relaxed mb-8">{project.summary}</p>
|
|
{bodyHtml && (
|
|
<div class="prose prose-lg max-w-none text-[var(--color-text-muted)]" set:html={bodyHtml} />
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section text-center border-t border-[var(--color-border)] pt-12">
|
|
<p class="text-[var(--color-text-muted)] mb-4">Solche Projekte werden durch Mitgliedsbeiträge und Spenden möglich.</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/mitglied-werden" class="btn-primary">Mitglied werden</a>
|
|
<a href="/unterstuetzen" class="btn-secondary">Spenden</a>
|
|
</div>
|
|
</section>
|
|
</Layout>
|