Skip to content

feat(leaderboard): community hub, home recipe UX, and embedded distribution chart #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JuhaoLiang1997 merged 2 commits into from
Jul 10, 2026
Merged

feat(leaderboard): community hub, home recipe UX, and embedded distribution chart #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1808e61
feat: add serving recipe distribution page with multi-view charts
Jul 3, 2026
23fbcf4
feat(leaderboard): community hub, submit wizard, and home recipe UX
Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
607 changes: 467 additions & 140 deletions leaderboard/generate.py
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions leaderboard/site/assets/css/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,8 +198,12 @@
font-weight: 700;
color: var(--fg-strong);
letter-spacing: -0.025em;
line-height: 1.05;
max-width: 22ch;
line-height: 1.12;
max-width: none;
}
.hero-title-phrase {
display: block;
white-space: nowrap;
}
.hero .hero-sub {
margin: 0 auto 1.4rem;
Expand Down Expand Up @@ -300,6 +304,7 @@
@media (max-width: 640px) {
.hero { padding: 1.75rem 0.5rem 2rem; }
.hero h1 { font-size: 1.85rem; }
.hero-title-phrase { white-space: normal; }
.hero .tagline { font-size: 0.92rem; }
.hero-stats { padding: 0.9rem 0; }
.kpi { padding: 0 0.85rem; min-width: 4rem; }
Expand Down
150 changes: 150 additions & 0 deletions leaderboard/site/assets/css/distribution.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
/* distribution.css — Performance distribution view (#/distribution) */

/* Stats row */
.stats-row { display: flex; gap: 8px; margin-bottom: 1.8rem !important; flex-wrap: wrap; }
.stats-row .si { flex: 1; min-width: 90px; text-align: center; padding: 12px 10px; }
.stats-row .si .sn { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.stats-row .si .sl { font-size: .6rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .4px; }

/* Filters */
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.filter-row .fi { flex: 1; min-width: 85px; }
.filter-row .fi label { display: block; font-size: .55rem; color: var(--fg-faint); margin-bottom: 1px; text-transform: uppercase; letter-spacing: .4px; }
.filter-row .fi select { width: 100%; padding: 5px 7px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: .68rem; color: var(--fg); outline: none; }
.filter-row .fi select:focus { border-color: var(--accent-2); }
.filter-info { margin-top: 6px; font-size: .78rem; font-weight: 500; color: var(--fg-muted); letter-spacing: .01em; }

/* Home embedded distribution chart — readability */
#home-dist-info {
text-align: center;
margin-top: 2px;
font-size: .78rem;
font-weight: 500;
color: var(--fg-muted);
letter-spacing: .01em;
}
#home-dist-chart { margin-bottom: 0; }
#home-dist-info .dist-info-metric { color: var(--fg); font-weight: 600; }
.dist-metric-bar { display: flex; align-items: center; gap: 6px; }
.dist-metric-bar .dist-metric-label {
font-size: .72rem;
font-weight: 600;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: .35px;
}
.dist-metric-bar select {
padding: 5px 10px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-sm);
font-size: .78rem;
font-weight: 500;
color: var(--fg);
outline: none;
}
.dist-metric-bar select:focus { border-color: var(--accent-2); }
.section .filter-row .fi label { font-size: .68rem; color: var(--fg-muted); font-weight: 600; }
.section .filter-row .fi select { font-size: .78rem; padding: 6px 8px; }
.section .filter-row #btn-dist-reset { font-size: .75rem; padding: 6px 12px; }

/* Chart tabs */
.chart-tabs { display: flex; gap: 4px; margin-bottom: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.chart-tab { padding: 6px 14px; border-radius: 16px; font-size: .75rem; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); transition: .15s; }
.chart-tab:hover { border-color: var(--accent-2); color: var(--fg); }
.chart-tab.active { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-2); }
.dist-view-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; flex-wrap: wrap; gap: 6px; }
.dist-view-main { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.dist-view-more-bar { margin-top: 2px; margin-bottom: 4px; }
.dist-view-more-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 14px; margin-left: 6px; border-left: 2px solid var(--border-soft); font-size: .72rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .35px; cursor: pointer; user-select: none; transition: color .15s; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.dist-view-more-toggle:hover { color: var(--fg-muted); }
.dist-view-more-toggle.open, .dist-view-more-toggle.has-active { color: var(--accent-2); border-left-color: var(--accent-2); }
.dist-view-more-toggle .chev { display: inline-block; font-size: .55rem; transition: transform .15s; }
.dist-view-more-toggle.open .chev { transform: rotate(90deg); }
.dist-view-more-panel { display: none; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 4px 20px; padding: 5px 0 5px 12px; border-left: 2px solid var(--border-soft); }
.dist-view-more-panel.open { display: flex; }
.dist-normalize { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 500; color: var(--fg-muted); cursor: pointer; user-select: none; margin-left: 4px; }
.dist-normalize[hidden] { display: none !important; }
.dist-normalize input { accent-color: var(--accent-2); cursor: pointer; }
.figure-caption { text-align: center; margin: 10px auto 0; max-width: 820px; font-size: .85rem; font-style: italic; color: var(--fg-muted); line-height: 1.5; }

/* Info button */
.info-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); font-size: .72rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; margin-left: 4px; transition: .15s; }
.info-btn:hover { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-2); }
.info-btn .info-pop { display: none; position: absolute; top: 28px; left: 50%; transform: translateX(-50%); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; width: 320px; font-size: .72rem; font-weight: 400; color: var(--fg); line-height: 1.6; z-index: 99; box-shadow: 0 4px 16px rgba(0,0,0,.2); white-space: normal; text-align: left; }
.info-btn:hover .info-pop { display: block; }

