@shiinasaku/github-card 2.0.0 → 4.1.0

package/src/card.ts

@@ -1,4 +1,12 @@
-import { resolveColors, kFormat, escapeXml, icon, wrapText, FONT_FACE, FONT_FAMILY } from "./utils";
+import {
+  resolveColors,
+  kFormat,
+  escapeXml,
+  icon,
+  wrapText,
+  FONT_FAMILY,
+  resolveTw,
+} from "./utils/index";
 import type { UserProfile, UserStats, LanguageStat } from "./types";
 
 export type CardOpts = {
@@ -11,127 +19,640 @@ export type CardOpts = {
   hide_border?: boolean;
   compact?: boolean;
   hide?: string[];
+  hide_langs?: string[];
+  show_langs?: string[];
+  animate?: boolean;
 };
 
+const STAT_DEFS = [
+  { key: "stars", iconName: "star" as const, label: "Stars" },
+  { key: "commits", iconName: "commit" as const, label: "Commits" },
+  { key: "issues", iconName: "issue" as const, label: "Issues" },
+  { key: "repos", iconName: "repo" as const, label: "Repos" },
+  { key: "prs", iconName: "pr" as const, label: "PRs" },
+] as const;
+
+type LangVisual = {
+  name: string;
+  color: string;
+  size: number;
+};
+
+/* ── helpers ───────────────────────────────────────────────── */
+
+function raw(token: string): string {
+  const m = resolveTw(token, "fill").match(/fill="([^"]+)"/);
+  return m?.[1] ?? token;
+}
+
+function clamp(s: string, n: number): string {
+  return s.length <= n ? s : s.slice(0, n - 1).trimEnd() + "\u2026";
+}
+
+function buildLanguageSegments(
+  langs: LanguageStat[],
+  totalSize: number,
+  contentW: number,
+): LangVisual[] {
+  const minSegmentW = 6;
+  const visible: LangVisual[] = [];
+  let tinySize = 0;
+
+  for (const lang of langs) {
+    const segmentW = (lang.size / totalSize) * contentW;
+    if (segmentW < minSegmentW) {
+      tinySize += lang.size;
+      continue;
+    }
+
+    visible.push(lang);
+  }
+
+  if (tinySize > 0) {
+    visible.push({ name: "Other", color: "#6b7280", size: tinySize });
+  }
+
+  return visible.length > 0 ? visible : langs;
+}
+
+/* ── renderer ──────────────────────────────────────────────── */
+
 export function renderCard(
   user: UserProfile,
   stats: UserStats,
   langs: LanguageStat[],
   opts: CardOpts = {},
 ): string {
+  const hidden = new Set((opts.hide ?? []).map((k) => k.toLowerCase()));
   const c = resolveColors(opts);
-  const hideBorder = opts.hide_border ?? false;
   const compact = opts.compact ?? false;
+  const animate = opts.animate ?? false;
+  const hideBorder = opts.hide_border ?? false;
+  const hideLangs = new Set((opts.hide_langs ?? []).map((k) => k.toLowerCase().trim()));
+  const showLangs = new Set((opts.show_langs ?? []).map((k) => k.toLowerCase().trim()));
+
+  const bgColor = raw(c.bg);
+  const titleColor = raw(c.title);
+  const textColor = raw(c.text);
+  const iconColor = raw(c.icon);
+  const borderColor = raw(c.border);
+
+  /* ── font (XML-safe) ──────────────────────────────────────── */
+  const fontFamily = FONT_FAMILY.replace(/"/g, "&apos;");
+
+  /* ── profile text setup ───────────────────────────────────── */
+  const displayName = user.name || user.login;
+  const nameEsc = escapeXml(clamp(displayName, 28));
+  const loginEsc = escapeXml(clamp(user.login, 24));
+  const pronouns = !compact && user.pronouns ? escapeXml(clamp(user.pronouns, 16)) : "";
+  const bioRaw = !compact && user.bio ? user.bio : "";
+  const bioLines = bioRaw ? wrapText(bioRaw, 44, 2) : [];
+  const twitter = !compact && user.twitter ? escapeXml(clamp(user.twitter, 22)) : "";
+  const avatar = (user.avatarUrl || "").replace(/&/g, "&amp;");
+
+  const visible = STAT_DEFS.filter((d) => !hidden.has(d.key));
+  const activeLangsList = langs.filter((l) => {
+    const name = l.name.toLowerCase().trim();
+    if (showLangs.size > 0 && !showLangs.has(name)) return false;
+    if (hideLangs.has(name)) return false;
+    return true;
+  });
+
+  /* ── dimensions (dynamic width) ───────────────────────────── */
+  const PX = 25; // horizontal padding
+  const PY = 25; // top padding
+  const avatarSize = 64;
+  const avatarR = avatarSize / 2;
+
+  // Estimate text width
+  const metaLen = user.login.length + (pronouns ? pronouns.length + 3 : 0);
+  const maxBioLen = bioLines.length ? Math.max(...bioLines.map((l) => l.length)) : 0;
+  const profileTextW = Math.max(
+    displayName.length * 11, // ~11px per bold char
+    metaLen * 7.5, // ~7.5px per medium char
+    maxBioLen * 6.5, // ~6.5px per small char
+    twitter.length * 7 + 20,
+  );
+
+  const profileW = PX + avatarSize + 16 + profileTextW + PX;
+  const statsW = visible.length > 0 ? visible.length * 85 + PX * 2 : 0;
+  const langsW = activeLangsList.length > 0 ? 300 : 0; // sensible minimum for languages
+
+  const W = Math.round(Math.min(540, Math.max(340, profileW, statsW, langsW)));
+  const contentW = W - PX * 2;
+
+  /* ── profile section ──────────────────────────────────────── */
+  const infoX = PX + avatarSize + 14;
+  const nameY = PY + 22;
+  const loginY = nameY + 18;
+  const bioStartY = loginY + 16;
+  const twitterY = bioStartY + bioLines.length * 14 + (bioLines.length ? 4 : 0);
+
+  let profileH = loginY + 10 - PY;
+  if (bioLines.length) profileH = bioStartY + bioLines.length * 14 - PY;
+  if (twitter) profileH = twitterY + 10 - PY;
+  profileH = Math.max(profileH, avatarSize + 4);
+
+  /* ── stats section ────────────────────────────────────────── */
+  const statsY = PY + profileH + 14;
+  const statW = visible.length > 0 ? contentW / visible.length : 0;
+  const statsH = visible.length > 0 ? 50 : 0;
+
+  /* ── languages section ────────────────────────────────────── */
+  const totalSize = activeLangsList.reduce((s, l) => s + l.size, 0) || 1;
+  const sorted = [...activeLangsList].sort((a, b) => b.size - a.size);
+  const visualLangs = buildLanguageSegments(sorted, totalSize, contentW);
+  const barY = statsY + statsH + (statsH ? 16 : 12);
+  const barH = 10;
+
+  const maxLegend = compact ? 0 : 6;
+  const legendLangs = visualLangs.slice(0, maxLegend);
+  const otherSize = visualLangs.slice(maxLegend).reduce((s, l) => s + l.size, 0);
+
+  const legendY = barY + barH + 12;
+  const legendRowH = 16;
+  const legendCols = 3;
+  const legendColW = contentW / legendCols;
+  const legendItems: { name: string; color: string; pct: string }[] = legendLangs.map((l) => ({
+    name: clamp(l.name, 14),
+    color: l.color,
+    pct: ((l.size / totalSize) * 100).toFixed(1),
+  }));
+  if (otherSize > 0 && legendItems.length > 0) {
+    const existingOther = legendItems.find((item) => item.name === "Other");
+    if (existingOther) {
+      existingOther.pct = (
+        (((Number(existingOther.pct) / 100) * totalSize + otherSize) / totalSize) *
+        100
+      ).toFixed(1);
+    } else {
+      legendItems.push({
+        name: "Other",
+        color: "#6b7280",
+        pct: ((otherSize / totalSize) * 100).toFixed(1),
+      });
+    }
+  }
+  const legendRows = compact ? 0 : Math.ceil(legendItems.length / legendCols);
+
+  const hasLangs = activeLangsList.length > 0;
+  const langSectionH = hasLangs ? barH + 12 + legendRows * legendRowH + 8 : 0;
+
+  /* ── final height ─────────────────────────────────────────── */
+  const H = barY + (hasLangs ? langSectionH : 0) + 12 + (hasLangs ? 0 : 4);
+
+  /* ── build SVG ────────────────────────────────────────────── */
+  const parts: string[] = [];
+
+  // root
+  parts.push(
+    '<svg width="' +
+      W +
+      '" height="' +
+      H +
+      '" viewBox="0 0 ' +
+      W +
+      " " +
+      H +
+      '" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="cardTitle cardDesc">',
+  );
+
+  // accessibility
+  parts.push('<title id="cardTitle">' + escapeXml(displayName + "'s GitHub Stats") + "</title>");
+  parts.push(
+    '<desc id="cardDesc">GitHub profile card for ' +
+      escapeXml(displayName) +
+      " with " +
+      kFormat(stats.stars) +
+      " stars, " +
+      kFormat(stats.commits) +
+      " commits, and " +
+      activeLangsList.length +
+      " highlighted languages.</desc>",
+  );
+
+  // ── <style> block ──────────────────────────────────────────
+  const cssLines: string[] = [];
+  cssLines.push("* { font-family: " + fontFamily + "; }");
+  cssLines.push(".header { font-size: 18px; font-weight: 700; fill: " + titleColor + "; }");
+  cssLines.push(".stat { font-size: 14px; font-weight: 600; fill: " + textColor + "; }");
+  cssLines.push(".bold { font-weight: 700; }");
+  cssLines.push(".icon { fill: " + iconColor + "; }");
+  cssLines.push(".lang-name { font-size: 11px; fill: " + textColor + "; opacity: 0.8; }");
+  cssLines.push(".lang-progress { fill: " + textColor + "; opacity: 0.08; }");
+  cssLines.push(
+    ".meta { font-size: 12px; font-weight: 500; fill: " + textColor + "; opacity: 0.7; }",
+  );
+  cssLines.push(
+    ".bio { font-size: 11px; font-weight: 400; fill: " + textColor + "; opacity: 0.68; }",
+  );
+  cssLines.push(
+    ".stat-label { font-size: 9px; font-weight: 600; fill: " +
+      textColor +
+      "; opacity: 0.5; letter-spacing: 0.08em; }",
+  );
+  cssLines.push(".stat-value { font-size: 15px; font-weight: 800; fill: " + textColor + "; }");
+  cssLines.push(
+    ".twitter-text { font-size: 11px; font-weight: 500; fill: " + textColor + "; opacity: 0.65; }",
+  );
+
+  if (animate) {
+    cssLines.push("@keyframes fadeInAnimation { from { opacity: 0; } to { opacity: 1; } }");
+    cssLines.push(".stagger { opacity: 0; animation: fadeInAnimation 0.3s ease-in-out forwards; }");
+  }
+
+  parts.push("<style>" + cssLines.join(" ") + "</style>");
+
+  // ── <defs> ─────────────────────────────────────────────────
+  parts.push("<defs>");
+  parts.push(
+    '<clipPath id="av"><circle cx="' +
+      (PX + avatarR) +
+      '" cy="' +
+      (PY + avatarR) +
+      '" r="' +
+      avatarR +
+      '"/></clipPath>',
+  );
+  parts.push(
+    '<radialGradient id="gl" cx="12%" cy="15%" r="65%">' +
+      '<stop offset="0%" stop-color="' +
+      iconColor +
+      '" stop-opacity="0.08"/>' +
+      '<stop offset="100%" stop-color="' +
+      iconColor +
+      '" stop-opacity="0"/>' +
+      "</radialGradient>",
+  );
+  parts.push(
+    '<radialGradient id="gl2" cx="92%" cy="95%" r="55%">' +
+      '<stop offset="0%" stop-color="' +
+      titleColor +
+      '" stop-opacity="0.035"/>' +
+      '<stop offset="100%" stop-color="' +
+      titleColor +
+      '" stop-opacity="0"/>' +
+      "</radialGradient>",
+  );
+  parts.push(
+    '<linearGradient id="ring" x1="0" y1="0" x2="1" y2="1">' +
+      '<stop offset="0%" stop-color="' +
+      titleColor +
+      '"/>' +
+      '<stop offset="100%" stop-color="' +
+      iconColor +
+      '"/>' +
+      "</linearGradient>",
+  );
+  parts.push(
+    '<linearGradient id="card-bg" x1="0" y1="0" x2="' +
+      W +
+      '" y2="' +
+      H +
+      '" gradientUnits="userSpaceOnUse">' +
+      '<stop offset="0%" stop-color="' +
+      bgColor +
+      '"/>' +
+      '<stop offset="82%" stop-color="' +
+      bgColor +
+      '"/>' +
+      '<stop offset="100%" stop-color="' +
+      titleColor +
+      '" stop-opacity="0.04"/>' +
+      "</linearGradient>",
+  );
+  parts.push(
+    '<linearGradient id="rim" x1="0" y1="0" x2="' +
+      W +
+      '" y2="0" gradientUnits="userSpaceOnUse">' +
+      '<stop offset="0%" stop-color="' +
+      iconColor +
+      '" stop-opacity="0"/>' +
+      '<stop offset="45%" stop-color="' +
+      iconColor +
+      '" stop-opacity="0.28"/>' +
+      '<stop offset="100%" stop-color="' +
+      iconColor +
+      '" stop-opacity="0"/>' +
+      "</linearGradient>",
+  );
+  parts.push("</defs>");
+
+  // ── background rect (inset 0.5px for clean border) ─────────
+  parts.push(
+    '<rect x="0.5" y="0.5" width="' +
+      (W - 1) +
+      '" height="' +
+      (H - 1) +
+      '" rx="10" fill="' +
+      "url(#card-bg)" +
+      '" stroke-opacity="1"/>',
+  );
+
+  // glow overlays (icon tint top-left, title tint bottom-right)
+  parts.push(
+    '<rect x="0.5" y="0.5" width="' +
+      (W - 1) +
+      '" height="' +
+      (H - 1) +
+      '" rx="10" fill="url(#gl)"/>',
+  );
+  parts.push(
+    '<rect x="0.5" y="0.5" width="' +
+      (W - 1) +
+      '" height="' +
+      (H - 1) +
+      '" rx="10" fill="url(#gl2)"/>',
+  );
+  parts.push(
+    '<line x1="' +
+      PX +
+      '" y1="1.5" x2="' +
+      (W - PX) +
+      '" y2="1.5" stroke="url(#rim)" stroke-width="1"/>',
+  );
+
+  // border
+  if (!hideBorder) {
+    parts.push(
+      '<rect x="0.5" y="0.5" width="' +
+        (W - 1) +
+        '" height="' +
+        (H - 1) +
+        '" rx="10" fill="none" stroke="' +
+        borderColor +
+        '" stroke-opacity="0.5"/>',
+    );
+  }
+
+  // ── avatar ─────────────────────────────────────────────────
+  parts.push(
+    '<g transform="translate(0,0)">' +
+      '<circle cx="' +
+      (PX + avatarR + 1) +
+      '" cy="' +
+      (PY + avatarR + 1) +
+      '" r="' +
+      (avatarR + 3) +
+      '" fill="' +
+      titleColor +
+      '" opacity="0.08"/>' +
+      '<image href="' +
+      avatar +
+      '" x="' +
+      PX +
+      '" y="' +
+      PY +
+      '" width="' +
+      avatarSize +
+      '" height="' +
+      avatarSize +
+      '" clip-path="url(#av)" preserveAspectRatio="xMidYMid slice"/>' +
+      '<circle cx="' +
+      (PX + avatarR) +
+      '" cy="' +
+      (PY + avatarR) +
+      '" r="' +
+      (avatarR + 1.5) +
+      '" fill="none" stroke="url(#ring)" stroke-opacity="0.55" stroke-width="1.5"/>' +
+      "</g>",
+  );
+
+  // ── profile text ───────────────────────────────────────────
+  parts.push('<g transform="translate(0,0)">');
+
+  // name
+  parts.push('<text x="' + infoX + '" y="' + nameY + '" class="header">' + nameEsc + "</text>");
+
+  // username + pronouns
+  const metaStr = pronouns ? "@" + loginEsc + " \u00b7 " + pronouns : "@" + loginEsc;
+  parts.push('<text x="' + infoX + '" y="' + loginY + '" class="meta">' + metaStr + "</text>");
+
+  // bio
+  for (let i = 0; i < bioLines.length; i++) {
+    parts.push(
+      '<text x="' +
+        infoX +
+        '" y="' +
+        (bioStartY + i * 14) +
+        '" class="bio">' +
+        escapeXml(bioLines[i]!.trim()) +
+        "</text>",
+    );
+  }
+
+  // twitter
+  if (twitter) {
+    parts.push(
+      '<g transform="translate(' +
+        infoX +
+        "," +
+        (twitterY - 9) +
+        ')">' +
+        icon("x", textColor, 11) +
+        '<text x="15" y="9" class="twitter-text">@' +
+        twitter +
+        "</text></g>",
+    );
+  }
+
+  parts.push("</g>");
+
+  // ── stats row ──────────────────────────────────────────────
+  if (visible.length > 0) {
+    parts.push(
+      '<rect x="' +
+        PX +
+        '" y="' +
+        (statsY - 8) +
+        '" width="' +
+        contentW +
+        '" height="' +
+        (statsH + 8) +
+        '" rx="8" fill="' +
+        textColor +
+        '" opacity="0.035"/>',
+    );
+
+    parts.push('<g transform="translate(0,0)">');
+
+    for (let i = 0; i < visible.length; i++) {
+      const d = visible[i]!;
+      const val = stats[d.key as keyof UserStats];
+      const cx = PX + statW * i + statW / 2;
+      const cellX = PX + statW * i + 4;
+      const iy = statsY + 2;
+
+      const staggerStyle = animate ? ' style="animation-delay: ' + (i + 3) * 150 + 'ms"' : "";
+      const staggerClass = animate ? " stagger" : "";
+
+      parts.push(
+        '<rect x="' +
+          cellX +
+          '" y="' +
+          (statsY - 4) +
+          '" width="' +
+          Math.max(0, statW - 8) +
+          '" height="' +
+          (statsH - 2) +
+          '" rx="8" fill="' +
+          textColor +
+          '" opacity="0.028"/>',
+      );
+
+      // each stat wrapped in its own <g>
+      parts.push(
+        '<g transform="translate(' +
+          cx +
+          "," +
+          iy +
+          ')" class="stat' +
+          staggerClass +
+          '"' +
+          staggerStyle +
+          ">",
+      );
+
+      // value
+      parts.push(
+        '<text x="0" y="26" class="stat-value" text-anchor="middle">' + kFormat(val) + "</text>",
+      );
+
+      // label with tiny inline icon, centered as a unit
+      const labelText = d.label.toUpperCase();
+      const labelW = labelText.length * 6.8;
+      const rowW = 10 + 4 + labelW;
+      parts.push(
+        '<g transform="translate(' +
+          -rowW / 2 +
+          ',31.5)">' +
+          icon(d.iconName, iconColor, 10) +
+          "</g>",
+      );
+      parts.push(
+        '<text x="' + (-rowW / 2 + 14) + '" y="40" class="stat-label">' + labelText + "</text>",
+      );
+
+      parts.push("</g>");
+    }
+
+    parts.push("</g>");
+  }
+
+  // ── languages ──────────────────────────────────────────────
+  if (hasLangs) {
+    // separator
+    parts.push(
+      '<line x1="' +
+        PX +
+        '" y1="' +
+        (barY - 8) +
+        '" x2="' +
+        (W - PX) +
+        '" y2="' +
+        (barY - 8) +
+        '" stroke="' +
+        textColor +
+        '" stroke-opacity="0.08"/>',
+    );
+
+    parts.push('<g transform="translate(0,0)">');
+
+    // track background & clip path for rounded corners
+    parts.push(
+      '<clipPath id="lang-clip"><rect x="' +
+        PX +
+        '" y="' +
+        barY +
+        '" width="' +
+        (animate ? "0" : contentW) +
+        '" height="' +
+        barH +
+        '" rx="5">' +
+        (animate
+          ? '<animate attributeName="width" from="0" to="' +
+            contentW +
+            '" dur="0.6s" fill="freeze"/>'
+          : "") +
+        "</rect></clipPath>",
+    );
+    parts.push(
+      '<rect x="' +
+        PX +
+        '" y="' +
+        barY +
+        '" width="' +
+        contentW +
+        '" height="' +
+        barH +
+        '" rx="5" class="lang-progress"/>',
+    );
+
+    parts.push('<g clip-path="url(#lang-clip)">');
+
+    const activeLangs = visualLangs;
+    let off = 0;
+    for (let i = 0; i < activeLangs.length; i++) {
+      const lang = activeLangs[i]!;
+      const pct = ((lang.size / totalSize) * 100).toFixed(1);
+      let w = i === activeLangs.length - 1 ? contentW - off : (lang.size / totalSize) * contentW;
+      if (w < 0) w = 0;
+      const x = PX + off;
+
+      const tooltip = compact ? "" : "<title>" + escapeXml(lang.name) + " " + pct + "%</title>";
+
+      parts.push(
+        '<rect x="' +
+          x +
+          '" y="' +
+          barY +
+          '" width="' +
+          w +
+          '" height="' +
+          barH +
+          '" fill="' +
+          lang.color +
+          '">' +
+          tooltip +
+          "</rect>",
+      );
+      off += w;
+    }
+
+    parts.push("</g>");
+
+    // legend (3-column grid)
+    for (let i = 0; i < legendItems.length; i++) {
+      const item = legendItems[i]!;
+      const col = i % legendCols;
+      const row = Math.floor(i / legendCols);
+      const lx = PX + col * legendColW;
+      const ly = legendY + row * legendRowH;
+
+      const staggerStyle = animate ? ' style="animation-delay: ' + (i + 3) * 150 + 'ms"' : "";
+      const staggerClass = animate ? ' class="stagger"' : "";
+
+      parts.push("<g" + staggerClass + staggerStyle + ">");
+      parts.push('<circle cx="' + (lx + 5) + '" cy="' + ly + '" r="4" fill="' + item.color + '"/>');
+      parts.push(
+        '<text x="' +
+          (lx + 14) +
+          '" y="' +
+          (ly + 4) +
+          '" class="lang-name" font-weight="500">' +
+          escapeXml(item.name) +
+          " " +
+          item.pct +
+          "%</text>",
+      );
+      parts.push("</g>");
+    }
+
+    parts.push("</g>");
+  }
+
+  // close
+  parts.push("</svg>");
 
-  const name = escapeXml(user.name || user.login);
-  const uname = escapeXml(user.login);
-  const bioRaw = !compact && user.bio ? escapeXml(user.bio) : "";
-  const bioLines = bioRaw ? wrapText(bioRaw, 42, 2) : [];
-  const pronouns = !compact && user.pronouns ? escapeXml(user.pronouns) : "";
-  const avatar = user.avatarUrl.replace(/&/g, "&amp;");
-  const twitter = !compact && user.twitter ? escapeXml(user.twitter) : "";
-  const hiddenStats = new Set((opts.hide || []).map((key) => key.toLowerCase()));
-  const svgTitle = `${name}'s GitHub Stats`;
-
-  const W = 500;
-  const H = 200;
-  const P = 22;
-  const avatarSize = 72;
-  const barWidth = W - P * 2;
-  const barY = H - 40;
-  const labelY = H - 16;
-  const infoX = P + avatarSize + 16;
-
-  const totalSize = langs.reduce((sum, l) => sum + l.size, 0) || 1;
-  let offset = 0;
-  const langRects = langs
-    .map((lang) => {
-      const w = (lang.size / totalSize) * barWidth;
-      const r = `<rect x="${P + offset}" y="${barY}" width="${w}" height="8" fill="${lang.color}"/>`;
-      offset += w;
-      return r;
-    })
-    .join("");
-
-  const labelSpacing = compact ? 0 : Math.floor(barWidth / Math.max(langs.length, 1));
-  const langLabels = compact
-    ? ""
-    : langs
-        .map((lang, i) => {
-          const pct = ((lang.size / totalSize) * 100).toFixed(0);
-          return `<circle cx="${P + i * labelSpacing + 5}" cy="${labelY}" r="4" fill="${lang.color}"/><text x="${P + i * labelSpacing + 13}" y="${labelY + 4}" class="lang">${lang.name} ${pct}%</text>`;
-        })
-        .join("");
-
-  const nameY = P + 22;
-  const usernameY = nameY + 18;
-  const bioY = usernameY + 14;
-  const twitterY = bioLines.length ? bioY + 28 : usernameY + 16;
-
-  const headerY = P + avatarSize + 12;
-  const statLabelY = 28;
-
-  const visibleStats = [
-    { key: "stars", iconName: "star" as const, label: "Stars", value: stats.stars },
-    { key: "commits", iconName: "commit" as const, label: "Commits", value: stats.commits },
-    { key: "issues", iconName: "issue" as const, label: "Issues", value: stats.issues },
-    { key: "repos", iconName: "repo" as const, label: "Repos", value: stats.repos },
-    { key: "prs", iconName: "pr" as const, label: "PRs", value: stats.prs },
-  ].filter((stat) => !hiddenStats.has(stat.key));
-
-  const statsMarkup = visibleStats
-    .map(
-      (stat, index) => `<g transform="translate(${index * 100},0)">
-        ${icon(stat.iconName, c.icon, 16)}
-        <text x="20" y="12" class="stat">${kFormat(stat.value)}</text>
-        <text x="0" y="${statLabelY}" class="stat-label">${stat.label}</text>
-      </g>`,
-    )
-    .join("");
-
-  return `<svg width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc" shape-rendering="auto" text-rendering="optimizeLegibility" image-rendering="optimizeQuality">
-    <title id="title">${svgTitle}</title>
-    <desc id="desc">GitHub stats card for ${name} including stars, commits, issues, repositories, pull requests, and top languages.</desc>
-    <defs>
-      <clipPath id="a"><circle cx="${P + avatarSize / 2}" cy="${P + avatarSize / 2}" r="${avatarSize / 2}"/></clipPath>
-      <clipPath id="b"><rect x="${P}" y="${barY}" width="${barWidth}" height="8" rx="4"/></clipPath>
-      <filter id="shadow" x="-10%" y="-10%" width="130%" height="140%">
-        <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
-        <feOffset dx="0" dy="1" result="offsetblur"/>
-        <feComponentTransfer>
-          <feFuncA type="linear" slope="0.15"/>
-        </feComponentTransfer>
-        <feMerge>
-          <feMergeNode/>
-          <feMergeNode in="SourceGraphic"/>
-        </feMerge>
-      </filter>
-    </defs>
-    <style>
-      ${FONT_FACE}
-      *{font-family:${FONT_FAMILY}}
-      .bg{fill:#${c.bg}}
-      .title{font-size:18px;font-weight:700;fill:#${c.title}}
-      .user{font-size:12px;fill:#${c.text};opacity:.7}
-      ${compact ? "" : `.bio{font-size:11px;fill:#${c.text};opacity:.65}.tw{font-size:11px;fill:#${c.text};opacity:.7}.lang{font-size:10px;fill:#${c.text}}`}
-      .stat{font-size:14px;font-weight:700;fill:#${c.text};text-anchor:start}
-      .stat-label{font-size:9px;font-weight:600;fill:#${c.text};opacity:.55;text-transform:uppercase;letter-spacing:.6px;text-anchor:start}
-      .sec{font-size:9px;font-weight:600;fill:#${c.text};opacity:.5;text-transform:uppercase;letter-spacing:.6px}
-    </style>
-    <rect class="bg" width="${W}" height="${H}" rx="10" stroke="${hideBorder ? "none" : `#${c.border}`}" stroke-width="1.5" filter="url(#shadow)"/>
-    <circle cx="${P + avatarSize / 2}" cy="${P + avatarSize / 2}" r="${avatarSize / 2 + 2}" fill="none" stroke="#${c.border}" stroke-width="1" opacity=".6"/>
-    <image href="${avatar}" x="${P}" y="${P}" width="${avatarSize}" height="${avatarSize}" clip-path="url(#a)" filter="url(#shadow)" preserveAspectRatio="xMidYMid slice"/>
-    <text x="${infoX}" y="${nameY}" class="title">${name}</text>
-    <text x="${infoX}" y="${usernameY}" class="user">@${uname}${pronouns ? ` · ${pronouns}` : ""}</text>
-    ${!compact && bioLines[0] ? `<text x="${infoX}" y="${bioY}" class="bio">${bioLines[0]}</text>` : ""}
-    ${!compact && bioLines[1] ? `<text x="${infoX}" y="${bioY + 12}" class="bio">${bioLines[1]}</text>` : ""}
-    ${!compact && twitter ? `<g transform="translate(${infoX},${twitterY - 9})">${icon("x", c.icon, 11)}<text x="14" y="9" class="tw">@${twitter}</text></g>` : ""}
-    <g transform="translate(${P},${headerY})">
-      ${statsMarkup}
-    </g>
-    <text x="${P}" y="${barY - 8}" class="sec">Top Languages</text>
-    <rect x="${P}" y="${barY}" width="${barWidth}" height="8" rx="4" fill="#${c.text}" opacity=".1"/>
-    <g clip-path="url(#b)">${langRects}</g>
-    ${langLabels}
-  </svg>`;
+  return parts.join("");
 }