portifolio-evandrodevbr/scripts/build-icons.mjs

/**
 * 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]*?<svg[^>]*>/, "")
    .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 `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${x} ${y} ${side} ${side}"><rect x="${x}" y="${y}" width="${side}" height="${side}" fill="rgb(${BG.r},${BG.g},${BG.b})"/>${inner}</svg>`;
}

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}`);
  }
}