Files
bztmon-site/scripts/gen-og.mjs
T
jwright ae207eb79d Populate site with real CV data; restyle OG subtitle
Real career history (Woolworths, Virtus Health, Linde, ELGAS, Darktime),
cloud-heavy skills matrix, education, LinkedIn, Sydney location, and
projects mapped to actual work. OG subtitle now smaller italic serif.
2026-06-17 16:44:03 +10:00

54 lines
2.3 KiB
JavaScript

// Generate the social preview image (public/og.png, 1200x630) from an inline SVG.
// Run: node scripts/gen-og.mjs (or: npm run gen:og)
// Self-hosted asset → no third-party OG service, nothing external at runtime.
import sharp from "sharp";
import { fileURLToPath } from "node:url";
const out = fileURLToPath(new URL("../public/og.png", import.meta.url));
const W = 1200;
const H = 630;
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
<defs>
<linearGradient id="title" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#e7edf4"/>
<stop offset="1" stop-color="#7fdcc9"/>
</linearGradient>
<radialGradient id="glow" cx="18%" cy="0%" r="80%">
<stop offset="0" stop-color="#2dd4bf" stop-opacity="0.22"/>
<stop offset="60%" stop-color="#2dd4bf" stop-opacity="0"/>
</radialGradient>
<pattern id="grid" width="44" height="44" patternUnits="userSpaceOnUse">
<path d="M44 0H0V44" fill="none" stroke="#94a3b8" stroke-opacity="0.06" stroke-width="1"/>
</pattern>
</defs>
<rect width="${W}" height="${H}" fill="#090c14"/>
<rect width="${W}" height="${H}" fill="url(#grid)"/>
<rect width="${W}" height="${H}" fill="url(#glow)"/>
<rect x="0" y="0" width="${W}" height="6" fill="#2dd4bf"/>
<text x="80" y="150" font-family="monospace" font-size="24" letter-spacing="5"
fill="#5eead4">~/ INFRASTRUCTURE &amp; DEVOPS ENGINEER</text>
<text x="78" y="300" font-family="sans-serif" font-size="118" font-weight="700"
letter-spacing="-3" fill="url(#title)">Jonathon Wright</text>
<!-- Editorial italic serif subtitle (smaller, for hierarchy). -->
<text x="80" y="386" font-family="C059, serif" font-style="italic" font-size="35"
fill="#aeb9c9">Secure Kubernetes platforms &#183; automated fleets</text>
<text x="80" y="434" font-family="C059, serif" font-style="italic" font-size="35"
fill="#aeb9c9">&#183; GPU-backed edge systems</text>
<text x="80" y="560" font-family="monospace" font-size="27" fill="#61708a">
Talos &#183; Kubernetes &#183; GitOps &#183; Ansible &#183; Edge AI
</text>
<text x="${W - 80}" y="560" text-anchor="end" font-family="monospace" font-size="27"
fill="#5eead4">www.bztmon.com</text>
</svg>`;
await sharp(Buffer.from(svg)).png().toFile(out);
console.log("wrote", out);