feat(quickstart): PR2 — guided vertical stepper with output hints#27
Closed
BunsDev wants to merge 1 commit into
Closed
feat(quickstart): PR2 — guided vertical stepper with output hints#27BunsDev wants to merge 1 commit into
BunsDev wants to merge 1 commit into
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
This PR overhauls the Quick Start section from a 3-card grid into a semantic, guided vertical stepper that aligns with the site’s continuity-rail visual language, adding syntax-accented commands plus “expected output” hints and improved copy-to-clipboard accessibility.
Changes:
- Replaces the Quick Start layout with an
<ol>stepper UI (numbered rail, connector, “now” final step). - Adds new Quick Start styling for stepper layout, syntax-token coloring, and output “expect” hints.
- Enhances copy-to-clipboard behavior to restore per-step button labels and announce copy success via an
aria-liveregion.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/styles/global.css | Adds stepper/rail/node styles, syntax token accents, and expected-output hint styling for Quick Start. |
| src/scripts/main.js | Updates Quick Start copy-to-clipboard logic to restore per-step labels and announce copy events. |
| src/components/QuickStart.astro | Rebuilds Quick Start markup into a semantic ordered stepper with tokenized command display + output hints and an sr-only live region. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
221
to
225
| btn.addEventListener('click', function () { | ||
| navigator.clipboard.writeText(btn.getAttribute('data-copy')).then(function () { | ||
| var cmd = btn.getAttribute('data-copy'); | ||
| navigator.clipboard.writeText(cmd).then(function () { | ||
| btn.classList.add('is-copied'); | ||
| btn.innerHTML = CHECK_SVG; |
This was referenced Jul 7, 2026
Member
Author
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.
PR2 of the section overhaul — Quick Start
Stacked on #26 (foundation). Review/merge that first.
Rebuilds Quick Start from three flat parallel cards into a semantic
<ol>stepper that reads as a guided sequence, on the hero's continuity-rail motif.
What changed
is-now+now-pulse) as "you're running now".data-copy), an expected-output "expect" hint (what success looks like), and a short note.aria-liveregion and restores the step-specific button label (was hardcoded).coven run forge "pick up where we left off") to tie into the hero narrative; migrated off the legacy#8E3DFFviolet.Verification
npm run build✓ ·npm run check✓ (required copy strings intact) · no console errors on load (CDP).🤖 Generated with Claude Code