/* Chip cards */
.chip-cols { display: flex; gap: 16px; flex-wrap: wrap; }
.chip-col { flex: 1; min-width: 170px; max-width: 280px; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; background: var(--bg-elev); }
.chip-col .chd { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-soft); }
.chip-col .cdt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chip-col .cnm { font-size: .75rem; font-weight: 600; color: var(--fg-strong); }
.chip-col .cnt { font-size: .6rem; color: var(--fg-muted); }
.cci { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: .68rem; transition: background .1s; margin-bottom: 1px; }
.cci:hover { background: var(--bg-elev-2); }
.cci .cn2 { font-weight: 500; color: var(--fg); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cci .ctr { color: var(--fg-muted); font-size: .62rem; white-space: nowrap; }
.cci .cru { color: var(--fg-faint); font-size: .58rem; }
.cmo { font-size: .62rem; color: var(--accent); cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm); margin-top: 2px; display: inline-block; }
.cmo:hover { background: var(--bg-elev-2); }

/* Table */
.data-table { width: 100%; border-collapse: collapse; font-size: .7rem; }
.data-table thead th { text-align: left; padding: 7px 10px; background: var(--bg); color: var(--fg-muted); font-weight: 500; font-size: .6rem; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; border-bottom: 1px solid var(--border-soft); }
.data-table tbody td { padding: 6px 10px; color: var(--fg); }
.data-table tbody tr { border-bottom: 1px solid var(--border-soft); transition: background .1s; cursor: pointer; }
.data-table tbody tr:hover { background: var(--bg-elev-2); }
.tdr { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vbd { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: .58rem; font-weight: 500; }
.vNVIDIA { background: rgba(27,122,61,.12); color: #1b7a3d; } .vHuawei { background: rgba(194,65,12,.12); color: #c2410c; }
.vAMD { background: rgba(190,24,93,.12); color: #be185d; } .vGoogle { background: rgba(29,78,216,.12); color: #1d4ed8; }
.vApple { background: rgba(120,113,108,.12); color: #78716c; } .vMoore { background: rgba(124,58,237,.12); color: #7c3aed; }
.sds { display: flex; gap: 1px; }
.sdt { width: 13px; height: 13px; line-height: 13px; text-align: center; border-radius: 2px; font-size: .48rem; font-weight: 700; }
.sdt.on { background: var(--border); color: var(--fg-muted); } .sdt.off { background: transparent; border: 1px solid var(--border); color: var(--fg-faint); }
.hrm { font-size: .62rem; color: var(--fg-muted); }
.expi { transition: transform .2s; display: inline-block; color: var(--fg-faint); font-size: .65rem; }
.expi.open { transform: rotate(90deg); }
.dist-expand { background: var(--bg); }
.dist-expand td { padding: 0 10px 7px 10px; }
.dxin { font-size: .62rem; padding: 4px 0; }
.dxin table { width: 100%; border-collapse: collapse; }
.dxin th { background: var(--bg-elev-2); font-size: .58rem; padding: 3px 5px; color: var(--fg-muted); font-weight: 500; }
.dxin td { padding: 3px 5px; color: var(--fg); }
.slnk { color: var(--accent); cursor: pointer; font-weight: 600; }
.slnk:hover { color: var(--accent-2); }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; justify-content: center; align-items: center; }
.modal-overlay.show { display: flex; }
.modal-box { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); max-width: 520px; width: 92%; max-height: 82vh; overflow-y: auto; }
.modal-hd { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--bg-elev); border-radius: var(--r-lg) var(--r-lg) 0 0; z-index: 1; }
.modal-hd h4 { font-size: .78rem; color: var(--fg-strong); }
.modal-close { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--fg-muted); padding: 2px 6px; border-radius: var(--r-sm); }
.modal-close:hover { background: var(--bg-elev-2); color: var(--fg); }
.modal-body { padding: 10px 14px 14px; }
.dsec { margin-bottom: 10px; } .dsec h5 { font-size: .62rem; color: var(--fg-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .4px; }
.drow { display: flex; margin-bottom: 2px; font-size: .68rem; } .dlbl { width: 70px; color: var(--fg-faint); flex-shrink: 0; } .dval { color: var(--fg); }
.dval code { background: var(--bg); padding: 1px 4px; border-radius: 3px; font-size: .6rem; }
.stbl { width: 100%; border-collapse: collapse; font-size: .6rem; margin-top: 2px; }
.stbl th { background: var(--bg); padding: 2px 4px; text-align: left; font-weight: 500; color: var(--fg-muted); }
.stbl td { padding: 2px 4px; color: var(--fg); } .na { color: var(--fg-faint); }
.cfg-pre { background: var(--bg); padding: 4px 6px; border-radius: var(--r-sm); font-size: .58rem; overflow-x: auto; margin: 0; color: var(--fg-muted); border: 1px solid var(--border-soft); }
/* Suite grid: keep 3 cols, slightly wider */
.suite-grid { max-width: 1320px; margin: 0 auto; gap: 1.25rem !important; }
/* Suite card row tooltips — truncate on inner spans, not the anchor */
.suite-card .lb-row-name { position: relative; min-width: 0; }
.suite-card .lb-row-main { min-width: 0; }
.suite-card .lb-row-sub { min-width: 0; overflow: hidden; }
.suite-card .row-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 0;
background: var(--bg-elev-2); color: var(--fg);
border: 1px solid var(--border); border-radius: var(--r-md);
padding: 5px 10px; font-size: .68rem; font-weight: 400;
line-height: 1.4; z-index: 999;
box-shadow: 0 4px 16px rgba(0,0,0,.3); pointer-events: none;
max-width: 320px; white-space: normal; }
.suite-card .row-tip b { display: block; color: var(--fg-strong); margin-bottom: 1px; font-size: .7rem; }
.suite-card .lb-row-name:hover .row-tip { display: block; }

