Add scripts/build-og-image.mjs (sharp) hooked as npm prebuild to materialize a 1200x630 PNG alongside the SVG. BaseLayout now points og:image/twitter:image at the PNG, which the major crawlers preview reliably (SVG support is patchy). The SVG stays in the repo as the source of truth.
20 lines
772 B
JavaScript
20 lines
772 B
JavaScript
import { readFile, writeFile, mkdir } from 'node:fs/promises';
|
|
import { dirname, resolve } from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
import sharp from 'sharp';
|
|
|
|
const here = dirname(fileURLToPath(import.meta.url));
|
|
const repoRoot = resolve(here, '..');
|
|
const svgPath = resolve(repoRoot, 'public/og-default.svg');
|
|
const pngPath = resolve(repoRoot, 'public/og-default.png');
|
|
|
|
const svg = await readFile(svgPath);
|
|
const png = await sharp(svg, { density: 192 })
|
|
.resize({ width: 1200, height: 630, fit: 'contain', background: { r: 239, g: 234, b: 224, alpha: 1 } })
|
|
.png({ compressionLevel: 9 })
|
|
.toBuffer();
|
|
|
|
await mkdir(dirname(pngPath), { recursive: true });
|
|
await writeFile(pngPath, png);
|
|
console.log(`generated ${pngPath} (${png.length} bytes)`);
|