Skip to content

Commit 36088c4

Browse files
atharvasatharvas
committed
scaffold blog2 page
1 parent d56ea20 commit 36088c4

5 files changed

Lines changed: 971 additions & 0 deletions

File tree

‎src/components/pages/Blog2Page.svelte‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<script>
2+
import { onMount } from "svelte";
3+
4+
import { currAgentSlide, uniqueAgents } from "$stores/misc.js";
5+
6+
import PaperHeader from "$components/layout/PaperHeader.svelte";
7+
import Blog2Intro from "$components/sections/Blog2Intro.svelte";
8+
import Blog2ChartStepper from "$components/sections/Blog2ChartStepper.svelte";
9+
import AgentCard from "$components/cards/AgentCard.svelte";
10+
import AgentCardNav from "$components/cards/AgentCard.Nav.svelte";
11+
import Slider from "$components/helpers/Slider.svelte";
12+
import Slide from "$components/helpers/Slider.Slide.svelte";
13+
import Tap from "$components/helpers/Tap.svelte";
14+
import Leaderboard from "$components/sections/Leaderboard.svelte";
15+
import Tooltip from "$components/ui/Tooltip.svelte";
16+
17+
onMount(() => {
18+
document.body.style.overflowY = "scroll";
19+
});
20+
21+
let sliderEl;
22+
$: agents = $uniqueAgents;
23+
24+
$: if (sliderEl && $currAgentSlide !== undefined) {
25+
sliderEl.jump($currAgentSlide);
26+
}
27+
28+
function handleTap(event) {
29+
const direction = event.detail;
30+
if (direction === "left" && $currAgentSlide > 0) {
31+
currAgentSlide.update((n) => n - 1);
32+
} else if (direction === "right" && $currAgentSlide < agents.length - 1) {
33+
currAgentSlide.update((n) => n + 1);
34+
}
35+
}
36+
</script>
37+
38+
<div class="blog2-page">
39+
<PaperHeader />
40+
41+
<Blog2Intro />
42+
43+
<Blog2ChartStepper />
44+
45+
{#if agents && agents.length > 0}
46+
<section class="agent-shell-wrap">
47+
<header class="section-header">
48+
<p class="eyebrow">Per-agent breakdown</p>
49+
<h2>Each agent, on its own terms.</h2>
50+
<p class="lede">
51+
Cards summarise how every agent stacks up against the human expert
52+
at each aggregation level, plus a representative trace from the
53+
session player.
54+
</p>
55+
</header>
56+
57+
<div class="agent-slider-shell">
58+
<AgentCardNav />
59+
<Slider bind:this={sliderEl} bind:current={$currAgentSlide}>
60+
{#each agents as agent, i}
61+
<Slide index={i}>
62+
{#if Math.abs(i - $currAgentSlide) <= 1}
63+
<AgentCard {agent} />
64+
{:else}
65+
<div class="agent-card-placeholder" style="min-height: 400px;" />
66+
{/if}
67+
</Slide>
68+
{/each}
69+
</Slider>
70+
71+
<Tap
72+
enableKeyboard={true}
73+
showArrows={true}
74+
arrowPosition="center"
75+
positionMode="container"
76+
on:tap={handleTap}
77+
/>
78+
</div>
79+
</section>
80+
{/if}
81+
82+
<Leaderboard />
83+
84+
<Tooltip />
85+
</div>
86+
87+
<style>
88+
.blog2-page {
89+
padding-top: 0;
90+
background: var(--bg-primary);
91+
color: var(--text-primary);
92+
}
93+
94+
.agent-shell-wrap {
95+
max-width: 1180px;
96+
margin: 6rem auto;
97+
padding: 0 var(--space-md);
98+
}
99+
100+
.section-header {
101+
max-width: 720px;
102+
margin: 0 auto 2.5rem;
103+
text-align: center;
104+
}
105+
106+
.eyebrow {
107+
font-family: var(--mono);
108+
text-transform: uppercase;
109+
letter-spacing: 0.18em;
110+
font-size: 0.7rem;
111+
color: var(--text-muted);
112+
margin: 0 0 0.75rem;
113+
}
114+
115+
.section-header h2 {
116+
font-family: var(--sans);
117+
font-size: clamp(1.5rem, 3vw, 2rem);
118+
font-weight: 600;
119+
line-height: 1.25;
120+
margin: 0 0 0.75rem;
121+
color: var(--text-primary);
122+
letter-spacing: -0.015em;
123+
}
124+
125+
.lede {
126+
font-family: var(--sans);
127+
font-size: 1rem;
128+
line-height: 1.55;
129+
color: var(--text-secondary);
130+
margin: 0;
131+
}
132+
133+
.agent-slider-shell {
134+
position: relative;
135+
width: 100%;
136+
}
137+
</style>

0 commit comments

Comments
 (0)