@media (max-width:768px) { .chip-cols { flex-direction: column; } }
152 changes: 129 additions & 23 deletions leaderboard/site/assets/css/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,42 @@
flex-direction: column;
}

/* Suite cards: tighter recipe line so chip · framework fits more often */
.suite-card .lb-row {
grid-template-columns: 22px minmax(0, 1fr) auto;
gap: 0.45rem;
padding: 0.48rem 0.5rem;
}
.suite-card .lb-row-name {
font-size: 0.84rem;
font-weight: 600;
line-height: 1.28;
}
.suite-card .lb-row-chip {
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.suite-card .lb-row-chip .lb-row-fw {
font-weight: 500;
font-size: 0.94em;
color: var(--fg-muted);
}
.suite-card .lb-row-chip .lb-row-fw .fw-ver {
font-size: 0.88em;
}
.suite-card .lb-row-sub {
font-size: 0.68rem;
line-height: 1.2;
}
.suite-card .lb-row.lb-row--featured .lb-row-name { font-size: 0.88rem; }
.suite-card .lb-row-score .score-val { font-size: 0.88rem; }
.suite-card .lb-row.lb-row--featured .lb-row-score .score-val { font-size: 0.92rem; }
.suite-card .lb-row-score .score-unit { font-size: 0.62rem; }

.suite-card-foot {
padding: 0.55rem 1.15rem 1rem;
text-align: center;
Expand Down Expand Up @@ -267,24 +303,35 @@
font-weight: 600;
color: var(--fg-strong);
line-height: 1.2;
min-width: 0;
text-decoration: none;
display: block;
position: relative;
transition: color 100ms ease;
}
.lb-row-chip {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* Renders as an <a> so the chip name navigates to /chip/<slug> while
the rest of the row opens the run modal. Suppress the default
underline and surface it only on hover to keep the row visually
quiet. */
text-decoration: none;
display: inline-block;
max-width: 100%;
transition: color 100ms ease;
}
.lb-row-chip .lb-row-fw {
font-weight: 500;
color: var(--fg-muted);
}
.lb-row-chip .lb-row-fw .fw-ver {
font-size: 0.85em;
color: var(--fg-faint);
}
.lb-row-name:hover {
color: var(--accent-2);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.lb-row-name:hover .lb-row-chip {
text-decoration: inherit;
}
.lb-row-sub {
display: flex;
align-items: center;
Expand All @@ -295,12 +342,6 @@
flex-wrap: nowrap;
min-width: 0;
}
.lb-row-sub .fw-line {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lb-row-byline {
display: block;
font-size: 0.7rem;
Expand All @@ -322,6 +363,18 @@

.lb-row-sub .sub-sep { color: var(--fg-faint); flex: 0 0 auto; }
.lb-row-sub .vendor-name { color: var(--fg-muted); flex: 0 0 auto; }
.lb-row-sub .fw-line {
flex: 0 0 auto;
white-space: nowrap;
}
.lb-row-sub .prec-tag {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--fg-muted);
}
.lb-row-sub .fw-ver {
color: var(--fg-faint);
font-size: 0.7rem;
Expand All @@ -347,6 +400,9 @@
flex-direction: column;
align-items: flex-end;
line-height: 1.1;
flex-shrink: 0;
min-width: 4.25rem;
padding-left: 0.35rem;
}
.lb-row-score .score-val {
font-size: 1rem;
Expand Down Expand Up @@ -508,23 +564,73 @@
.submit-card .eyebrow { justify-content: center; }
.submit-card .eyebrow::before { display: none; }
.submit-title {
font-size: 2.85rem;
font-size: 2.35rem;
font-weight: 700;
margin: 0.6rem 0 0.95rem;
margin: 0.6rem 0 0.85rem;
color: var(--fg-strong);
letter-spacing: -0.025em;
line-height: 1.05;
line-height: 1.08;
}
.submit-body {
margin: 0 auto 1.75rem;
margin: 0 auto 1.15rem;
color: var(--fg-muted);
font-size: 0.98rem;
line-height: 1.6;
max-width: 52ch;
}
.submit-body-foot {
margin: 0 auto 1.35rem;
font-size: 0.88rem;
max-width: 52ch;
}
.submit-body-foot a { color: var(--accent-2); font-weight: 500; }
.submit-quickstart {
margin: 0 auto 1.1rem;
padding: 0;
max-width: 42rem;
list-style: none;
text-align: left;
counter-reset: submit-step;
}
.submit-quickstart li {
position: relative;
margin: 0 0 0.65rem;
padding: 0.65rem 0.85rem 0.65rem 2.35rem;
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
background: var(--bg-elev);
font-size: 0.84rem;
line-height: 1.55;
color: var(--fg-muted);
font-size: 1.08rem;
line-height: 1.65;
max-width: 58ch;
counter-increment: submit-step;
}
.submit-quickstart li::before {
content: counter(submit-step);
position: absolute;
left: 0.75rem;
top: 0.72rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 700;
color: var(--accent-2);
background: color-mix(in srgb, var(--accent-2) 12%, var(--bg));
border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border-soft));
}
.submit-quickstart li strong { color: var(--fg-strong); font-weight: 600; }
.submit-quickstart code {
font-size: 0.88em;
padding: 0.08em 0.3em;
border-radius: 3px;
background: var(--bg);
}
@media (max-width: 720px) {
.submit-title { font-size: 2.2rem; }
.submit-body { font-size: 1rem; }
.submit-title { font-size: 1.85rem; }
.submit-body { font-size: 0.92rem; }
}
.submit-cta {
display: flex;
Expand Down
4 changes: 4 additions & 0 deletions leaderboard/site/assets/css/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,10 @@ footer a:hover { color: var(--fg); border-bottom-color: var(--fg); text-decorati
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.topnav { padding: 0.6rem 1rem; gap: 0.5rem; flex-wrap: wrap; }
.topnav .nav-link { padding: 0.35rem 0.55rem; font-size: 0.82rem; }
.community-tabs { overflow-x: auto; flex-wrap: nowrap; }
.community-tab { white-space: nowrap; padding: 0.5rem 0.75rem; font-size: 0.78rem; }
.community-filters { flex-direction: column; align-items: stretch; }
.community-filter-count { margin-left: 0; }
main { padding: 1rem; }
.hide-mobile { display: none !important; }
}
Expand Down
Loading
Loading