refactor(frontend): redesign SVG embed card for cleaner visual

Merged
HE
7mo ago
+463-189

Summary

  • Redesign the profile embed SVG card with a cleaner, GitHub Primer-inspired visual language
  • Fix token number overflow by auto-scaling font size for long values
  • Replace "README EMBED" eyebrow with a compact bar-chart brand icon + "Tokscale Stats"

What Changed

Visual

  • Flat card layout — removed nested shell/header boxes in favor of a single gradient background with subtle border, reducing visual clutter
  • Color-coded metric accents — each metric card gets a left accent bar (blue for tokens, green for cost, amber for rank) that fades downward, giving each stat a distinct identity
  • GitHub Primer palette — switched to higher-contrast, more saturated colors (#58A6FF, #3FB950, #E3B341 dark / #0969DA, #1A7F37, #9A6700 light)
  • Gradient divider — replaced the heavy rail line with a subtle center-fade divider between header and metrics
  • Rank-aware accent — the rank card's accent bar and value color dynamically match medal color (gold #1, silver #2, bronze #3)

Functional

  • fitValueFontSize() — new auto-scaling function that shrinks oversized metric values (e.g. "15,726,314,363" renders at 20px instead of overflowing at 28px)
  • Floating-point cleanup — Math.round() on computed display-name x-position to avoid ugly decimals in SVG attributes
  • Removed unused import — formatCompact was imported but never directly referenced

Tests

  • Updated all assertions to match the new gradient IDs, color values, and card structure
  • Added new test: auto-scales font size for very long token values
  • Restored existing test comment explaining raw-vs-escaped width measurement behavior

Full Changelog: renderProfileEmbedSvg.ts + renderProfileEmbedSvg.test.ts — no other files touched.

Summary by cubic

Redesigned the profile embed SVG for a cleaner, Primer-inspired look and added an optional contributions graph. Long metric values now auto-fit, and the error card matches the new style.

  • New Features

    • Brand header with a bar-chart icon + “Tokscale Stats” and a compact rank badge.
    • Metric cards with left accent bars and rank-aware colors; tokens use token-grad, cost is green; values auto-fit to prevent overflow.
    • Optional GitHub-style contribution graph via graph=1/true: theme-aware cells with day/month labels; increases card height; ignored in compact mode.

  • Refactors

    • Simplified to a single gradient background with a subtle divider and updated Primer palette.
    • Updated theme shape and IDs (bg, glow, divider-grad, acc-*, error err-bg); removed formatCompact; rounded display-name x-position.
    • API reads graph from the query and includes contributions from getUserEmbedContributions (built from dailyBreakdown + submissions, intensity 0–4, cached 60s). Tests updated for the new structure/colors, long-value scaling, and graph rendering.