ehoandClaude Opus 4.8
92f825242a
CI / frontend (push) Successful in 2m47s
CI / backend (push) Successful in 2m29s
CI / storybook-a11y (push) Successful in 8m12s
CI / e2e (push) Successful in 3m55s
CI / semgrep (push) Successful in 1m11s
CI / api-client-drift (push) Successful in 2m13s
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>
54 lines
1.9 KiB
JavaScript
54 lines
1.9 KiB
JavaScript
#!/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/)`);
|
|
});
|