dorfteich/packages/shared/src/fonts.ts
Claude Fable 5 75ec7f6006 CSP: data:-Fonts erlauben (eingebettete Fonts in Excalidraw-SVGs)
Excalidraw bettet beim Speichern die verwendeten Schrift-Subsets als
data:-URIs ins Snapshot-SVG ein. Die Seiten-CSP (nginx) und die
Plugin-Frame-CSP erlaubten aber nur `font-src 'self'` bzw. den
Asset-Pfad — die Handschrift fiel in der öffentlichen Ansicht und im
Snapshot-Render auf Serifen zurück (auf Prod an der ersten Demo-Skizze
sichtbar). Fix: `data:` in beiden font-src-Direktiven. data:-Fonts
lösen keinerlei Netzwerk-Request aus — die Zero-Third-Party-Garantie
(security.md) bleibt unberührt; fonts.ts-Kommentar entsprechend
präzisiert.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC
2026-07-19 22:27:17 +02:00

190 lines
5.5 KiB
TypeScript

/**
* The curated self-hosted font catalog (ADR 0016). One maintained list drives
* everything: the build step downloads these families' WOFF2 subsets into the
* web image, the pond-settings Appearance UI offers them, and the attribution
* page lists their licenses. Adding a font is a change here + an image rebuild
* — there is no runtime font management (deliberately small surface).
*
* Fonts are served only from the instance itself (`font-src 'self' data:` —
* the `data:` part covers fonts embedded inline in saved plugin SVGs, e.g.
* Excalidraw sketches); a visitor's browser makes zero third-party requests
* (the GDPR guarantee, security.md).
*/
export type FontCategory = 'sans-serif' | 'serif' | 'monospace';
export type FontLicense = 'OFL-1.1' | 'Apache-2.0';
export interface FontCatalogEntry {
/** google-webfonts-helper id — the download key for the build step. */
id: string;
/** CSS `font-family` name. */
family: string;
category: FontCategory;
/** Weights downloaded and offered (a subset of what upstream provides). */
weights: number[];
license: FontLicense;
licenseUrl: string;
}
/** Every catalog entry MUST carry license info — the build step fails otherwise
* (ADR 0016). Roboto ships under Apache-2.0; the rest under the SIL OFL 1.1. */
export const FONT_CATALOG: readonly FontCatalogEntry[] = [
{
id: 'roboto',
family: 'Roboto',
category: 'sans-serif',
weights: [200, 300, 400, 500, 700],
license: 'Apache-2.0',
licenseUrl: 'https://www.apache.org/licenses/LICENSE-2.0',
},
{
id: 'open-sans',
family: 'Open Sans',
category: 'sans-serif',
weights: [300, 400, 600, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'lato',
family: 'Lato',
category: 'sans-serif',
weights: [300, 400, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'montserrat',
family: 'Montserrat',
category: 'sans-serif',
weights: [300, 400, 500, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'inter',
family: 'Inter',
category: 'sans-serif',
weights: [300, 400, 500, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'nunito',
family: 'Nunito',
category: 'sans-serif',
weights: [300, 400, 600, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'pt-sans',
family: 'PT Sans',
category: 'sans-serif',
weights: [400, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'merriweather',
family: 'Merriweather',
category: 'serif',
weights: [300, 400, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'lora',
family: 'Lora',
category: 'serif',
weights: [400, 500, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'source-serif-4',
family: 'Source Serif 4',
category: 'serif',
weights: [300, 400, 600, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'playfair-display',
family: 'Playfair Display',
category: 'serif',
weights: [400, 500, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'fira-code',
family: 'Fira Code',
category: 'monospace',
weights: [300, 400, 500, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'ibm-plex-mono',
family: 'IBM Plex Mono',
category: 'monospace',
weights: [300, 400, 500, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'jetbrains-mono',
family: 'JetBrains Mono',
category: 'monospace',
weights: [400, 500, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
{
id: 'source-code-pro',
family: 'Source Code Pro',
category: 'monospace',
weights: [400, 500, 700],
license: 'OFL-1.1',
licenseUrl: 'https://openfontlicense.org',
},
];
/** Per-vision defaults (ADR 0016) — a pond with no saved fonts renders these.
* Kept in step with `pondSettingsSchema`'s `fonts` defaults. */
export const DEFAULT_FONTS = {
heading: { family: 'Roboto', weight: 400 },
body: { family: 'Roboto', weight: 200 },
mono: { family: 'Fira Code', weight: 400 },
} as const;
/** System fallback per category — used while a WOFF2 loads and if it is absent. */
export const FONT_FALLBACKS: Readonly<Record<FontCategory, string>> = {
'sans-serif': "system-ui, -apple-system, 'Segoe UI', sans-serif",
serif: "Georgia, 'Times New Roman', serif",
monospace: "ui-monospace, 'SFMono-Regular', Menlo, monospace",
};
/** URL/file-safe slug for a family (matches the on-disk `/fonts/<slug>/` layout). */
export function fontSlug(family: string): string {
return family
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/(^-|-$)/g, '');
}
export function fontEntry(family: string): FontCatalogEntry | undefined {
return FONT_CATALOG.find((entry) => entry.family === family);
}
/**
* The `font-family` stack for a chosen family: the family itself (when it is in
* the catalog) ahead of the category's system fallback, so text stays readable
* before the WOFF2 loads or if the catalog font is unknown.
*/
export function fontStack(family: string): string {
const entry = fontEntry(family);
const fallback = FONT_FALLBACKS[entry?.category ?? 'sans-serif'];
return entry ? `'${family}', ${fallback}` : fallback;
}