Merge published comic changes and adapt navigation verification

apps/docs/scripts/auth-cli.ts

@@ -141,6 +141,8 @@ async function main() {
     "/",
     "/docs/00-endor-concepts-draft",
     "/figures/endor-architecture.svg",
+    "/figures/endor-review-gate.webp",
+    "/figures/endor-review-desk.webp",
     "/docs/pretext/01-chapter",
     "/materials/pretext/verify.cjs",
     "/materials/pretext/results.chrome156.json",
@@ -190,6 +192,7 @@ async function main() {
     assert.equal(new URL(legacy.headers.get("location")!, base).pathname, `/docs/${doc.slug}`);
   }
   let home = "";
+  let purpose = "";
   for (const route of routes) {
     const response = await request(route, { headers });
     const alias = (searchIndex as { sourceSlug: string }[]).some((doc) => route === `/docs/${doc.sourceSlug}`);
@@ -197,6 +200,7 @@ async function main() {
     if (alias) continue;
     const html = await response.text();
     if (route === "/") home = html;
+    if (route === "/docs/endor/endor-purpose-draft") purpose = html;
     if (route.startsWith("/docs/")) {
       assert.ok(html.includes('aria-label="文档选择"'), route);
       assert.ok(html.includes('<optgroup label="语言与运行时">'), route);
@@ -208,6 +212,32 @@ async function main() {
   }
   assert.ok(home.includes("资料库"));
   assert.ok(home.includes("/docs/source-studies/pretext/overview"));
+  // Inline preview and zoom dialog must both use the compressed browser asset.
+  assert.equal(
+    [...purpose.matchAll(/<img\b[^>]*\bsrc="\/figures\/endor-review-gate\.webp"/g)].length,
+    2,
+    "The comic preview and lightbox must use WebP",
+  );
+  assert.ok(purpose.includes('aria-label="上一张图片"'));
+  assert.ok(purpose.includes('aria-label="下一张图片"'));
+  assert.ok(purpose.includes('aria-label="显示第 1 张图片" aria-current="true"'));
+  assert.ok(purpose.includes('aria-label="显示第 2 张图片"'));
+  assert.equal(
+    [...purpose.matchAll(/<img\b[^>]*\bsrc="\/figures\/endor-review-desk\.webp"/g)].length,
+    0,
+    "The second slide should not download until selected",
+  );
+  for (const name of ["endor-review-gate", "endor-review-desk"]) {
+    assert.ok(!purpose.includes(`/figures/${name}.png`));
+    const comic = await request(`/figures/${name}.webp`, { headers });
+    assert.equal(comic.status, 200);
+    assert.match(comic.headers.get("content-type") || "", /image\/webp/);
+    assert.deepEqual(
+      Buffer.from(await comic.arrayBuffer()),
+      readFileSync(join(__dirname, `public/figures/${name}.webp`)),
+    );
+    assert.equal((await request(`/figures/${name}.png`, { headers })).status, 404);
+  }
   const assets = new Set(
     [...home.matchAll(/(?:src|href)="(\/_next\/static\/[^" ]+)"/g)].map((m) =>
       m[1].replaceAll("&amp;", "&"),