|
1 | 1 | --- |
2 | 2 | name: build-and-verify-docs |
3 | | -description: Build, preview, and verify the Copilot Workshops Astro + Starlight workshop site before committing or opening a PR. Use whenever an author or agent is about to build the site, run a local preview/dev server, check links with lychee, confirm the page-count invariant, run the pre-commit verification sequence for any change under `docs/` (content) or `website/` (tooling), or make a PR-time consistency pass to catch structural drift (renamed paths, stale skill/instruction references, inaccurate CI claims, out-of-date structure trees). |
| 3 | +description: Build, preview, and verify the workshop site using existing checks. Use before committing or updating a PR. Inspect affected content and translations separately rather than relying on fixed page counts. |
4 | 4 | --- |
5 | 5 |
|
6 | 6 | # Build and verify the docs site |
7 | 7 |
|
8 | | -The workshop content is plain Markdown in the repo-root `docs/` directory; the Astro + Starlight site that publishes it lives in `website/` (sourcing content via the loader's `base: '../docs'`). This skill is the single source of truth for **how to build, preview, and verify** that site. The instruction files (`.github/instructions/*`, `.github/copilot-instructions.md`) describe *what content should look like*; this skill describes *how to run the tooling*. |
| 8 | +Lesson source lives in `docs/`; the Astro + Starlight publisher lives in `website/`. This skill owns the verification procedure. Other authoring guidance should link here instead of repeating commands. |
9 | 9 |
|
10 | | -Run every command from the **repo root** unless a step says otherwise. |
| 10 | +## Run existing checks |
11 | 11 |
|
12 | | -## When to use |
13 | | - |
14 | | -Trigger this skill whenever you: |
15 | | - |
16 | | -- are about to build the site (`npm run build`) or start the dev server, |
17 | | -- need to preview content locally, |
18 | | -- are running the pre-commit / pre-PR verification pass on any change under `docs/` (content) or `website/` (tooling), |
19 | | -- want to confirm the page-count invariant or check links, |
20 | | -- are about to open or update a PR that touches `docs/` or `website/`. |
21 | | - |
22 | | -For an optional **deeper, browser-based** pass that confirms pages actually render (console errors, broken images, mounted components), use the [`validate-site-playwright`](../validate-site-playwright/SKILL.md) skill after the static checks here. |
23 | | - |
24 | | -## Local preview |
25 | | - |
26 | | -The Astro dev server is the primary preview surface (hot reload): |
| 12 | +Use the wrapper for your shell, from the repository root or by absolute script path from any directory: |
27 | 13 |
|
28 | 14 | ```bash |
29 | | -cd website && npm install && npm run dev |
| 15 | +bash .github/skills/build-and-verify-docs/scripts/verify.sh |
30 | 16 | ``` |
31 | 17 |
|
32 | | -Open <http://localhost:4321/copilot-workshops/>. Lesson content lives in the repo-root `docs/` directory; the loader sources it via `base: '../docs'`, so no symlinks are required for preview. |
33 | | - |
34 | | -## Verification sequence (run before every commit) |
35 | | - |
36 | | -Run all three. Don't commit if any fails. |
37 | | - |
38 | | -### 1. Build (clean) |
39 | | - |
40 | | -```bash |
41 | | -cd website && rm -rf dist && npm run build |
| 18 | +```powershell |
| 19 | +& ./.github/skills/build-and-verify-docs/scripts/verify.ps1 |
42 | 20 | ``` |
43 | 21 |
|
44 | | -### 2. Page-count invariant |
45 | | - |
46 | | -The workshop has 36 distinct route slugs. Starlight emits each route for the English root locale and the six configured localized routes, using English fallback content when a translation is unavailable. The built site therefore contains $36 \times 7 = 252$ workshop routes plus the one legacy redirect (`/shared/0-prereqs/`, authored as a full-HTML redirect page at `website/src/pages/shared/0-prereqs.astro`). The expected count is 253 `index.html` files when excluding the 404 page. Astro reports 254 HTML files because it includes the 404 page. |
47 | | - |
48 | | -```bash |
49 | | -# distinct route slugs in the English root locale (docs/README.md + docs/<harness>/*.md) |
50 | | -find docs -maxdepth 2 -name '*.md' \ |
51 | | - ! -path 'docs/es-es/*' \ |
52 | | - ! -path 'docs/ja-jp/*' \ |
53 | | - ! -path 'docs/ko-kr/*' \ |
54 | | - ! -path 'docs/pl-pl/*' \ |
55 | | - ! -path 'docs/pt-br/*' \ |
56 | | - ! -path 'docs/zh-cn/*' | wc -l |
57 | | -# built pages (excludes the 404) |
58 | | -find website/dist -name index.html | grep -v 404 | wc -l |
59 | | -``` |
| 22 | +Use an installed Node.js/npm version supported by `website/`, existing site dependencies, and Lychee on `PATH`. Ask before installing missing software. Run PowerShell under your normal execution policy; do not bypass it. The Bash wrapper has been run on macOS; the PowerShell wrapper has not been executed or parser-validated because PowerShell was unavailable. |
60 | 23 |
|
61 | | -`built pages` should equal `(distinct route slugs × configured locales) + 1`. If the build emits **more** pages than that without a matching route or locale change, confirm localized content is directly under `docs/<locale>/` rather than an extra parent directory, then check the underscore-directory exclude in `website/src/content.config.ts`; it is still needed so support directories such as `_images/` are not routed as pages. |
| 24 | +Both wrappers run `npm run check:all`, remove only `website/dist` (refusing a linked output directory), run `npm run build`, then run `lychee --offline --no-progress` against the built HTML. Package scripts remain the source of truth. Output is not suppressed, failures stop verification, and native command exit codes are returned. Each run creates and cleans its own temporary link root. Like the existing Pages workflow, the wrappers map `/copilot-workshops/` to the build; update that mapping alongside the workflow if the configured site base changes. |
62 | 25 |
|
63 | | -### 2b. Translations actually render (not silent English fallback) |
| 26 | +Stop on failure and resolve it before committing. The wrappers do not install dependencies, start servers, compare source text with HTML, or validate translation quality. Offline Lychee checks internal links and images, not external destinations. |
64 | 27 |
|
65 | | -The build and the page-count above are **blind to which content actually renders** — a mis-nested or wrongly-identified locale tree still emits 253 pages served from English fallback. Assert that a known translated page carries translated text and the right `lang` attribute: |
| 28 | +## Inspect affected content |
66 | 29 |
|
67 | | -```bash |
68 | | -grep -o '<title>[^<]*</title>' website/dist/es-es/app/2-add-star-rating/index.html # Spanish title |
69 | | -grep -o 'lang="[^"]*"' website/dist/es-es/app/2-add-star-rating/index.html | head -1 # lang="es-ES" |
70 | | -``` |
| 30 | +Use the diff, source paths and `slug` frontmatter, `website/src/content.config.ts`, and `website/astro.config.mjs` to select and inspect affected output. Do not use a fixed page total as proof of correctness. |
71 | 31 |
|
72 | | -The Spanish title should read `Lección 2 - Ejecutar tu primera sesión de agente`, not the English string. Spot-check a second locale (e.g. `ja-jp` -> `lang="ja-JP"`). |
| 32 | +- Confirm changed lessons appear at their intended routes with their titles, headings, prompts, and admonitions rendered correctly. |
| 33 | +- Compare translated pages with their locale source and language; English fallback is expected only when a translation is absent. |
| 34 | +- Check references and navigation after renames or removals, and confirm support assets are not published as lessons. |
| 35 | +- Review semantic accuracy, teaching flow, translation quality, intentional harness differences, and whether navigation or redirects lead to the appropriate next task. |
73 | 36 |
|
74 | | -### 3. Link check (lychee, offline) |
| 37 | +These inspections are not automated by the wrappers. Use the [browser validation skill][browser-validation] for layout, styling, client-side behavior, console errors, and visual image loading. Existing plain-div admonition styling is not fixed or certified by a successful build. Open changed external links separately and confirm their intended destinations. Report any blocked checks honestly. |
75 | 38 |
|
76 | | -The site builds with `base=/copilot-workshops/`, so internal hrefs are absolute (`/copilot-workshops/foo/`). Symlink that prefix to `website/dist` so lychee can follow internal links: |
| 39 | +## Local preview |
77 | 40 |
|
78 | 41 | ```bash |
79 | | -mkdir -p /tmp/lychee-root && ln -sfn "$PWD/website/dist" /tmp/lychee-root/copilot-workshops \ |
80 | | - && lychee --offline --no-progress --root-dir /tmp/lychee-root 'website/dist/**/*.html' |
| 42 | +(cd website && npm run dev) |
81 | 43 | ``` |
82 | 44 |
|
83 | | -Lychee runs offline and won't catch broken **external** GitHub URLs. When you change absolute `https://github.com/...` links, click through them manually. |
84 | | - |
85 | | -## What CI enforces vs. what is local-only |
86 | | - |
87 | | -`.github/workflows/pages.yml` runs on PRs and on push to `main`. It runs **only**: |
| 45 | +Open the URL printed by the server, including the configured base path. Stop only the server you started when finished. |
88 | 46 |
|
89 | | -1. `npm ci` |
90 | | -2. `npm run build` (Astro build) — must succeed |
91 | | -3. lychee offline link check against `website/dist/` — must pass |
| 47 | +## Consistency before updating a PR |
92 | 48 |
|
93 | | -After a push to `main`, `pages.yml` deploys `website/dist` to GitHub Pages. Browser validation and content-alignment analysis are separate optional/safety-net workflows, not part of the Pages build job. |
| 49 | +- Search for references to paths, names, or conventions changed by the diff, including repository guidance and navigation. |
| 50 | +- Use the [content alignment skill][content-alignment] for duplicated lesson passages and translations that may need matching changes. |
| 51 | +- Keep CI descriptions aligned with `website/package.json` and `.github/workflows/pages.yml`. |
94 | 52 |
|
95 | | -## PR-time consistency pass |
| 53 | +The Pages workflow remains unchanged: it runs type checks, the build, and offline link validation, with deployment restricted to pushes to `main`. Source-page inspection, browser validation, and content-alignment review remain separate. |
96 | 54 |
|
97 | | -The build and link check above catch *mechanical* breakage. They do **not** catch *structural drift* — prose and reference material that silently falls out of sync when files move or conventions change. Before opening or updating a PR, make a consistency pass over everything your change touched: |
98 | | - |
99 | | -- **Renamed or moved a file or folder?** Grep the whole repo for the old path and update every hit — `.md`, instruction files, skills, and the repository-structure trees in `README.md`, `docs/README.md`, `website/README.md`, `AUTHORING.md`, and `.github/copilot-instructions.md`. Example: when `images/` became `_images/`, every `../images/...` reference and every structure tree had to change. |
100 | | -- **Added or removed a skill, agent, instruction file, or workflow?** Grep for references to the old name and remove them. Add a new `.github/instructions/*.instructions.md` file to the **Deeper conventions** list in `AUTHORING.md`, and to the structure block in `.github/copilot-instructions.md` if it's structural. |
101 | | -- **Changed duplicated lesson prose?** Run the `check-content-alignment` skill to identify other inline copies that need the same update. The `.github/workflows/content-alignment.md` agentic workflow runs the same analysis on PRs as a safety net. |
102 | | -- **Described what CI does anywhere?** Confirm it matches `.github/workflows/pages.yml`, which runs the build and the lychee link check. |
103 | | -- **Changed the build or verify steps?** This skill is the single source of truth. `README.md`, `AUTHORING.md`, and `CONTRIBUTING.md` should *point here*, not re-document the commands. Keep any summary in those files consistent with this skill. |
104 | | -- **Repository-structure trees** in `README.md`, `docs/README.md`, `website/README.md`, `AUTHORING.md`, and `.github/copilot-instructions.md` should all reflect the real tree. If you add or rename a top-level content directory, update all of them. |
105 | | -- **Page-count invariant** (section 2 above) should still hold after the build. |
106 | | - |
107 | | -When in doubt, `grep -rn "<old-name>" --include='*.md' .` (excluding `node_modules` and `website/dist`) is the fastest way to surface stale references. |
108 | | - |
109 | | -## Quick reference |
110 | | - |
111 | | -```bash |
112 | | -# from repo root |
113 | | -cd website && rm -rf dist && npm run build && cd .. |
114 | | -mkdir -p /tmp/lychee-root && ln -sfn "$PWD/website/dist" /tmp/lychee-root/copilot-workshops \ |
115 | | - && lychee --offline --no-progress --root-dir /tmp/lychee-root 'website/dist/**/*.html' |
116 | | -``` |
| 55 | +[browser-validation]: ../validate-site-playwright/SKILL.md |
| 56 | +[content-alignment]: ../check-content-alignment/SKILL.md |
0 commit comments