Ilia Denisov
dbe2c4cb94
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Successful in 11s
CI / integration (pull_request) Successful in 23s
CI / ui (pull_request) Successful in 1m13s
CI / conformance (pull_request) Successful in 9s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m54s
The SVG tracer export failed, so the icon was designed collaboratively from
scratch: a wooden «Э» tile with a ✻ score-subscript in Spectral Bold, wood
grain and diagonal light/shadow. Construction is specified in fractions of the
side in docs/ICON_BRANDBOOK.md; the reference generator, pinned Spectral font
and committed masters live in assets/icons/brand/.
One master -> the whole set (assets/icons/brand/build-set.mjs + build-android-res.mjs):
- web (ui/public): favicon.svg (light+dark via prefers-color-scheme), favicon.ico,
apple-touch, PWA any + maskable (+ dark variants), og-image reskinned to
«Эрудит» / Игра в слова
- Capacitor layers: ui/assets/{icon,icon-foreground,icon-background}.png
- Android launcher res, all densities, NO inset, + monochrome themed layer
(anydpi xml: background+foreground+monochrome)
- manual-upload art: assets/icons/brand/{vk,tg,store} (square, no rounding)
Primary variant light; dark where the platform can theme (favicon.svg). The old
LiberationSans generator (assets/icons/build) is removed; docs/ICONS.md retargeted
onto the single master. ANDROID_PLAN icon-rebrand item marked done.
106 lines
6.0 KiB
JavaScript
106 lines
6.0 KiB
JavaScript
'use strict';
|
|
// Slice the whole shipped icon set from the brand master (build-icon.mjs). Renders
|
|
// with the ui package's Playwright chromium. See docs/ICONS.md for the target map.
|
|
//
|
|
// npm i opentype.js && node build-set.mjs
|
|
//
|
|
// Writes: ui/public/* (web), ui/assets/* (Capacitor layers), ./vk/* and ./store/*
|
|
// (manual-upload art). Wiring (manifest, html, Android res) is done separately.
|
|
import { execFileSync } from 'node:child_process';
|
|
import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
|
|
import { fileURLToPath } from 'node:url';
|
|
import { dirname, join } from 'node:path';
|
|
|
|
const DIR = dirname(fileURLToPath(import.meta.url));
|
|
const UI = join(DIR, '..', '..', '..', 'ui');
|
|
const PUB = join(UI, 'public'), ASSETS = join(UI, 'assets');
|
|
const VK = join(DIR, 'vk'), STORE = join(DIR, 'store'), TG = join(DIR, 'tg');
|
|
[VK, STORE, TG].forEach(d => mkdirSync(d, { recursive: true }));
|
|
|
|
// one SVG string for a variant+layer from the reference generator
|
|
const svgFor = (variant, layer) =>
|
|
execFileSync('node', [join(DIR, 'build-icon.mjs'), '--variant', variant, '--layer', layer], { encoding: 'utf8' });
|
|
|
|
const pw = await import(join(UI, 'node_modules', '@playwright', 'test', 'index.js'));
|
|
const { chromium } = pw.default ?? pw;
|
|
const browser = await chromium.launch();
|
|
const page = await browser.newPage();
|
|
|
|
async function pngFromSvg(svg, size, transparent) {
|
|
await page.setViewportSize({ width: size, height: size });
|
|
await page.setContent(`<!doctype html><meta charset=utf8><style>*{margin:0;padding:0}svg{display:block;width:${size}px;height:${size}px}</style>${svg}`, { waitUntil: 'networkidle' });
|
|
return page.locator('svg').screenshot({ omitBackground: !!transparent });
|
|
}
|
|
async function shootHtml(html, w, h) {
|
|
await page.setViewportSize({ width: w, height: h });
|
|
await page.setContent(html, { waitUntil: 'networkidle' });
|
|
return page.screenshot();
|
|
}
|
|
function icoFromPNG(png, sizePx) {
|
|
const h = Buffer.alloc(22);
|
|
h.writeUInt16LE(0, 0); h.writeUInt16LE(1, 2); h.writeUInt16LE(1, 4);
|
|
h.writeUInt8(sizePx, 6); h.writeUInt8(sizePx, 7);
|
|
h.writeUInt16LE(1, 10); h.writeUInt16LE(32, 12);
|
|
h.writeUInt32LE(png.length, 14); h.writeUInt32LE(22, 18);
|
|
return Buffer.concat([h, png]);
|
|
}
|
|
const write = (p, buf) => { writeFileSync(p, buf); console.log('wrote', p.replace(join(DIR, '..', '..', '..'), '.'), buf.length, 'b'); };
|
|
|
|
// ---- pre-render the SVG sources we need ----
|
|
const S = {
|
|
fullLight: svgFor('light', 'full'), fullDark: svgFor('dark', 'full'),
|
|
flatLight: svgFor('light', 'flat'), flatDark: svgFor('dark', 'flat'),
|
|
maskLight: svgFor('light', 'maskable'), maskDark: svgFor('dark', 'maskable'),
|
|
bgLight: svgFor('light', 'background'), fgLight: svgFor('light', 'foreground'),
|
|
monoLight: svgFor('light', 'monochrome'),
|
|
};
|
|
|
|
// ---- favicon.svg: light + dark in one file, toggled by prefers-color-scheme ----
|
|
const inner = svg => svg.replace(/^<svg[^>]*>/, '').replace(/<\/svg>\s*$/, '');
|
|
const faviconSvg =
|
|
`<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">`
|
|
+ `<style>.d{display:none}@media(prefers-color-scheme:dark){.l{display:none}.d{display:inline}}</style>`
|
|
+ `<g class="l">${inner(S.fullLight)}</g><g class="d">${inner(S.fullDark)}</g></svg>\n`;
|
|
write(join(PUB, 'favicon.svg'), Buffer.from(faviconSvg));
|
|
|
|
// ---- web rasters ----
|
|
write(join(PUB, 'favicon.ico'), icoFromPNG(await pngFromSvg(S.flatLight, 32, false), 32));
|
|
write(join(PUB, 'apple-touch-icon.png'), await pngFromSvg(S.flatLight, 180, false));
|
|
write(join(PUB, 'icon-192.png'), await pngFromSvg(S.flatLight, 192, false));
|
|
write(join(PUB, 'icon-512.png'), await pngFromSvg(S.flatLight, 512, false));
|
|
write(join(PUB, 'icon-192-dark.png'), await pngFromSvg(S.flatDark, 192, false));
|
|
write(join(PUB, 'icon-512-dark.png'), await pngFromSvg(S.flatDark, 512, false));
|
|
write(join(PUB, 'icon-maskable-512.png'), await pngFromSvg(S.maskLight, 512, false));
|
|
write(join(PUB, 'icon-maskable-512-dark.png'), await pngFromSvg(S.maskDark, 512, false));
|
|
|
|
// ---- Capacitor layers (ui/assets) ----
|
|
write(join(ASSETS, 'icon.png'), await pngFromSvg(S.flatLight, 1024, false)); // legacy single
|
|
write(join(ASSETS, 'icon-foreground.png'), await pngFromSvg(S.fgLight, 1024, true)); // adaptive fg
|
|
write(join(ASSETS, 'icon-background.png'), await pngFromSvg(S.bgLight, 1024, false)); // adaptive bg
|
|
write(join(DIR, 'android-monochrome.png'), await pngFromSvg(S.monoLight, 1024, true)); // themed layer (wired manually)
|
|
|
|
// ---- VK (no rounding — flat light) ----
|
|
for (const px of [576, 278, 150, 32]) write(join(VK, `vk-${px}.png`), await pngFromSvg(S.flatLight, px, false));
|
|
|
|
// ---- Telegram bot: square, no rounding (TG crops the avatar to a circle) ----
|
|
write(join(TG, 'tg-512.png'), await pngFromSvg(S.flatLight, 512, false)); // bot avatar + Mini App icon
|
|
|
|
// ---- store art ----
|
|
write(join(STORE, 'rustore-512.png'), await pngFromSvg(S.flatLight, 512, false));
|
|
|
|
// ---- wordmark banner (board-green bg + master tile + «Эрудит» / Игра в слова) ----
|
|
const b64 = readFileSync(join(DIR, 'Spectral-Bold.ttf')).toString('base64');
|
|
const banner = (w, h, tile, t1, t2, gap, pad) => `<!doctype html><meta charset=utf8><style>
|
|
@font-face{font-family:Spectral;src:url(data:font/ttf;base64,${b64});font-weight:700}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{width:${w}px;height:${h}px;background:#2a3330;display:flex;align-items:center;gap:${gap}px;padding:0 ${pad}px;font-family:Spectral}
|
|
.tile{width:${tile}px;height:${tile}px;flex:none}.tile svg{width:${tile}px;height:${tile}px;display:block}
|
|
.wm{color:#e7ece8;text-align:center}.t1{font-weight:700;font-size:${t1}px;line-height:1.02;letter-spacing:-2px}
|
|
.t2{font-weight:700;font-size:${t2}px;line-height:1.1;color:#cdd6cf;margin-top:6px}
|
|
</style><div class=tile>${S.fullLight}</div><div class=wm><div class=t1>«Эрудит»</div><div class=t2>Игра в слова</div></div>`;
|
|
write(join(PUB, 'og-image.png'), await shootHtml(banner(1200, 630, 300, 150, 74, 64, 96), 1200, 630));
|
|
write(join(TG, 'tg-demo-640x360.png'), await shootHtml(banner(640, 360, 150, 72, 38, 30, 44), 640, 360));
|
|
|
|
await browser.close();
|
|
console.log('done');
|