Skip to content

Commit 91317e7

Browse files
dotsystemsdevsdotsystemsdevs
committed
ux(user): remove profile header
Hides the user page hero (no tombstone, no Certificate of Death, no @username header) and presents the repo graveyard badge as a matching card. Made-with: Cursor
1 parent b5d6116 commit 91317e7

4 files changed

Lines changed: 63 additions & 50 deletions

File tree

‎src/app/api/badge/route.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function buildSvg(username: string, dead: number, struggling: number, alive: num
4848
<rect width="440" height="96" fill="#FAF6EF"/>
4949
<rect x="1" y="1" width="438" height="94" fill="none" stroke="#1a1a1a" stroke-width="2"/>
5050
51-
<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>
51+
<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>
5252
5353
<text x="16" y="58" font-family=${JSON.stringify(MONO)} font-size="15" font-weight="700" letter-spacing="0.8">
5454
<tspan fill="#8B0000">${dead} DEAD</tspan><tspan fill="#cec6bb" font-weight="400"> · </tspan><tspan fill="${struggling > 0 ? '#b45309' : '#cec6bb'}" font-weight="${struggling > 0 ? '700' : '400'}">${struggling} STRUGGLING</tspan><tspan fill="#cec6bb" font-weight="400"> · </tspan><tspan fill="${alive > 0 ? '#2d7a3c' : '#cec6bb'}" font-weight="${alive > 0 ? '700' : '400'}">${alive} ALIVE</tspan>

‎src/app/user/[username]/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,10 @@ export default function UserPage() {
3434

3535
return (
3636
<SubpageShell
37-
title={`@${username}`}
38-
subtitle={
39-
<span style={{ fontFamily: MONO, fontSize: '12px', color: 'var(--c-muted)', letterSpacing: '0.04em' }}>
40-
dev graveyard
41-
</span>
42-
}
37+
title={undefined}
38+
subtitle={null}
4339
microcopy={null}
40+
hideHero
4441
>
4542
{loading && <LoadingState />}
4643

‎src/components/ReadmeBadge.tsx‎

Lines changed: 51 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -27,47 +27,58 @@ export default function ReadmeBadge({ username }: Props) {
2727
}
2828

2929
return (
30-
<div style={{ marginBottom: '40px' }}>
31-
{/* Badge preview — aspect-ratio wrapper prevents layout shift while loading */}
32-
<div style={{ width: '100%', aspectRatio: '440 / 96', marginBottom: '10px' }}>
33-
{/* eslint-disable-next-line @next/next/no-img-element */}
34-
<img
35-
src={`/api/badge?username=${username}&v=${BADGE_VERSION}`}
36-
alt={altText}
37-
loading="lazy"
38-
decoding="async"
39-
style={{ width: '100%', height: '100%', display: 'block' }}
40-
/>
41-
</div>
30+
<div style={{ width: '100%', marginBottom: '22px', display: 'flex', justifyContent: 'center' }}>
31+
<div
32+
className="record-card"
33+
style={{
34+
width: 'min(520px, 100%)',
35+
border: '2px solid #1a1a1a',
36+
borderRadius: '0px',
37+
boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
38+
padding: '14px 16px',
39+
}}
40+
>
41+
{/* Badge preview — aspect-ratio wrapper prevents layout shift while loading */}
42+
<div style={{ width: '100%', aspectRatio: '440 / 96' }}>
43+
{/* eslint-disable-next-line @next/next/no-img-element */}
44+
<img
45+
src={`/api/badge?username=${username}&v=${BADGE_VERSION}`}
46+
alt={altText}
47+
loading="lazy"
48+
decoding="async"
49+
style={{ width: '100%', height: '100%', display: 'block' }}
50+
/>
51+
</div>
4252

43-
{/* Copy row */}
44-
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', marginTop: '4px' }}>
45-
<p className="readme-badge-caption" style={{ fontFamily: MONO, margin: 0, textAlign: 'left' }}>
46-
↻ paste once — updates automatically
47-
</p>
48-
<button
49-
onClick={handleCopy}
50-
className="readme-copy-btn"
51-
style={{
52-
fontFamily: MONO,
53-
fontSize: '10px',
54-
fontWeight: 700,
55-
letterSpacing: '0.06em',
56-
padding: '8px 14px',
57-
minHeight: '36px',
58-
background: copied ? '#2d7a3c' : 'transparent',
59-
color: copied ? '#fff' : '#4a4440',
60-
border: `2px solid ${copied ? '#2d7a3c' : '#cec6bb'}`,
61-
cursor: 'pointer',
62-
transition: 'all 0.15s',
63-
whiteSpace: 'nowrap',
64-
flexShrink: 0,
65-
}}
66-
onMouseEnter={e => { if (!copied) { e.currentTarget.style.borderColor = '#1a1a1a'; e.currentTarget.style.color = '#1a1a1a' } }}
67-
onMouseLeave={e => { if (!copied) { e.currentTarget.style.borderColor = '#cec6bb'; e.currentTarget.style.color = '#4a4440' } }}
68-
>
69-
{copied ? '✓ copied!' : '⎘ copy to readme'}
70-
</button>
53+
{/* Copy row */}
54+
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', marginTop: '10px' }}>
55+
<p className="readme-badge-caption" style={{ fontFamily: MONO, margin: 0, textAlign: 'left' }}>
56+
↻ paste once — updates automatically
57+
</p>
58+
<button
59+
onClick={handleCopy}
60+
className="readme-copy-btn"
61+
style={{
62+
fontFamily: MONO,
63+
fontSize: '10px',
64+
fontWeight: 700,
65+
letterSpacing: '0.06em',
66+
padding: '8px 14px',
67+
minHeight: '36px',
68+
background: copied ? '#2d7a3c' : 'transparent',
69+
color: copied ? '#fff' : '#4a4440',
70+
border: `2px solid ${copied ? '#2d7a3c' : '#cec6bb'}`,
71+
cursor: 'pointer',
72+
transition: 'all 0.15s',
73+
whiteSpace: 'nowrap',
74+
flexShrink: 0,
75+
}}
76+
onMouseEnter={e => { if (!copied) { e.currentTarget.style.borderColor = '#1a1a1a'; e.currentTarget.style.color = '#1a1a1a' } }}
77+
onMouseLeave={e => { if (!copied) { e.currentTarget.style.borderColor = '#cec6bb'; e.currentTarget.style.color = '#4a4440' } }}
78+
>
79+
{copied ? '✓ copied!' : '⎘ copy to readme'}
80+
</button>
81+
</div>
7182
</div>
7283
</div>
7384
)

‎src/components/SubpageShell.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@ type Props = {
1212
title?: string
1313
microcopy?: ReactNode | null
1414
headerExtra?: ReactNode
15+
hideHero?: boolean
1516
children: ReactNode
1617
}
1718

18-
export default function SubpageShell({ subtitle, title, microcopy, headerExtra, children }: Props) {
19+
export default function SubpageShell({ subtitle, title, microcopy, headerExtra, hideHero = false, children }: Props) {
1920
return (
2021
<main className="page-shell-main">
2122
<div className="page-shell-inner">
@@ -44,8 +45,12 @@ export default function SubpageShell({ subtitle, title, microcopy, headerExtra,
4445
</Link>
4546
</div>
4647

47-
<PageHero subtitle={subtitle} title={title} microcopy={microcopy} brandHref="/" hideEmoji />
48-
{headerExtra ? <div className="page-hero-extra">{headerExtra}</div> : null}
48+
{!hideHero ? (
49+
<>
50+
<PageHero subtitle={subtitle} title={title} microcopy={microcopy} brandHref="/" hideEmoji />
51+
{headerExtra ? <div className="page-hero-extra">{headerExtra}</div> : null}
52+
</>
53+
) : null}
4954

5055
<div className="page-shell-body page-shell-body--subpage">{children}</div>
5156

0 commit comments

Comments
 (0)