@curiousvlxd/linkedin-badge-renderer 0.1.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vladyslav Timchenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# linkedin-badge-renderer
+
+<p align="center">
+  <img src="./assets/logo.png" width="200" alt="LinkedIn Badge Renderer Logo" />
+</p>
+
+<p align="center">
+  <img src="./assets/example.svg" width="400" alt="Generated badge example" />
+</p>
+
+CLI tool for generating LinkedIn profile badges in SVG, PNG, JPEG, or PDF format.
+
+Renders the official LinkedIn badge using Playwright and exports pixel-perfect assets for websites, resumes, and portfolios.
+
+---
+
+## Features
+
+- Generate badges as SVG, PNG, JPEG, or PDF
+- Pixel-perfect rendering via Chromium
+- Transparent background for images
+- No manual screenshots
+- Works in CI and GitHub Actions
+- Cross-platform (Windows, macOS, Linux)
+
+---
+
+## Installation
+
+Clone the repository and install dependencies:
+
+```bash
+npm install
+npx playwright install chromium
+```

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@curiousvlxd/linkedin-badge-renderer",
+  "version": "0.1.7",
+  "type": "module",
+  "bin": {
+    "linkedin-badge": "src/cli.mjs"
+  },
+  "exports": {
+    ".": "./index.mjs"
+  },
+  "files": [
+    "src",
+    "index.mjs",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/curiousvlxd/linkedin-badge-renderer.git"
+  },
+  "homepage": "https://github.com/curiousvlxd/linkedin-badge-renderer",
+  "bugs": {
+    "url": "https://github.com/curiousvlxd/linkedin-badge-renderer/issues"
+  },
+  "license": "MIT",
+  "keywords": [
+    "linkedin",
+    "badge",
+    "svg",
+    "pdf",
+    "png",
+    "jpeg",
+    "cli",
+    "playwright",
+    "renderer",
+    "automation",
+    "profile"
+  ],
+  "scripts": {
+    "prepare": "node -e \"process.env.CI ? 0 : require('child_process').execSync('husky install', { stdio: 'inherit' })\"",
+    "badge": "node src/cli.mjs",
+    "badge:svg": "node src/cli.mjs --format svg",
+    "badge:pdf": "node src/cli.mjs --format pdf",
+    "badge:png": "node src/cli.mjs --format png",
+    "badge:jpeg": "node src/cli.mjs --format jpeg"
+  },
+  "dependencies": {
+    "mupdf": "^1.3.0",
+    "playwright": "^1.49.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.3.1",
+    "@commitlint/config-conventional": "^20.3.1",
+    "husky": "^9.1.7"
+  }
+}

package/src/cli.mjs

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+
+import { parseArgs, normFormat, normTheme, normSize, normLocale, normOrientation, toInt, ensureExt, DEFAULTS, usageAndExit } from "./utils/args.mjs";
+import { log } from "./utils/log.mjs";
+import { renderBadgeArtifacts } from "./renderer/formats/pdf.mjs";
+import { writeOutput } from "./renderer/formats/index.mjs";
+
+export async function runCli(argv = process.argv) {
+  const args = parseArgs(argv);
+
+  const handle = String(args.handle || "").trim();
+  if (!handle) usageAndExit();
+
+  const format = normFormat(args.format);
+  const theme = normTheme(args.theme);
+  const size = normSize(args.size);
+  const locale = normLocale(args.locale);
+  const orientation = normOrientation(args.orientation ?? args.type);
+  const pad = Math.max(0, toInt(args.pad, DEFAULTS.pad));
+
+  const outPath = ensureExt(args.out || DEFAULTS.out, format);
+
+  log("Params:", { handle, format, theme, size, locale, orientation, out: outPath, pad });
+
+  const artifacts = await renderBadgeArtifacts({ handle, theme, size, locale, orientation, pad });
+
+  await writeOutput({ format, outPath, artifacts });
+
+  log("Wrote:", outPath);
+}
+
+runCli().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package/src/index.mjs

@@ -0,0 +1,3 @@
+export { runCli } from "./src/cli.mjs";
+export { renderBadgeArtifacts } from "./src/renderer/pdf.mjs";
+export { pdfToSvgViaMupdf, patchSvg } from "./src/renderer/svg.mjs";    

