website: nxdns.sh on astro and starlight, with the docs and 0.0.24 screenshots

website/demo/gen/shoot.mjs

@@ -21,11 +21,17 @@ async function settle(page) {
 	await page.waitForTimeout(2500);
 }
 
+// The phone form is 390px wide, where the admin UI switches to its drawer layout, and touch-only, so
+// no hover state is drawn.
+const FORMS = [
+	["", { viewport: { width: 1440, height: 900 }, deviceScaleFactor: 2 }],
+	["-phone", { viewport: { width: 390, height: 844 }, deviceScaleFactor: 3, isMobile: true, hasTouch: true }],
+];
+
 const browser = await chromium.launch();
-for (const scheme of ["light", "dark"]) {
+for (const [suffix, form] of FORMS) for (const scheme of ["light", "dark"]) {
 	const context = await browser.newContext({
-		viewport: { width: 1440, height: 900 },
-		deviceScaleFactor: 2,
+		...form,
 		colorScheme: scheme,
 		timezoneId: "Europe/Paris",
 		locale: "en-GB",
@@ -38,10 +44,15 @@ for (const scheme of ["light", "dark"]) {
 	await page.waitForURL((u) => !u.pathname.startsWith("/login"));
 	for (const [name, path] of PAGES) {
 		await page.goto(BASE + path);
-		await page.mouse.move(1430, 890);
+		if (!form.hasTouch) await page.mouse.move(1430, 890);
 		await settle(page);
 		if (name === "activity") await page.waitForTimeout(8000);
-		const file = `${outDir}/${name}-${scheme}.png`;
+		// A phone stacks the health cards and filters above the episodes, so the first screen shows none.
+		if (name === "diagnostics" && form.hasTouch) {
+			await page.getByRole("heading", { name: "Active" }).evaluate((h) => h.scrollIntoView({ block: "start" }));
+			await page.waitForTimeout(500);
+		}
+		const file = `${outDir}/${name}-${scheme}${suffix}.png`;
 		await page.screenshot({ path: file });
 		console.log(file);
 	}