feat(icons): rebrand app icon; slice the full set from one master
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
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.
This commit is contained in:
+14
-37
@@ -1,41 +1,18 @@
|
||||
# Erudit — site icons + Open Graph card
|
||||
# Icons
|
||||
|
||||
The favicon set and the `og:image` link-preview card for the public landing
|
||||
(`ui/landing.html`) and the SPA shell (`ui/index.html`). Same design language as the
|
||||
[VK loading-screen logo](../vk/README.md): the wooden Erudit «Э» tile (score `8`),
|
||||
with the wordmark on the app's dark board green (`ui/src/app.css` tokens).
|
||||
|
||||
| Output (committed to `ui/public/`) | Purpose |
|
||||
|------|---------|
|
||||
| `favicon.svg` | Vector favicon, transparent; tile + «Э» only (the score is illegible below ~32 px). |
|
||||
| `favicon.ico` | 32×32 PNG-in-ICO fallback (also answers the browsers' blind `/favicon.ico` probe). |
|
||||
| `apple-touch-icon.png` | 180×180 opaque full-bleed tile; iOS masks its own corners. |
|
||||
| `og-image.png` | 1200×630 card: tile + «Эрудит / Скрэббл — игра в слова». Referenced absolutely as `https://erudit-game.ru/og-image.png`. |
|
||||
|
||||
## How it works
|
||||
|
||||
`build/extract.js` extracts the needed glyph outlines (tile glyphs + every wordmark
|
||||
character) from LiberationSans (Arial-metric, the game's font stack) with their
|
||||
advance widths into `build/glyphs.json` (committed). `build/generate.js` composes
|
||||
plain SVG from those outlines — no font is needed at generation time — writes
|
||||
`favicon.svg` and rasterises the PNG/ICO outputs by screenshotting the SVGs with the
|
||||
`ui` package's Playwright chromium (`@playwright/test`); the `.ico` container is
|
||||
assembled in-script (a single PNG entry). Raster bytes therefore depend on the
|
||||
installed chromium version; the SVG sources are deterministic.
|
||||
|
||||
## Regenerate
|
||||
|
||||
Requirements: Node ≥ 18, `ui` installed (`pnpm install`, provides Playwright).
|
||||
`extract.js` additionally needs `opentype.js` (`npm i opentype.js`); **`generate.js`
|
||||
needs no extra packages**.
|
||||
The whole shipped icon set is sliced from **one master** — see
|
||||
[`brand/`](brand/) for the reference generator, the pinned font and the committed
|
||||
outputs, and [`../../docs/ICON_BRANDBOOK.md`](../../docs/ICON_BRANDBOOK.md) for how the
|
||||
mark is constructed. The per-platform target map (which file goes where) is in
|
||||
[`../../docs/ICONS.md`](../../docs/ICONS.md).
|
||||
|
||||
```sh
|
||||
cd assets/icons
|
||||
|
||||
# 1. (optional) re-extract the glyphs — only if the font or the wordmark changes:
|
||||
# default font: /usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf
|
||||
node build/extract.js [/path/to/font.ttf] # -> build/glyphs.json
|
||||
|
||||
# 2. regenerate everything in ui/public/:
|
||||
node build/generate.js
|
||||
cd brand
|
||||
npm i opentype.js
|
||||
node build-set.mjs # web (ui/public) + Capacitor layers (ui/assets) + vk/ tg/ store/
|
||||
node build-android-res.mjs # Android launcher resources (all densities + monochrome)
|
||||
```
|
||||
|
||||
> The earlier `build/` pipeline (LiberationSans glyph outlines → favicon/apple-touch/OG)
|
||||
> was replaced by `brand/` when the icon was rebranded onto the Spectral «Э» master.
|
||||
> The separate VK loading-screen animation lives in [`../vk/`](../vk/) and is unrelated.
|
||||
|
||||
Reference in New Issue
Block a user