git.iko.soy/diagonal
on master help sign in
diagonal/scripts/store-assets.mjs
29 lines 2.4 kB history raw
1// Renders the Chrome Web Store images into docs/store/ from the popup and settings screenshots the smoke
2// test takes: SMOKE_SHOTS=/tmp/shots npm run smoke && node scripts/store-assets.mjs /tmp/shots
3import { chromium } from "playwright-core";
4import { readFileSync } from "node:fs";
5import { dirname, join } from "node:path";
6import { fileURLToPath } from "node:url";
8const root = join(dirname(fileURLToPath(import.meta.url)), "..");
9const shots = process.argv[2] || "/tmp/shots";
10const img = (p) => `data:image/png;base64,${readFileSync(p).toString("base64")}`;
11const icon = img(join(root, "icons/icon.png"));
12const css = `body{margin:0;font:16px -apple-system,system-ui,sans-serif;background:linear-gradient(135deg,#0d3b2e,#1f6f55);color:#fff;display:flex;align-items:center;justify-content:center;gap:56px;height:100vh;overflow:hidden}
13h1{font-size:40px;margin:0 0 16px;line-height:1.15} p{font-size:20px;line-height:1.45;margin:0;opacity:.9;max-width:460px}
14.shot{border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);background:#fff}`;
16const pages = [
17 { file: "screenshot-popup.png", w: 1280, h: 800, html: `<div><h1>Tabs group themselves</h1><p>Open and close tabs as usual. Diagonal groups related tabs and names each group with Apple's on-device model.</p></div><img class="shot" src="${img(join(shots, "popup.png"))}" style="height:560px">` },
18 { file: "screenshot-settings.png", w: 1280, h: 800, html: `<div><h1>Private by design</h1><p>The model runs on your Mac and sees only a tab's title, address and description. Nothing leaves the Mac.</p></div><div class="shot" style="width:560px;height:680px;overflow:hidden"><img src="${img(join(shots, "options.png"))}" style="width:560px;display:block"></div>` },
19 { file: "promo-small.png", w: 440, h: 280, html: `<img src="${icon}" style="width:120px"><div style="font-size:34px;font-weight:700">Diagonal</div>`, gap: 24 },
20];
22const browser = await chromium.launch({ executablePath: process.env.CHROMIUM_PATH || "/opt/pw-browsers/chromium-1194/chrome-linux/chrome" });
23for (const p of pages) {
24 const page = await browser.newPage({ viewport: { width: p.w, height: p.h } });
25 await page.setContent(`<style>${css}${p.gap ? `body{gap:${p.gap}px}` : ""}</style>${p.html}`);
26 await page.screenshot({ path: join(root, "docs/store", p.file) });
27 console.log("wrote docs/store/" + p.file);
29await browser.close();