package/src/render-linkedin-badge.mjs

@@ -0,0 +1,350 @@
+import fs from "fs/promises";
+import path from "path";
+import process from "process";
+import { chromium } from "playwright";
+import * as mupdf from "mupdf";
+
+const DEFAULTS = {
+  locale: "en_US",
+  orientation: "HORIZONTAL",
+  size: "large",
+  theme: "light",
+  pad: 20,
+  format: "svg",
+  out: "dist/linkedin-badge.svg",
+};
+
+function log(...args) {
+  console.log(new Date().toISOString(), "|", ...args);
+}
+
+function parseArgs(argv) {
+  const m = {};
+  for (let i = 2; i < argv.length; i++) {
+    const a = argv[i];
+    if (!a.startsWith("--")) continue;
+    const key = a.slice(2);
+    const next = argv[i + 1];
+    if (!next || next.startsWith("--")) m[key] = true;
+    else {
+      m[key] = next;
+      i++;
+    }
+  }
+  return m;
+}
+
+function normTheme(v) {
+  const t = String(v ?? DEFAULTS.theme).toLowerCase();
+  return t === "dark" ? "dark" : "light";
+}
+
+function normSize(v) {
+  const s = String(v ?? DEFAULTS.size).toLowerCase();
+  if (s === "small") return "small";
+  if (s === "medium") return "medium";
+  return "large";
+}
+
+function normOrientation(v) {
+  const o = String(v ?? DEFAULTS.orientation).toUpperCase();
+  return o === "VERTICAL" ? "VERTICAL" : "HORIZONTAL";
+}
+
+function normLocale(v) {
+  return String(v ?? DEFAULTS.locale);
+}
+
+function normFormat(v) {
+  const f = String(v ?? DEFAULTS.format).toLowerCase();
+  if (f === "pdf" || f === "svg" || f === "png" || f === "jpeg" || f === "jpg") return f === "jpg" ? "jpeg" : f;
+  return "svg";
+}
+
+function toInt(v, def) {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : def;
+}
+
+function ensureExt(out, format) {
+  const ext = `.${format}`;
+  const s = String(out || DEFAULTS.out);
+  const base = s.replace(/[?#].*$/, "");
+  const i = base.lastIndexOf(".");
+  if (i > -1 && i > base.lastIndexOf("/") && i > base.lastIndexOf("\\")) return s.slice(0, i) + ext;
+  return s.endsWith(".") ? `${s}${format}` : `${s}${ext}`;
+}
+
+async function ensureDir(filePath) {
+  await fs.mkdir(path.dirname(filePath), { recursive: true });
+}
+
+function usageAndExit() {
+  console.error(
+    "Usage: node src/linkedin-badge-renderer.mjs --handle <vanity> [--format svg|pdf|png|jpeg] [--out dist/out.ext] [--theme light|dark] [--size small|medium|large] [--locale en_US] [--orientation HORIZONTAL|VERTICAL] [--pad 20]"
+  );
+  process.exit(2);
+}
+
+function buildLinkedinWrapperHtml({ handle, theme, size, locale, orientation }) {
+  const sz = String(size).toLowerCase();
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+<body style="margin:0;padding:0;background:transparent">
+  <div class="badge-base LI-profile-badge"
+       data-version="v1"
+       data-size="${sz}"
+       data-locale="${locale}"
+       data-type="${orientation}"
+       data-theme="${theme}"
+       data-vanity="${handle}"
+       style="display:inline-block">
+    <a class="badge-base__link LI-simple-link" href="https://www.linkedin.com/in/${handle}?trk=profile-badge">${handle}</a>
+  </div>
+  <script src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
+</body>
+</html>`;
+}
+
+async function warmUp(context) {
+  const page = await context.newPage();
+  try {
+    await page.goto("https://www.linkedin.com/", { waitUntil: "domcontentloaded", timeout: 25000 });
+    await page.waitForTimeout(800);
+  } catch {}
+  await page.close().catch(() => {});
+}
+
+async function waitFonts(page) {
+  await page.evaluate(async () => {
+    try {
+      if (document.fonts?.ready) await document.fonts.ready;
+    } catch {}
+  });
+}
+
+async function extractBadgeFromIframe(frame) {
+  const badgeInner = await frame.evaluate(() => document.body.innerHTML);
+  const cssHrefs = await frame.evaluate(() =>
+    Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map((l) => l.href)
+  );
+  return { badgeInner, cssHrefs };
+}
+
+function buildRenderHtml({ badgeInner, cssHrefs, pad }) {
+  const p = Math.max(0, Number(pad || 0));
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  ${cssHrefs.map((u) => `<link rel="stylesheet" href="${u}">`).join("\n")}
+  <style>
+    html, body { margin:0; padding:0; background:transparent; }
+    body { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
+    #root { display:inline-block; padding:${p}px; }
+    * { box-sizing:border-box; }
+  </style>
+</head>
+<body>
+  <div id="root">${badgeInner}</div>
+</body>
+</html>`;
+}
+
+async function measureRoot(page) {
+  return await page.evaluate(() => {
+    const el = document.getElementById("root") || document.body;
+    const r = el.getBoundingClientRect();
+    return { w: r.width, h: r.height };
+  });
+}
+
+async function renderBadge({ handle, theme, size, locale, orientation, pad }) {
+  const browser = await chromium.launch({ args: ["--no-sandbox"] });
+  const context = await browser.newContext({
+    userAgent:
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
+    locale: "en-US",
+    viewport: { width: 1400, height: 900 },
+    deviceScaleFactor: 2,
+  });
+
+  const page = await context.newPage();
+
+  try {
+    await warmUp(context);
+
+    await page.setContent(buildLinkedinWrapperHtml({ handle, theme, size, locale, orientation }), {
+      waitUntil: "domcontentloaded",
+    });
+
+    const iframeLocator = page.locator(".LI-profile-badge iframe");
+    await iframeLocator.waitFor({ state: "attached", timeout: 30000 });
+    await iframeLocator.waitFor({ state: "visible", timeout: 30000 });
+
+    const iframeEl = await page.$(".LI-profile-badge iframe");
+    if (!iframeEl) throw new Error("LinkedIn badge iframe not found");
+
+    const frame = await iframeEl.contentFrame();
+    if (!frame) throw new Error("LinkedIn badge iframe frame is null");
+
+    await frame.waitForLoadState("load").catch(() => {});
+    await frame.waitForTimeout(700);
+
+    const { badgeInner, cssHrefs } = await extractBadgeFromIframe(frame);
+    const renderHtml = buildRenderHtml({ badgeInner, cssHrefs, pad });
+
+    const renderPage = await context.newPage();
+    await renderPage.setViewportSize({ width: 2000, height: 1400 });
+
+    await renderPage.setContent(renderHtml, { waitUntil: "domcontentloaded" });
+    await renderPage.waitForTimeout(250);
+    await waitFonts(renderPage);
+    await renderPage.waitForTimeout(150);
+
+    const m1 = await measureRoot(renderPage);
+    const widthPx = Math.max(1, Math.ceil(m1.w));
+    const heightPx = Math.max(1, Math.ceil(m1.h));
+
+    const vW = Math.min(4096, Math.max(64, widthPx));
+    const vH = Math.min(4096, Math.max(64, heightPx));
+
+    await renderPage.setViewportSize({ width: vW, height: vH });
+    await renderPage.waitForTimeout(100);
+    await waitFonts(renderPage);
+
+    const m2 = await measureRoot(renderPage);
+    const widthPx2 = Math.max(1, Math.ceil(m2.w));
+    const heightPx2 = Math.max(1, Math.ceil(m2.h));
+
+    const pdf = await renderPage.pdf({
+      printBackground: true,
+      width: `${widthPx2}px`,
+      height: `${heightPx2}px`,
+      margin: { top: "0px", right: "0px", bottom: "0px", left: "0px" },
+      preferCSSPageSize: false,
+      pageRanges: "1",
+    });
+
+    const png = await renderPage.screenshot({
+      type: "png",
+      omitBackground: false,
+    });
+
+    const jpeg = await renderPage.screenshot({
+      type: "jpeg",
+      quality: 95,
+      omitBackground: false,
+    });
+
+    await renderPage.close().catch(() => {});
+    return { pdf, png, jpeg, widthPx: widthPx2, heightPx: heightPx2 };
+  } finally {
+    await page.close().catch(() => {});
+    await context.close().catch(() => {});
+    await browser.close().catch(() => {});
+  }
+}
+
+function pdfToSvgViaMupdf(pdfBuffer) {
+  const doc = mupdf.Document.openDocument(new Uint8Array(pdfBuffer), "application/pdf");
+  const page = doc.loadPage(0);
+  const bounds = page.getBounds();
+  const b = Array.isArray(bounds) ? bounds : [0, 0, 0, 0];
+
+  const buf = new mupdf.Buffer();
+  const writer = new mupdf.DocumentWriter(buf, "svg", "");
+  const device = writer.beginPage(b);
+
+  page.run(device, mupdf.Matrix.identity, mupdf.ColorSpace.DeviceRGB);
+
+  writer.endPage();
+  writer.close();
+
+  const svg = buf.asString();
+  return { svg: typeof svg === "string" ? svg : String(svg), bounds: b };
+}
+
+function patchSvg(svg, { widthPx, heightPx, bounds }) {
+  const w = Math.max(1, Math.ceil(widthPx));
+  const h = Math.max(1, Math.ceil(heightPx));
+
+  const x0 = Number(bounds?.[0] ?? 0);
+  const y0 = Number(bounds?.[1] ?? 0);
+  const x1 = Number(bounds?.[2] ?? 0);
+  const y1 = Number(bounds?.[3] ?? 0);
+
+  const vbW = Math.max(0.001, x1 - x0);
+  const vbH = Math.max(0.001, y1 - y0);
+
+  let out = String(svg || "");
+  if (!/<svg\b/i.test(out)) return out;
+
+  out = out.replace(/<\?xml[^>]*>\s*/i, "");
+
+  out = out.replace(/<svg\b([^>]*)>/i, (_m, attrs) => {
+    let a = String(attrs || "");
+    a = a.replace(/\s(width|height|viewBox|preserveAspectRatio)=(".*?"|'.*?')/gi, "");
+    const hasXmlns = /\sxmlns=/.test(a);
+    const xmlns = hasXmlns ? "" : ' xmlns="http://www.w3.org/2000/svg"';
+    return `<svg${xmlns}${a} width="${w}px" height="${h}px" viewBox="${x0} ${y0} ${vbW} ${vbH}" preserveAspectRatio="xMinYMin meet">`;
+  });
+
+  return `<?xml version="1.0" encoding="UTF-8"?>\n${out}`;
+}
+
+async function writeOutput({ format, outPath, badge }) {
+  await ensureDir(outPath);
+
+  if (format === "pdf") {
+    await fs.writeFile(outPath, Buffer.from(badge.pdf));
+    return;
+  }
+
+  if (format === "png") {
+    await fs.writeFile(outPath, Buffer.from(badge.png));
+    return;
+  }
+
+  if (format === "jpeg") {
+    await fs.writeFile(outPath, Buffer.from(badge.jpeg));
+    return;
+  }
+
+  const { svg: rawSvg, bounds } = pdfToSvgViaMupdf(Buffer.from(badge.pdf));
+  const svg = patchSvg(rawSvg, { widthPx: badge.widthPx, heightPx: badge.heightPx, bounds });
+  await fs.writeFile(outPath, svg, "utf8");
+}
+
+async function main() {
+  const args = parseArgs(process.argv);
+
+  const handle = String(args.handle || "").trim();
+  if (!handle) usageAndExit();
+
+  const format = normFormat(args.format);
+  const theme = normTheme(args.theme);
+  const size = normSize(args.size);
+  const locale = normLocale(args.locale);
+  const orientation = normOrientation(args.orientation ?? args.type);
+  const pad = Math.max(0, toInt(args.pad, DEFAULTS.pad));
+
+  const outPath = ensureExt(args.out || DEFAULTS.out, format);
+
+  log("Params:", { handle, format, theme, size, locale, orientation, out: outPath, pad });
+
+  const badge = await renderBadge({ handle, theme, size, locale, orientation, pad });
+
+  await writeOutput({ format, outPath, badge });
+  log("Wrote:", outPath);
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package/src/renderer/formats/index.mjs

@@ -0,0 +1,23 @@
+import { writeFileEnsured } from "../../utils/fs.mjs";
+import { pdfToSvgViaMupdf, patchSvg } from "../../renderer/formats/svg.mjs";
+
+export async function writeOutput({ format, outPath, artifacts }) {
+  if (format === "pdf") {
+    await writeFileEnsured(outPath, Buffer.from(artifacts.pdf));
+    return;
+  }
+
+  if (format === "png") {
+    await writeFileEnsured(outPath, Buffer.from(artifacts.png));
+    return;
+  }
+
+  if (format === "jpeg") {
+    await writeFileEnsured(outPath, Buffer.from(artifacts.jpeg));
+    return;
+  }
+
+  const { svg: rawSvg, bounds } = pdfToSvgViaMupdf(Buffer.from(artifacts.pdf));
+  const svg = patchSvg(rawSvg, { widthPx: artifacts.widthPx, heightPx: artifacts.heightPx, bounds });
+  await writeFileEnsured(outPath, svg, "utf8");
+}

package/src/renderer/formats/pdf.mjs

@@ -0,0 +1,82 @@
+import { withBrowser, createContext, warmUp, waitFonts } from "../playwright.mjs";
+import { buildLinkedinWrapperHtml, extractBadgeFromIframe, buildRenderHtml, measureRoot } from "../linkedin.mjs";
+
+export async function renderBadgeArtifacts({ handle, theme, size, locale, orientation, pad }) {
+  return await withBrowser(async (browser) => {
+    const context = await createContext(browser);
+    const page = await context.newPage();
+
+    try {
+      await warmUp(context);
+
+      await page.setContent(buildLinkedinWrapperHtml({ handle, theme, size, locale, orientation }), {
+        waitUntil: "domcontentloaded",
+      });
+
+      const iframeLocator = page.locator(".LI-profile-badge iframe");
+      await iframeLocator.waitFor({ state: "attached", timeout: 30000 });
+      await iframeLocator.waitFor({ state: "visible", timeout: 30000 });
+
+      const iframeEl = await page.$(".LI-profile-badge iframe");
+      if (!iframeEl) throw new Error("LinkedIn badge iframe not found");
+
+      const frame = await iframeEl.contentFrame();
+      if (!frame) throw new Error("LinkedIn badge iframe frame is null");
+
+      await frame.waitForLoadState("load").catch(() => {});
+      await frame.waitForTimeout(700);
+
+      const { badgeInner, cssHrefs } = await extractBadgeFromIframe(frame);
+      const renderHtml = buildRenderHtml({ badgeInner, cssHrefs, pad });
+
+      const renderPage = await context.newPage();
+      await renderPage.setViewportSize({ width: 2000, height: 1400 });
+
+      await renderPage.setContent(renderHtml, { waitUntil: "domcontentloaded" });
+      await renderPage.waitForTimeout(250);
+      await waitFonts(renderPage);
+      await renderPage.waitForTimeout(150);
+
+      const m1 = await measureRoot(renderPage);
+      const widthPx = Math.max(1, Math.ceil(m1.w));
+      const heightPx = Math.max(1, Math.ceil(m1.h));
+
+      const vW = Math.min(4096, Math.max(64, widthPx));
+      const vH = Math.min(4096, Math.max(64, heightPx));
+
+      await renderPage.setViewportSize({ width: vW, height: vH });
+      await renderPage.waitForTimeout(100);
+      await waitFonts(renderPage);
+
+      const m2 = await measureRoot(renderPage);
+      const widthPx2 = Math.max(1, Math.ceil(m2.w));
+      const heightPx2 = Math.max(1, Math.ceil(m2.h));
+
+      const pdf = await renderPage.pdf({
+        printBackground: true,
+        width: `${widthPx2}px`,
+        height: `${heightPx2}px`,
+        margin: { top: "0px", right: "0px", bottom: "0px", left: "0px" },
+        preferCSSPageSize: false,
+        pageRanges: "1",
+      });
+
+      const png = await renderPage.screenshot({
+        type: "png",
+        omitBackground: true,
+      });
+
+      const jpeg = await renderPage.screenshot({
+        type: "jpeg",
+        quality: 95,
+        omitBackground: true,
+      });
+
+      await renderPage.close().catch(() => {});
+      return { pdf, png, jpeg, widthPx: widthPx2, heightPx: heightPx2 };
+    } finally {
+      await page.close().catch(() => {});
+      await context.close().catch(() => {});
+    }
+  });
+}

package/src/renderer/formats/svg.mjs

@@ -0,0 +1,48 @@
+import * as mupdf from "mupdf";
+
+export function pdfToSvgViaMupdf(pdfBuffer) {
+  const doc = mupdf.Document.openDocument(new Uint8Array(pdfBuffer), "application/pdf");
+  const page = doc.loadPage(0);
+  const bounds = page.getBounds();
+  const b = Array.isArray(bounds) ? bounds : [0, 0, 0, 0];
+
+  const buf = new mupdf.Buffer();
+  const writer = new mupdf.DocumentWriter(buf, "svg", "");
+  const device = writer.beginPage(b);
+
+  page.run(device, mupdf.Matrix.identity, mupdf.ColorSpace.DeviceRGB);
+
+  writer.endPage();
+  writer.close();
+
+  const svg = buf.asString();
+  return { svg: typeof svg === "string" ? svg : String(svg), bounds: b };
+}
+
+export function patchSvg(svg, { widthPx, heightPx, bounds }) {
+  const w = Math.max(1, Math.ceil(widthPx));
+  const h = Math.max(1, Math.ceil(heightPx));
+
+  const x0 = Number(bounds?.[0] ?? 0);
+  const y0 = Number(bounds?.[1] ?? 0);
+  const x1 = Number(bounds?.[2] ?? 0);
+  const y1 = Number(bounds?.[3] ?? 0);
+
+  const vbW = Math.max(0.001, x1 - x0);
+  const vbH = Math.max(0.001, y1 - y0);
+
+  let out = String(svg || "");
+  if (!/<svg\b/i.test(out)) return out;
+
+  out = out.replace(/<\?xml[^>]*>\s*/i, "");
+
+  out = out.replace(/<svg\b([^>]*)>/i, (_m, attrs) => {
+    let a = String(attrs || "");
+    a = a.replace(/\s(width|height|viewBox|preserveAspectRatio)=(".*?"|'.*?')/gi, "");
+    const hasXmlns = /\sxmlns=/.test(a);
+    const xmlns = hasXmlns ? "" : ' xmlns="http://www.w3.org/2000/svg"';
+    return `<svg${xmlns}${a} width="${w}px" height="${h}px" viewBox="${x0} ${y0} ${vbW} ${vbH}" preserveAspectRatio="xMinYMin meet">`;
+  });
+
+  return `<?xml version="1.0" encoding="UTF-8"?>\n${out}`;
+}

package/src/renderer/linkedin.mjs

@@ -0,0 +1,60 @@
+export function buildLinkedinWrapperHtml({ handle, theme, size, locale, orientation }) {
+  const sz = String(size).toLowerCase();
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+<body style="margin:0;padding:0;background:transparent">
+  <div class="badge-base LI-profile-badge"
+       data-version="v1"
+       data-size="${sz}"
+       data-locale="${locale}"
+       data-type="${orientation}"
+       data-theme="${theme}"
+       data-vanity="${handle}"
+       style="display:inline-block">
+    <a class="badge-base__link LI-simple-link" href="https://www.linkedin.com/in/${handle}?trk=profile-badge">${handle}</a>
+  </div>
+  <script src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
+</body>
+</html>`;
+}
+
+export async function extractBadgeFromIframe(frame) {
+  const badgeInner = await frame.evaluate(() => document.body.innerHTML);
+  const cssHrefs = await frame.evaluate(() =>
+    Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map((l) => l.href)
+  );
+  return { badgeInner, cssHrefs };
+}
+
+export function buildRenderHtml({ badgeInner, cssHrefs, pad }) {
+  const p = Math.max(0, Number(pad || 0));
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  ${cssHrefs.map((u) => `<link rel="stylesheet" href="${u}">`).join("\n")}
+  <style>
+    html, body { margin:0; padding:0; background:transparent; }
+    body { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:transparent; }
+    #root { display:inline-block; padding:${p}px; background:transparent; }
+    * { box-sizing:border-box; }
+  </style>
+</head>
+<body>
+  <div id="root">${badgeInner}</div>
+</body>
+</html>`;
+}
+
+export async function measureRoot(page) {
+  return await page.evaluate(() => {
+    const el = document.getElementById("root") || document.body;
+    const r = el.getBoundingClientRect();
+    return { w: r.width, h: r.height };
+  });
+}

package/src/renderer/playwright.mjs

@@ -0,0 +1,37 @@
+import { chromium } from "playwright";
+
+export async function withBrowser(fn) {
+  const browser = await chromium.launch({ args: ["--no-sandbox"] });
+  try {
+    return await fn(browser);
+  } finally {
+    await browser.close().catch(() => {});
+  }
+}
+
+export async function createContext(browser) {
+  return await browser.newContext({
+    userAgent:
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
+    locale: "en-US",
+    viewport: { width: 1400, height: 900 },
+    deviceScaleFactor: 2,
+  });
+}
+
+export async function warmUp(context) {
+  const page = await context.newPage();
+  try {
+    await page.goto("https://www.linkedin.com/", { waitUntil: "domcontentloaded", timeout: 25000 });
+    await page.waitForTimeout(800);
+  } catch {}
+  await page.close().catch(() => {});
+}
+
+export async function waitFonts(page) {
+  await page.evaluate(async () => {
+    try {
+      if (document.fonts?.ready) await document.fonts.ready;
+    } catch {}
+  });
+}

package/src/utils/args.mjs

@@ -0,0 +1,73 @@
+export const DEFAULTS = {
+  locale: "en_US",
+  orientation: "HORIZONTAL",
+  size: "large",
+  theme: "light",
+  pad: 20,
+  format: "svg",
+  out: "dist/linkedin-badge.svg",
+};
+
+export function parseArgs(argv) {
+  const m = {};
+  for (let i = 2; i < argv.length; i++) {
+    const a = argv[i];
+    if (!a.startsWith("--")) continue;
+    const key = a.slice(2);
+    const next = argv[i + 1];
+    if (!next || next.startsWith("--")) m[key] = true;
+    else {
+      m[key] = next;
+      i++;
+    }
+  }
+  return m;
+}
+
+export function normTheme(v) {
+  const t = String(v ?? DEFAULTS.theme).toLowerCase();
+  return t === "dark" ? "dark" : "light";
+}
+
+export function normSize(v) {
+  const s = String(v ?? DEFAULTS.size).toLowerCase();
+  if (s === "small") return "small";
+  if (s === "medium") return "medium";
+  return "large";
+}
+
+export function normOrientation(v) {
+  const o = String(v ?? DEFAULTS.orientation).toUpperCase();
+  return o === "VERTICAL" ? "VERTICAL" : "HORIZONTAL";
+}
+
+export function normLocale(v) {
+  return String(v ?? DEFAULTS.locale);
+}
+
+export function normFormat(v) {
+  const f = String(v ?? DEFAULTS.format).toLowerCase();
+  if (f === "pdf" || f === "svg" || f === "png" || f === "jpeg" || f === "jpg") return f === "jpg" ? "jpeg" : f;
+  return "svg";
+}
+
+export function toInt(v, def) {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : def;
+}
+
+export function ensureExt(out, format) {
+  const ext = `.${format}`;
+  const s = String(out || DEFAULTS.out);
+  const base = s.replace(/[?#].*$/, "");
+  const i = base.lastIndexOf(".");
+  if (i > -1 && i > base.lastIndexOf("/") && i > base.lastIndexOf("\\")) return s.slice(0, i) + ext;
+  return s.endsWith(".") ? `${s}${format}` : `${s}${ext}`;
+}
+
+export function usageAndExit() {
+  console.error(
+    "Usage: node src/cli.mjs --handle <vanity> [--format svg|pdf|png|jpeg] [--out dist/out.ext] [--theme light|dark] [--size small|medium|large] [--locale en_US] [--orientation HORIZONTAL|VERTICAL] [--pad 20]"
+  );
+  process.exit(2);
+}

package/src/utils/fs.mjs

@@ -0,0 +1,11 @@
+import fs from "fs/promises";
+import path from "path";
+
+export async function ensureDir(filePath) {
+  await fs.mkdir(path.dirname(filePath), { recursive: true });
+}
+
+export async function writeFileEnsured(filePath, data, encoding) {
+  await ensureDir(filePath);
+  await fs.writeFile(filePath, data, encoding);
+}

package/src/utils/log.mjs

@@ -0,0 +1,3 @@
+export function log(...args) {
+  console.log(new Date().toISOString(), "|", ...args);
+}