ux(badge): match card width and avoid double border

Made-with: Cursor

Author: dotsystemsdevs

src/app/api/badge/route.ts

@@ -34,19 +34,31 @@ async function fetchStats(username: string) {
   return { dead, struggling, alive, total: dead + struggling + alive }
 }
 
-function buildSvg(username: string, dead: number, struggling: number, alive: number, total: number) {
+function buildSvg(
+  username: string,
+  dead: number,
+  struggling: number,
+  alive: number,
+  total: number,
+  framed: boolean
+) {
   const BAR_X = 16, BAR_W = 408, BAR_Y = 76, BAR_H = 6
   const deadW       = total === 0 ? 0 : Math.round((dead       / total) * BAR_W)
   const strugglingW = total === 0 ? 0 : Math.round((struggling / total) * BAR_W)
   const aliveW      = total === 0 ? BAR_W : BAR_W - deadW - strugglingW
   const MONO = "'Courier New','Courier',ui-monospace,monospace"
 
+  const outerBg = framed ? `<rect width="440" height="96" fill="#FAF6EF"/>` : ''
+  const outerStroke = framed
+    ? `<rect x="1" y="1" width="438" height="94" fill="none" stroke="#1a1a1a" stroke-width="2"/>`
+    : ''
+
   return `<svg width="440" height="96" viewBox="0 0 440 96" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Graveyard report for @${username}">
   <defs>
     <clipPath id="bar-clip"><rect x="${BAR_X}" y="${BAR_Y}" width="${BAR_W}" height="${BAR_H}"/></clipPath>
   </defs>
-  <rect width="440" height="96" fill="#FAF6EF"/>
-  <rect x="1" y="1" width="438" height="94" fill="none" stroke="#1a1a1a" stroke-width="2"/>
+  ${outerBg}
+  ${outerStroke}
 
   <text x="16" y="28" font-family=${JSON.stringify(MONO)} font-size="9" font-weight="700" fill="#9a9288" letter-spacing="2.2">GITHUB REPO GRAVEYARD</text>
 
@@ -69,10 +81,13 @@ export async function GET(req: NextRequest) {
     return new NextResponse('invalid username', { status: 400 })
   }
 
+  const framedParam = req.nextUrl.searchParams.get('frame')
+  const framed = framedParam == null ? true : framedParam !== '0'
+
   const stats = await fetchStats(username)
   const { dead, struggling, alive, total } = stats ?? { dead: 0, struggling: 0, alive: 0, total: 0 }
 
-  const svg = buildSvg(username, dead, struggling, alive, total)
+  const svg = buildSvg(username, dead, struggling, alive, total, framed)
 
   return new NextResponse(svg, {
     headers: {

src/components/ReadmeBadge.tsx

@@ -16,7 +16,7 @@ export default function ReadmeBadge({ username }: Props) {
 
   // Version param forces GitHub's camo proxy to refetch when we redesign the badge.
   const BADGE_VERSION = '3'
-  const badgeUrl   = `https://commitmentissues.dev/api/badge?username=${username}&v=${BADGE_VERSION}`
+  const badgeUrl   = `https://commitmentissues.dev/api/badge?username=${username}&v=${BADGE_VERSION}&frame=1`
   const profileUrl = `https://commitmentissues.dev/user/${username}`
   const altText    = `Commitment Issues — @${username}'s graveyard`
   const markdown   = `[![${altText}](${badgeUrl})](${profileUrl})`
@@ -25,7 +25,7 @@ export default function ReadmeBadge({ username }: Props) {
     let cancelled = false
     setSvg(null)
     setSvgError(false)
-    fetch(`/api/badge?username=${encodeURIComponent(username)}&v=${BADGE_VERSION}`)
+    fetch(`/api/badge?username=${encodeURIComponent(username)}&v=${BADGE_VERSION}&frame=0`)
       .then(r => {
         if (!r.ok) throw new Error('badge fetch failed')
         return r.text()
@@ -47,7 +47,7 @@ export default function ReadmeBadge({ username }: Props) {
   }
 
   return (
-    <div className="readme-badge-block" style={{ width: '100%', marginBottom: '22px' }}>
+    <div className="readme-badge-block record-card" style={{ width: '100%', marginBottom: '22px', border: '2px solid #1a1a1a' }}>
       {/* Badge preview — the SVG already has its own border; keep the wrapper borderless */}
       <div className="readme-badge-preview" style={{ width: '100%', aspectRatio: '440 / 96', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         {svg ? (
@@ -65,8 +65,7 @@ export default function ReadmeBadge({ username }: Props) {
             style={{
               width: '100%',
               height: '100%',
-              border: '2px solid #1a1a1a',
-              background: 'var(--c-bg)',
+              background: 'transparent',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',