109 lines
3.2 KiB
JavaScript
109 lines
3.2 KiB
JavaScript
// Capture the long-form homepage in both system color schemes.
|
||
//
|
||
// bun scripts/capture-homepage.mjs [baseUrl] [outputDirectory]
|
||
//
|
||
// Requires a running local server and Google Chrome. If SITE_PASSWORD is set,
|
||
// the script uses the same signed access cookie as the login route.
|
||
import crypto from "node:crypto";
|
||
import fs from "node:fs/promises";
|
||
import path from "node:path";
|
||
import puppeteer from "puppeteer-core";
|
||
|
||
const baseUrl = process.argv[2] ?? "http://localhost:3000";
|
||
const outputDirectory = path.resolve(process.argv[3] ?? "output");
|
||
const chrome = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
|
||
const password = process.env.SITE_PASSWORD;
|
||
|
||
await fs.mkdir(outputDirectory, { recursive: true });
|
||
|
||
const browser = await puppeteer.launch({
|
||
executablePath: chrome,
|
||
headless: true,
|
||
});
|
||
|
||
async function capture({ name, width, height, colorScheme }) {
|
||
const page = await browser.newPage();
|
||
|
||
try {
|
||
await page.setViewport({ width, height, deviceScaleFactor: 1 });
|
||
await page.emulateMediaFeatures([
|
||
{ name: "prefers-color-scheme", value: colorScheme },
|
||
{ name: "prefers-reduced-motion", value: "reduce" },
|
||
]);
|
||
|
||
if (password) {
|
||
const value = crypto
|
||
.createHmac("sha256", password)
|
||
.update("medscribe-site-access-v1")
|
||
.digest("base64");
|
||
await browser.setCookie({
|
||
name: "medscribe_site_access",
|
||
value,
|
||
url: baseUrl,
|
||
});
|
||
}
|
||
|
||
await page.goto(baseUrl, {
|
||
waitUntil: "domcontentloaded",
|
||
timeout: 60_000,
|
||
});
|
||
if (page.url().includes("/login")) {
|
||
throw new Error("Homepage capture was redirected to /login.");
|
||
}
|
||
|
||
await page.addStyleTag({
|
||
content:
|
||
".pitch-lazy{content-visibility:visible!important}*{animation:none!important;transition:none!important}",
|
||
});
|
||
|
||
await page.evaluate(async () => {
|
||
await document.fonts.ready;
|
||
for (let y = 0; y < document.documentElement.scrollHeight; y += 700) {
|
||
window.scrollTo(0, y);
|
||
await new Promise((resolve) => setTimeout(resolve, 20));
|
||
}
|
||
window.scrollTo(0, 0);
|
||
});
|
||
await page.waitForFunction(
|
||
() => Array.from(document.images).every((image) => image.complete),
|
||
{ timeout: 30_000 },
|
||
);
|
||
|
||
const layout = await page.evaluate(() => ({
|
||
clientWidth: document.documentElement.clientWidth,
|
||
scrollWidth: document.documentElement.scrollWidth,
|
||
scrollHeight: document.documentElement.scrollHeight,
|
||
}));
|
||
if (layout.scrollWidth > layout.clientWidth) {
|
||
throw new Error(
|
||
`${name} has horizontal overflow: ${layout.scrollWidth}px > ${layout.clientWidth}px`,
|
||
);
|
||
}
|
||
|
||
const destination = path.join(outputDirectory, `${name}.png`);
|
||
await page.screenshot({ path: destination, fullPage: true });
|
||
console.log(`${name}: ${layout.clientWidth} × ${layout.scrollHeight}`);
|
||
} finally {
|
||
await page.close();
|
||
}
|
||
}
|
||
|
||
try {
|
||
for (const colorScheme of ["light", "dark"]) {
|
||
await capture({
|
||
name: `homepage-${colorScheme}`,
|
||
width: 1440,
|
||
height: 1000,
|
||
colorScheme,
|
||
});
|
||
await capture({
|
||
name: `homepage-${colorScheme}-mobile`,
|
||
width: 390,
|
||
height: 844,
|
||
colorScheme,
|
||
});
|
||
}
|
||
} finally {
|
||
await browser.close();
|
||
}
|