cesnimda
033c9ec315
- vitest: dictionary parity, slug-map bijection, content-schema validation, JSON-LD (23) - playwright: both locales, language-switch mapping (incl. no-JS), CV downloads, form happy-path + honeypot, axe a11y on 5 templates x 2 themes (23) - fix: raise ink-faint + light accent to meet WCAG AA 4.5:1 (axe-verified) - fix: gate reveal animations behind html.js so content is visible without JS (progressive enhancement - was hidden at opacity 0); scan reduced-motion path - fix: validate contact form before the anti-bot time-trap (no false success) - chore: ESLint node globals, typed diagram props, resvg fontFiles, prettier pass Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
76 lines
3.3 KiB
TypeScript
76 lines
3.3 KiB
TypeScript
import type { APIRoute } from 'astro';
|
|
import { resolve } from 'node:path';
|
|
import { Resvg } from '@resvg/resvg-js';
|
|
import { PAGE_IDS, type PageId } from '@i18n/slugMap';
|
|
import { LOCALES, type Locale } from '@i18n/locales';
|
|
import { getProfile, getMeta } from '@lib/content';
|
|
|
|
/*
|
|
Build-time OpenGraph images (SEO_SPEC §4): one per page per locale, styled in the
|
|
design system (dark surface, name, role line, trace motif, monogram + page tag).
|
|
The SVG is hand-built (the design is simple and fully controlled) and rasterised by
|
|
resvg, which handles the vendored variable TTFs via its own font DB — satori's
|
|
opentype parser cannot read variable fonts.
|
|
Fonts read from the project source (cwd = site/ at build).
|
|
*/
|
|
|
|
const fontDir = resolve(process.cwd(), 'src/assets/og-fonts');
|
|
const fontFiles = ['SpaceGrotesk.ttf', 'Inter.ttf', 'JetBrainsMono.ttf'].map((n) =>
|
|
resolve(fontDir, n),
|
|
);
|
|
|
|
export function getStaticPaths() {
|
|
const paths: { params: { image: string }; props: { pageId: PageId; locale: Locale } }[] = [];
|
|
for (const pageId of PAGE_IDS) {
|
|
for (const locale of LOCALES) {
|
|
paths.push({ params: { image: `${pageId}-${locale}` }, props: { pageId, locale } });
|
|
}
|
|
}
|
|
return paths;
|
|
}
|
|
|
|
const esc = (s: string) => s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
|
|
export const GET: APIRoute = ({ props }) => {
|
|
const { pageId, locale } = props as { pageId: PageId; locale: Locale };
|
|
const profile = getProfile(locale);
|
|
const roleLine = profile.roleLine;
|
|
const tag = pageId === 'home' ? '' : (getMeta(pageId, locale).title.split(' · ')[0] ?? '');
|
|
const tagW = Math.min(tag.length * 15 + 44, 1000);
|
|
|
|
const svg = `<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="1200" height="630" fill="#0B0E14"/>
|
|
<rect x="64" y="64" width="52" height="52" rx="12" fill="#11151D" stroke="#5C6675"/>
|
|
<text x="90" y="99" font-family="JetBrains Mono" font-size="22" font-weight="700" fill="#E8ECF2" text-anchor="middle">CB</text>
|
|
<text x="134" y="98" font-family="JetBrains Mono" font-size="20" fill="#9AA4B2">cesnimda.co.uk</text>
|
|
|
|
<text x="64" y="330" font-family="Space Grotesk" font-size="80" font-weight="600" fill="#E8ECF2" letter-spacing="-1">${esc(profile.name)}</text>
|
|
<text x="64" y="382" font-family="Inter" font-size="30" fill="#9AA4B2">${esc(roleLine)}</text>
|
|
|
|
<rect x="64" y="420" width="240" height="2" fill="#3ECFAE"/>
|
|
<path d="M304 421 l12 12 H420" fill="none" stroke="#3ECFAE" stroke-width="2"/>
|
|
<circle cx="424" cy="433" r="5" fill="#3ECFAE"/>
|
|
|
|
${
|
|
tag
|
|
? `<rect x="64" y="500" width="${tagW}" height="48" rx="24" fill="none" stroke="#3ECFAE"/>
|
|
<text x="${64 + tagW / 2}" y="530" font-family="JetBrains Mono" font-size="22" fill="#3ECFAE" text-anchor="middle">${esc(tag)}</text>`
|
|
: `<text x="64" y="530" font-family="JetBrains Mono" font-size="22" fill="#5C6675">systems developer · tønsberg, norway</text>`
|
|
}
|
|
</svg>`;
|
|
|
|
const png = new Resvg(svg, {
|
|
fitTo: { mode: 'width', value: 1200 },
|
|
font: { fontFiles, loadSystemFonts: false, defaultFontFamily: 'Inter' },
|
|
})
|
|
.render()
|
|
.asPng();
|
|
|
|
return new Response(new Uint8Array(png), {
|
|
headers: {
|
|
'Content-Type': 'image/png',
|
|
'Cache-Control': 'public, max-age=31536000, immutable',
|
|
},
|
|
});
|
|
};
|