schalli
187fb76c91
- release-notes.ts: reine Auswahl der Versionsabschnitte aus CHANGELOG.md
- release-notice-actions.ts ('use server'): Abruf und Merken ueber die API
- ReleaseNoticeDialog: barrierefreies Fenster, Eintraege ueber ChangelogView (variant plain)
- ReleaseNoticeHost in AppShell: einmal je Seitenladung, merkt erst beim Schliessen
- Texte releaseNotice in de.json und en.json
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import MDEditor from '@uiw/react-md-editor';
|
|
import rehypeSanitize from 'rehype-sanitize';
|
|
import { useTheme } from 'next-themes';
|
|
|
|
/**
|
|
* Gerenderte Aenderungsliste fuer die Seite "Was ist neu" (quick-260916-dcz).
|
|
*
|
|
* Nutzt `MDEditor.Markdown` aus dem bereits installierten `@uiw/react-md-editor`
|
|
* (wie die Vorschau des Notiz-Widgets) mit `rehype-sanitize` — kein neues
|
|
* Paket, kein dangerouslySetInnerHTML. Der Farbmodus folgt `next-themes`
|
|
* erst nach dem Mount (vorher 'light'), damit Server- und Client-Markup
|
|
* uebereinstimmen (mounted-Guard wie in AppShell). Der Markdown-Text kommt
|
|
* als Prop von der Server-Seite; dieses Modul importiert `@/lib/changelog`
|
|
* bewusst NICHT, damit der Text nicht in Client-Chunks landet.
|
|
*
|
|
* quick-260925-bow: `variant="plain"` laesst Rahmen, Hintergrund und
|
|
* Innenabstand weg — so rendert das "Was ist neu"-Fenster seine Abschnitte mit
|
|
* demselben Renderer wie die Seite /changelog (Vorgabe `card`, Seite
|
|
* unveraendert).
|
|
*/
|
|
export function ChangelogView({
|
|
markdown,
|
|
variant = 'card',
|
|
}: {
|
|
markdown: string;
|
|
variant?: 'card' | 'plain';
|
|
}) {
|
|
const { resolvedTheme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const mode: 'light' | 'dark' = mounted && resolvedTheme === 'dark' ? 'dark' : 'light';
|
|
|
|
return (
|
|
<div
|
|
data-testid="changelog-markdown"
|
|
className={variant === 'card' ? 'rounded-md border border-border bg-card p-4' : undefined}
|
|
>
|
|
<MDEditor.Markdown
|
|
source={markdown}
|
|
rehypePlugins={[[rehypeSanitize]]}
|
|
wrapperElement={{ 'data-color-mode': mode }}
|
|
style={{ background: 'transparent' }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|