daemon-sec-lotl

og.mjs (7045B)

---

 /**
  * Social card — `npm run og`.
  *
  * Renders public/og.png (1200×630) from the SVG template below, using the
  * site's own faces from src/fonts via a private fontconfig so the card is the
  * site (Archivo display, DM Mono labels) rather than whatever the build box
  * happens to have installed. The PNG is committed and served as a static
  * asset — it is NOT rendered at build time on purpose: Vercel's image has
  * different fonts, and a card that changes shape per environment is worse
  * than one that changes only when someone re-runs this.
  *
  * Re-run after the dataset changes so the counts on the card stay honest.
  */
 import { mkdirSync, writeFileSync, readFileSync, readdirSync, existsSync } from 'node:fs';
 import { spawnSync } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve } from 'node:path';
 import { tmpdir } from 'node:os';
 
 const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 const FONTS = join(ROOT, 'src', 'fonts');
 const facets = JSON.parse(readFileSync(join(ROOT, 'src/data/facets.json'), 'utf8'));
 const c = facets.counts;
 const n = (x) => Number(x || 0).toLocaleString('en-US');
 
 // A private fontconfig that sees only the site's faces. sharp's bundled
 // FreeType registers WOFF2 (fc-list sees them) but cannot rasterise their
 // glyphs — every run came out as tofu — so decompress to TTF first. Needs
 // `woff2_decompress` (package "woff2") or fonttools+brotli on PATH; both are
 // tried. Must be in place before sharp (libvips → pango → fontconfig) loads.
 const fcDir = join(tmpdir(), 'daemonbins-og-fc');
 const ttfDir = join(fcDir, 'ttf');
 mkdirSync(join(fcDir, 'cache'), { recursive: true });
 mkdirSync(ttfDir, { recursive: true });
 function decompress(woff2, ttf) {
   let r = spawnSync('woff2_decompress', [woff2], { stdio: 'ignore' });
   if (r.status === 0) {
     // woff2_decompress writes <name>.ttf beside the input; move it.
     const beside = woff2.replace(/\.woff2$/, '.ttf');
     if (existsSync(beside)) { writeFileSync(ttf, readFileSync(beside)); spawnSync('rm', ['-f', beside]); return true; }
   }
   r = spawnSync('fonttools', ['ttLib.woff2', 'decompress', '-o', ttf, woff2], { stdio: 'ignore' });
   return r.status === 0 && existsSync(ttf);
 }
 let converted = 0;
 for (const f of readdirSync(FONTS).filter((f) => f.endsWith('.woff2'))) {
   const ttf = join(ttfDir, f.replace(/\.woff2$/, '.ttf'));
   if (existsSync(ttf) || decompress(join(FONTS, f), ttf)) converted++;
 }
 if (!converted) {
   console.warn('og: custom WOFF2 faces unavailable; using the system fallback fonts.');
 } else {
   writeFileSync(join(fcDir, 'fonts.conf'), `<?xml version="1.0"?>
 <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
 <fontconfig>
   <dir>${ttfDir}</dir>
   <cachedir>${join(fcDir, 'cache')}</cachedir>
 </fontconfig>
 `);
   process.env.FONTCONFIG_FILE = join(fcDir, 'fonts.conf');
 }
 const sharp = (await import('sharp')).default;
 
 // Rosé Pine (night) — the card is always the dark plate, like the code blocks.
 const P = {
   base: '#191724', surface: '#1f1d2e', overlay: '#26233a',
   text: '#e0def4', subtle: '#908caa', muted: '#6e6a86',
   love: '#eb6f92', rose: '#ebbcba', gold: '#f6c177', iris: '#c4a7e7', foam: '#9ccfd8', pine: '#3e8fb0',
 };
 // Noto Sans Display is the masthead wordmark face (tokens.css --font-wordmark);
 // the Archivo subsets do not survive the WOFF2→TTF trip, so the card uses the
 // wordmark face for all display text.
 const DISPLAY = "'Noto Sans Display', 'Archivo', 'Liberation Sans', sans-serif";
 const MONO = "'DM Mono', 'JetBrains Mono', 'Liberation Mono', monospace";
 
 const decks = [
   { tag: 'GTFOBins', acc: P.foam, n: c.bySource?.GTFOBins },
   { tag: 'LOLBAS', acc: P.iris, n: c.bySource?.LOLBAS },
   { tag: 'WADComs', acc: P.gold, n: c.bySource?.WADComs },
   { tag: 'LOOBins', acc: P.rose, n: c.bySource?.LOOBins },
   { tag: 'DÆMON', acc: P.love, n: c.bySource?.DAEMON },
 ];
 
 const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630">
   <defs>
     <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
       <path d="M40 0H0V40" fill="none" stroke="${P.text}" stroke-opacity="0.045" stroke-width="1"/>
     </pattern>
     <linearGradient id="wash" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0" stop-color="${P.base}"/>
       <stop offset="1" stop-color="${P.surface}"/>
     </linearGradient>
   </defs>
   <rect width="1200" height="630" fill="url(#wash)"/>
   <rect width="1200" height="630" fill="url(#grid)"/>
   <!-- signal bands: the site's streak field, frozen -->
   <g opacity="0.55">
     <rect x="0" y="86" width="1200" height="2" fill="${P.iris}" opacity="0.35"/>
     <rect x="180" y="118" width="760" height="1" fill="${P.foam}" opacity="0.5"/>
     <rect x="0" y="540" width="1200" height="1" fill="${P.love}" opacity="0.35"/>
     <rect x="420" y="566" width="780" height="2" fill="${P.gold}" opacity="0.3"/>
   </g>
   <!-- masthead -->
   <g font-family="${MONO}" font-size="22" fill="${P.subtle}" letter-spacing="4">
     <text x="80" y="150">^: 00 · LIVING OFF THE LAND</text>
     <text x="1120" y="150" text-anchor="end">lotl.daemon-sec.xyz</text>
   </g>
   <!-- title -->
   <g font-family="${DISPLAY}" font-weight="700">
     <text x="76" y="300" fill="${P.text}" font-weight="800" font-size="150" letter-spacing="-7">D<tspan fill="${P.love}">Æ</tspan>MONBins</text>
   </g>
   <text x="80" y="368" fill="${P.subtle}" font-family="${DISPLAY}" font-weight="600" font-size="44" letter-spacing="-1">the Off-the-Land Almanac</text>
   <text x="1120" y="366" text-anchor="end" fill="${P.text}" font-family="${MONO}" font-size="26" letter-spacing="1">${n(c.techniques)} techniques · ${n(c.tools)} tools</text>
   <text x="80" y="420" fill="${P.muted}" font-family="${MONO}" font-size="22" letter-spacing="0.5">GTFOBins × LOLBAS × WADComs × LOOBins — merged, resynced, extended · MITRE ATT&amp;CK mapped</text>
   <!-- the five collections -->
   <g font-family="${MONO}">
     ${decks.map((d, i) => {
       const x = 55 + i * 220;
       return `<rect x="${x}" y="470" width="194" height="4" fill="${d.acc}"/>
     <text x="${x}" y="522" fill="${P.text}" font-family="${DISPLAY}" font-weight="700" font-size="46" letter-spacing="-2">${n(d.n)}</text>
     <text x="${x}" y="556" fill="${d.acc}" font-size="20" letter-spacing="3">${d.tag.toUpperCase()}</text>`;
     }).join('\n    ')}
   </g>
 </svg>
 `;
 
 const outSvg = join(ROOT, 'public', 'og.svg');
 const outPng = join(ROOT, 'public', 'og.png');
 writeFileSync(outSvg, svg);
 // librsvg maps the SVG's px to 72 dpi; rasterise at 2× and downsample to the
 // exact 1200×630 so type edges stay crisp on retina previews.
 const png = await sharp(Buffer.from(svg), { density: 144 })
   .resize(1200, 630, { fit: 'fill', kernel: 'lanczos3' })
   .png({ compressionLevel: 9, palette: false })
   .toBuffer();
 writeFileSync(outPng, png);
 const meta = await sharp(png).metadata();
 console.log(`wrote public/og.svg (${svg.length} B) and public/og.png (${png.length} B, ${meta.width}×${meta.height})`);