Communitygithub.com

vidluther/pardonned

Construye, sirve y prueba el sitio generado de pardonned para verificar cambios en la interfaz desde el navegador.

¿Qué es pardonned?

Esta habilidad permite verificar cambios en la interfaz de usuario del sitio estático de pardonned, construido con Astro, probando directamente en un navegador real contra la versión compilada en `dist/`. Es útil para desarrolladores que trabajan con el proyecto pardonned y necesitan validar visualmente modificaciones en componentes, rutas y scripts inline (como filtros, ordenamiento y paginación) que dependen de estado del lado del cliente. Funciona en cualquier plataforma que tenga Node.js, pnpm y Playwright instalado, y el proceso se divide en tres pasos: construir el sitio con `pnpm build`, servirlo mediante `python3 -m http.server` y luego usar un script temporal de Playwright para automatizar interacciones y observaciones en el navegador. Además, documenta gotchas importantes como el manejo de PostHog, la paginación profunda y las diferencias entre los entornos de desarrollo y producción de Astro.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vidluther/pardonned/tree/HEAD/.claude/skills/verify

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Verificación de cambios en pardonned

Sitio estático con Astro — no hay servidor en tiempo de ejecución. Verifica contra el dist/ compilado en un navegador real.

Compilar y servir

pnpm build                                  # necesita data/pardonned.db (ver CLAUDE.md)
cd dist && python3 -m http.server 8123 --bind 127.0.0.1   # ejecutar en segundo plano

Automatizar

playwright ya es una devDependency (usada por el scraper) con Chromium instalado — escribe un .mjs desechable en la raíz del repositorio (para que node resuelva playwright desde node_modules), ejecuta con node, luego bórralo.

Los flujos clave viven en scripts inline en las páginas (por ejemplo, en /search/ el estado de filtro/orden/paginación es todo del lado del cliente, sincronizado con los parámetros de la URL mediante history.replaceState).

Advertencias

  • Simulación de PostHog: las páginas compiladas incrustan el snippet real de PostHog, que hace window.posthog = e y sobrescribe cualquier simulación instalada mediante addInitScript. Para observar llamadas a posthog.capture, parchea después de la carga: page.evaluate(() => { window.posthog = { ...window.posthog, capture: (n, p) => window.__ev.push({n, p}) } }).
  • Paginación con ventana en /search: solo las páginas 1, 2, …, última son clicables desde la página 1. Para llegar a una página profunda, cárgala mediante ?page=N en la URL o haz clic en Siguiente repetidamente.
  • Astro dev vs build: pnpm dev también funciona, pero el comportamiento del estado de la URL debe verificarse contra la compilación de producción, ya que los scripts inline son lo que se distribuye.

Skills relacionados