Changeset 69815b2 in Klonkt


Ignore:
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@…>

Files:
3 added
5 edited

Legend:

Unmodified
Added
Removed

  • package-lock.json

    r5eef817 r69815b2  
    11{
    22  "name": "klonkt",
    3   "version": "1.0.0-alpha.1",
     3  "version": "1.0.0-beta.3",
    44  "lockfileVersion": 3,
    55  "requires": true,
    … …  
    77    "": {
    88      "name": "klonkt",
    9       "version": "1.0.0-alpha.1",
    10       "dependencies": {
     9      "version": "1.0.0-beta.3",
     10      "license": "AGPL-3.0-or-later",
     11      "dependencies": {
     12        "@resvg/resvg-js": "^2.6.2",
    1113        "bcryptjs": "^2.4.3",
    1214        "better-sqlite3": "^11.3.0",
    … …  
    6062        "readable-stream": "^3.0.2",
    6163        "typedarray": "^0.0.6"
     64      }
     65    },
     66    "node_modules/@resvg/resvg-js": {
     67      "version": "2.6.2",
     68      "resolved": "https://registry.npmjs.org/@resvg/resvg-js/-/resvg-js-2.6.2.tgz",
     69      "integrity": "sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==",
     70      "license": "MPL-2.0",
     71      "engines": {
     72        "node": ">= 10"
     73      },
     74      "optionalDependencies": {
     75        "@resvg/resvg-js-android-arm-eabi": "2.6.2",
     76        "@resvg/resvg-js-android-arm64": "2.6.2",
     77        "@resvg/resvg-js-darwin-arm64": "2.6.2",
     78        "@resvg/resvg-js-darwin-x64": "2.6.2",
     79        "@resvg/resvg-js-linux-arm-gnueabihf": "2.6.2",
     80        "@resvg/resvg-js-linux-arm64-gnu": "2.6.2",
     81        "@resvg/resvg-js-linux-arm64-musl": "2.6.2",
     82        "@resvg/resvg-js-linux-x64-gnu": "2.6.2",
     83        "@resvg/resvg-js-linux-x64-musl": "2.6.2",
     84        "@resvg/resvg-js-win32-arm64-msvc": "2.6.2",
     85        "@resvg/resvg-js-win32-ia32-msvc": "2.6.2",
     86        "@resvg/resvg-js-win32-x64-msvc": "2.6.2"
     87      }
     88    },
     89    "node_modules/@resvg/resvg-js-android-arm-eabi": {
     90      "version": "2.6.2",
     91      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm-eabi/-/resvg-js-android-arm-eabi-2.6.2.tgz",
     92      "integrity": "sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==",
     93      "cpu": [
     94        "arm"
     95      ],
     96      "license": "MPL-2.0",
     97      "optional": true,
     98      "os": [
     99        "android"
     100      ],
     101      "engines": {
     102        "node": ">= 10"
     103      }
     104    },
     105    "node_modules/@resvg/resvg-js-android-arm64": {
     106      "version": "2.6.2",
     107      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm64/-/resvg-js-android-arm64-2.6.2.tgz",
     108      "integrity": "sha512-VcOKezEhm2VqzXpcIJoITuvUS/fcjIw5NA/w3tjzWyzmvoCdd+QXIqy3FBGulWdClvp4g+IfUemigrkLThSjAQ==",
     109      "cpu": [
     110        "arm64"
     111      ],
     112      "license": "MPL-2.0",
     113      "optional": true,
     114      "os": [
     115        "android"
     116      ],
     117      "engines": {
     118        "node": ">= 10"
     119      }
     120    },
     121    "node_modules/@resvg/resvg-js-darwin-arm64": {
     122      "version": "2.6.2",
     123      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-arm64/-/resvg-js-darwin-arm64-2.6.2.tgz",
     124      "integrity": "sha512-nmok2LnAd6nLUKI16aEB9ydMC6Lidiiq2m1nEBDR1LaaP7FGs4AJ90qDraxX+CWlVuRlvNjyYJTNv8qFjtL9+A==",
     125      "cpu": [
     126        "arm64"
     127      ],
     128      "license": "MPL-2.0",
     129      "optional": true,
     130      "os": [
     131        "darwin"
     132      ],
     133      "engines": {
     134        "node": ">= 10"
     135      }
     136    },
     137    "node_modules/@resvg/resvg-js-darwin-x64": {
     138      "version": "2.6.2",
     139      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-x64/-/resvg-js-darwin-x64-2.6.2.tgz",
     140      "integrity": "sha512-GInyZLjgWDfsVT6+SHxQVRwNzV0AuA1uqGsOAW+0th56J7Nh6bHHKXHBWzUrihxMetcFDmQMAX1tZ1fZDYSRsw==",
     141      "cpu": [
     142        "x64"
     143      ],
     144      "license": "MPL-2.0",
     145      "optional": true,
     146      "os": [
     147        "darwin"
     148      ],
     149      "engines": {
     150        "node": ">= 10"
     151      }
     152    },
     153    "node_modules/@resvg/resvg-js-linux-arm-gnueabihf": {
     154      "version": "2.6.2",
     155      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm-gnueabihf/-/resvg-js-linux-arm-gnueabihf-2.6.2.tgz",
     156      "integrity": "sha512-YIV3u/R9zJbpqTTNwTZM5/ocWetDKGsro0SWp70eGEM9eV2MerWyBRZnQIgzU3YBnSBQ1RcxRZvY/UxwESfZIw==",
     157      "cpu": [
     158        "arm"
     159      ],
     160      "license": "MPL-2.0",
     161      "optional": true,
     162      "os": [
     163        "linux"
     164      ],
     165      "engines": {
     166        "node": ">= 10"
     167      }
     168    },
     169    "node_modules/@resvg/resvg-js-linux-arm64-gnu": {
     170      "version": "2.6.2",
     171      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-gnu/-/resvg-js-linux-arm64-gnu-2.6.2.tgz",
     172      "integrity": "sha512-zc2BlJSim7YR4FZDQ8OUoJg5holYzdiYMeobb9pJuGDidGL9KZUv7SbiD4E8oZogtYY42UZEap7dqkkYuA91pg==",
     173      "cpu": [
     174        "arm64"
     175      ],
     176      "license": "MPL-2.0",
     177      "optional": true,
     178      "os": [
     179        "linux"
     180      ],
     181      "engines": {
     182        "node": ">= 10"
     183      }
     184    },
     185    "node_modules/@resvg/resvg-js-linux-arm64-musl": {
     186      "version": "2.6.2",
     187      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-musl/-/resvg-js-linux-arm64-musl-2.6.2.tgz",
     188      "integrity": "sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==",
     189      "cpu": [
     190        "arm64"
     191      ],
     192      "license": "MPL-2.0",
     193      "optional": true,
     194      "os": [
     195        "linux"
     196      ],
     197      "engines": {
     198        "node": ">= 10"
     199      }
     200    },
     201    "node_modules/@resvg/resvg-js-linux-x64-gnu": {
     202      "version": "2.6.2",
     203      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-gnu/-/resvg-js-linux-x64-gnu-2.6.2.tgz",
     204      "integrity": "sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==",
     205      "cpu": [
     206        "x64"
     207      ],
     208      "license": "MPL-2.0",
     209      "optional": true,
     210      "os": [
     211        "linux"
     212      ],
     213      "engines": {
     214        "node": ">= 10"
     215      }
     216    },
     217    "node_modules/@resvg/resvg-js-linux-x64-musl": {
     218      "version": "2.6.2",
     219      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-musl/-/resvg-js-linux-x64-musl-2.6.2.tgz",
     220      "integrity": "sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==",
     221      "cpu": [
     222        "x64"
     223      ],
     224      "license": "MPL-2.0",
     225      "optional": true,
     226      "os": [
     227        "linux"
     228      ],
     229      "engines": {
     230        "node": ">= 10"
     231      }
     232    },
     233    "node_modules/@resvg/resvg-js-win32-arm64-msvc": {
     234      "version": "2.6.2",
     235      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-arm64-msvc/-/resvg-js-win32-arm64-msvc-2.6.2.tgz",
     236      "integrity": "sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==",
     237      "cpu": [
     238        "arm64"
     239      ],
     240      "license": "MPL-2.0",
     241      "optional": true,
     242      "os": [
     243        "win32"
     244      ],
     245      "engines": {
     246        "node": ">= 10"
     247      }
     248    },
     249    "node_modules/@resvg/resvg-js-win32-ia32-msvc": {
     250      "version": "2.6.2",
     251      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-ia32-msvc/-/resvg-js-win32-ia32-msvc-2.6.2.tgz",
     252      "integrity": "sha512-har4aPAlvjnLcil40AC77YDIk6loMawuJwFINEM7n0pZviwMkMvjb2W5ZirsNOZY4aDbo5tLx0wNMREp5Brk+w==",
     253      "cpu": [
     254        "ia32"
     255      ],
     256      "license": "MPL-2.0",
     257      "optional": true,
     258      "os": [
     259        "win32"
     260      ],
     261      "engines": {
     262        "node": ">= 10"
     263      }
     264    },
     265    "node_modules/@resvg/resvg-js-win32-x64-msvc": {
     266      "version": "2.6.2",
     267      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-x64-msvc/-/resvg-js-win32-x64-msvc-2.6.2.tgz",
     268      "integrity": "sha512-ZXtYhtUr5SSaBrUDq7DiyjOFJqBVL/dOBN7N/qmi/pO0IgiWW/f/ue3nbvu9joWE5aAKDoIzy/CxsY0suwGosQ==",
     269      "cpu": [
     270        "x64"
     271      ],
     272      "license": "MPL-2.0",
     273      "optional": true,
     274      "os": [
     275        "win32"
     276      ],
     277      "engines": {
     278        "node": ">= 10"
    62279      }
    63280    },

  • package.json

    r5eef817 r69815b2  
    1515  },
    1616  "dependencies": {
     17    "@resvg/resvg-js": "^2.6.2",
    1718    "bcryptjs": "^2.4.3",
    1819    "better-sqlite3": "^11.3.0",

  • src/middleware/render.js

    r5eef817 r69815b2  
    137137    cspNonce: () => '',
    138138    currentPath: req.path,
     139    // Absolute origin (for building absolute URLs like the generated og:image).
     140    ogOrigin: (process.env.PUBLIC_BASE_URL || `${req.protocol}://${req.get('host') || ''}`).replace(/\/+$/, ''),
    139141    ...data,
    140142  };

  • src/server.js

    r5eef817 r69815b2  
    6363import adminEpkRoutes from './routes/admin-epk.js';
    6464import changelogRoutes from './routes/changelog.js';
     65import ogRoutes from './routes/og.js';
    6566
    6667// SESSION_SECRET: use the env var if set. Otherwise auto-generate a strong one
    … …  
    222223app.use(federationRoutes);
    223224
     225// Themed OG cards (/og/:slug.png) — resolve the site by slug themselves, so they
     226// run before resolveSite and need no site context.
     227app.use('/og', ogRoutes);
     228
    224229app.use(resolveSite);
    225230app.use(loadAudioTracks);

  • src/views/shell.ejs

    r5eef817 r69815b2  
    5757  ? socialDescr
    5858  : (safeSite.default_description || safeSite.description || '');
    59 const _socialImage = (typeof socialImage !== 'undefined' && socialImage)
    60   ? socialImage
    61   : (safeSite.og_image_default || safeSite.default_cover || '');
     59// og:image — custom (post/site) first; otherwise the auto-generated themed card
     60// (/og/<slug>.png), so every site has a branded social preview by default.
     61let _socialImage = '', _ogGenerated = false;
     62if (typeof socialImage !== 'undefined' && socialImage) _socialImage = socialImage;
     63else if (safeSite.og_image_default) _socialImage = safeSite.og_image_default;
     64else if (safeSite.default_cover) _socialImage = safeSite.default_cover;
     65else if (safeSite.slug && typeof ogOrigin !== 'undefined' && ogOrigin) {
     66  _socialImage = ogOrigin + '/og/' + encodeURIComponent(safeSite.slug) + '.png';
     67  _ogGenerated = true;
     68}
    6269const _ogType = isPostPage ? 'article' : 'website';
    6370
    … …  
    139146<meta property="og:image"     content="<%= _e(_socialImage) %>">
    140147<meta property="og:image:alt" content="<%= _e(_socialTitle) %>">
     148<% if (_ogGenerated) { %>
     149<meta property="og:image:width"  content="1200">
     150<meta property="og:image:height" content="630">
     151<meta property="og:image:type"   content="image/png">
     152<% } %>
    141153<% } %>
    142154<% if (_canonical) { %><meta property="og:url" content="<%= _e(_canonical) %>"><% } %>
Note: See TracChangeset for help on using the changeset viewer.