Workshop Kit · referencia del widget
Publicadodeploy-stepper
Rastreador de siete pasos para el flujo de deploy agnóstico al host: descomprimir → registro → subir → nombrar → URL en vivo → dominio personalizado → espera DNS. El plan pedía capturas animadas específicas por host; capturas estáticas significarían enviar assets de imagen que se desactualizan en el momento que un host rediseña su dashboard. Este widget es la versión más ligera que se envía ahora y sobrevive a rediseños de host — es dueño de la forma del viaje y el tracking de progreso, mientras que las instrucciones detalladas específicas por host viven en el tab-flip hermano en la misma página de lección.
Demo en vivo
Elige un host del dropdown — las descripciones de los pasos interpolan el dominio del host y tu slug de restaurante (que lee de restaurantProfile.name). Marca los pasos como listos conforme avanzas; la tarjeta de celebración aparece en el paso 7.
Sin bloque de configuración — los siete pasos vienen incluidos
Contrato
| Comportamiento | Notas |
|---|---|
Lee restaurantProfile.name |
Convertido a slug (minúsculas, solo guiones, máx 30 chars) para llenar el token {slug} en títulos de pasos + URLs. |
Lee deployTarget |
Pre-selecciona el dropdown del host. Cae a "Sin host elegido" — los pasos siguen renderizando con un token genérico host.example. |
Lee deployProgress |
Objeto por id de paso; pre-llena el estado de marcar-listo. |
Escribe deployTarget |
Uno de: '', 'cloudflare-pages', 'netlify', 'vercel'. |
Escribe deployProgress |
{ unzip: bool, signup: bool, upload: bool, name: bool, 'live-url': bool, 'custom-domain': bool, 'dns-wait': bool }. |
| Tarjeta de celebración | Se renderiza solo cuando los siete pasos están listos. Respeta prefers-reduced-motion — el linear-gradient se reemplaza con un color sólido para usuarios que piden movimiento reducido. |
| Sincronización entre dispositivos | Ambas claves están en la lista CONFIG_ALLOWED_KEYS, así un operador que marca el paso 3 como listo en su laptop y luego abre la lección en su teléfono ve el mismo progreso. |
Marcado
Sin bloque de configuración. Los siete pasos + las tres opciones de host vienen incluidos en el módulo del widget.
Accesibilidad
- El viaje se renderiza como un
<ol>con cada paso como un<li>— los lectores de pantalla obtienen el conteo + la posición naturalmente. - El botón marcar-listo es
<button aria-pressed>, no un checkbox estilizado como botón — la semántica de toggle es explícita. - El estado paso-listo se renderiza como texto visible ("listo" / "pendiente") Y con un punto de estado coloreado en el número del paso — el color refuerza, no reemplaza, la etiqueta.
- La región polite en vivo anuncia "Paso 3 de 7 marcado listo" en cada toggle, y "Los siete pasos están listos — tu sitio está en vivo" al completar.
- La tarjeta de celebración honra
prefers-reduced-motioncon un fondo estático en vez del barrido del gradiente.
Por qué no capturas animadas
El plan pedía "capturas paso a paso animadas/GIFs" de cada host. Eso significaría enviar ~21 assets de imagen (3 hosts × 7 pasos), que se desactualizan en el momento que cualquier host rediseña su dashboard — y Cloudflare, Netlify, y Vercel todos rediseñan sus flujos varias veces al año. Un stepper que es dueño de la forma del viaje (que es estable) y apunta al tab-flip hermano para los clics específicos por host (que es lo que cambia) sobrevive esos rediseños con un edit de texto del tab-flip en vez de un re-screenshot de 21 assets.
Dónde se publica
Código fuente
/tools/_shared/workshop/deploy-stepper.js — ~210 LOC. Exporta { tag, contextKeys, mount, serialize }. El array STEPS es la forma del viaje; STEP_COPY tiene strings bilingües EN/ES por id de paso; HOST_OPTIONS tiene la taxonomía de host con el sufijo de dominio que cada uno asigna a las URLs interinas.