+ + ← Alle Anleitungen + +
+ ++ Anleitung für Rollenträger +
++ Vier Aufgaben, vier Abschnitte. Wer mehrere Rollen hat, liest mehrere + Abschnitte — die Rechte addieren sich, die Grenzen bleiben. +
+diff --git a/app/src/app/[tenant]/anleitung/SpurInhalt.tsx b/app/src/app/[tenant]/anleitung/SpurInhalt.tsx new file mode 100644 index 0000000..62b11b2 --- /dev/null +++ b/app/src/app/[tenant]/anleitung/SpurInhalt.tsx @@ -0,0 +1,188 @@ +/** + * SpurInhalt.tsx — rendert EINE Anleitungs-Spur nach dem festen Muster: + * erster Satz → „So läuft es ab" → „Das sollten Sie wissen" → Nachschlag-Fragen + * → weiterführende Links. + * + * SERVER-KOMPONENTE OHNE JavaScript-Bedarf: Die Seiten müssen ohne JS vollständig + * lesbar sein — das ist der Vorteil gegenüber einer Folienmechanik. Deshalb + * natives details/summary statt Akkordeon-Skript, Listen statt Karussell, keine + * Interaktion, die Zustand braucht. + * + * ÜBERSCHRIFTEN-HIERARCHIE: Der Aufrufer gibt über `ebene` an, auf welcher Stufe + * die Abschnitts-Überschriften liegen — 2 auf der Ein-Spur-Seite (h1 ist dort der + * Spur-Titel), 3 auf der Sammelseite (dort ist h2 der Spur-Titel). Damit + * entstehen in beiden Fällen lückenlose Hierarchien (h1 → h2 → h3), was das + * a11y-Gate der CI erwartet. + */ + +import Link from "next/link"; +import type { AnleitungLink, AnleitungSpur } from "./anleitung-daten"; + +/** Tenant-relative Pfade bekommen das Slug-Präfix; `absolut` bleibt unberührt. */ +export function anleitungHref(link: AnleitungLink, slug: string): string { + return link.absolut ? link.href : `/${slug}${link.href}`; +} + +const LINK_KLASSEN = + "font-medium underline-offset-4 hover:underline rounded-sm " + + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--pz-brand)]"; + +/** Ein Sprung-Link in die App — intern über next/link, absolut als normales . */ +function SprungLink({ link, slug }: { link: AnleitungLink; slug: string }) { + const href = anleitungHref(link, slug); + const inhalt = ( + <> + {link.label} → + > + ); + if (link.absolut) { + return ( + + {inhalt} + + ); + } + return ( + + {inhalt} + + ); +} + +/** + * Abschnitts-Überschrift auf der vom Aufrufer bestimmten Ebene. Bewusst nur h2/h3: + * tiefer wird die Anleitung nicht, und h1 gehört immer der Seite. + */ +function AbschnittTitel({ + ebene, + id, + children, +}: { + ebene: 2 | 3; + id: string; + children: React.ReactNode; +}) { + const klassen = ebene === 2 ? "text-xl font-semibold" : "text-lg font-semibold"; + if (ebene === 2) { + return ( +
+ {spur.ersterSatz} +
+ + {/* --- So läuft es ab ------------------------------------------------ */} ++ {schritt.titel} +
++ {schritt.text} +
+ {schritt.link && ( +
+
+ {h.titel} +
++ {h.text} +
++ {q.a} +
++ + ← Alle Anleitungen + +
+ ++ Vier Aufgaben, vier Abschnitte. Wer mehrere Rollen hat, liest mehrere + Abschnitte — die Rechte addieren sich, die Grenzen bleiben. +
++ + ← Alle Anleitungen + +
+ ++ Wählen Sie, was auf Sie zutrifft. Jede Anleitung erklärt Bedeutung und + Reihenfolge und verlinkt dann an die passende Stelle — sie ersetzt keinen + Kurs und braucht kein Vorwissen. +
++ Sie sind bei {tenant.name} für{" "} + {meineAbschnitte.length === 1 ? "diese Aufgabe" : "diese Aufgaben"}{" "} + eingetragen: +
++ Sie suchen nur eine schnelle Antwort? Die{" "} + + häufigen Fragen + {" "} + fassen die wichtigsten Punkte in je zwei Sätzen zusammen. +
++ {karte.text} +
++ {karte.link.label} → +
+ > + ); + + // Das statische Präsentations-Deck liegt außerhalb des Next-Routings + // (middleware.ts nimmt /praesentation vom Tenant-Rewrite aus) — dorthin führt + // ein normales , kein next/link. + if (karte.link.absolut) { + return ( + + {inhalt} + + ); + } + return ( + + {inhalt} + + ); +} diff --git a/app/src/app/[tenant]/aufgaben/page.tsx b/app/src/app/[tenant]/aufgaben/page.tsx index bc98c5d..d170792 100644 --- a/app/src/app/[tenant]/aufgaben/page.tsx +++ b/app/src/app/[tenant]/aufgaben/page.tsx @@ -89,6 +89,18 @@ export default async function AufgabenPage({ params }: PageProps) { {tenant.name} — wählen Sie eine Funktion. Über „Ansicht“ oben wechseln Sie jederzeit zurück zur Bürger-Ansicht. + {/* Anleitung als Text-Link statt als weitere Kachel: die Kacheln spiegeln + exakt die Server-Guards (lib/aufgaben/kacheln.ts) — eine Kachel ohne + Rechte-Bezug würde diese Invariante aufweichen. */} ++ + Anleitung: was jede Aufgabe umfasst → + +
+ + Zur ausführlichen Anleitung + {" "} + — Schritt für Schritt fürs Mitmachen und für Aufgaben in der Kommune. +