Workshop Kit · widget reference
Shippeddeploy-stepper
Seven-step tracker for the host-agnostic deploy flow: unzip → sign up → upload → name → live URL → custom domain → DNS wait. The plan called for animated host-specific screenshots; static screenshots would mean shipping image assets that drift the moment a host redesigns their dashboard. This widget is the lighter-touch version that ships now and survives host UI redesigns — it owns the journey shape and progress tracking, while the detailed host-specific instructions live in the sibling tab-flip on the same lesson page.
Live demo
Pick a host from the dropdown — step descriptions interpolate the host's domain and your restaurant slug (which it reads from restaurantProfile.name). Mark steps done as you go; the celebration card appears at step 7.
No config block — seven steps are baked in
Contract
| Behavior | Notes |
|---|---|
Reads restaurantProfile.name |
Slugified (lowercased, dashes-only, max 30 chars) to fill the {slug} token in step titles + URLs. |
Reads deployTarget |
Pre-selects the host dropdown. Defaults to "No host picked" — the steps still render with a generic host.example token. |
Reads deployProgress |
Object keyed by step id; pre-fills the mark-done state. |
Writes deployTarget |
One of: '', 'cloudflare-pages', 'netlify', 'vercel'. |
Writes deployProgress |
{ unzip: bool, signup: bool, upload: bool, name: bool, 'live-url': bool, 'custom-domain': bool, 'dns-wait': bool }. |
| Celebration card | Renders only when all seven steps are done. Respects prefers-reduced-motion — the linear-gradient background is replaced with a solid color for users who request reduced motion. |
| Cross-device sync | Both keys are on the CONFIG_ALLOWED_KEYS list, so an operator who marks step 3 done on their laptop and then opens the lesson on their phone sees the same progress. |
Markup
No config block. The seven steps + the three host options are baked into the widget module.
Accessibility
- The journey is rendered as an
<ol>with each step as an<li>— screen readers get the count + the position naturally. - Mark-done button is
<button aria-pressed>, not a checkbox styled as a button — the toggle semantics are explicit. - Step-done status is rendered as visible text ("done" / "pending") AND with a colored status dot in the step number — color reinforces, doesn't replace, the label.
- Polite live region announces "Step 3 of 7 marked done" on each toggle, and "All seven steps done — your site is live" at completion.
- Celebration card honors
prefers-reduced-motionwith a static background instead of the gradient sweep.
Why not animated screenshots
The plan asked for "animated step-by-step screenshots/GIFs" of each host. That would mean shipping ~21 image assets (3 hosts × 7 steps), which drift the moment any host redesigns their dashboard — and Cloudflare, Netlify, and Vercel all redesign their flows multiple times a year. A stepper that owns the journey shape (which is stable) and points to the sibling tab-flip for the host-specific button-clicks (which is what changes) survives those redesigns with one tab-flip text edit instead of a 21-asset re-screenshot pass.
Where it ships
Source
/tools/_shared/workshop/deploy-stepper.js — ~210 LOC. Exports { tag, contextKeys, mount, serialize }. The STEPS array is the journey shape; STEP_COPY holds bilingual EN/ES strings keyed by step id; HOST_OPTIONS holds the host taxonomy with the domain suffix each one assigns to interim URLs.