/** * 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/");