feat(site): add default OG image for social sharing (#1295)

site/scripts/generate-og-default.mjs

@@ -0,0 +1,62 @@
+/**
+ * Generates the default OG image: Video.js mono logo in manila on a dark background.
+ *
+ * Usage: node scripts/generate-og-default.mjs
+ * Output: public/og-default.png (1200×630)
+ */
+
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import sharp from 'sharp';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const BACKGROUND = '#1e1d1d'; // faded-black (dark mode bg)
+const LOGO_FILL = '#f3e7d2'; // manila-light
+const WIDTH = 1200;
+const HEIGHT = 630;
+
+// Read the mono logo SVG and replace currentColor with manila
+const logoSvg = readFileSync(resolve(__dirname, '../src/assets/logos/videojs-mono.svg'), 'utf-8');
+
+// The logo viewBox is 0 0 381 68 → aspect ratio ~5.6:1
+const logoNativeW = 381;
+const logoNativeH = 68;
+const logoAspect = logoNativeW / logoNativeH;
+
+// ~80% of image width
+const logoW = Math.round(WIDTH * 0.8);
+const logoH = Math.round(logoW / logoAspect);
+
+// Prepare the logo SVG at the target size with manila fill
+const coloredLogo = logoSvg
+  .replace(/currentColor/g, LOGO_FILL)
+  .replace(/<svg /, `<svg width="${logoW}" height="${logoH}" `);
+
+// Optical centering: nudge the logo 10 px left of mathematical centre.
+const nudgeLeft = 10;
+
+const centreLeft = Math.round((WIDTH - logoW) / 2);
+const centreTop = Math.round((HEIGHT - logoH) / 2);
+
+const image = sharp({
+  create: {
+    width: WIDTH,
+    height: HEIGHT,
+    channels: 4,
+    background: BACKGROUND,
+  },
+})
+  .composite([
+    {
+      input: Buffer.from(coloredLogo),
+      left: centreLeft - nudgeLeft,
+      top: centreTop,
+    },
+  ])
+  .png();
+
+const outputPath = resolve(__dirname, '../public/og-default.png');
+await image.toFile(outputPath);
+console.log(`Generated ${outputPath} (${WIDTH}×${HEIGHT})`);