/** * Gera os ícones do PWA (public/brand/pwa-*.png) a partir de public/brand/mark-dark.svg: fundo opaco rgb(8,10,9) * e a marca centrada. No ícone `any` o lado maior da marca ocupa 77% do ícone; no `maskable`, 56%, dentro da zona * segura (círculo de 80%) que o Android preserva ao recortar. * * node scripts/build-icons.mjs # gera os 4 PNG * node scripts/build-icons.mjs --check # só confere os PNG existentes; sai com 1 se algum estiver fora * * O sharp vem como dependência do Next (não é dependência direta do site), por isso é resolvido a partir dele. */ import { readFileSync } from "node:fs"; import { createRequire } from "node:module"; import { dirname, join } from "node:path"; import { fileURLToPath } from "node:url"; const root = join(dirname(fileURLToPath(import.meta.url)), ".."); const require = createRequire(join(root, "package.json")); const sharp = createRequire(require.resolve("next/package.json"))("sharp"); const brand = join(root, "public", "brand"); const BG = { r: 8, g: 10, b: 9 }; // Caixa do desenho dentro do viewBox de mark-dark.svg (x 245..1007, y 255..982). const MARK = { x: 245, y: 255, w: 762, h: 727 }; const ICONS = [ { file: "pwa-192.png", size: 192, fraction: 0.77, min: 0.75, max: 0.79 }, { file: "pwa-512.png", size: 512, fraction: 0.77, min: 0.75, max: 0.79 }, { file: "pwa-maskable-192.png", size: 192, fraction: 0.56, min: 0, max: 0.57, }, { file: "pwa-maskable-512.png", size: 512, fraction: 0.56, min: 0, max: 0.57, }, ]; function iconSvg(size, fraction) { const source = readFileSync(join(brand, "mark-dark.svg"), "utf8"); const inner = source .replace(/^[\s\S]*?]*>/, "") .replace(/<\/svg>\s*$/, ""); // O viewBox é um quadrado centrado na caixa da marca, com lado tal que a largura da marca vira `fraction` dele. const side = MARK.w / fraction; const x = MARK.x + MARK.w / 2 - side / 2; const y = MARK.y + MARK.h / 2 - side / 2; return `${inner}`; } async function check({ file, size, min, max }) { const { data, info } = await sharp(join(brand, file)) .flatten({ background: BG }) .raw() .toBuffer({ resolveWithObject: true }); if (info.width !== size || info.height !== size) { return `${file}: ${info.width}x${info.height}, esperado ${size}x${size}`; } let left = size; let top = size; let right = -1; let bottom = -1; for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { const i = (y * size + x) * info.channels; if (data[i] === BG.r && data[i + 1] === BG.g && data[i + 2] === BG.b) continue; left = Math.min(left, x); right = Math.max(right, x); top = Math.min(top, y); bottom = Math.max(bottom, y); } } if (right < 0) return `${file}: só fundo, sem marca`; const largest = Math.max(right - left + 1, bottom - top + 1) / size; if (largest < min || largest > max) { return `${file}: marca ocupa ${(largest * 100).toFixed(1)}% do lado, esperado ${Math.round(min * 100)}%-${Math.round(max * 100)}%`; } const offset = Math.hypot( (left + right + 1) / 2 - size / 2, (top + bottom + 1) / 2 - size / 2, ) / size; if (offset > 0.02) { return `${file}: centro da marca a ${(offset * 100).toFixed(1)}% do lado do centro do ícone (máximo 2%)`; } return null; } if (process.argv.includes("--check")) { const errors = ( await Promise.all( ICONS.map((icon) => check(icon).catch((e) => `${icon.file}: ${e.message}`), ), ) ).filter(Boolean); if (errors.length) { for (const error of errors) console.error(error); process.exit(1); } console.log("OK"); } else { for (const { file, size, fraction } of ICONS) { await sharp(Buffer.from(iconSvg(size, fraction))) .flatten({ background: BG }) .png({ compressionLevel: 9 }) .toFile(join(brand, file)); console.log(`public/brand/${file}`); } }