feat(quickstart): PR2 — guided vertical stepper with output hints [clean]#33
Merged
Conversation
Rebuild Quick Start from three flat parallel cards into a semantic <ol>
stepper that reads as a sequence, on the hero's continuity-rail motif.
- Numbered nodes threaded on a gradient connector; the final node lights
up (is-now + now-pulse) as "you're running now".
- Each step is a glass card with a syntax-accented command (static token
spans; clean plaintext stays in data-copy), an expected-output "expect"
hint (what success looks like), and a short note.
- Copy now announces success to screen readers via an sr-only aria-live
region and restores the step-specific button label.
- Step 3 command retargeted to Forge ("pick up where we left off") to tie
into the hero narrative; migrated to the new violet palette.
- Vertical at every breakpoint, so mobile just works (no 3->1 collapse).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Rebuilds the Quick Start section into a semantic ordered-list stepper aligned with the site’s continuity-rail motif, adding richer command presentation (syntax accents + expected output) and improving copy-to-clipboard accessibility via screen-reader announcements.
Changes:
- Replaces the Quick Start “card grid” with an
<ol>stepper UI (numbered nodes + rail) and adds per-step titles/notes/output hints. - Adds/updates Quick Start CSS to support the new vertical stepper layout and token styling.
- Enhances the clipboard copy handler to preserve step-specific
aria-labels and announce copy success via a live region.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/styles/global.css | Replaces Quick Start styling with stepper/rail/node/card styles and output-hint/token accents. |
| src/scripts/main.js | Updates copy-to-clipboard behavior to restore original aria-labels and add live-region announcements. |
| src/components/QuickStart.astro | Rebuilds Quick Start markup into a semantic <ol> stepper and adds SR-only live region for copy announcements. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+956
to
+960
| .qs-steps { | ||
| list-style: none; | ||
| max-width: 760px; | ||
| display: flex; flex-direction: column; | ||
| } |
Comment on lines
226
to
+228
| btn.setAttribute('aria-label', 'Copied'); | ||
| // Announce success to screen readers. | ||
| if (liveRegion) liveRegion.textContent = 'Copied: ' + cmd; |
Comment on lines
+69
to
+74
| <code>{step.tokens.map((tok, j) => ( | ||
| <span class={`qs-tok qs-tok-${tok.c}`}>{j > 0 ? ' ' : ''}{tok.t}</span> | ||
| ))}</code> | ||
| <button class="qs-copy" type="button" aria-label={step.copyLabel} data-copy={step.command}> | ||
| <Fragment set:html={COPY_ICON_SVG} /> | ||
| </button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Rebuilds Quick Start into a semantic
<ol>stepper on the hero continuity-rail motif: numbered nodes, syntax-accented commands, expected-output hints, and a screen-reader copy announcement. Stacked on the foundation PR.Clean re-cut of the section overhaul: a concurrent session had interleaved two commits (px→rem conversion, multi-screen support) into the original stack (#26–#31). Rebuilt in an isolated worktree with only my six signed commits. Supersedes the original PR.
🤖 Generated with Claude Code