Files
v10/site/scripts/generate-og-default.mjs
T

63 lines
1.8 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* 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})`);