paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

revert(branding): per-option font preview (defer to follow-up)

Browse Source
This commit is contained in:
Luca
2026-05-04 20:39:00 +02:00
parent e6c03e4b6e
commit f410207b2d
2 changed files with 11 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/fonts.md
+1
View File
@@ -82,6 +82,7 @@ Refresh the admin customizer; the new family appears in the body and heading dro
- **Removing the `Inter/` folder** → the very-first-paint bootstrap CSS in `index.css` will 404 the font requests; browsers fall back to the next family in `--font-family` (Noto Sans → system-ui). Cosmetic only; no other breakage.
- **Variable fonts** are not supported in v1. Each weight must be a separate file.
- **Italics** are not exposed in the picker.
- **Per-option dropdown previews** (each font name rendered in its own face inside the picker) are not supported in v1. Browser support for styling `<option>` elements is inconsistent — Safari ignores it in the popup entirely, and Chrome/Firefox were unreliable in testing. A future improvement is to replace the native `<select>` with a custom dropdown component or to render a separate "preview text" box below the picker.
## License
frontend/src/components/admin/ThemeCustomizerEnhanced.tsx
+6 -34
View File
@@ -146,28 +146,6 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
staleTime: 5 * 60 * 1000,
});
// Preload the lightest weight of every available family so each <option>
// in the font dropdowns can render in its own face. Total payload is small
// (~80 KB per family × 8 families ≈ 600 KB), cached 7 days by the static
// handler. Browser de-dups @font-face blocks across <style> elements, so
// overlap with ThemeContext's lazy-injection on the active family is fine.
useEffect(() => {
if (!availableFonts || availableFonts.length === 0) return;
const styleId = 'theme-customizer-font-previews';
let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.id = styleId;
document.head.appendChild(styleEl);
}
const blocks = availableFonts.map((f) => {
const folder = f.family.replace(/ /g, '-');
const weight = f.weights.includes(400) ? 400 : f.weights[0];
return `@font-face{font-family:'${f.family}';font-style:normal;font-weight:${weight};font-display:swap;src:url('/fonts/${encodeURIComponent(folder)}/${weight}.woff2') format('woff2');}`;
});
styleEl.textContent = blocks.join('\n');
}, [availableFonts]);
const thumbnailWidth = parseInt(allSettings?.thumbnail_width) || 300;
const thumbnailHeight = parseInt(allSettings?.thumbnail_height) || 300;
const isBetaLayout = BETA_LAYOUTS.includes(localTheme.galleryLayout as GalleryLayoutType);
@@ -1006,14 +984,11 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100"
>
<option value="system-ui, sans-serif">System UI</option>
{(availableFonts || []).map((f) => {
const cssValue = buildFontFamilyValue(f.family);
return (
<option key={f.family} value={cssValue} style={{ fontFamily: cssValue }}>
{(availableFonts || []).map((f) => (
<option key={f.family} value={buildFontFamilyValue(f.family)}>
{f.family}
</option>
);
})}
))}
</select>
</div>
@@ -1032,14 +1007,11 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
>
<option value="">{t('branding.sameAsBody')}</option>
<option value="system-ui, sans-serif">System UI</option>
{(availableFonts || []).map((f) => {
const cssValue = buildFontFamilyValue(f.family);
return (
<option key={f.family} value={cssValue} style={{ fontFamily: cssValue }}>
{(availableFonts || []).map((f) => (
<option key={f.family} value={buildFontFamilyValue(f.family)}>
{f.family}
</option>
);
})}
))}
</select>
</div>
</div>