Skip to content

Commit 0d67d65

Browse files
adamdotdevinadamdotdevin
committed
feat(stats): polish rankings page
1 parent 6a90870 commit 0d67d65

6 files changed

Lines changed: 369 additions & 76 deletions

File tree

‎bun.lock‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/stats/app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"d3-scale": "4.0.2",
2222
"effect": "catalog:",
2323
"nitro": "3.0.1-alpha.1",
24+
"sst": "catalog:",
2425
"solid-js": "catalog:",
2526
"vite": "catalog:"
2627
},

‎packages/stats/app/src/resource.d.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import "sst/resource"
2+
3+
declare module "sst/resource" {
4+
export interface Resource {
5+
EMAILOCTOPUS_API_KEY: {
6+
type: "sst.sst.Secret"
7+
value: string
8+
}
9+
}
10+
}

‎packages/stats/app/src/routes/api/newsletter.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Resource } from "sst/resource"
2+
3+
const listId = "8b9bb82c-9d5f-11f0-975f-0df6fd1e4945"
4+
5+
export async function POST(event: { request: Request }) {
6+
const contentType = event.request.headers.get("content-type") ?? ""
7+
if (!contentType.includes("multipart/form-data") && !contentType.includes("application/x-www-form-urlencoded")) {
8+
return Response.json({ error: "Email address is required" }, { status: 400 })
9+
}
10+
11+
const form = await event.request.formData()
12+
const emailAddress = form.get("email")
13+
if (typeof emailAddress !== "string" || emailAddress.trim().length === 0) {
14+
return Response.json({ error: "Email address is required" }, { status: 400 })
15+
}
16+
17+
const response = await fetch(`https://api.emailoctopus.com/lists/${listId}/contacts`, {
18+
method: "PUT",
19+
headers: {
20+
Authorization: `Bearer ${Resource.EMAILOCTOPUS_API_KEY.value}`,
21+
"Content-Type": "application/json",
22+
},
23+
body: JSON.stringify({
24+
email_address: emailAddress.trim(),
25+
}),
26+
})
27+
if (!response.ok) return Response.json({ error: "Failed to subscribe" }, { status: 502 })
28+
return Response.json({ success: true })
29+
}

‎packages/stats/app/src/routes/index.css‎

Lines changed: 204 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@
6767
--stats-dot: #d4d4d4;
6868
--stats-hero-muted: #5c5c5c;
6969
--stats-hero-pattern: #eeeeee;
70+
--stats-logo-bg: #161616;
71+
--stats-logo-fill: #454545;
72+
--stats-logo-stroke: #e2e2e2;
7073
--stats-page-padding: 5rem;
7174
--stats-section-padding: 6rem;
7275
min-height: 100vh;
@@ -343,7 +346,7 @@
343346
gap: 56px;
344347
box-sizing: border-box;
345348
min-height: 0;
346-
padding: 112px 0 24px;
349+
padding: 112px clamp(32px, 4vw, 48px) 24px;
347350
color: var(--stats-text);
348351
font-family:
349352
"IBM Plex Mono",
@@ -364,9 +367,10 @@
364367
color: var(--stats-text);
365368
}
366369

