Changeset 3b4095f in Klonkt

Timestamp:

07/01/2026 10:28:08 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

5e52448

Parents:

7f265ce

Message:

feat(seo): og:image light/dark override setting

The auto-generated share card followed the site's default theme (1.2.0); Admin →
SEO now has an explicit override: Auto (follow site theme) / Light / Dark.

• src/config/database.js — sites.og_theme column (NULL = auto).
• src/services/OgImageService.js — og_theme wins over theme_override when set.
• src/routes/og.js — select og_theme for the card route.
• src/routes/admin-seo.js — save og_theme (validated to light/dark, else auto).
• src/views/pages/admin-seo.ejs — select under the share-image field.
• src/services/i18n.js — aseo.og_theme* (nl/en/de).
• CHANGELOG(.nl/.de).md — under Added.

Closes prutfolio-src-krm.

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

Files:

• CHANGELOG.de.md (modified) (1 diff)
• CHANGELOG.md (modified) (1 diff)
• CHANGELOG.nl.md (modified) (1 diff)
• src/config/database.js (modified) (1 diff)
• src/routes/admin-seo.js (modified) (2 diffs)
• src/routes/og.js (modified) (1 diff)
• src/services/OgImageService.js (modified) (1 diff)
• src/services/i18n.js (modified) (3 diffs)
• src/views/pages/admin-seo.ejs (modified) (1 diff)

CHANGELOG.de.md

@@ -7 +7 @@
 
 ### Hinzugefügt
+- **Wähle eine helle oder dunkle Teilen-Karte.** Das automatisch erzeugte Teilbild folgt deinem
+  Site-Thema; unter Verwaltung → SEO kannst du es jetzt fest auf hell oder dunkel stellen.
 - **Eine Erwähnung ist jetzt eine Benachrichtigung.** Wenn dich jemand im Fediverse in einem
   Beitrag erwähnt — auch in einem, der keine Antwort an dich ist — erscheint das in deinen

CHANGELOG.md

@@ -7 +7 @@
 
 ### Added
+- **Choose a light or dark share card.** The auto-generated share image follows your site theme;
+  under Admin → SEO you can now force it light or dark.
 - **A mention is now a notification.** When someone on the fediverse mentions you in a post —
   even one that isn't a reply to you — it shows up in your fediverse notifications with a link

CHANGELOG.nl.md

@@ -7 +7 @@
 
 ### Toegevoegd
+- **Kies een lichte of donkere deel-kaart.** De automatisch gemaakte deel-afbeelding volgt je
+  site-thema; onder Beheer → SEO kun je 'm nu geforceerd licht of donker zetten.
 - **Een vermelding is nu een melding.** Als iemand op de fediverse je noemt in een post — ook
   eentje die geen reactie op jou is — verschijnt dat in je fediverse-meldingen met een link naar

src/config/database.js

@@ -82 +82 @@
   ensureColumn('sites', 'show_search',     'INTEGER DEFAULT 1');
   ensureColumn('sites', 'show_archive_link', 'INTEGER DEFAULT 1');
+  ensureColumn('sites', 'og_theme', 'TEXT');               // OG share-card variant: NULL=auto (follow site theme) | 'light' | 'dark'
 
   // Per-post noindex + type

src/routes/admin-seo.js

@@ -59 +59 @@
       default_description = ?,
       og_image_default = ?,
+      og_theme = ?,
       og_locale = ?,
       author = ?,
@@ -79 +80 @@
     trimOrNull(f.default_description, 500),
     trimOrNull(f.og_image_default, 500),
+    (f.og_theme === 'light' || f.og_theme === 'dark') ? f.og_theme : null, // null = auto (follow site theme)
     trimOrNull(f.og_locale, 32),
     trimOrNull(f.author, 120),

src/routes/og.js

@@ -14 +14 @@
   try {
     site = db.prepare(
-      'SELECT slug, title, tagline, description, palette, accent, theme_override FROM sites WHERE slug = ?'
+      'SELECT slug, title, tagline, description, palette, accent, theme_override, og_theme FROM sites WHERE slug = ?'
     ).get(req.params.slug);
   } catch { /* db error → 404 below */ }

src/services/OgImageService.js

@@ -90 +90 @@
 
   const palette = ThemeService.PALETTES[site.palette] ? site.palette : 'klonkt';
-  // 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';
+  // Card variant: an explicit SEO override (og_theme) wins; else follow the site's "default
+  // theme for new visitors" (theme_override) — light when the site is set to Light, otherwise
+  // dark (an OG image is static, so Auto/Dark → dark).
+  const theme = (site.og_theme === 'light' || site.og_theme === 'dark')
+    ? site.og_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')

src/services/i18n.js

@@ -285 +285 @@
     'aseo.og_image': 'Standaard deel-afbeelding (URL)',
     'aseo.og_image_hint': 'og:image / Twitter-card; ~1200×630px',
+    'aseo.og_theme': 'Deel-kaart licht of donker',
+    'aseo.og_theme_hint': 'de automatisch gemaakte deel-afbeelding',
+    'aseo.og_theme_auto': 'Automatisch (volgt site-thema)',
+    'aseo.og_theme_light': 'Licht',
+    'aseo.og_theme_dark': 'Donker',
     'aseo.og_locale': 'Taal-locale',
     'aseo.og_locale_hint_pre': 'og:locale, bv.',
@@ -1208 +1213 @@
     'aseo.og_image': 'Default share image (URL)',
     'aseo.og_image_hint': 'og:image / Twitter card; ~1200×630px',
+    'aseo.og_theme': 'Share card light or dark',
+    'aseo.og_theme_hint': 'the auto-generated share image',
+    'aseo.og_theme_auto': 'Auto (follows site theme)',
+    'aseo.og_theme_light': 'Light',
+    'aseo.og_theme_dark': 'Dark',
     'aseo.og_locale': 'Language locale',
     'aseo.og_locale_hint_pre': 'og:locale, e.g.',
@@ -2130 +2140 @@
     'aseo.og_image': 'Standard-Teilbild (URL)',
     'aseo.og_image_hint': 'og:image / Twitter-Card; ~1200×630px',
+    'aseo.og_theme': 'Teilen-Karte hell oder dunkel',
+    'aseo.og_theme_hint': 'das automatisch erzeugte Teilbild',
+    'aseo.og_theme_auto': 'Automatisch (folgt dem Site-Thema)',
+    'aseo.og_theme_light': 'Hell',
+    'aseo.og_theme_dark': 'Dunkel',
     'aseo.og_locale': 'Sprach-Locale',
     'aseo.og_locale_hint_pre': 'og:locale, z. B.',

src/views/pages/admin-seo.ejs

@@ -42 +42 @@
         <span><%= t('aseo.og_image') %> <small class="form-hint-inline">— <%= t('aseo.og_image_hint') %></small></span>
         <input type="text" name="og_image_default" value="<%= site.og_image_default || '' %>" placeholder="https://yourdomain.com/share.jpg" maxlength="500">
+      </label>
+      <label>
+        <span><%= t('aseo.og_theme') %> <small class="form-hint-inline">— <%= t('aseo.og_theme_hint') %></small></span>
+        <select name="og_theme">
+          <option value="" <%= !site.og_theme ? 'selected' : '' %>><%= t('aseo.og_theme_auto') %></option>
+          <option value="light" <%= site.og_theme === 'light' ? 'selected' : '' %>><%= t('aseo.og_theme_light') %></option>
+          <option value="dark" <%= site.og_theme === 'dark' ? 'selected' : '' %>><%= t('aseo.og_theme_dark') %></option>
+        </select>
       </label>
       <label>