Skip to content

Commit f9faeb4

Browse files
fix(user): prevent badge alt-text spill
Fetch and render the graveyard badge SVG inline with a small fallback state, so the UI never shows the raw alt text when the image fails. Made-with: Cursor
1 parent c3c089d commit f9faeb4

1 file changed

Lines changed: 21 additions & 1 deletion

File tree

src/components/ReadmeBadge.tsx

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { useState } from 'react'
3+
import { useEffect, useState } from 'react'
44
import { copyText, promptCopy } from '@/lib/clipboard'
55

66
const MONO = `var(--font-courier), system-ui, sans-serif`
@@ -11,6 +11,8 @@ interface Props {
1111

1212
export default function ReadmeBadge({ username }: Props) {
1313
const [copied, setCopied] = useState(false)
14+
const [svg, setSvg] = useState<string | null>(null)
15+
const [svgError, setSvgError] = useState(false)
1416

1517
// Version param forces GitHub's camo proxy to refetch when we redesign the badge.
1618
const BADGE_VERSION = '3'
@@ -19,6 +21,24 @@ export default function ReadmeBadge({ username }: Props) {
1921
const altText = `Commitment Issues — @${username}'s graveyard`
2022
const markdown = `[![${altText}](${badgeUrl})](${profileUrl})`
2123

24+
useEffect(() => {
25+
let cancelled = false
26+
setSvg(null)
27+
setSvgError(false)
28+
fetch(`/api/badge?username=${encodeURIComponent(username)}&v=${BADGE_VERSION}`)
29+
.then(r => {
30+
if (!r.ok) throw new Error('badge fetch failed')
31+
return r.text()
32+
})
33+
.then(text => {
34+
if (!cancelled) setSvg(text)
35+
})
36+
.catch(() => {
37+
if (!cancelled) setSvgError(true)
38+
})
39+
return () => { cancelled = true }
40+
}, [username, BADGE_VERSION])
41+
2242
async function handleCopy() {
2343
const ok = await copyText(markdown)
2444
if (!ok) promptCopy(markdown, 'Copy this README badge markdown')

0 commit comments

Comments
 (0)