Skip to content

Commit 20683af

Browse files
CopilotCopilot
authored
feat: use Starlight CardGrid/Card for workshop entry-path selection (#46722)
1 parent f380e90 commit 20683af

2 files changed

Lines changed: 134 additions & 70 deletions

File tree

‎docs/src/components/workshop/WorkshopExperience.astro‎

Lines changed: 126 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import { Card, CardGrid } from '@astrojs/starlight/components';
23
// @ts-ignore The docs app already uses this runtime package from Astro components.
34
import octicons from '@primer/octicons';
45
import {
@@ -398,26 +399,33 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
398399
<h3>How do you want to go through the workshop?</h3>
399400
<p class="aw-workshop-picker-help">Choose the route that matches the way you work. Each path starts fresh and switches to its authored step flow behind the scenes.</p>
400401
</div>
401-
<div class="aw-workshop-card-grid">
402-
{workshopEntryPaths.map((path) => {
403-
const journey = workshopJourneys.find((item) => item.id === path.journeyId) ?? workshopJourneys[0];
404-
return (
405-
<button
406-
type="button"
407-
class="aw-workshop-card"
408-
data-workshop-entry-path={path.id}
409-
data-workshop-journey={path.journeyId}
410-
style={`--aw-workshop-card-accent: ${journey.accent};`}
411-
>
412-
<span class="aw-workshop-card-icon" set:html={iconSvg(path.icon)} />
413-
<span class="aw-workshop-card-kicker">{path.kicker}</span>
414-
<span class="aw-workshop-card-route">{entryPathStepCounts[path.id]} steps</span>
415-
<strong class="aw-workshop-card-title">{path.label}</strong>
416-
<span class="aw-workshop-card-summary">{path.summary}</span>
417-
<small class="aw-workshop-card-fit">{path.fit}</small>
418-
</button>
419-
);
420-
})}
402+
<div class="aw-workshop-card-grid aw-workshop-card-grid-entry">
403+
<CardGrid>
404+
{workshopEntryPaths.map((path) => {
405+
const journey = workshopJourneys.find((item) => item.id === path.journeyId) ?? workshopJourneys[0];
406+
return (
407+
<button
408+
type="button"
409+
class="aw-workshop-card aw-workshop-card-entry"
410+
data-workshop-entry-path={path.id}
411+
data-workshop-journey={path.journeyId}
412+
style={`--aw-workshop-card-accent: ${journey.accent};`}
413+
>
414+
<Card title={path.label}>
415+
<div class="aw-workshop-card-entry-meta">
416+
<div class="aw-workshop-card-entry-kicker">
417+
<span class="aw-workshop-card-icon" set:html={iconSvg(path.icon)} />
418+
<span class="aw-workshop-card-kicker">{path.kicker}</span>
419+
</div>
420+
<span class="aw-workshop-card-route">{journey.label} · {entryPathStepCounts[path.id]} steps</span>
421+
</div>
422+
<span class="aw-workshop-card-summary">{path.summary}</span>
423+
<small class="aw-workshop-card-fit">{path.fit}</small>
424+
</Card>
425+
</button>
426+
);
427+
})}
428+
</CardGrid>
421429
</div>
422430
</section>
423431
</div>
@@ -432,7 +440,7 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
432440
{workshopScenarios.map((scenario) => (
433441
<button
434442
type="button"
435-
class="aw-workshop-card aw-workshop-card-scenario"
443+
class="aw-workshop-card aw-workshop-card-scenario-selection"
436444
data-workshop-scenario={scenario.id}
437445
>
438446
<span class="aw-workshop-card-icon" set:html={iconSvg(scenario.icon)} />
@@ -980,6 +988,10 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
980988

981989
<style>
982990
.aw-workshop {
991+
--aw-workshop-card-min-width: 15.5rem;
992+
--aw-workshop-card-border-strong: 35%;
993+
--aw-workshop-card-gradient-start: 12%;
994+
--aw-workshop-card-surface-tint: 8%;
983995
display: grid;
984996
gap: 1.5rem;
985997
margin: 2rem 0 1rem;
@@ -1102,11 +1114,95 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
11021114

11031115
.aw-workshop-card-grid {
11041116
display: grid;
1105-
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
1117+
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--aw-workshop-card-min-width)), 1fr));
11061118
gap: 0.85rem;
11071119
}
11081120

11091121
.aw-workshop-card {
1122+
width: 100%;
1123+
border: 0;
1124+
padding: 0;
1125+
background: none;
1126+
color: inherit;
1127+
font: inherit;
1128+
cursor: pointer;
1129+
text-align: inherit;
1130+
}
1131+
1132+
.aw-workshop-card-entry {
1133+
text-align: left;
1134+
}
1135+
1136+
.aw-workshop-card-grid-entry :global(.card-grid) {
1137+
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--aw-workshop-card-min-width)), 1fr));
1138+
gap: 0.85rem;
1139+
}
1140+
1141+
.aw-workshop-card-grid-entry :global(.card-grid > *) {
1142+
height: 100%;
1143+
}
1144+
1145+
.aw-workshop-card-entry > :global(.card) {
1146+
--aw-workshop-card-color: var(--aw-workshop-card-accent, var(--sl-color-accent));
1147+
height: 100%;
1148+
min-height: 15rem;
1149+
padding: 1rem;
1150+
border-radius: 0.9rem;
1151+
border-color: color-mix(in srgb, var(--aw-workshop-card-color) var(--aw-workshop-card-border-strong), transparent);
1152+
background:
1153+
linear-gradient(180deg, color-mix(in srgb, var(--aw-workshop-card-color) var(--aw-workshop-card-gradient-start), transparent), transparent 72%),
1154+
color-mix(in srgb, var(--aw-workshop-card-color) var(--aw-workshop-card-surface-tint), var(--aw-bg-elevated));
1155+
gap: 0.75rem;
1156+
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
1157+
}
1158+
1159+
.aw-workshop-card-entry > :global(.card .title) {
1160+
margin: 0;
1161+
font-size: 1.18rem;
1162+
line-height: 1.08;
1163+
}
1164+
1165+
.aw-workshop-card-entry > :global(.card .body) {
1166+
display: grid;
1167+
gap: 0.7rem;
1168+
height: 100%;
1169+
font-size: inherit;
1170+
}
1171+
1172+
.aw-workshop-card-entry-meta {
1173+
display: flex;
1174+
flex-wrap: wrap;
1175+
align-items: flex-start;
1176+
justify-content: space-between;
1177+
gap: 0.55rem 0.75rem;
1178+
}
1179+
1180+
.aw-workshop-card-entry-kicker {
1181+
display: inline-flex;
1182+
align-items: center;
1183+
gap: 0.65rem;
1184+
}
1185+
1186+
.aw-workshop-card-entry:hover > :global(.card),
1187+
.aw-workshop-card-entry.is-active > :global(.card) {
1188+
transform: translateY(-1px);
1189+
border-color: var(--aw-workshop-card-color);
1190+
box-shadow: 0 12px 30px rgba(1, 4, 9, 0.2);
1191+
}
1192+
1193+
.aw-workshop-card-entry:focus-visible {
1194+
outline: 2px solid var(--aw-workshop-card-color);
1195+
outline-offset: 4px;
1196+
}
1197+
1198+
.aw-workshop-card-entry:hover .aw-workshop-card-fit,
1199+
.aw-workshop-card-entry.is-active .aw-workshop-card-fit {
1200+
opacity: 1;
1201+
max-height: 5rem;
1202+
transform: translateY(0);
1203+
}
1204+
1205+
.aw-workshop-card-scenario-selection {
11101206
display: grid;
11111207
grid-template-columns: 2rem 1fr auto;
11121208
grid-template-areas:
@@ -1163,7 +1259,7 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
11631259
display: none;
11641260
}
11651261

