Badge

制作の動機

shields.io の存在は知っていましたが、いつサービス終了するかわからない外部サービスに依存したくありませんでした。 過去に Next.js の @vercel/og が Satori を使っていたことを思い出し、「自分も Satori で作ってみよう」と動機づけられました。

コメント

最小のコードで最も頻繁に使われるツールです。 README 1 行のバッジが毎日表示される状況で、外部サービスに依存せず自身でコントロールしています。

主な特徴

• 01Satori (JSX → SVG) + @resvg/resvg-wasm (SVG → PNG) パイプラインを Hono 上に自前で組立
• 02Vercel 関数で wasm ファイルパスを直接掴んで初期化する環境分岐処理
• 03URL クエリだけで全てカスタマイズ: Tailwind クラスを URL にそのまま渡せる (tw-to-css)
• 04内蔵アイコンスラッグ + 任意の favicon を読込 (icojs で .ico 動的デコード)
• 05韓国語フォント (Noto Sans KR) 内蔵で韓国語バッジ生成可