unaltraweb 0.3.0

data/scripts/web_captures/Dockerfile

@@ -0,0 +1,31 @@
+FROM mcr.microsoft.com/playwright@sha256:f1e7e01021efd65dd1a2c56064be399f3e4de00fd021ac561325f2bfbb2b837a
+
+RUN rm -f /etc/apt/sources.list.d/nodesource.list \
+    && for sources in /etc/apt/sources.list /etc/apt/sources.list.d/*.sources; do \
+      if test -f "$sources"; then \
+        sed -i \
+          -e 's|http://archive.ubuntu.com|https://archive.ubuntu.com|g' \
+          -e 's|http://security.ubuntu.com|https://security.ubuntu.com|g' \
+          "$sources"; \
+      fi; \
+    done \
+    && apt-get update \
+    && apt-get install --no-install-recommends -y python3 python3-yaml \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /opt/unaltraweb/scripts/web_captures
+
+COPY scripts/web_captures/package.json scripts/web_captures/package-lock.json ./
+RUN npm ci --omit=dev
+
+COPY scripts/web_captures/capture.mjs ./capture.mjs
+COPY scripts/web_captures/render.py ./render.py
+COPY scripts/web_captures/Dockerfile ./Dockerfile
+COPY _config.yml /opt/unaltraweb/_config.yml
+COPY _plugins /opt/unaltraweb/_plugins
+COPY _layouts /opt/unaltraweb/_layouts
+COPY _includes /opt/unaltraweb/_includes
+COPY _sass /opt/unaltraweb/_sass
+COPY assets/js /opt/unaltraweb/assets/js
+
+ENTRYPOINT ["node", "/opt/unaltraweb/scripts/web_captures/capture.mjs"]

data/scripts/web_captures/capture.mjs

@@ -0,0 +1,157 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { chromium } from "playwright";
+
+function fail(message) {
+  throw new Error(message);
+}
+
+function sameOrigin(candidate, origin) {
+  try {
+    const url = new URL(candidate);
+    return url.protocol === "data:" || url.protocol === "blob:" || url.origin === origin;
+  } catch {
+    return false;
+  }
+}
+
+async function selectorBox(page, item, label) {
+  const selector = item.selector;
+  const count = await page.locator(selector).count();
+  const strict = item.strict !== false;
+  const required = item.required !== false;
+  if (!count) {
+    if (required) fail(`Missing ${label} selector: ${selector}`);
+    return null;
+  }
+  if (strict && count !== 1) fail(`${label} selector must match exactly one element: ${selector}`);
+  const index = strict ? 0 : Number(item.nth || 0);
+  if (index < 0 || index >= count) fail(`${label} selector index is out of range: ${selector}`);
+  const locator = page.locator(selector).nth(index);
+  return locator.evaluate((element) => {
+    const box = element.getBoundingClientRect();
+    return {
+      x: box.x + window.scrollX,
+      y: box.y + window.scrollY,
+      width: box.width,
+      height: box.height,
+    };
+  });
+}
+
+async function waitForImages(page) {
+  await page.waitForFunction(() => Array.from(document.images).every((image) => image.complete && (!image.currentSrc || image.naturalWidth > 0)));
+}
+
+async function main() {
+  const configPath = process.argv[2];
+  if (!configPath) fail("Usage: capture.mjs CONFIG.json");
+  const config = JSON.parse(await readFile(configPath, "utf8"));
+  const target = new URL(config.url);
+  const browser = await chromium.launch({ headless: true });
+  try {
+    const context = await browser.newContext({
+      viewport: { width: config.viewport.width, height: config.viewport.height },
+      deviceScaleFactor: config.viewport.device_scale_factor,
+      colorScheme: config.theme.color_scheme,
+      reducedMotion: "reduce",
+      locale: config.locale || "en-US",
+      serviceWorkers: "block",
+    });
+    if (config.theme.setting) {
+      await context.addInitScript((setting) => localStorage.setItem("theme", setting), config.theme.setting);
+    }
+    await context.route("**/*", async (route) => {
+      if (sameOrigin(route.request().url(), target.origin)) await route.continue();
+      else await route.abort("blockedbyclient");
+    });
+    await context.routeWebSocket("**/*", (route) => route.close());
+    const page = await context.newPage();
+    context.on("page", (candidate) => {
+      if (candidate !== page) candidate.close().catch(() => {});
+    });
+    const response = await page.goto(target.href, {
+      waitUntil: config.waits.wait_until,
+      timeout: config.waits.timeout_ms,
+    });
+    if (!response) fail(`Navigation returned no response: ${target.href}`);
+    if (response.status() < 200 || response.status() >= 400) fail(`Navigation failed with HTTP ${response.status()}: ${target.href}`);
+    const finalUrl = new URL(page.url());
+    if (finalUrl.origin !== target.origin) fail(`Navigation left the allowed origin: ${finalUrl.href}`);
+
+    for (const wait of config.waits.selectors) {
+      await page.locator(wait.selector).waitFor({ state: wait.state, timeout: config.waits.timeout_ms });
+    }
+    if (config.waits.fonts) await page.evaluate(() => document.fonts.ready);
+    if (config.waits.images) await waitForImages(page);
+    if (config.waits.delay_ms) await page.waitForTimeout(config.waits.delay_ms);
+
+    if (config.theme.expect) {
+      const expected = config.theme.expect;
+      const actual = await page.locator(expected.selector).first().getAttribute(expected.attribute);
+      if (actual !== expected.equals) fail(`Theme expectation failed for ${expected.selector}[${expected.attribute}]: expected ${expected.equals}, got ${actual}`);
+    }
+
+    let origin = { x: 0, y: 0 };
+    let fullPage = config.capture.full_page === true;
+    let clip;
+    const captureSelector = config.capture.selector || config.capture.clip?.selector;
+    if (captureSelector) {
+      const item = { selector: captureSelector, strict: true, required: true };
+      const box = await selectorBox(page, item, "capture");
+      const padding = Number(config.capture.clip ? config.capture.clip.padding : config.capture.padding);
+      clip = {
+        x: Math.max(0, box.x - padding),
+        y: Math.max(0, box.y - padding),
+        width: box.width + padding * 2,
+        height: box.height + padding * 2,
+      };
+      origin = { x: clip.x, y: clip.y };
+      fullPage = false;
+    }
+
+    const annotations = [];
+    for (const annotation of config.annotations) {
+      const box = await selectorBox(page, annotation, `annotation ${annotation.id}`);
+      if (box) annotations.push({ ...annotation, box });
+    }
+
+    const cssDimensions = fullPage
+      ? await page.evaluate(() => ({ width: document.documentElement.scrollWidth, height: document.documentElement.scrollHeight }))
+      : clip
+        ? { width: clip.width, height: clip.height }
+        : { width: config.viewport.width, height: config.viewport.height };
+    const pixelWidth = Math.ceil(cssDimensions.width * config.viewport.device_scale_factor);
+    const pixelHeight = Math.ceil(cssDimensions.height * config.viewport.device_scale_factor);
+    if (pixelWidth > 20000 || pixelHeight > 20000 || pixelWidth * pixelHeight > 80000000) {
+      fail(`Capture dimensions exceed safety limits: ${pixelWidth}x${pixelHeight}`);
+    }
+
+    await page.screenshot({
+      path: config.png_path,
+      fullPage,
+      clip,
+      animations: "disabled",
+      caret: "hide",
+      scale: "device",
+    });
+    const result = {
+      ok: true,
+      browser_version: browser.version(),
+      final_url: finalUrl.href,
+      status: response.status(),
+      origin,
+      dimensions: cssDimensions,
+      device_scale_factor: config.viewport.device_scale_factor,
+      annotations,
+    };
+    await writeFile(config.result_path, JSON.stringify(result, null, 2) + "\n", "utf8");
+    process.stdout.write(JSON.stringify(result) + "\n");
+  } finally {
+    await browser.close();
+  }
+}
+
+main().catch((error) => {
+  process.stderr.write(`${error.stack || error.message}\n`);
+  process.exitCode = 1;
+});

data/scripts/web_captures/package-lock.json

@@ -0,0 +1,56 @@
+{
+  "name": "unaltraweb-web-captures",
+  "version": "0.2.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "unaltraweb-web-captures",
+      "version": "0.2.0",
+      "dependencies": {
+        "playwright": "1.56.1"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.56.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz",
+      "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
+      "dependencies": {
+        "playwright-core": "1.56.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.56.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz",
+      "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}

data/scripts/web_captures/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "unaltraweb-web-captures",
+  "private": true,
+  "version": "0.2.0",
+  "type": "module",
+  "dependencies": {
+    "playwright": "1.56.1"
+  }
+}