← 制作に戻る ~/work/vogle-widgets

vogle widgets

production

GitHubプロフィール向けにライブの「言語スタック」・WakaTimeカードを描画する自前運用API — 自分のREADMEを生き生きとさせた仕掛け。

TypeScriptNode

// インパクト

  • Edge-served from Cloudflare with cached renders in ~30ms
  • Zero runtime dependencies on the embedding page
  • Powers the live activity cards on this very site

// overview

2020 — now · Design · build · operate

vogle widgets is a small self-hosted service that renders live developer cards — a language-stack breakdown and a WakaTime summary — as standalone SVG. Any page can embed them with a single <img> tag, and they re-render server-side on each request so the numbers are always current.

The interesting constraint was making rich, themeable cards that stay fast and dependency-free for the page that embeds them. The result is the same engine that draws the GitHub and WakaTime cards on this site.