Communitygithub.com

vidluther/pardonned

构建、服务于已构建的 pardonned 站点,并通过真实浏览器验证 UI 变更。

pardonned 是什么?

该技能指导用户构建一个静态 Astro 站点(pardonned),并通过真实的浏览器环境来验证其 UI 变更。其核心工作流程分为三步:首先使用 `pnpm build` 构建站点(需要预先存在 `data/pardonned.db` 数据库文件),然后通过 Python 的 HTTP 服务器在本地 8123 端口上提供构建产物,最后使用 Playwright 自动化驱动浏览器,对页面进行端到端测试。该技能特别指出了 Astro 构建产物与开发模式的差异——由于内联脚本在构建后才会真正生效,因此必须针对生产构建进行验证。此外,还提供了两个关键的注意事项:如何正确拦截 PostHog 的分析事件(需在页面加载后注入补丁),以及如何处理 `/search` 页面的分页逻辑(前几页只能点击,深层页面需通过 URL 参数 `?page=N` 直接访问)。该技能适用于使用 Astro、Playwright 和静态站点生成技术的开发者,尤其是在需要验证客户端路由、URL 状态同步等场景时非常有用。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vidluther/pardonned/tree/HEAD/.claude/skills/verify

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

验证 pardonned 的变更

静态 Astro 站点 — 没有服务器运行时。在真实的浏览器中针对构建后的 dist/ 目录进行验证。

构建与服务

pnpm build                                  # 需要 data/pardonned.db(参见 CLAUDE.md)
cd dist && python3 -m http.server 8123 --bind 127.0.0.1   # 在后台运行

驱动

playwright 已经是一个 devDependency(被爬虫使用),并且已经安装了 Chromium — 在仓库根目录编写一个一次性的 .mjs 文件(这样 node 可以从 node_modules 解析 playwright),用 node 运行,用完后删除。

关键流程位于页面上的内联脚本中(例如 /search/ 的过滤/排序/分页状态全部在客户端处理,通过 history.replaceState 同步到 URL 参数)。

注意事项

  • PostHog 存根问题: 构建后的页面嵌入了真正的 PostHog 代码片段,它会执行 window.posthog = e,并覆盖通过 addInitScript 安装的任何存根。要观察 posthog.capture 的调用,需要在加载后打补丁:page.evaluate(() => { window.posthog = { ...window.posthog, capture: (n, p) => window.__ev.push({n, p}) } })。
  • /search 上的窗口分页: 从第 1 页只能点击第 1、2、…、最后一页。要到达深层页面,可以通过 URL 中的 ?page=N 加载,或者反复点击“下一页”。
  • Astro 开发模式与构建模式: pnpm dev 也可以工作,但 URL 状态行为应该针对生产构建进行验证,因为内联脚本才是真正随产品发布的。

相关技能