Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release: v0.20.0

Browse Source
This commit is contained in:
Ralksta
2026-10-02 18:14:23 +02:00
committed by GitHub
parent 81ce886b01
commit 5f831f719a
209 changed files with 13807 additions and 803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
lib/config/index.ts
View File

@@ -277,6 +277,8 @@ export interface GalleryDerivation {
albumGrids: Record<string, Partial<GridConfig>>;
albumCoverPositions: Record<string, string>;
albumDownloads: Record<string, boolean>;
/** Album zoom overrides on the standalone entries; subpages carry their own. */
standaloneAlbumZoom: Record<string, boolean>;
albumLocationPrecision: Record<string, LocationPrecision>;
}
@@ -302,6 +304,13 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
const albumGrids: Record<string, Partial<GridConfig>> = {};
const albumCoverPositions: Record<string, string> = {};
const albumDownloads: Record<string, boolean> = {};
/**
* Per-album zoom overrides (#467), one map per route: the standalone entries
* here, each subpage's (sections included) on the subpage. An album listed on
* two pages can be zoomable on one and not the other; a single map would let
* whichever entry came last decide for both.
*/
const standaloneAlbumZoom: Record<string, boolean> = {};
const albumLocationPrecision: Record<string, LocationPrecision> = {};
/** Returns null for an entry whose album ID is not a UUID; callers drop it. */
@@ -309,6 +318,7 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
entry: string | Record<string, string | AlbumEntryObject>,
context: string,
inheritedLocation?: LocationPrecision,
zoomSink?: Record<string, boolean>,
): string | null {
if (typeof entry === 'string') {
if (inheritedLocation) albumLocationPrecision[entry] = inheritedLocation;
@@ -396,6 +406,13 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
// handing out full-resolution originals because one client gallery
// needed to (#475).
if (value.download === true) albumDownloads[validatedUuid] = true;
// Both values mean something: `false` switches zoom off here even where
// the subpage or the site has it on (#467). Anything else is ignored.
// Written to the route this entry is on. Listed twice on one route (two
// sections of a page), the cautious answer wins: `false` stays `false`.
if (zoomSink && typeof value.zoom === 'boolean') {
zoomSink[validatedUuid] = zoomSink[validatedUuid] !== false && value.zoom;
}
const location = parseLocation(value.location, `${context}: album ${validatedUuid} location`);
if (location) albumLocationPrecision[validatedUuid] = location;
}
@@ -407,9 +424,10 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
entries: Array<string | Record<string, string | AlbumEntryObject>>,
context: string,
inheritedLocation?: LocationPrecision,
zoomSink?: Record<string, boolean>,
): string[] {
return entries
.map((entry) => processAlbumEntry(entry, context, inheritedLocation))
.map((entry) => processAlbumEntry(entry, context, inheritedLocation, zoomSink))
.filter((id): id is string => id !== null);
}
@@ -429,7 +447,12 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
return raw;
}
const standaloneAlbumIds = processAlbumEntries(gallery.albums ?? [], 'gallery.yaml albums');
const standaloneAlbumIds = processAlbumEntries(
gallery.albums ?? [],
'gallery.yaml albums',
undefined,
standaloneAlbumZoom,
);
let subpages: SubpageConfig[] = [];
/** Menu order, subpages and `- page:` references interleaved (#722). */
@@ -465,6 +488,9 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
throw new Error(`Subpage "(unnamed)" must have a name`);
}
// This page's own album zoom overrides, sections included (#467).
const albumZoom: Record<string, boolean> = {};
// Parse sections if present
let sections: SubpageSectionConfig[] | undefined;
let albumIds: string[];
@@ -478,6 +504,7 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
sec.albums,
`subpage "${sp.name}" section "${sec.title}"`,
parseLocation(sp.location, `subpage "${sp.name}" location`),
albumZoom,
),
}));
// flat union of all section albums
@@ -487,6 +514,7 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
sp.albums ?? [],
`subpage "${sp.name}"`,
parseLocation(sp.location, `subpage "${sp.name}" location`),
albumZoom,
);
albumIds = [...topLevel, ...albumIds];
} else {
@@ -498,6 +526,7 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
albums,
`subpage "${sp.name}"`,
parseLocation(sp.location, `subpage "${sp.name}" location`),
albumZoom,
);
}
@@ -510,6 +539,8 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
sections,
password: sp.password,
proofing: sp.proofing,
zoom: typeof sp.zoom === 'boolean' ? sp.zoom : undefined,
...(Object.keys(albumZoom).length ? { albumZoom } : {}),
essayFile: sp.essayFile,
essayText: sp.essayText,
enabled: sp.enabled !== false,
@@ -533,6 +564,7 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
}
const sp = value as SubpageObjectValue;
const albumEntries = sp.albums || [];
const albumZoom: Record<string, boolean> = {};
return {
name,
slug: slugify(name),
@@ -542,9 +574,12 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
albumEntries,
`subpage "${name}"`,
parseLocation(sp.location, `subpage "${name}" location`),
albumZoom,
),
password: sp.password,
proofing: sp.proofing,
zoom: typeof sp.zoom === 'boolean' ? sp.zoom : undefined,
...(Object.keys(albumZoom).length ? { albumZoom } : {}),
essayFile: sp.essayFile,
essayText: sp.essayText,
enabled: sp.enabled !== false,
@@ -618,6 +653,7 @@ export function deriveGallery(gallery: GalleryYaml): GalleryDerivation {
albumGrids,
albumCoverPositions,
albumDownloads,
standaloneAlbumZoom,
albumLocationPrecision,
};
}
@@ -740,6 +776,7 @@ function deriveConfig(): AppConfig {
analytics: true,
proofing: { enabled: false, allowMailto: false },
aboutEnabled: true,
zoom: false,
albumOverrides: {},
albumDescriptions: {},
albumPasswords: {},
@@ -749,6 +786,7 @@ function deriveConfig(): AppConfig {
albumGrids: {},
albumCoverPositions: {},
albumDownloads: {},
standaloneAlbumZoom: {},
albumLocationPrecision: {},
navLinks: [],
cacheTtl: env.CACHE_TTL * 1000,
@@ -778,6 +816,7 @@ function deriveConfig(): AppConfig {
albumGrids,
albumCoverPositions,
albumDownloads,
standaloneAlbumZoom,
albumLocationPrecision,
} = deriveGallery(gallery);
@@ -864,6 +903,9 @@ function deriveConfig(): AppConfig {
// writes it, so a fresh install put a nav link in front of an empty page
// (#518). `enabled: false` still hides it even when the file is there.
aboutEnabled: settings.about?.enabled !== false && aboutContentExists(),
// Opt-in: zoom serves originals, which a portfolio must not start doing
// because an upgrade added the feature (#467).
zoom: settings.zoom === true,
albumOverrides,
albumDescriptions,
albumPasswords,
@@ -873,6 +915,7 @@ function deriveConfig(): AppConfig {
albumGrids,
albumCoverPositions,
albumDownloads,
standaloneAlbumZoom,
albumLocationPrecision,
navLinks: sanitizeNavLinks(settings.navLinks),
cacheTtl: env.CACHE_TTL * 1000,

264
lib/config/presets.ts Normal file
View File

@@ -0,0 +1,264 @@
import type { ThemeConfig } from './schema';
/**
* The built-in theme presets, declared once.
*
* Everything that lists presets reads this array: `THEME_PRESETS` and
* `resolveTheme()` (lib/config/theme.ts), the admin theme cards, the install
* wizard and its allowlist, and the dev toolbar. The parts that cannot import
* it — the palette blocks in app/tokens.css, app/themes/<id>.css and its
* `@import`, the docs table, scripts/contrast-audit.mjs — are checked against
* it by lib/__tests__/preset-registry.test.ts.
*
* Client-safe: no `fs`, so client components may import it.
*/
export interface PresetDefinition {
id: string;
label: string;
/** One line under the preset in the install wizard. */
tagline: string;
/** The admin theme card's description. */
description: string;
/** What the preset applies when settings.yaml overrides nothing. */
theme: Omit<ThemeConfig, 'preset'>;
/**
* The admin card's mini mockup. Font, radius and frame come from `theme`;
* `gap` is the visual density of the preset's gallery grid.
*/
card: { bg: string; tile: string; accent: string; type: 'serif' | 'sans' | 'mono'; gap: number };
/**
* Whether the preset ships its own palette in app/tokens.css and its own
* app/themes/<id>.css. Only `studio` does not: it is the look the global
* defaults describe.
*/
ownStyles: boolean;
}
export const PRESET_REGISTRY: readonly PresetDefinition[] = [
{
id: 'studio-modern',
label: 'Studio Modern',
tagline: 'Precision grotesque, hairline rules',
description: 'Leica precision: Archivo grotesque, mono EXIF, red signal accents.',
theme: {
accent: '#e60012',
fonts: { heading: 'Archivo', body: 'Archivo', caption: 'IBM Plex Mono' },
radius: 0,
photoFrame: 'none',
grain: false,
headerDot: true,
heroStyle: 'split',
},
card: { bg: '#121212', tile: '#191919', accent: '#e60012', type: 'sans', gap: 3 },
ownStyles: true,
},
{
id: 'studio',
label: 'Studio',
tagline: 'Classic portfolio, red accent',
description: 'Playfair Display serif headings over DM Sans, matted photos on black.',
theme: {
accent: '#e60012',
fonts: { heading: 'Playfair Display', body: 'DM Sans', caption: 'EB Garamond' },
radius: 0,
photoFrame: 'passepartout',
grain: true,
headerDot: true,
heroStyle: 'split',
},
card: { bg: '#141414', tile: '#242424', accent: '#e60012', type: 'serif', gap: 4 },
ownStyles: false,
},
{
id: 'minimal',
label: 'Minimal',
tagline: 'Bare-bones, monochrome',
description: 'Pure raw layouts with tiny gaps and high whitespace.',
theme: {
accent: '#000000',
accentDark: '#ffffff',
fonts: { heading: 'Geist', body: 'Geist', caption: 'IBM Plex Mono' },
radius: 0,
photoFrame: 'none',
grain: false,
headerDot: false,
heroStyle: 'fullbleed',
},
card: { bg: '#ffffff', tile: '#f3f3f3', accent: '#111111', type: 'sans', gap: 2 },
ownStyles: true,
},
{
id: 'editorial',
label: 'Editorial',
tagline: 'Magazine-style serif',
description: 'Warm backgrounds, elegant serifs and large headers.',
theme: {
accent: '#8B2500',
accentDark: '#d9602a',
fonts: { heading: 'Bodoni Moda', body: 'Newsreader', caption: 'Spectral' },
radius: 0,
photoFrame: 'shadow',
grain: false,
headerDot: false,
heroStyle: 'split',
},
card: { bg: '#fbf9f4', tile: '#e5dfd4', accent: '#b89053', type: 'serif', gap: 8 },
ownStyles: true,
},
{
id: 'classic',
label: 'Classic',
tagline: 'Warm gold, traditional',
description: 'Soft traditional portfolio: Cinzel capitals, rounded matted photos.',
theme: {
accent: '#c49a3c',
accentLight: '#8d6f2b',
fonts: { heading: 'Cinzel', body: 'Crimson Pro', caption: 'Crimson Pro' },
radius: 12,
photoFrame: 'passepartout',
grain: false,
headerDot: true,
heroStyle: 'minimal',
},
card: { bg: '#f7f7f7', tile: '#ffffff', accent: '#444444', type: 'serif', gap: 7 },
ownStyles: true,
},
{
id: 'noir',
label: 'Noir',
tagline: 'Dark, high-contrast',
description: 'High drama absolute pitch black, stark high-fashion look.',
theme: {
accent: '#ff6b35',
accentLight: '#c2410c',
fonts: { heading: 'Libre Baskerville', body: 'Source Sans 3', caption: 'Space Mono' },
radius: 0,
photoFrame: 'passepartout',
grain: true,
headerDot: false,
heroStyle: 'fullbleed',
},
card: { bg: '#000000', tile: '#151515', accent: '#ffffff', type: 'serif', gap: 6 },
ownStyles: true,
},
{
id: 'monograph',
label: 'Monograph',
tagline: 'Typographic, text-first',
description: 'Instrument Serif headlines, Inter text, mono captions: a quiet document feel.',
theme: {
accent: '#333333',
accentDark: '#c8c8c8',
fonts: { heading: 'Instrument Serif', body: 'Inter', caption: 'IBM Plex Mono' },
radius: 0,
photoFrame: 'none',
grain: false,
headerDot: false,
heroStyle: 'typographic',
},
card: { bg: '#f4f4f6', tile: '#ffffff', accent: '#555555', type: 'serif', gap: 5 },
ownStyles: true,
},
{
id: 'kunsthalle',
label: 'Kunsthalle',
tagline: 'Grey gallery wall, wall labels',
description:
'Photos hung on a neutral grey wall with museum wall labels. Libre Franklin, petrol links.',
theme: {
accent: '#1d545c',
accentDark: '#8cc3ca',
fonts: { heading: 'Libre Franklin', body: 'Libre Franklin', caption: 'Libre Franklin' },
radius: 0,
photoFrame: 'shadow',
grain: false,
headerDot: false,
heroStyle: 'mosaic',
},
card: { bg: '#2b2b29', tile: '#393937', accent: '#8cc3ca', type: 'sans', gap: 8 },
ownStyles: true,
},
{
id: 'ma',
label: 'Ma',
tagline: 'Japanese restraint, washi and sumi',
description:
'Negative space, washi-grey paper, sumi ink and one vermilion seal. Cormorant Garamond and Hanken Grotesk.',
theme: {
accent: '#b0381f',
accentDark: '#e8674c',
fonts: { heading: 'Cormorant Garamond', body: 'Hanken Grotesk', caption: 'Hanken Grotesk' },
radius: 0,
photoFrame: 'none',
grain: false,
headerDot: true,
heroStyle: 'split',
},
card: { bg: '#f0ede6', tile: '#e7e3da', accent: '#b0381f', type: 'serif', gap: 9 },
ownStyles: true,
},
{
id: 'cyanotype',
label: 'Cyanotype',
tagline: 'Prussian blue, drawing sheet',
description:
'A Prussian-blue print set like an architectural drawing: Jost, DM Mono, registration marks.',
theme: {
accent: '#1a4d88',
accentDark: '#8ccbeb',
fonts: { heading: 'Jost', body: 'Jost', caption: 'DM Mono' },
radius: 0,
photoFrame: 'none',
grain: false,
headerDot: false,
heroStyle: 'split',
},
card: { bg: '#0e1621', tile: '#192839', accent: '#8ccbeb', type: 'sans', gap: 4 },
ownStyles: true,
},
{
id: 'salon',
label: 'Salon',
tagline: 'Oxblood salon, fine fillet',
description:
'A 19th-century oxblood picture gallery with modern restraint: Gloock, Work Sans, a fillet round every photo.',
theme: {
accent: '#7d1f2c',
accentDark: '#e3a39a',
fonts: { heading: 'Gloock', body: 'Work Sans', caption: 'Work Sans' },
radius: 0,
photoFrame: 'none',
grain: false,
headerDot: false,
heroStyle: 'fullbleed',
},
card: { bg: '#1c1315', tile: '#2c2023', accent: '#e3a39a', type: 'serif', gap: 5 },
ownStyles: true,
},
{
id: 'birch',
label: 'Birch',
tagline: 'Nordic daylight, soft corners',
description:
'Scandinavian daylight: birch-white and pine-night, soft corners, sentence case, lichen green.',
theme: {
accent: '#2c5d44',
accentDark: '#9fc9a9',
fonts: { heading: 'Albert Sans', body: 'Albert Sans', caption: 'Albert Sans' },
radius: 6,
photoFrame: 'none',
grain: false,
headerDot: false,
heroStyle: 'stacked',
},
card: { bg: '#f3f5f1', tile: '#e9ece6', accent: '#2c5d44', type: 'sans', gap: 3 },
ownStyles: true,
},
];
/** Preset ids in registry order: the order every picker shows them in. */
export const PRESET_IDS: readonly string[] = PRESET_REGISTRY.map((p) => p.id);
export function getPresetDefinition(id: string): PresetDefinition | undefined {
return PRESET_REGISTRY.find((p) => p.id === id);
}

56
lib/config/schema.ts
View File

@@ -25,6 +25,13 @@ export interface SubpageConfig {
*/
coverGrid?: Partial<GridConfig>;
proofing?: boolean;
/** Lightbox zoom for the albums here, over the site setting (#467). */
zoom?: boolean;
/**
* Album zoom overrides written on this page's album entries (sections
* included). They apply on this page only; see resolveZoom().
*/
albumZoom?: Record<string, boolean>;
essayFile?: string;
essayText?: string;
enabled?: boolean;
@@ -40,6 +47,8 @@ export interface SubpageObjectValue {
/** Album-cover tiles only; falls back to `grid` when unset (#523). */
coverGrid?: Partial<GridConfig>;
proofing?: boolean;
/** Lightbox zoom for the albums here, over the site setting (#467). */
zoom?: boolean;
essayFile?: string;
essayText?: string;
enabled?: boolean;
@@ -279,6 +288,11 @@ export interface AppConfig {
email?: string;
};
aboutEnabled: boolean;
/**
* Lightbox zoom to full resolution, site-wide (`zoom` in settings.yaml,
* off by default). Subpages and albums override it; see resolveZoom() (#467).
*/
zoom: boolean;
albumOverrides: Record<string, string>;
albumDescriptions: Record<string, string>;
albumPasswords: Record<string, string>;
@@ -293,6 +307,12 @@ export interface AppConfig {
albumCoverPositions: Record<string, string>;
/** Albums whose originals may be downloaded. Absent means no (#475). */
albumDownloads: Record<string, boolean>;
/**
* Lightbox zoom overrides on the standalone album entries, either way.
* Absent means inherit (#467). Entries inside a subpage are kept on that
* subpage (`SubpageConfig.albumZoom`), so each route answers for itself.
*/
standaloneAlbumZoom: Record<string, boolean>;
/** Per-album map precision. Absent means `exact` (#469). */
albumLocationPrecision: Record<string, LocationPrecision>;
/** EXPERIMENTAL: external links appended to the header navigation. */
@@ -338,6 +358,33 @@ export interface AppConfig {
};
}
/**
* Whether the lightbox offers zoom to full resolution for an album on one
* route (#467): the album standalone (no subpage), or on a given subpage.
*
* Most specific wins, in either direction: the album entry's own `zoom:` on
* that route, then the subpage, then `zoom` in settings.yaml (off by default).
* The same `??` chain as resolveProofing(), one level deeper — `zoom: false` on
* an album has to beat a subpage's `true`.
*
* The album override is per route on purpose. An album listed on an open page
* with `zoom: false` and on a password page with `zoom: true` must not become
* zoomable on the open one because the other entry happened to be read last.
*
* The page, the zoom route (isAlbumZoomReachable in lib/auth.ts) and the
* admin drawer (which edits the entry in its place) all read the same value.
* Lives here rather than in lib/config/index.ts so client-safe and test code
* that stubs the config barrel can still reach it.
*/
export function resolveZoom(
config: Pick<AppConfig, 'zoom' | 'standaloneAlbumZoom'>,
albumId: string,
subpage?: { zoom?: boolean; albumZoom?: Record<string, boolean> },
): boolean {
if (subpage) return subpage.albumZoom?.[albumId] ?? subpage.zoom ?? config.zoom;
return config.standaloneAlbumZoom?.[albumId] ?? config.zoom;
}
export interface AlbumEntryObject {
/** Optional: an entry may carry only a sort mode and no title override. */
title?: string;
@@ -357,6 +404,11 @@ export interface AlbumEntryObject {
coverPosition?: string;
/** Offer the original file for download from the lightbox (#475). Off by default. */
download?: boolean;
/**
* Lightbox zoom to full resolution for this album, over the subpage and
* site setting in either direction (#467). Absent inherits.
*/
zoom?: boolean;
/**
* How precisely this album's photographs may be placed on the map:
* `exact` (default), `city`, `country` or `hidden`. Narrowed to
@@ -403,6 +455,8 @@ export interface GallerySubpageYaml {
}>;
password?: string;
proofing?: boolean;
/** Lightbox zoom for every album here that does not set its own (#467). */
zoom?: boolean;
essayFile?: string;
essayText?: string;
enabled?: boolean;
@@ -447,6 +501,8 @@ export interface SettingsYaml {
transitions?: boolean;
scrollToTop?: boolean;
analytics?: boolean;
/** Lightbox zoom to full resolution; off unless set (#467). */
zoom?: boolean;
proofing?: {
enabled?: boolean;
allowMailto?: boolean;

86
lib/config/settingValues.ts
View File

@@ -7,22 +7,37 @@
* an input for, that meant a save of `accent: rot` or nine columns in a 1–6
* field was reported as "Saved" while the site showed something else.
*
* This checks exactly those fields — the site URL, the accent, the grid
* columns and gap — with the resolvers' own rules and bounds, so it can never
* be stricter than what renders. Kept apart from settingsSchema.ts so the
* This checks the values a resolver bends — the site URL, the accent, the
* corner radius, the grid columns and gap, the message retention and the
* header links — with the resolvers' own rules and bounds, so it can never be
* stricter than what renders. Kept apart from settingsSchema.ts so the
* settings form can run it as you type without bundling zod; the save route
* runs it before writing, and the doctor over settings.yaml as it is.
* runs it before writing, and both doctors over settings.yaml as it is.
*
* `npm run doctor` imports this file under Node's own type stripping
* (scripts/doctor.mts), which resolves no extensionless paths: every relative
* import here carries its `.ts`, and the modules it pulls in may only
* `import type` from elsewhere. scripts/__tests__/doctor-cli.test.ts loads the
* graph in a real Node process and fails when that breaks.
*/
import { normaliseSiteUrl } from '../siteUrl';
import { isAccentHex } from './theme';
import { PHOTO_GRID_COLUMNS_MAX, PHOTO_GRID_COLUMNS_MIN, PHOTO_GRID_GAP_MAX } from './schema';
import { normaliseSiteUrl } from '../siteUrl.ts';
import { isAccentHex, THEME_RADIUS_MAX } from './theme.ts';
import {
CONTACT_RETENTION_MAX,
PHOTO_GRID_COLUMNS_MAX,
PHOTO_GRID_COLUMNS_MIN,
PHOTO_GRID_GAP_MAX,
} from './schema.ts';
import type { SettingsFieldError } from './settingsSchema';
function inRange(value: unknown, min: number, max: number): boolean {
return typeof value === 'number' && Number.isInteger(value) && value >= min && value <= max;
}
/** What sanitizeNavLinks (lib/config/index.ts) keeps as a link target. */
const NAV_LINK_URL = /^https?:\/\//i;
/** One error per offending field; an empty string counts as unset, as in the resolvers. */
export function validateSettingValues(input: unknown): SettingsFieldError[] {
if (!input || typeof input !== 'object') return [];
@@ -30,6 +45,8 @@ export function validateSettingValues(input: unknown): SettingsFieldError[] {
url?: unknown;
theme?: unknown;
grid?: { columns?: unknown; gap?: unknown } | null;
contact?: { retentionDays?: unknown } | null;
navLinks?: unknown;
};
const errors: SettingsFieldError[] = [];
@@ -42,13 +59,33 @@ export function validateSettingValues(input: unknown): SettingsFieldError[] {
});
}
const theme =
s.theme && typeof s.theme === 'object'
? (s.theme as { accent?: unknown; radius?: unknown })
: null;
// resolveTheme: anything but hex falls back to the preset's accent.
const accent =
s.theme && typeof s.theme === 'object' ? (s.theme as { accent?: unknown }).accent : undefined;
const accent = theme?.accent;
if (typeof accent === 'string' && accent.trim() !== '' && !isAccentHex(accent)) {
errors.push({ field: 'theme.accent', message: 'Must be a hex colour such as #e60012.' });
}
// resolveRadius clamps into 0–THEME_RADIUS_MAX. The panel has no input for
// it, so the message says where the value lives.
const radius = theme?.radius;
if (
radius != null &&
(typeof radius !== 'number' ||
!Number.isFinite(radius) ||
radius < 0 ||
radius > THEME_RADIUS_MAX)
) {
errors.push({
field: 'theme.radius',
message: `Must be a number from 0 to ${THEME_RADIUS_MAX} (theme.radius in settings.yaml).`,
});
}
// getConfig clamps both into these bounds (lib/config/index.ts).
const grid = s.grid && typeof s.grid === 'object' ? s.grid : null;
if (
@@ -67,5 +104,36 @@ export function validateSettingValues(input: unknown): SettingsFieldError[] {
});
}
// resolveContact rounds and clamps into 1–CONTACT_RETENTION_MAX.
const contact = s.contact && typeof s.contact === 'object' ? s.contact : null;
if (contact?.retentionDays != null && !inRange(contact.retentionDays, 1, CONTACT_RETENTION_MAX)) {
errors.push({
field: 'contact.retentionDays',
message: `Must be a whole number of days from 1 to ${CONTACT_RETENTION_MAX}.`,
});
}
// sanitizeNavLinks drops an entry without a label or without an http(s)
// URL, whole — so each half is reported against its own input.
if (Array.isArray(s.navLinks)) {
s.navLinks.forEach((entry: unknown, i) => {
const link = entry && typeof entry === 'object' ? (entry as Record<string, unknown>) : {};
const label = typeof link.label === 'string' ? link.label.trim() : '';
const url = typeof link.url === 'string' ? link.url.trim() : '';
if (!label) {
errors.push({
field: `navLinks.${i}.label`,
message: 'Needs a label, or the link is left out.',
});
}
if (!NAV_LINK_URL.test(url)) {
errors.push({
field: `navLinks.${i}.url`,
message: 'Must be a full http(s) address, or the link is left out.',
});
}
});
}
return errors;
}

8
lib/config/settingsSchema.ts
View File

@@ -29,9 +29,10 @@
* to the preset's own value for anything that is not the right type, which
* covers hand-edited YAML as well as a save from this panel.
*
* **Values the panel offers an input for** are the exception, checked with the
* resolvers' own rules in `settingValues.ts`: the site URL, the accent and the
* grid columns and gap, which a save used to accept and the site then ignored.
* **Values a resolver would bend** are the exception, checked with the
* resolvers' own rules in `settingValues.ts`: the site URL, the accent, the
* corner radius, the grid columns and gap, the message retention and the
* header links, which a save used to accept and the site then ignored.
*
* **Unknown keys pass through.** There is no `schemaVersion` and no migration
* code, so configurations older and newer than this build are both in the wild.
@@ -87,6 +88,7 @@ export const settingsSchema = z.looseObject({
transitions: bool,
scrollToTop: bool,
analytics: bool,
zoom: bool,
proofing: z.looseObject({ enabled: bool, allowMailto: bool, email: str }).optional(),

128
lib/config/theme.ts
View File

@@ -1,85 +1,13 @@
import type { ThemeConfig, SettingsYaml } from './schema';
import { PRESET_REGISTRY } from './presets.ts';
/** The preset used when none is configured. */
export const DEFAULT_PRESET = 'studio-modern';
export const THEME_PRESETS: Record<string, ThemeConfig> = {
'studio-modern': {
preset: 'studio-modern',
accent: '#e60012',
fonts: { heading: 'Archivo', body: 'Archivo', caption: 'IBM Plex Mono' },
radius: 0,
photoFrame: 'none',
grain: false,
headerDot: true,
heroStyle: 'split',
},
studio: {
preset: 'studio',
accent: '#e60012',
fonts: { heading: 'Playfair Display', body: 'DM Sans', caption: 'EB Garamond' },
radius: 0,
photoFrame: 'passepartout',
grain: true,
headerDot: true,
heroStyle: 'split',
},
minimal: {
preset: 'minimal',
accent: '#000000',
accentDark: '#ffffff',
fonts: { heading: 'Geist', body: 'Geist', caption: 'IBM Plex Mono' },
radius: 0,
photoFrame: 'none',
grain: false,
headerDot: false,
heroStyle: 'fullbleed',
},
editorial: {
preset: 'editorial',
accent: '#8B2500',
accentDark: '#d9602a',
fonts: { heading: 'Bodoni Moda', body: 'Newsreader', caption: 'Spectral' },
radius: 0,
photoFrame: 'shadow',
grain: false,
headerDot: false,
heroStyle: 'split',
},
classic: {
preset: 'classic',
accent: '#c49a3c',
accentLight: '#8d6f2b',
fonts: { heading: 'Cinzel', body: 'Crimson Pro', caption: 'Crimson Pro' },
radius: 12,
photoFrame: 'passepartout',
grain: false,
headerDot: true,
heroStyle: 'minimal',
},
noir: {
preset: 'noir',
accent: '#ff6b35',
accentLight: '#c2410c',
fonts: { heading: 'Libre Baskerville', body: 'Source Sans 3', caption: 'Space Mono' },
radius: 0,
photoFrame: 'passepartout',
grain: true,
headerDot: false,
heroStyle: 'fullbleed',
},
monograph: {
preset: 'monograph',
accent: '#333333',
accentDark: '#c8c8c8',
fonts: { heading: 'Instrument Serif', body: 'Inter', caption: 'IBM Plex Mono' },
radius: 0,
photoFrame: 'none',
grain: false,
headerDot: false,
heroStyle: 'typographic',
},
};
/** Every built-in preset by id, derived from PRESET_REGISTRY (lib/config/presets.ts). */
export const THEME_PRESETS: Record<string, ThemeConfig> = Object.fromEntries(
PRESET_REGISTRY.map((p) => [p.id, { preset: p.id, ...p.theme }]),
);
export const VALID_PHOTO_FRAMES = ['none', 'passepartout', 'shadow'];
export const VALID_HERO_STYLES = [
@@ -109,7 +37,7 @@ export const VALID_LAYOUTS = [
* side of this field, are already checked against an allowlist; this is the
* same treatment for the one numeric scalar in ThemeConfig.
*/
const THEME_RADIUS_MAX = 64; // Presets top out at 16; generous but not unbounded.
export const THEME_RADIUS_MAX = 64; // Presets top out at 16; generous but not unbounded.
function resolveRadius(raw: unknown, fallback: number): number {
if (typeof raw !== 'number' || !Number.isFinite(raw)) return fallback;
return Math.min(THEME_RADIUS_MAX, Math.max(0, raw));
@@ -187,6 +115,50 @@ export function onAccent(accent: string): string {
return toBlack > toWhite ? '#000000' : '#ffffff';
}
/**
* The surfaces accent-coloured text is checked against, one per mode: the
* lightest dark surface (`--bg-card-hover` of the brightest dark preset,
* rounded up) and the darkest light one (`--bg-secondary` of the studio
* light palette, rounded down). Clearing these clears every other surface of
* the same mode.
*/
const ACCENT_TEXT_SURFACE = { dark: '#262626', light: '#e8e8e3' } as const;
const AA_TEXT = 4.5;
function mixHex(a: string, b: string, weightB: number): string {
const channel = (hex: string, i: number) => parseInt(hex.slice(1 + i * 2, 3 + i * 2), 16);
return (
'#' +
[0, 1, 2]
.map((i) => Math.round(channel(a, i) * (1 - weightB) + channel(b, i) * weightB))
.map((c) => c.toString(16).padStart(2, '0'))
.join('')
);
}
/**
* Text in the accent colour (`--accent-text`), lifted to AA. A fill can be any
* accent: `--on-accent` picks the text on top of it. Text *in* the accent
* cannot choose its background, and the preset reds measured 3.5–3.7:1 on the
* dark pages (#e60012 on #121212). The accent is mixed toward white on dark
* and toward black on light, in 5% steps (the same mix `color-mix(in srgb)`
* makes), until it reaches 4.5:1 on that mode's worst surface — so an accent
* that already passes is returned unchanged, and every accent terminates at
* white or black at the latest. A non-hex value is returned as it is.
*/
export function accentText(accent: string, mode: 'dark' | 'light'): string {
const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(accent.trim());
if (!m) return accent;
const hex = '#' + (m[1].length === 3 ? [...m[1]].map((c) => c + c).join('') : m[1]).toLowerCase();
const surface = ACCENT_TEXT_SURFACE[mode];
const target = mode === 'dark' ? '#ffffff' : '#000000';
for (let step = 0; step <= 20; step++) {
const candidate = mixHex(hex, target, step / 20);
if ((contrastRatio(candidate, surface) ?? 0) >= AA_TEXT) return candidate;
}
return target;
}
/** `String(theme.grain)`/`String(theme.headerDot)` become a `data-*` attribute
* either way, but a non-boolean is a sign the value was never meant for this
* field at all — a typo'd key one level up, say — so it falls back rather