fix(user): render graveyard badge inline

Avoid showing raw alt text when the badge image fails to load, and improve wrapping for the copy row.

Made-with: Cursor

Author: dotsystemsdevs

src/app/globals.css

@@ -345,12 +345,13 @@ button {
 /* README badge preview block — shields badge + copy button grouped */
 .readme-badge-block {
   margin-top: 10px;
-  background: var(--c-surface);
+  width: 100%;
+  background: transparent;
 }
 .readme-badge-row {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
 }
@@ -361,6 +362,11 @@ button {
   margin: 10px 0 0;
 }
 
+.readme-badge-preview {
+  width: 100%;
+  max-width: 100%;
+}
+
 .subpage-faq-cta {
   display: inline-flex;
   align-items: center;

src/components/ReadmeBadge.tsx

@@ -27,58 +27,87 @@ export default function ReadmeBadge({ username }: Props) {
   }
 
   return (
-    <div style={{ width: '100%', marginBottom: '22px', display: 'flex', justifyContent: 'center' }}>
-      <div
-        className="record-card"
-        style={{
-          width: 'min(520px, 100%)',
-          border: '2px solid #1a1a1a',
-          borderRadius: '0px',
-          boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
-          padding: '14px 16px',
-        }}
-      >
-        {/* Badge preview — aspect-ratio wrapper prevents layout shift while loading */}
-        <div style={{ width: '100%', aspectRatio: '440 / 96' }}>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={`/api/badge?username=${username}&v=${BADGE_VERSION}`}
-            alt={altText}
-            loading="lazy"
-            decoding="async"
+    <div className="readme-badge-block" style={{ width: '100%', marginBottom: '22px' }}>
+      {/* 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 ? (
+          <div
+            aria-label={altText}
+            role="img"
             style={{ width: '100%', height: '100%', display: 'block' }}
+            // SVG is generated by our own API route.
+            dangerouslySetInnerHTML={{ __html: svg }}
           />
-        </div>
-
-        {/* Copy row */}
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', marginTop: '10px' }}>
-          <p className="readme-badge-caption" style={{ fontFamily: MONO, margin: 0, textAlign: 'left' }}>
-            ↻ paste once — updates automatically
-          </p>
-          <button
-            onClick={handleCopy}
-            className="readme-copy-btn"
+        ) : (
+          <div
+            aria-label={altText}
+            role="img"
             style={{
-              fontFamily: MONO,
-              fontSize: '10px',
-              fontWeight: 700,
-              letterSpacing: '0.06em',
-              padding: '8px 14px',
-              minHeight: '36px',
-              background: copied ? '#2d7a3c' : 'transparent',
-              color: copied ? '#fff' : '#4a4440',
-              border: `2px solid ${copied ? '#2d7a3c' : '#cec6bb'}`,
-              cursor: 'pointer',
-              transition: 'all 0.15s',
-              whiteSpace: 'nowrap',
-              flexShrink: 0,
+              width: '100%',
+              height: '100%',
+              border: '2px solid #1a1a1a',
+              background: 'var(--c-bg)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '10px',
+              textAlign: 'center',
             }}
-            onMouseEnter={e => { if (!copied) { e.currentTarget.style.borderColor = '#1a1a1a'; e.currentTarget.style.color = '#1a1a1a' } }}
-            onMouseLeave={e => { if (!copied) { e.currentTarget.style.borderColor = '#cec6bb'; e.currentTarget.style.color = '#4a4440' } }}
           >
-            {copied ? '✓ copied!' : '⎘ copy to readme'}
-          </button>
-        </div>
+            <span
+              style={{
+                fontFamily: MONO,
+                fontSize: '11px',
+                fontWeight: 700,
+                letterSpacing: '0.12em',
+                textTransform: 'uppercase',
+                color: svgError ? '#8B0000' : 'var(--c-muted)',
+              }}
+            >
+              {svgError ? 'could not load graveyard badge' : 'loading graveyard badge…'}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Copy row */}
+      <div className="readme-badge-row" style={{ marginTop: '10px', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+        <p className="readme-badge-caption" style={{ fontFamily: MONO, margin: 0, textAlign: 'left' }}>
+          ↻ paste once — updates automatically
+        </p>
+        <button
+          onClick={handleCopy}
+          className="readme-copy-btn"
+          style={{
+            fontFamily: MONO,
+            fontSize: '10px',
+            fontWeight: 700,
+            letterSpacing: '0.06em',
+            padding: '8px 14px',
+            minHeight: '36px',
+            background: copied ? '#2d7a3c' : 'transparent',
+            color: copied ? '#fff' : '#4a4440',
+            border: `2px solid ${copied ? '#2d7a3c' : '#cec6bb'}`,
+            cursor: 'pointer',
+            transition: 'all 0.15s',
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+          }}
+          onMouseEnter={e => {
+            if (!copied) {
+              e.currentTarget.style.borderColor = '#1a1a1a'
+              e.currentTarget.style.color = '#1a1a1a'
+            }
+          }}
+          onMouseLeave={e => {
+            if (!copied) {
+              e.currentTarget.style.borderColor = '#cec6bb'
+              e.currentTarget.style.color = '#4a4440'
+            }
+          }}
+        >
+          {copied ? '✓ copied!' : '⎘ copy to readme'}
+        </button>
       </div>
     </div>
   )