compare-screenshots: support worktree paths as arguments

When a path to a git-scm.com worktree is given instead of a URL, the
script now automatically builds the site with Hugo and starts a local
server to serve it. The server is torn down immediately after taking
the screenshot.

Due to indentation changes, this commit is best viewed with `-w`.

Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>

Author: dscho

script/compare-screenshots.js

@@ -6,17 +6,64 @@ const usage = `Generate before/after screenshots for two URLs using Playwright.
 Usage:
   node script/compare-screenshots.js [options] <before-url> <after-url>
 
+Arguments can be URLs or paths to git-scm.com worktrees. When a worktree
+path is given, Hugo is run to build the site and a local server is started.
+
 Options:
   --dark              Emulate dark mode (prefers-color-scheme: dark)
   --light             Emulate light mode (default)
   --clip=<WxH+X+Y>    Clip screenshots to specified region (e.g., --clip=1280x720+0+0)
 
 Examples:
   node script/compare-screenshots.js https://git-scm.com http://localhost:5000
+  node script/compare-screenshots.js https://git-scm.com /path/to/worktree
   node script/compare-screenshots.js --dark https://git-scm.com http://localhost:5000
   node script/compare-screenshots.js --clip=1280x720+0+0 https://git-scm.com http://localhost:5000`;
 
 const { chromium } = require('@playwright/test');
+const { spawn, execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+function isWorktree(arg) {
+  if (arg.startsWith('http://') || arg.startsWith('https://')) return false;
+  try {
+    return fs.statSync(path.join(arg, 'hugo.yml')).isFile();
+  } catch {
+    return false;
+  }
+}
+
+async function startServer(worktreePath, port) {
+  // Build Hugo site
+  console.error(`Building Hugo site in ${worktreePath}...`);
+  execSync('hugo', { cwd: worktreePath, stdio: 'inherit' });
+
+  // Start serve-public.js
+  const serverScript = path.join(worktreePath, 'script', 'serve-public.js');
+  const server = spawn('node', [serverScript], {
+    cwd: worktreePath,
+    env: { ...process.env, PORT: String(port) },
+    stdio: ['ignore', 'pipe', 'inherit'],
+  });
+
+  // Wait for server to be ready
+  await new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => reject(new Error('Server startup timeout')), 30000);
+    server.stdout.on('data', (data) => {
+      if (data.toString().includes('Now listening')) {
+        clearTimeout(timeout);
+        resolve();
+      }
+    });
+    server.on('error', (err) => {
+      clearTimeout(timeout);
+      reject(err);
+    });
+  });
+
+  return server;
+}
 
 async function main() {
   const args = process.argv.slice(2);
@@ -77,18 +124,32 @@ async function main() {
       console.error('Using dark mode (prefers-color-scheme: dark)');
     }
 
-    async function takeScreenshot(url, outputPath) {
-      console.error(`Navigating to: ${url}`);
-      await page.goto(url, { waitUntil: 'networkidle' });
-      await page.screenshot({ path: outputPath, clip, fullPage: !clip });
-      const pageDims = await page.evaluate(() => ({
-        width: document.documentElement.scrollWidth,
-        height: document.documentElement.scrollHeight,
-      }));
-      const info = clip
-        ? `${clip.width}x${clip.height}+${clip.x}+${clip.y} of ${pageDims.width}x${pageDims.height}`
-        : `${pageDims.width}x${pageDims.height}`;
-      console.error(`Saved: ${outputPath} (${info})`);
+    async function takeScreenshot(urlOrWorktree, outputPath) {
+      let server;
+      let url = urlOrWorktree;
+
+      if (isWorktree(urlOrWorktree)) {
+        server = await startServer(urlOrWorktree, 5000);
+        url = 'http://localhost:5000/';
+      }
+
+      try {
+        console.error(`Navigating to: ${url}`);
+        await page.goto(url, { waitUntil: 'networkidle' });
+        await page.screenshot({ path: outputPath, clip, fullPage: !clip });
+        const pageDims = await page.evaluate(() => ({
+          width: document.documentElement.scrollWidth,
+          height: document.documentElement.scrollHeight,
+        }));
+        const info = clip
+          ? `${clip.width}x${clip.height}+${clip.x}+${clip.y} of ${pageDims.width}x${pageDims.height}`
+          : `${pageDims.width}x${pageDims.height}`;
+        console.error(`Saved: ${outputPath} (${info})`);
+      } finally {
+        if (server) {
+          server.kill();
+        }
+      }
     }
 
     await takeScreenshot(beforeUrl, '.before.png');