367-
[data-page="stats"] [data-slot="footer-mark"] [data-slot="brand-mark"] {
368-
width: 24px;
369-
height: 30px;
370+
[data-page="stats"] [data-slot="footer-mark"] [data-slot="opencode-mark"] {
371+
display: block;
372+
width: 40px;
373+
height: 40px;
370374
}
371375

372376
[data-page="stats"] [data-slot="footer-column"] {
@@ -415,17 +419,196 @@
415419
justify-content: center;
416420
width: fit-content;
417421
height: 28px;
422+
margin: 0;
418423
padding: 0 12px;
419424
border: 1px solid var(--stats-line);
425+
border-radius: 0;
426+
appearance: none;
420427
background: var(--stats-bg);
421428
color: var(--stats-text) !important;
429+
font: inherit;
430+
font-size: 11px;
431+
font-weight: 500;
432+
line-height: 1;
433+
text-decoration: none;
434+
cursor: pointer;
422435
}
423436

424437
[data-page="stats"] [data-slot="subscribe-button"]:hover {
425438
border-color: var(--stats-line-strong);
426439
background: var(--stats-layer);
427440
}
428441

442+
[data-page="stats"] [data-slot="subscribe-button"]:focus-visible,
443+
[data-page="stats"] [data-component="subscribe-modal"] button:focus-visible,
444+
[data-page="stats"] [data-component="subscribe-modal"] input:focus-visible {
445+
outline: 2px solid var(--stats-accent);
446+
outline-offset: 2px;
447+
}
448+
449+
[data-page="stats"] [data-component="subscribe-modal"] {
450+
position: fixed;
451+
inset: 0;
452+
z-index: 80;
453+
display: grid;
454+
place-items: center;
455+
box-sizing: border-box;
456+
padding: 8px;
457+
color: var(--stats-text);
458+
font-family:
459+
"IBM Plex Mono",
460+
var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
461+
}
462+
463+
[data-page="stats"] [data-slot="modal-scrim"] {
464+
position: absolute;
465+
inset: 0;
466+
background: #00000066;
467+
backdrop-filter: blur(2px);
468+
}
469+
470+
[data-page="stats"] [data-slot="modal-panel"] {
471+
position: relative;
472+
z-index: 1;
473+
width: min(374px, calc(100vw - 16px));
474+
overflow: hidden;
475+
background: var(--stats-layer);
476+
box-shadow:
477+
0 0 0 0.5px #00000024,
478+
0 16px 32px #0000001f,
479+
0 8px 16px #00000014;
480+
}
481+
482+
[data-page="stats"] [data-slot="modal-brand"] {
483+
position: relative;
484+
display: flex;
485+
align-items: center;
486+
justify-content: center;
487+
min-height: 122px;
488+
background: #242424;
489+
color: #ffffff;
490+
}
491+
492+
[data-page="stats"] [data-slot="modal-logo"] {
493+
display: block;
494+
width: 234px;
495+
height: 42px;
496+
}
497+
498+
[data-page="stats"] [data-slot="modal-close"] {
499+
position: absolute;
500+
top: 0;
501+
right: 0;
502+
display: grid;
503+
place-items: center;
504+
width: 32px;
505+
height: 32px;
506+
margin: 0;
507+
padding: 0;
508+
border: 0;
509+
border-radius: 0;
510+
appearance: none;
511+
background: transparent;
512+
color: #ffffff;
513+
cursor: pointer;
514+
}
515+
516+
[data-page="stats"] [data-slot="modal-close"]:hover {
517+
background: #ffffff1a;
518+
}
519+
520+
[data-page="stats"] [data-slot="modal-body"] {
521+
display: grid;
522+
gap: 24px;
523+
padding: 24px 12px 12px;
524+
background: var(--stats-layer);
525+
}
526+
527+
[data-page="stats"] [data-slot="modal-intro"] {
528+
display: grid;
529+
gap: 8px;
530+
text-align: center;
531+
}
532+
533+
[data-page="stats"] [data-slot="modal-intro"] h2 {
534+
color: var(--stats-text);
535+
font-size: 16px;
536+
font-weight: 500;
537+
line-height: 24px;
538+
letter-spacing: 0;
539+
}
540+
541+
[data-page="stats"] [data-slot="modal-intro"] p {
542+
color: var(--stats-muted);
543+
font-size: 16px;
544+
font-weight: 400;
545+
line-height: 24px;
546+
}
547+
548+
[data-page="stats"] [data-slot="subscribe-form"] {
549+
display: grid;
550+
gap: 8px;
551+
}
552+
553+
[data-page="stats"] [data-slot="subscribe-form"] input,
554+
[data-page="stats"] [data-slot="subscribe-form"] button {
555+
box-sizing: border-box;
556+
width: 100%;
557+
height: 40px;
558+
margin: 0;
559+
border-radius: 0;
560+
appearance: none;
561+
font: inherit;
562+
font-size: 13px;
563+
line-height: 1;
564+
}
565+
566+
[data-page="stats"] [data-slot="subscribe-form"] input {
567+
padding: 0 12px;
568+
border: 1px solid var(--stats-line);
569+
background: var(--stats-bg);
570+
color: var(--stats-text);
571+
}
572+
573+
[data-page="stats"] [data-slot="subscribe-form"] input::placeholder {
574+
color: var(--stats-faint);
575+
}
576+
577+
[data-page="stats"] [data-slot="subscribe-form"] button {
578+
display: flex;
579+
align-items: center;
580+
justify-content: center;
581+
border: 0;
582+
background: #242424;
583+
color: #ffffff;
584+
font-weight: 500;
585+
cursor: pointer;
586+
}
587+
588+
[data-page="stats"] [data-slot="subscribe-form"] button:disabled {
589+
cursor: progress;
590+
opacity: 0.7;
591+
}
592+
593+
[data-page="stats"] [data-slot="subscribe-feedback"]:empty {
594+
display: none;
595+
}
596+
597+
[data-page="stats"] [data-slot="subscribe-feedback"] p {
598+
text-align: center;
599+
font-size: 11px;
600+
font-weight: 500;
601+
line-height: 16px;
602+
}
603+
604+
[data-page="stats"] [data-slot="subscribe-feedback"] p[data-state="success"] {
605+
color: #198b43;
606+
}
607+
608+
[data-page="stats"] [data-slot="subscribe-feedback"] p[data-state="error"] {
609+
color: #b82d35;
610+
}
611+
429612
[data-page="stats"] [data-slot="footer-pattern"] {
430613
height: 16px;
431614
overflow: hidden;
@@ -470,30 +653,6 @@
470653
background: #198b43;
471654
}
472655

473-
[data-page="stats"] [data-slot="theme-toggle"] {
474-
display: flex;
475-
align-items: center;
476-
height: 20px;
477-
padding: 2px;
478-
background: var(--stats-layer);
479-
}
480-
481-
[data-page="stats"] [data-slot="theme-toggle"] button {
482-
display: grid;
483-
place-items: center;
484-
width: 18px;
485-
height: 16px;
486-
padding: 0;
487-
border-radius: 0;
488-
color: var(--stats-muted);
489-
background: transparent;
490-
}
491-
492-
[data-page="stats"] [data-slot="theme-toggle"] button[data-active="true"] {
493-
color: var(--stats-text);
494-
background: var(--stats-bg);
495-
}
496-
497656
[data-page="stats"] [data-component="content"] a {
498657
color: var(--stats-text);
499658
text-decoration: none;
@@ -1373,6 +1532,10 @@
13731532
font-weight: 600;
13741533
}
13751534

1535+
[data-page="stats"] [data-component="section-bridge"] {
1536+
display: none;
1537+
}
1538+
13761539
[data-page="stats"] [data-slot="section-title"] {
13771540
max-width: 1200px;
13781541
margin-bottom: 40px;
@@ -1779,7 +1942,7 @@
17791942
background: transparent;
17801943
color: var(--stats-text);
17811944
font-size: 11px;
1782-
line-height: 1;
1945+
line-height: 16px;
17831946
text-align: left;
17841947
}
17851948

@@ -1804,6 +1967,7 @@
18041967
overflow: hidden;
18051968
color: var(--stats-muted);
18061969
font-weight: 400;
1970+
line-height: 16px;
18071971
text-overflow: ellipsis;
18081972
white-space: nowrap;
18091973
}
@@ -1907,7 +2071,7 @@
19072071
}
19082072

19092073
[data-page="stats"] [data-component="live-filter"] {
1910-
display: flex;
2074+
display: none;
19112075
align-items: center;
19122076
gap: 6px;
19132077
padding: 0;
@@ -1960,6 +2124,9 @@
19602124
--stats-dot: #303030;
19612125
--stats-hero-muted: #808080;
19622126
--stats-hero-pattern: #303030;
2127+
--stats-logo-bg: #f1ecec;
2128+
--stats-logo-fill: #b7b1b1;
2129+
--stats-logo-stroke: #211e1e;
19632130
}
19642131

19652132
[data-page="stats"] [data-component="chart-tooltip"] {
@@ -2040,6 +2207,13 @@
20402207
}
20412208
}
20422209

2210+
@media (min-width: 90rem) {
2211+
[data-page="stats"] [data-component="footer"] {
2212+
padding-right: 0;
2213+
padding-left: 0;
2214+
}
2215+
}
2216+
20432217
@media (max-width: 74rem) {
20442218
[data-page="stats"] [data-section="top-models"],
20452219
[data-page="stats"] [data-section="leaderboard"],

0 commit comments

Comments
 (0)