/**
* Renders the Freezmo app icons (PWA + iOS) with headless Chromium.
* Run: node scripts/make-icons.mjs (requires the Playwright browser cache)
*/
import { chromium } from "playwright-core";
import { mkdirSync, existsSync } from "node:fs";
const CHROME = process.env.CHROME ?? "/home/martin/.cache/ms-playwright/chromium-1243/chrome-linux64/chrome";
const OUT = new URL("../public/icons/", import.meta.url).pathname;
mkdirSync(OUT, { recursive: true });
const SNOWFLAKE = (size, stroke, inset) => `
`;
function pageHtml({ size, radius, inset, background, stroke }) {
return `
${SNOWFLAKE(size, stroke, inset)}
`;
}
const targets = [
// Standard PWA icons: rounded square, iOS-like gradient-free accent
{ file: "icon-192.png", size: 192, radius: 42, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
{ file: "icon-512.png", size: 512, radius: 112, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
// Maskable: keep the glyph inside the safe zone (80% circle)
{ file: "maskable-512.png", size: 512, radius: 0, inset: 22, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.6 },
// iOS home screen icon: square, the OS applies its own mask
{ file: "apple-touch-icon.png", size: 180, radius: 0, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
{ file: "apple-touch-icon-152.png", size: 152, radius: 0, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
{ file: "apple-touch-icon-167.png", size: 167, radius: 0, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
{ file: "favicon-32.png", size: 32, radius: 7, inset: 13, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 4 },
];
const browser = await chromium.launch({ executablePath: CHROME, args: ["--no-sandbox"] });
for (const target of targets) {
const page = await browser.newPage({ viewport: { width: target.size, height: target.size }, deviceScaleFactor: 1 });
await page.setContent(pageHtml(target), { waitUntil: "load" });
await page.screenshot({ path: `${OUT}${target.file}`, omitBackground: true });
await page.close();
console.log(` ✓ ${target.file}`);
}
/* iOS splash screens are optional; a plain background keeps them tiny. */
const splash = `${SNOWFLAKE(96, 3.4, 18)}
Freezmo
`;
const splashTargets = [
[1170, 2532], [1284, 2778], [1179, 2556], [1290, 2796], [750, 1334], [828, 1792], [1536, 2048], [1668, 2388],
];
for (const [width, height] of splashTargets) {
const page = await browser.newPage({ viewport: { width, height }, deviceScaleFactor: 1 });
await page.setContent(splash, { waitUntil: "load" });
await page.screenshot({ path: `${OUT}splash-${width}x${height}.png` });
await page.close();
console.log(` ✓ splash-${width}x${height}.png`);
}
await browser.close();
if (!existsSync(`${OUT}icon-512.png`)) process.exit(1);
console.log("icons written to public/icons/");