Claude Opus 4.8
f500198c5d
All checks were successful
CD / Build and push images (push) Successful in 3m24s
CI / Lint, typecheck, test (push) Successful in 3m6s
CI / Auth e2e pack (push) Successful in 4m8s
CI / Build container images (push) Has been skipped
CD / Deploy to Test (push) Successful in 8s
CD / Smoke tests against Test (push) Successful in 1m13s
CD / Promote to Int (push) Successful in 11s
Self-hosted Google Fonts with per-pond selection (ADR 0016), the GDPR "zero external requests" posture (security.md, CSP `font-src 'self'`). - Catalog: a curated 15-family OFL/Apache list in shared (family, weights, category, license, google-webfonts-helper id). `deploy/fonts/build-fonts.mjs` validates every entry has license info (fails the build otherwise), downloads the WOFF2 weights into apps/web/public/fonts/ (gitignored), and generates the @font-face stylesheet — run at image build time from the web Dockerfile (with retries), never from a visitor's browser. - Application: PondFontScope sets --font-heading/body/mono (+ weights) from pond.settings.fonts on the editor + read view; the existing global CSS already reads those custom properties, so headings/body/code re-resolve to the pond's fonts. A pond with no settings arrives with the defaulted values (Roboto 400 / Roboto 200 / Fira Code), so the vision defaults always render. - Admin UI: pond-settings 'Appearance' section — three slots (family + weight) with a live preview, Pond-Admin-gated (fonts added to updatePondInputSchema and merged in PondsService.update); a font catalog attribution page (/fonts) listing families and licenses. New `font` i18n namespace (de+en). - CSP: strict Content-Security-Policy in nginx.conf (default-src 'self'; font-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; …) — the app's scripts are all external files, inline styles cover CSS variables. - Tests: shared catalog-integrity unit test (the invariant the build enforces); e2e fonts pack — no request leaves the origin when rendering a pond (the GDPR network assertion), a font choice applies to a page and persists, and a pond without settings renders the defaults. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EwZ4jR4KFAPvpjWevfUGX1
41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import { PondSettings, fontStack } from '@dorfteich/shared';
|
|
import type { CSSProperties, ReactNode } from 'react';
|
|
|
|
/** The CSS custom properties a pond's font choice sets on its content root
|
|
* (ADR 0016). The content CSS reads these; a family that fails to load falls
|
|
* back to the category's system stack (`fontStack`). */
|
|
export function pondFontVariables(fonts: PondSettings['fonts']): CSSProperties {
|
|
// Overrides the same custom properties the app-wide CSS already reads
|
|
// (tokens.css), so headings, body, and code inside the scope re-resolve to
|
|
// the pond's fonts without any per-element rules.
|
|
return {
|
|
'--font-heading': fontStack(fonts.heading.family),
|
|
'--font-weight-heading': String(fonts.heading.weight),
|
|
'--font-body': fontStack(fonts.body.family),
|
|
'--font-weight-body': String(fonts.body.weight),
|
|
'--font-mono': fontStack(fonts.mono.family),
|
|
'--font-weight-mono': String(fonts.mono.weight),
|
|
} as CSSProperties;
|
|
}
|
|
|
|
/**
|
|
* Applies a pond's fonts to its content (ADR 0016): a wrapper that sets the
|
|
* `--font-*` custom properties from `pond.settings.fonts`, so the editor and
|
|
* read view render in the pond's chosen heading/body/mono families immediately.
|
|
* A pond with no saved settings arrives with the defaulted values (Roboto 400 /
|
|
* Roboto 200 / Fira Code), so the defaults always render.
|
|
*/
|
|
export function PondFontScope({
|
|
fonts,
|
|
children,
|
|
}: {
|
|
fonts: PondSettings['fonts'];
|
|
children: ReactNode;
|
|
}): React.JSX.Element {
|
|
return (
|
|
<div className="pond-font-scope" style={pondFontVariables(fonts)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|