feat(frontend): add optional contribution graph to SVG embed card

Merged
HE
7mo ago
+463-189

Summary

  • Add GitHub-style contribution graph (잔디) to the SVG embed card, activated via ?graph=1 query parameter
  • The graph shows the last year of daily activity with GitHub's exact color palette
  • Card height extends from 186px to 306px when graph is enabled; no change when disabled

Usage

[![Tokscale Stats](https://tokscale.ai/api/embed/<username>/svg?graph=1)](https://tokscale.ai/u/<username>)

What Changed

Data layer (getUserEmbedStats.ts)

  • New EmbedContributionDay type ({ date: string, intensity: 0|1|2|3|4 })
  • New getUserEmbedContributions() — queries daily_breakdown table for last year, computes cost-based intensity quartiles, cached 60s via unstable_cache

Render layer (renderProfileEmbedSvg.ts)

  • contributions field added to RenderProfileEmbedOptions (optional, null by default)
  • renderContributionGrid() — builds full-year heatmap grid:
    • 9×9px cells with 2px gap, 52–53 week columns × 7 day rows
    • Day labels (Mon, Wed, Fri) on left, month labels on top
    • "Less □□□□□ More" legend at bottom right
    • GitHub-exact colors: dark (#161B22→#39D353), light (#EBEDF0→#216E39)
  • Graph ignored in compact mode — only available for full-width (680px) cards
  • Card height computed dynamically: 186 + 120 when graph is present

Route layer (route.ts)

  • New parseGraph() for ?graph=1|true
  • Contributions fetched only when graph param is present (zero overhead otherwise)

Tests

  • 7 new tests covering height extension, grid cells, day/month labels, legend, compact-mode exclusion, light theme colors, and null-contributions handling
  • All 21 tests pass (14 existing + 7 new)

Verified

  • Temporarily merged with #384 (visual redesign) — combined output renders correctly with both features, 22/22 tests pass
  • Merge reverted; this PR is clean against main

Summary by cubic

Adds an optional GitHub‑style contribution graph to the SVG embed card and refreshes the card design. Height grows only when the graph is enabled; no extra queries when off.

  • New Features

    • Enable via ?graph=1|true on /api/embed/[username]/svg
    • Shows last year of daily activity with GitHub’s colors (light/dark)
    • Only for full-width cards; compact mode ignores the graph
    • Card height +120px when enabled (186px → 306px)
    • Data fetched only when requested and cached for 60s

  • Refactors

    • Redesigned card with brand icon, subtle divider, and metric accent bars; updated theme colors
    • Token value text uses token-grad; rank colors updated; badge shows “RANK · TOKENS/COST”
    • Auto-scales large metric numbers to fit
    • Error SVG updated to match the new style