1166-
.aw-workshop-card-scenario {
1262+
.aw-workshop-card-scenario-selection {
11671263
--aw-workshop-card-accent: var(--sl-color-accent-low);
11681264
}
11691265

@@ -1198,20 +1294,22 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
11981294
transition: opacity 0.2s ease, max-height 0.2s ease, transform 0.2s ease;
11991295
}
12001296

1201-
.aw-workshop-card:hover,
1202-
.aw-workshop-card.is-active {
1297+
.aw-workshop-card-scenario-selection:hover,
1298+
.aw-workshop-card-scenario-selection.is-active {
1299+
transform: translateY(-1px);
12031300
border-color: var(--aw-workshop-card-accent, var(--sl-color-accent));
12041301
background: color-mix(in srgb, var(--aw-workshop-card-accent, var(--sl-color-accent)) 6%, var(--aw-bg-page));
1302+
box-shadow: 0 12px 30px rgba(1, 4, 9, 0.2);
12051303
}
12061304

1207-
.aw-workshop-card:hover .aw-workshop-card-fit,
1208-
.aw-workshop-card.is-active .aw-workshop-card-fit {
1305+
.aw-workshop-card-scenario-selection:hover .aw-workshop-card-fit,
1306+
.aw-workshop-card-scenario-selection.is-active .aw-workshop-card-fit {
12091307
opacity: 1;
12101308
max-height: 5rem;
12111309
transform: translateY(0);
12121310
}
12131311

1214-
.aw-workshop-card-scenario {
1312+
.aw-workshop-card-scenario-selection {
12151313
min-height: 12rem;
12161314
}
12171315

‎pkg/agentdrain/data/default_weights.json‎

Lines changed: 8 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@
33
"clusters": [],
44
"config": {
55
"Depth": 4,
6-
"ExcludeFields": [
7-
"session_id",
8-
"trace_id",
9-
"span_id",
10-
"timestamp"
11-
],
6+
"ExcludeFields": ["session_id", "trace_id", "span_id", "timestamp"],
127
"MaskRules": [
138
{
149
"Name": "uuid",
@@ -54,21 +49,12 @@
5449
"id": 1,
5550
"size": 500,
5651
"stage": "finish",
57-
"template": [
58-
"stage=finish",
59-
"\u003c*\u003e",
60-
"tokens=\u003cNUM\u003e"
61-
]
52+
"template": ["stage=finish", "\u003c*\u003e", "tokens=\u003cNUM\u003e"]
6253
}
6354
],
6455
"config": {
6556
"Depth": 4,
66-
"ExcludeFields": [
67-
"session_id",
68-
"trace_id",
69-
"span_id",
70-
"timestamp"
71-
],
57+
"ExcludeFields": ["session_id", "trace_id", "span_id", "timestamp"],
7258
"MaskRules": [
7359
{
7460
"Name": "uuid",
@@ -112,12 +98,7 @@
11298
"clusters": [],
11399
"config": {
114100
"Depth": 4,
115-
"ExcludeFields": [
116-
"session_id",
117-
"trace_id",
118-
"span_id",
119-
"timestamp"
120-
],
101+
"ExcludeFields": ["session_id", "trace_id", "span_id", "timestamp"],
121102
"MaskRules": [
122103
{
123104
"Name": "uuid",
@@ -161,12 +142,7 @@
161142
"clusters": [],
162143
"config": {
163144
"Depth": 4,
164-
"ExcludeFields": [
165-
"session_id",
166-
"trace_id",
167-
"span_id",
168-
"timestamp"
169-
],
145+
"ExcludeFields": ["session_id", "trace_id", "span_id", "timestamp"],
170146
"MaskRules": [
171147
{
172148
"Name": "uuid",
@@ -210,12 +186,7 @@
210186
"clusters": [],
211187
"config": {
212188
"Depth": 4,
213-
"ExcludeFields": [
214-
"session_id",
215-
"trace_id",
216-
"span_id",
217-
"timestamp"
218-
],
189+
"ExcludeFields": ["session_id", "trace_id", "span_id", "timestamp"],
219190
"MaskRules": [
220191
{
221192
"Name": "uuid",
@@ -259,12 +230,7 @@
259230
"clusters": [],
260231
"config": {
261232
"Depth": 4,
262-
"ExcludeFields": [
263-
"session_id",
264-
"trace_id",
265-
"span_id",
266-
"timestamp"
267-
],
233+
"ExcludeFields": ["session_id", "trace_id", "span_id", "timestamp"],
268234
"MaskRules": [
269235
{
270236
"Name": "uuid",
@@ -304,4 +270,4 @@
304270
},
305271
"next_id": 1
306272
}
307-
}
273+
}

0 commit comments

Comments
 (0)