feat(i18n): CIBG "Taal instellen" language switcher

Add a language switcher matching the CIBG Taal-instellen pattern: a <nav> region (sr-only heading + aria-label) with an endonym link per locale (lang/hreflang, the active one aria-current + non-link), mounted right after the skip link in the shell. Compile-time $localize means each locale is its own bundle under /<locale>/, so the switch is a full navigation to the sibling bundle — active locale read from the baked base href. Pure localeLinks() (+spec) builds path-preserving targets. Since `ng serve` serves nl-only at /, add `npm run serve:i18n` (localized build + a tiny static server with per-locale SPA fallback) so the switch is demoable. +story. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 17:21:55 +02:00
parent ee2413f2fe
commit 92f825242a
9 changed files with 253 additions and 8 deletions
@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+// Serve the localized production build so the language switcher actually works locally.
+// `ng build --localize` emits dist/.../browser/{nl,en}/ (each with base href /nl/ or /en/).
+// Plain `ng serve` (npm start) serves only nl at /, so switching 404s there — this static
+// server serves both locale subdirs with per-locale SPA fallback (a miss under /<locale>/…
+// serves that locale's index.html), so deep-link switches resolve. Demo only, not prod infra.
+import { createServer } from 'node:http';
+import { readFile } from 'node:fs/promises';
+import { join, extname, normalize } from 'node:path';
+
+const ROOT = 'dist/atomic-design-poc/browser';
+const PORT = 4300;
+const MIME = {
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.mjs': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff2': 'font/woff2',
+  '.png': 'image/png',
+};
+
+const send = (res, status, body, type) => {
+  res.writeHead(status, { 'content-type': type });
+  res.end(body);
+};
+
+createServer(async (req, res) => {
+  const url = decodeURIComponent((req.url ?? '/').split('?')[0]);
+  // Landing at / has no locale bundle — redirect to Dutch.
+  if (url === '/') {
+    res.writeHead(302, { location: '/nl/' });
+    return res.end();
+  }
+  const rel = normalize(url).replace(/^(\.\.[/\\])+/, ''); // no path traversal
+  const locale = url.startsWith('/en/') ? 'en' : 'nl';
+  try {
+    const file = await readFile(join(ROOT, rel));
+    send(res, 200, file, MIME[extname(rel)] ?? 'application/octet-stream');
+  } catch {
+    // SPA fallback to the requested locale's index.html.
+    try {
+      const index = await readFile(join(ROOT, locale, 'index.html'));
+      send(res, 200, index, 'text/html');
+    } catch {
+      send(res, 404, 'Not found', 'text/plain');
+    }
+  }
+}).listen(PORT, () => {
+  console.log(`Serving ${ROOT} at http://localhost:${PORT}/  (→ /nl/, /en/)`);
+});