Changeset 69815b2 in Klonkt for src

Timestamp:

06/24/2026 05:26:24 AM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

6bd25d1

Parents:

5eef817

Message:

feat: auto-generated per-site OG image from palette + accent

New OgImageService renders a themed 1200x630 social card (palette gradient +
accent + site title/tagline + klonkt wordmark) via @resvg/resvg-js, cached on
disk. Served at GET /og/:slug.png and used as the default og:image/twitter:image
when a site has no custom share image — so every site gets a branded preview.
Bundles a static Fraunces TTF for rendering; graceful no-op if resvg can't load.

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

Location:

src

Files:

• assets/fonts/fraunces-og.ttf (added)
• middleware/render.js (modified) (1 diff)
• routes/og.js (added)
• server.js (modified) (2 diffs)
• services/OgImageService.js (added)
• views/shell.ejs (modified) (2 diffs)

src/middleware/render.js

@@ -137 +137 @@
     cspNonce: () => '',
     currentPath: req.path,
+    // Absolute origin (for building absolute URLs like the generated og:image).
+    ogOrigin: (process.env.PUBLIC_BASE_URL || `${req.protocol}://${req.get('host') || ''}`).replace(/\/+$/, ''),
     ...data,
   };

src/server.js

@@ -63 +63 @@
 import adminEpkRoutes from './routes/admin-epk.js';
 import changelogRoutes from './routes/changelog.js';
+import ogRoutes from './routes/og.js';
 
 // SESSION_SECRET: use the env var if set. Otherwise auto-generate a strong one
@@ -222 +223 @@
 app.use(federationRoutes);
 
+// Themed OG cards (/og/:slug.png) — resolve the site by slug themselves, so they
+// run before resolveSite and need no site context.
+app.use('/og', ogRoutes);
+
 app.use(resolveSite);
 app.use(loadAudioTracks);

src/views/shell.ejs

@@ -57 +57 @@
   ? socialDescr
   : (safeSite.default_description || safeSite.description || '');
-const _socialImage = (typeof socialImage !== 'undefined' && socialImage)
-  ? socialImage
-  : (safeSite.og_image_default || safeSite.default_cover || '');
+// og:image — custom (post/site) first; otherwise the auto-generated themed card
+// (/og/<slug>.png), so every site has a branded social preview by default.
+let _socialImage = '', _ogGenerated = false;
+if (typeof socialImage !== 'undefined' && socialImage) _socialImage = socialImage;
+else if (safeSite.og_image_default) _socialImage = safeSite.og_image_default;
+else if (safeSite.default_cover) _socialImage = safeSite.default_cover;
+else if (safeSite.slug && typeof ogOrigin !== 'undefined' && ogOrigin) {
+  _socialImage = ogOrigin + '/og/' + encodeURIComponent(safeSite.slug) + '.png';
+  _ogGenerated = true;
+}
 const _ogType = isPostPage ? 'article' : 'website';
 
@@ -139 +146 @@
 <meta property="og:image"     content="<%= _e(_socialImage) %>">
 <meta property="og:image:alt" content="<%= _e(_socialTitle) %>">
+<% if (_ogGenerated) { %>
+<meta property="og:image:width"  content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:type"   content="image/png">
+<% } %>
 <% } %>
 <% if (_canonical) { %><meta property="og:url" content="<%= _e(_canonical) %>"><% } %>