Ilia Denisov
1ed624eaf1
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 57s
CI / conformance (pull_request) Successful in 8s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m20s
The landing now always opens in Russian (saved 🌐 choice still wins) —
browser-language detection made the indexed content nondeterministic
(Googlebot renders with en-US). landing.html gains the static Russian
SEO head: title/description, canonical pinned to the production origin,
Open Graph card (Telegram/VK link previews), twitter:card, JSON-LD,
theme-color and the favicon set; the SPA shell turns noindex and its
tab title becomes «Эрудит (Скрэббл)». New assets/icons generator
(same tile design as the VK loader) produces favicon.svg/ico,
apple-touch-icon.png and og-image.png into ui/public/, plus robots.txt.
42 lines
2.0 KiB
Markdown
42 lines
2.0 KiB
Markdown
# Erudit — site icons + Open Graph card
|
||
|
||
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**.
|
||
|
||
```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
|
||
```
|