210 lines
No EOL
8.7 KiB
JavaScript
210 lines
No EOL
8.7 KiB
JavaScript
"use strict";
|
|
/**
|
|
* Generates /public/icons/chat-icon-192.png, chat-icon-512.png,
|
|
* chat-maskable-512.png from inline SVG sources. Also derives the
|
|
* 180x180 apple-touch-icon variants for the chat route
|
|
* (src/app/dashboard/chat/apple-icon.png) and the dashboard root
|
|
* (src/app/apple-icon.png, derived from the existing dashboard icon).
|
|
*
|
|
* Run with `node scripts/build-icons.mjs`. Requires `sharp`
|
|
* (a transitive Next.js dependency, already pulled in by next-pwa).
|
|
*
|
|
* The SVG embeds the Inter font via base64 so the wordmark is identical
|
|
* on every machine regardless of which fonts are installed. If no font
|
|
* can be loaded, the SVG's font-family CSS stack
|
|
* (Inter, system-ui, sans-serif) handles the fallback.
|
|
*/
|
|
import { promises as fs } from "node:fs";
|
|
import path from "node:path";
|
|
import sharp from "sharp";
|
|
|
|
const ROOT = path.resolve(process.cwd());
|
|
|
|
const palette = {
|
|
orange: "#fdb13c",
|
|
black: "#0f172a",
|
|
};
|
|
|
|
async function loadFontBase64() {
|
|
// Check for a local font file first (committed to the repo so Docker
|
|
// builds work offline). Mirrors build-og-image.mjs; returns "" if no
|
|
// font can be loaded, in which case the SVG's font-family CSS stack
|
|
// (Inter, system-ui, sans-serif) handles the fallback.
|
|
const localPath = path.join(ROOT, "public/fonts/inter-800.woff");
|
|
try {
|
|
const buffer = await fs.readFile(localPath);
|
|
return buffer.toString("base64");
|
|
} catch {
|
|
const url =
|
|
"https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZtrib2Ai-4.woff";
|
|
try {
|
|
const res = await fetch(url);
|
|
if (!res.ok) throw new Error(`Failed to fetch Inter: ${res.status}`);
|
|
const buffer = Buffer.from(await res.arrayBuffer());
|
|
return buffer.toString("base64");
|
|
} catch (err) {
|
|
console.warn(`Inter font unavailable — using system sans-serif (${err.message})`);
|
|
return "";
|
|
}
|
|
}
|
|
}
|
|
|
|
const fontB64 = await loadFontBase64();
|
|
|
|
// Non-maskable chat icon (192 and 512). Transparent background.
|
|
// Layout: orange chat bubble + tail nub bottom-left, black cube mark
|
|
// inside the bubble, "ASK" wordmark underneath.
|
|
function chatSvg(size, fontPx) {
|
|
// Bubble geometry, expressed in a 512-coord canvas then scaled to `size`.
|
|
const bubbleX = 76; // bubble left
|
|
const bubbleY = 70; // bubble top
|
|
const bubbleW = 360; // bubble width
|
|
const bubbleH = 300; // bubble height
|
|
const bubbleR = 48; // bubble corner radius
|
|
const tailW = 56; // tail width at top
|
|
const tailH = 64; // tail length downward
|
|
const tailOffsetX = bubbleX + 70; // tail start x (toward left side)
|
|
|
|
// Cube mark geometry — same brand DNA as dashboard icon.
|
|
const cubeX = 256 - 60; // centred horizontally (cube is 120 wide)
|
|
const cubeY = 200; // inside the bubble
|
|
const cubeSize = 120;
|
|
|
|
// Wordmark geometry.
|
|
const wordY = 420;
|
|
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 512 512">
|
|
<defs>
|
|
<style type="text/css">
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: url(data:font/woff;base64,${fontB64}) format('woff');
|
|
}
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- Chat bubble body -->
|
|
<rect x="${bubbleX}" y="${bubbleY}" width="${bubbleW}" height="${bubbleH}" rx="${bubbleR}" fill="${palette.orange}"/>
|
|
|
|
<!-- Chat bubble tail (bottom-left) -->
|
|
<path d="M ${tailOffsetX} ${bubbleY + bubbleH} L ${tailOffsetX + tailW / 2} ${bubbleY + bubbleH + tailH} L ${tailOffsetX + tailW} ${bubbleY + bubbleH} Z" fill="${palette.orange}"/>
|
|
|
|
<!-- Cube mark (dashboard DNA) inside the bubble -->
|
|
<g transform="translate(${cubeX}, ${cubeY})">
|
|
<rect x="0" y="0" width="${cubeSize}" height="${cubeSize}" rx="20" fill="${palette.black}"/>
|
|
<rect x="12" y="12" width="${cubeSize - 24}" height="${cubeSize - 24}" rx="14" fill="${palette.orange}"/>
|
|
<path d="M ${cubeSize / 2} 28 L ${cubeSize - 32} ${cubeSize / 2} L ${cubeSize / 2} ${cubeSize - 28} L 32 ${cubeSize / 2} Z" fill="${palette.black}"/>
|
|
<circle cx="${cubeSize / 2}" cy="${cubeSize / 2}" r="11" fill="${palette.orange}"/>
|
|
</g>
|
|
|
|
<!-- Wordmark -->
|
|
<text x="256" y="${wordY}" font-family="Inter, system-ui, sans-serif" font-size="${fontPx}" font-weight="800" letter-spacing="6" text-anchor="middle" fill="${palette.black}">ASK</text>
|
|
</svg>`;
|
|
}
|
|
|
|
// Maskable variant — orange fills the whole canvas (so OS cropping still
|
|
// shows orange). All meaningful content lives inside the centre ~40%
|
|
// safe-zone, which means a 205x205 region centred on a 512 canvas.
|
|
function chatMaskableSvg(size, fontPx) {
|
|
// Scale everything to fit inside ~205x205 centred region.
|
|
const scale = 205 / 512;
|
|
const offset = (512 - 205) / 2; // centre the safe-zone
|
|
|
|
// Bubble (scaled to ~120x100)
|
|
const bubbleX = offset + 30;
|
|
const bubbleY = offset + 24;
|
|
const bubbleW = 145;
|
|
const bubbleH = 120;
|
|
const bubbleR = 19;
|
|
const tailW = 22;
|
|
const tailH = 26;
|
|
const tailOffsetX = bubbleX + 28;
|
|
|
|
// Cube mark inside the bubble (scaled to ~48)
|
|
const cubeX = bubbleX + (bubbleW - 48) / 2;
|
|
const cubeY = bubbleY + (bubbleH - 48) / 2;
|
|
const cubeSize = 48;
|
|
|
|
// Wordmark below the bubble.
|
|
const wordY = offset + 175;
|
|
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 512 512">
|
|
<defs>
|
|
<style type="text/css">
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: url(data:font/woff;base64,${fontB64}) format('woff');
|
|
}
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- Full-bleed orange background (OS-safe) -->
|
|
<rect width="512" height="512" fill="${palette.orange}"/>
|
|
|
|
<!-- Chat bubble (smaller, centred) -->
|
|
<rect x="${bubbleX}" y="${bubbleY}" width="${bubbleW}" height="${bubbleH}" rx="${bubbleR}" fill="${palette.black}"/>
|
|
<path d="M ${tailOffsetX} ${bubbleY + bubbleH} L ${tailOffsetX + tailW / 2} ${bubbleY + bubbleH + tailH} L ${tailOffsetX + tailW} ${bubbleY + bubbleH} Z" fill="${palette.black}"/>
|
|
|
|
<!-- Cube mark inside the bubble (negative-space: orange on black) -->
|
|
<g transform="translate(${cubeX}, ${cubeY})">
|
|
<rect x="0" y="0" width="${cubeSize}" height="${cubeSize}" rx="8" fill="${palette.orange}"/>
|
|
<rect x="5" y="5" width="${cubeSize - 10}" height="${cubeSize - 10}" rx="6" fill="${palette.black}"/>
|
|
<path d="M ${cubeSize / 2} 12 L ${cubeSize - 13} ${cubeSize / 2} L ${cubeSize / 2} ${cubeSize - 12} L 13 ${cubeSize / 2} Z" fill="${palette.orange}"/>
|
|
<circle cx="${cubeSize / 2}" cy="${cubeSize / 2}" r="4" fill="${palette.black}"/>
|
|
</g>
|
|
|
|
<!-- Wordmark (negative-space: black on orange) -->
|
|
<text x="256" y="${wordY}" font-family="Inter, system-ui, sans-serif" font-size="${fontPx}" font-weight="800" letter-spacing="3" text-anchor="middle" fill="${palette.black}">ASK</text>
|
|
</svg>`;
|
|
}
|
|
|
|
async function renderSvg(svg, outPath, size) {
|
|
const buf = Buffer.from(svg);
|
|
await sharp(buf, { density: 144 })
|
|
.resize({ width: size, height: size })
|
|
.png({ compressionLevel: 9 })
|
|
.toFile(outPath);
|
|
const stat = await fs.stat(outPath);
|
|
console.log(`Wrote ${outPath} (${(stat.size / 1024).toFixed(1)} KB, ${size}x${size})`);
|
|
}
|
|
|
|
async function renderAppleIcon(srcPath, dstPath, radius = 40) {
|
|
// Derive an apple-touch-icon from an existing PNG, resizing to 180x180
|
|
// and applying a rounded-corner mask (default ~22% radius for the iOS
|
|
// "squircle" look).
|
|
const size = 180;
|
|
const maskSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
|
|
<rect width="${size}" height="${size}" rx="${radius}" ry="${radius}" fill="white"/>
|
|
</svg>`;
|
|
const maskPng = await sharp(Buffer.from(maskSvg)).png().toBuffer();
|
|
await sharp(srcPath)
|
|
.resize({ width: size, height: size })
|
|
.composite([{ input: maskPng, blend: "dest-in" }])
|
|
.png()
|
|
.toFile(dstPath);
|
|
const stat = await fs.stat(dstPath);
|
|
console.log(`Wrote ${dstPath} (${(stat.size / 1024).toFixed(1)} KB, ${size}x${size})`);
|
|
}
|
|
|
|
// Main
|
|
await renderSvg(chatSvg(512, 80), path.join(ROOT, "public/icons/chat-icon-512.png"), 512);
|
|
await renderSvg(chatSvg(192, 30), path.join(ROOT, "public/icons/chat-icon-192.png"), 192);
|
|
await renderSvg(chatMaskableSvg(512, 38), path.join(ROOT, "public/icons/chat-maskable-512.png"), 512);
|
|
|
|
// Apple-touch-icon for chat route — derived from the non-maskable 512
|
|
await renderAppleIcon(
|
|
path.join(ROOT, "public/icons/chat-icon-512.png"),
|
|
path.join(ROOT, "src/app/dashboard/chat/apple-icon.png"),
|
|
);
|
|
|
|
// Dashboard apple-icon — derived from the existing dashboard icon
|
|
await renderAppleIcon(
|
|
path.join(ROOT, "public/icons/icon-512.png"),
|
|
path.join(ROOT, "src/app/apple-icon.png"),
|
|
);
|
|
|
|
console.log("All icons rendered."); |