Changeset d9c5eb8 in Klonkt for src/services/OgImageService.js

Timestamp:

06/30/2026 10:17:48 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

f3663e5

Parents:

e3a5aed

Message:

feat(og): light OG card when the site's default theme is Light

OgImageService always rendered a dark card. It now follows the site's "default theme for new
visitors" (theme_override): a light card (the palette's light paper/ink/accent) when set to Light,
otherwise dark (Auto/Dark -> dark, since an OG image is static). og.js selects theme_override and the
theme is part of the cache key so light + dark cache separately.

Co-Authored-By: Claude <noreply@…>

File:

• src/services/OgImageService.js (modified) (3 diffs)

src/services/OgImageService.js

@@ -43 +43 @@
 function esc(s) { return String(s == null ? '' : s).replace(/[<>&]/g, (c) => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;' }[c])); }
 
-function buildSvg(site, palette, accent) {
-  const pal = (ThemeService.PALETTES[palette] || ThemeService.PALETTES.klonkt).dark;
+function buildSvg(site, palette, accent, theme) {
+  const _p = ThemeService.PALETTES[palette] || ThemeService.PALETTES.klonkt;
+  const pal = _p[theme] || _p.dark;
   const paper = pal.paper, ink = pal.ink;
   const paper2 = mix(paper, ink, 0.08);
@@ -89 +90 @@
 
   const palette = ThemeService.PALETTES[site.palette] ? site.palette : 'klonkt';
-  const accent = site.accent || (ThemeService.PALETTES[palette] || ThemeService.PALETTES.klonkt).dark.accent;
+  // Follow the site's "default theme for new visitors" (theme_override): a light card when the site
+  // is set to Light, otherwise dark (an OG image is static, so Auto/Dark → dark).
+  const theme = site.theme_override === 'light' ? 'light' : 'dark';
+  const accent = site.accent || ((ThemeService.PALETTES[palette] || ThemeService.PALETTES.klonkt)[theme] || ThemeService.PALETTES.klonkt.dark).accent;
   const key = crypto.createHash('sha1')
-    .update([TEMPLATE_VERSION, site.slug, palette, accent, site.title || '', site.tagline || site.description || ''].join('\x1f'))
+    .update([TEMPLATE_VERSION, site.slug, palette, accent, theme, site.title || '', site.tagline || site.description || ''].join('\x1f'))
     .digest('hex').slice(0, 16);
   const file = path.join(CACHE_DIR, key + '.png');
@@ -98 +102 @@
 
   try {
-    const svg = buildSvg(site, palette, accent);
+    const svg = buildSvg(site, palette, accent, theme);
     const png = new Resvg(svg, {
       font: { fontFiles: [FONT], loadSystemFonts: false },