feat(legal): bilingual (RU + EN) legal pages with a language + theme switcher

Add English versions of the privacy policy, EULA and offer (ui/legal/*_en.md) and render each legal page as one self-contained bilingual document: both language bodies plus a header language toggle and theme toggle (no back), a small inline ES5 script that switches language client-side (no reload, default Russian + persisted) and applies the theme (system default + persisted override) — mirroring the landing. The offer's English view transliterates the Russian product names spliced from the live catalog.

renderLegalHtml now takes both language sources; renderOffer splices the price list into both; the renderer bakes and reads the _en sources and pre-renders the static pages at boot. Also wrap the /offer/ contour probe in the same retry+timeout as the legal probe (the offer page is now bilingual and larger). Docs + renderer/ui tests updated.

renderer/Dockerfile

@@ -27,7 +27,7 @@ COPY renderer/src/server.mjs renderer/src/render.mjs renderer/src/offer.mjs rend
 # The public legal pages: the owner-edited markdown, read once at boot. GET /offer/ also splices in
 # the live price list fetched from the backend at request time; GET /privacy/ and GET /eula/ are
 # static (no dynamic data).
-COPY ui/legal/offer_ru.md ui/legal/privacy_ru.md ui/legal/eula_ru.md ./legal/
+COPY ui/legal/offer_ru.md ui/legal/offer_en.md ui/legal/privacy_ru.md ui/legal/privacy_en.md ui/legal/eula_ru.md ui/legal/eula_en.md ./legal/
 USER node
 EXPOSE 8090
 CMD ["node", "src/server.mjs"]

renderer/README.md

@@ -4,7 +4,8 @@ An internal Node service that runs shared `ui/src/lib` renderers server-side —
 image build time (`src/entry.ts` → esbuild → `dist/gameimage.mjs`) so there is one renderer and no
 drift from the browser. It serves two surfaces: the finished-game export **PNG** (on
 [skia-canvas](https://github.com/samizdatco/skia-canvas), pixel-identical to the design the owner
-signed off) and the public **legal pages** (the offer, the privacy policy and the EULA).
+signed off) and the public **legal pages** (the offer, the privacy policy and the EULA), each
+bilingual (RU + EN) with a language + theme switcher.
 
 ## Interface
 
@@ -16,13 +17,16 @@ signed off) and the public **legal pages** (the offer, the privacy policy and th
 - `GET /offer/` — the public offer page as `text/html`: the owner-edited `ui/legal/offer_ru.md`
   (baked into the image, read at boot) with the live catalog **price list** (§4.4) fetched as
   markdown from the backend's internal `/api/v1/internal/offer/pricing` (`RENDERER_BACKEND_URL`)
-  and spliced in at the `<#pricing_template#>` marker, then rendered by the shared
-  `ui/src/lib/offer.ts` `renderLegalHtml`. `GET /offer` → 301 `/offer/`. Caddy routes `/offer/`
-  here; a backend outage yields a 502, never a stale price list.
+  and spliced in at the `<#pricing_template#>` marker of both language sources (`offer_ru.md` /
+  `offer_en.md`), then rendered as one bilingual page by the shared `ui/src/lib/offer.ts`
+  `renderLegalHtml` (the English view transliterates the Russian product names client-side).
+  `GET /offer` → 301 `/offer/`. Caddy routes `/offer/` here; a backend outage yields a 502, never a
+  stale price list.
 - `GET /privacy/` — the privacy policy, and `GET /eula/` the end-user licence agreement, both as
-  `text/html`: the owner-edited `ui/legal/privacy_ru.md` / `ui/legal/eula_ru.md` (baked in, read at
-  boot), rendered once at boot by the same shared `renderLegalHtml` and served from cache. **Static** — no backend fetch. `GET /privacy`
-  / `GET /eula` → 301 to the trailing-slash form. Caddy routes these here too.
+  `text/html`: the owner-edited `ui/legal/{privacy,eula}_{ru,en}.md` (baked in, read at boot),
+  rendered once at boot as one bilingual page by the same shared `renderLegalHtml` and served from
+  cache. **Static** — no backend fetch. `GET /privacy` / `GET /eula` → 301 to the trailing-slash
+  form. Caddy routes these here too.
 - `GET /healthz` — liveness (the compose healthcheck the backend's `depends_on` gates on).
 
 The service renders and nothing else: for the PNG, authentication, the participant check and the
@@ -40,8 +44,10 @@ pnpm test             # bundles, then node --test (PNG smoke + offer/legal rende
 # local run on :8090 (RENDERER_PORT overrides). The server reads all three legal sources at boot, so
 # point each at its ui/legal source (the baked paths do not exist in a local checkout); /offer/ also
 # needs a reachable backend for the price fetch:
-RENDERER_OFFER_MD=../ui/legal/offer_ru.md RENDERER_PRIVACY_MD=../ui/legal/privacy_ru.md \
-  RENDERER_EULA_MD=../ui/legal/eula_ru.md RENDERER_BACKEND_URL=http://localhost:8080 node src/server.mjs
+RENDERER_OFFER_MD=../ui/legal/offer_ru.md RENDERER_OFFER_EN_MD=../ui/legal/offer_en.md \
+  RENDERER_PRIVACY_MD=../ui/legal/privacy_ru.md RENDERER_PRIVACY_EN_MD=../ui/legal/privacy_en.md \
+  RENDERER_EULA_MD=../ui/legal/eula_ru.md RENDERER_EULA_EN_MD=../ui/legal/eula_en.md \
+  RENDERER_BACKEND_URL=http://localhost:8080 node src/server.mjs
 ```
 
 The runtime image (`renderer/Dockerfile`, `node:22-slim`) bakes in Liberation Sans (the

renderer/src/legal.mjs

@@ -1,21 +1,24 @@
-// The public legal pages (GET /privacy/, GET /eula/): the owner-edited markdown under ui/legal/,
-// rendered by the SAME shared renderLegalHtml the offer uses (bundled from ui/src/lib/offer). Unlike
-// the offer, these carry no dynamic data — no backend fetch, no marker splice. Kept out of server.mjs
-// so the per-page title/canonical presets are unit-testable without HTTP (test/legal.test.mjs).
+// The public legal pages (GET /privacy/, GET /eula/): the owner-edited RU + EN markdown under
+// ui/legal/, rendered by the SAME shared renderLegalHtml the offer uses (bundled from ui/src/lib/offer)
+// into one bilingual page with a language + theme switcher. Unlike the offer, these carry no dynamic
+// data — no backend fetch, no marker splice. Kept out of server.mjs so the per-page title/canonical
+// presets are unit-testable without HTTP (test/legal.test.mjs).
 import { renderLegalHtml } from '../dist/gameimage.mjs';
 
-// renderPrivacy renders the privacy-policy markdown as the standalone /privacy/ page.
-export function renderPrivacy(markdown) {
-  return renderLegalHtml(markdown, {
-    title: 'Политика конфиденциальности — Эрудит',
+// renderPrivacy renders the privacy-policy markdown (RU + EN) as the standalone /privacy/ page.
+export function renderPrivacy(ruMd, enMd) {
+  return renderLegalHtml({
+    ru: { md: ruMd, title: 'Политика конфиденциальности — Эрудит' },
+    en: { md: enMd, title: 'Privacy Policy — Erudit' },
     canonical: 'https://erudit-game.ru/privacy/',
   });
 }
 
-// renderEula renders the end-user licence agreement markdown as the standalone /eula/ page.
-export function renderEula(markdown) {
-  return renderLegalHtml(markdown, {
-    title: 'Пользовательское соглашение — Эрудит',
+// renderEula renders the end-user licence agreement markdown (RU + EN) as the standalone /eula/ page.
+export function renderEula(ruMd, enMd) {
+  return renderLegalHtml({
+    ru: { md: ruMd, title: 'Пользовательское соглашение — Эрудит' },
+    en: { md: enMd, title: 'Terms of Use — Erudit' },
     canonical: 'https://erudit-game.ru/eula/',
   });
 }

renderer/src/offer.mjs

@@ -1,17 +1,21 @@
-// The public-offer page renderer: splices the live catalog price list into the owner-edited offer
-// markdown and renders it with the SAME renderOfferHtml the landing build used to invoke (bundled
-// from ui/src/lib/offer). Kept out of server.mjs so the substitution is unit-testable without HTTP.
+// The public-offer page renderer: splices the live catalog price list into BOTH language sources of
+// the owner-edited offer markdown at the pricing marker, and renders the bilingual /offer/ page with
+// the SAME renderOfferHtml the browser build uses (bundled from ui/src/lib/offer). The English view
+// transliterates the Russian product names client-side (renderLegalHtml). Kept out of server.mjs so
+// the substitution is unit-testable without HTTP.
 import { renderOfferHtml } from '../dist/gameimage.mjs';
 
-// pricingMarker is the token ui/legal/offer_ru.md carries at §4.4 where the price list belongs. It
+// pricingMarker is the token ui/legal/offer_{ru,en}.md carry at §4.4 where the price list belongs. It
 // mirrors the backend marker (backend/internal/payments/offer.go) and is replaced with the fetched
 // tables before rendering.
 export const pricingMarker = '<#pricing_template#>';
 
-// renderOffer returns the standalone /offer/ HTML: the offer markdown with the pricing marker
+// renderOffer returns the standalone /offer/ HTML: the RU + EN offer markdown with the pricing marker
 // replaced by pricingTables (the two markdown tables the backend projects from the active catalog),
-// rendered to a self-contained document. The replacement is literal (a function replacer) so a "$"
-// in a product title is never read as a replacement pattern; a missing marker leaves the text as is.
-export function renderOffer(offerMarkdown, pricingTables) {
-  return renderOfferHtml(offerMarkdown.replace(pricingMarker, () => pricingTables));
+// rendered to a self-contained bilingual document. The replacement is literal (a function replacer)
+// so a "$" in a product title is never read as a replacement pattern; a missing marker leaves the
+// text as is.
+export function renderOffer(ruMarkdown, enMarkdown, pricingTables) {
+  const splice = (md) => md.replace(pricingMarker, () => pricingTables);
+  return renderOfferHtml(splice(ruMarkdown), splice(enMarkdown));
 }

renderer/src/server.mjs

@@ -24,21 +24,22 @@ const PORT = Number(process.env.RENDERER_PORT || 8090);
 // A render request is a finished game's journal — generously capped.
 const MAX_BODY = 2 * 1024 * 1024;
 
-// The offer prose is baked into the image (renderer/Dockerfile) and read once at boot; only the
-// price list is dynamic (fetched per request). The backend endpoint is internal (off the edge
-// allow-list) and serves the tables from its in-memory cache. RENDERER_OFFER_MD overrides the baked
-// path for a local run (point it at ../ui/legal/offer_ru.md).
-const OFFER_MD = readFileSync(process.env.RENDERER_OFFER_MD || new URL('../legal/offer_ru.md', import.meta.url), 'utf8');
-// The privacy policy (GET /privacy/) and EULA (GET /eula/): static owner-edited markdown, read once at
-// boot, no dynamic data. RENDERER_PRIVACY_MD / RENDERER_EULA_MD override the baked path for a local run.
-const PRIVACY_MD = readFileSync(process.env.RENDERER_PRIVACY_MD || new URL('../legal/privacy_ru.md', import.meta.url), 'utf8');
-const EULA_MD = readFileSync(process.env.RENDERER_EULA_MD || new URL('../legal/eula_ru.md', import.meta.url), 'utf8');
-// Render the static legal pages once at boot and serve the cached HTML: they carry no dynamic data,
-// and re-parsing the large EULA markdown on every request is slow enough under deploy-time host
-// contention (the renderer is CPU/memory-capped) to flake the contour probe. The offer stays
-// per-request because it splices in the live price list.
-const PRIVACY_HTML = renderPrivacy(PRIVACY_MD);
-const EULA_HTML = renderEula(EULA_MD);
+// Each legal page is bilingual (RU + EN); both markdown sources are baked into the image
+// (renderer/Dockerfile) and read once at boot. The offer's price list is the only dynamic part
+// (fetched per request from the backend's internal endpoint and spliced in); privacy + eula carry no
+// dynamic data. The RENDERER_*_MD / RENDERER_*_EN_MD env vars override the baked paths for a local run.
+const rd = (p) => readFileSync(p, 'utf8');
+const OFFER_MD = rd(process.env.RENDERER_OFFER_MD || new URL('../legal/offer_ru.md', import.meta.url));
+const OFFER_EN_MD = rd(process.env.RENDERER_OFFER_EN_MD || new URL('../legal/offer_en.md', import.meta.url));
+const PRIVACY_MD = rd(process.env.RENDERER_PRIVACY_MD || new URL('../legal/privacy_ru.md', import.meta.url));
+const PRIVACY_EN_MD = rd(process.env.RENDERER_PRIVACY_EN_MD || new URL('../legal/privacy_en.md', import.meta.url));
+const EULA_MD = rd(process.env.RENDERER_EULA_MD || new URL('../legal/eula_ru.md', import.meta.url));
+const EULA_EN_MD = rd(process.env.RENDERER_EULA_EN_MD || new URL('../legal/eula_en.md', import.meta.url));
+// Render the static legal pages once at boot and serve the cached HTML: re-parsing the large EULA on
+// every request is slow enough under deploy-time host contention (the renderer is CPU/memory-capped)
+// to flake the contour probe. The offer stays per-request because it splices in the live price list.
+const PRIVACY_HTML = renderPrivacy(PRIVACY_MD, PRIVACY_EN_MD);
+const EULA_HTML = renderEula(EULA_MD, EULA_EN_MD);
 const OFFER_PRICING_URL =
   (process.env.RENDERER_BACKEND_URL || 'http://backend:8080') + '/api/v1/internal/offer/pricing';
 
@@ -82,7 +83,7 @@ const server = createServer(async (req, res) => {
       return;
     }
     if (req.method === 'GET' && path === '/offer/') {
-      const html = renderOffer(OFFER_MD, await fetchOfferPricing());
+      const html = renderOffer(OFFER_MD, OFFER_EN_MD, await fetchOfferPricing());
       res
         .writeHead(200, { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-cache' })
         .end(html);

renderer/test/legal.test.mjs

@@ -1,21 +1,27 @@
-// Unit test for the static legal pages: renderPrivacy / renderEula wrap the owner-edited markdown in
-// the shared legal-page chrome (bundled renderLegalHtml) with the right title + canonical URL and no
-// dynamic data. The prose rendering itself is unit-tested in ui/ (offer.test.ts); here we assert the
-// per-page presets.
+// Unit test for the static legal pages: renderPrivacy / renderEula wrap the owner-edited RU + EN
+// markdown in the shared bilingual legal-page chrome (bundled renderLegalHtml) with the right title +
+// canonical URL and no dynamic data. The prose rendering itself is unit-tested in ui/ (offer.test.ts);
+// here we assert the per-page presets and that both languages reach the document.
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import { renderPrivacy, renderEula } from '../src/legal.mjs';
 
-test('renderPrivacy wraps the markdown in the privacy-page chrome', () => {
-  const html = renderPrivacy('# Политика конфиденциальности\n\n**1.1.** ИНН 290210610742.');
+test('renderPrivacy wraps the RU + EN markdown in the privacy-page chrome', () => {
+  const html = renderPrivacy(
+    '# Политика конфиденциальности\n\n**1.1.** ИНН 290210610742.',
+    '# Privacy Policy\n\n**1.1.** TIN 290210610742.',
+  );
   assert.ok(html.includes('<!doctype html>'), 'a standalone document');
   assert.ok(html.includes('<title>Политика конфиденциальности — Эрудит</title>'), 'the privacy title');
+  assert.ok(html.includes('data-title-en="Privacy Policy — Erudit"'), 'the English title for the toggle');
   assert.ok(html.includes('href="https://erudit-game.ru/privacy/"'), 'the privacy canonical URL');
   assert.ok(html.includes('290210610742'), 'the prose reached the document');
+  assert.ok(html.includes('<main data-lang="en" hidden>'), 'the English body is present, hidden by default');
 });
 
-test('renderEula wraps the markdown in the EULA-page chrome', () => {
-  const html = renderEula('# Лицензионное соглашение\n\nтекст');
+test('renderEula wraps the RU + EN markdown in the EULA-page chrome', () => {
+  const html = renderEula('# Лицензионное соглашение\n\nтекст', '# Terms of Use\n\ntext');
   assert.ok(html.includes('<title>Пользовательское соглашение — Эрудит</title>'), 'the EULA title');
+  assert.ok(html.includes('data-title-en="Terms of Use — Erudit"'), 'the English title for the toggle');
   assert.ok(html.includes('href="https://erudit-game.ru/eula/"'), 'the EULA canonical URL');
 });

renderer/test/offer.test.mjs

@@ -1,7 +1,7 @@
-// Unit test for the public-offer page assembly: renderOffer splices the backend's price-list
-// markdown into the offer at the pricing marker and renders it with the shared renderOfferHtml
-// (bundled from ui/src/lib/offer). The prose rendering itself is unit-tested in ui/ (offer.test.ts);
-// here we assert the substitution and that the tables reach the rendered HTML.
+// Unit test for the public-offer page assembly: renderOffer splices the backend's price-list markdown
+// into BOTH language sources of the offer at the pricing marker and renders them with the shared
+// renderOfferHtml (bundled from ui/src/lib/offer). The prose rendering itself is unit-tested in ui/
+// (offer.test.ts); here we assert the substitution reaches both languages and the tables render.
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import { renderOffer, pricingMarker } from '../src/offer.mjs';
@@ -11,19 +11,21 @@ const tables =
   '| --- | --- | --- | --- |\n' +
   '| 50 «Фишек» | 200.00 | 30 | 100 |';
 
-test('splices the price list into the offer and renders the tables to HTML', () => {
-  const md = `# Публичная оферта\n\n**4.4.** Стоимость Товаров:\n\n${pricingMarker}\n`;
-  const html = renderOffer(md, tables);
-  // The marker is gone and the projected table reached the document as a real HTML table.
-  assert.ok(!html.includes(pricingMarker), 'pricing marker must be substituted');
+test('splices the price list into both language sources and renders the tables', () => {
+  const ru = `# Публичная оферта\n\n**4.4.** Стоимость Товаров:\n\n${pricingMarker}\n`;
+  const en = `# Public offer\n\n**4.4.** Cost of the Goods:\n\n${pricingMarker}\n`;
+  const html = renderOffer(ru, en, tables);
+  // The marker is gone from both languages and the projected table reached the document.
+  assert.ok(!html.includes(pricingMarker), 'the pricing marker must be substituted in both languages');
   assert.ok(html.includes('<table>'), 'the price list must render as an HTML table');
   assert.ok(html.includes('<td>200.00</td>'), 'a rouble price cell must be present');
   assert.ok(html.includes('50 «Фишек»'), 'the product title must be present');
-  // The offer chrome from the shared renderer is intact.
+  assert.ok(html.includes('<h1>Публичная оферта</h1>'), 'the Russian heading rendered');
+  assert.ok(html.includes('<h1>Public offer</h1>'), 'the English heading rendered');
   assert.ok(html.includes('<!doctype html>'));
 });
 
 test('a "$" in a title is substituted literally, not as a replacement pattern', () => {
-  const html = renderOffer(`x ${pricingMarker} y`, '| $5 pack | 1 |');
+  const html = renderOffer(`ru ${pricingMarker}`, `en ${pricingMarker}`, '| $5 pack | 1 |');
   assert.ok(html.includes('$5 pack'), 'a "$" in the tables must survive substitution');
 });