Index: src/middleware/render.js =================================================================== --- src/middleware/render.js (revision 5eef817483804be6a13b52f068413569df6810b0) +++ src/middleware/render.js (revision 69815b232bc91b7504ea8b28d3e2f66949f216ed) @@ -137,4 +137,6 @@ 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, }; Index: src/routes/og.js =================================================================== --- src/routes/og.js (revision 69815b232bc91b7504ea8b28d3e2f66949f216ed) +++ src/routes/og.js (revision 69815b232bc91b7504ea8b28d3e2f66949f216ed) @@ -0,0 +1,29 @@ +/** + * GET /og/:slug.png — themed Open Graph card for a site (1200x630 PNG). + * Generated from the site's palette + accent (see OgImageService), cached. + * Used as the default og:image so every site has a branded social preview. + */ +import express from 'express'; +import db from '../config/database.js'; +import { ogImageFor } from '../services/OgImageService.js'; + +const router = express.Router(); + +router.get('/:slug.png', (req, res) => { + let site; + try { + site = db.prepare( + 'SELECT slug, title, tagline, description, palette, accent FROM sites WHERE slug = ?' + ).get(req.params.slug); + } catch { /* db error → 404 below */ } + if (!site) return res.status(404).end(); + + const png = ogImageFor(site); + if (!png) return res.status(404).end(); // resvg unavailable → no card (graceful) + + res.set('Content-Type', 'image/png'); + res.set('Cache-Control', 'public, max-age=86400'); + return res.send(png); +}); + +export default router; Index: src/server.js =================================================================== --- src/server.js (revision 5eef817483804be6a13b52f068413569df6810b0) +++ src/server.js (revision 69815b232bc91b7504ea8b28d3e2f66949f216ed) @@ -63,4 +63,5 @@ 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,4 +223,8 @@ 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); Index: src/services/OgImageService.js =================================================================== --- src/services/OgImageService.js (revision 69815b232bc91b7504ea8b28d3e2f66949f216ed) +++ src/services/OgImageService.js (revision 69815b232bc91b7504ea8b28d3e2f66949f216ed) @@ -0,0 +1,112 @@ +/** + * OgImageService — generates a themed Open Graph card (1200x630 PNG) per site, + * derived from the site's palette + accent, so every site has a branded social + * preview even without uploading one. SVG is hand-built and rasterized with + * @resvg/resvg-js. Result is cached on disk (keyed by the theming inputs). + * + * Graceful: if @resvg/resvg-js can't load (exotic platform), ogImageFor() + * returns null and the caller falls back to no/other og:image — never throws. + */ +import fs from 'fs'; +import path from 'path'; +import crypto from 'crypto'; +import { fileURLToPath } from 'url'; +import { createRequire } from 'module'; +import ThemeService from './ThemeService.js'; + +const require = createRequire(import.meta.url); +const __dirname = path.dirname(fileURLToPath(import.meta.url)); + +const FONT = path.join(__dirname, '..', 'assets', 'fonts', 'fraunces-og.ttf'); +const DATA_DIR = path.dirname(process.env.DATABASE_PATH || './storage/database.sqlite'); +const CACHE_DIR = path.join(DATA_DIR, 'og'); +const TEMPLATE_VERSION = 1; // bump to invalidate all cached cards after a design change + +let _Resvg = null, _tried = false; +function getResvg() { + if (_tried) return _Resvg; + _tried = true; + try { _Resvg = require('@resvg/resvg-js').Resvg; } catch { _Resvg = null; } + return _Resvg; +} + +// ── tiny colour helpers ─────────────────────────────────────────── +function hx(h) { + h = String(h || '').replace('#', ''); + if (h.length === 3) h = h.split('').map((c) => c + c).join(''); + return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) || 0); +} +function rgb(a) { + return '#' + a.map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join(''); +} +function mix(a, b, t) { const A = hx(a), B = hx(b); return rgb(A.map((v, i) => v + (B[i] - v) * t)); } +function esc(s) { return String(s == null ? '' : s).replace(/[<>&]/g, (c) => ({ '<': '<', '>': '>', '&': '&' }[c])); } + +function buildSvg(site, palette, accent) { + const pal = (ThemeService.PALETTES[palette] || ThemeService.PALETTES.klonkt).dark; + const paper = pal.paper, ink = pal.ink; + const paper2 = mix(paper, ink, 0.08); + const muted = mix(ink, paper, 0.42); + + let title = (site.title || 'Klonkt').trim(); + let tag = (site.tagline || site.description || '').trim(); + if (title.length > 38) title = title.slice(0, 37) + '…'; + if (tag.length > 74) tag = tag.slice(0, 73) + '…'; + const tsize = title.length <= 12 ? 100 : title.length <= 20 ? 82 : title.length <= 30 ? 64 : 54; + + return ` + + + + + + + + + + + + + + + + + + + ${esc(title)} + ${tag ? `${esc(tag)}` : ''} + klonkt +`; +} + +/** + * Returns a PNG Buffer of the site's OG card (cached), or null if generation + * isn't possible. `site` needs: slug, title, palette, accent, tagline/description. + */ +export function ogImageFor(site) { + const Resvg = getResvg(); + if (!Resvg || !site || !site.slug) return null; + + const palette = ThemeService.PALETTES[site.palette] ? site.palette : 'klonkt'; + const accent = site.accent || (ThemeService.PALETTES[palette] || 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')) + .digest('hex').slice(0, 16); + const file = path.join(CACHE_DIR, key + '.png'); + + try { return fs.readFileSync(file); } catch { /* not cached yet */ } + + try { + const svg = buildSvg(site, palette, accent); + const png = new Resvg(svg, { + font: { fontFiles: [FONT], loadSystemFonts: false }, + fitTo: { mode: 'width', value: 1200 }, + }).render().asPng(); + try { fs.mkdirSync(CACHE_DIR, { recursive: true }); fs.writeFileSync(file, png); } catch { /* cache best-effort */ } + return png; + } catch { + return null; + } +} + +export default { ogImageFor }; Index: src/views/shell.ejs =================================================================== --- src/views/shell.ejs (revision 5eef817483804be6a13b52f068413569df6810b0) +++ src/views/shell.ejs (revision 69815b232bc91b7504ea8b28d3e2f66949f216ed) @@ -57,7 +57,14 @@ ? 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/.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,4 +146,9 @@ +<% if (_ogGenerated) { %> + + + +<% } %> <% } %> <% if (_canonical) { %><% } %>