From a5afb1ffd2a0bbe4bb33870b6b3a557628b2f6f5 Mon Sep 17 00:00:00 2001 From: Riley Ho Date: Tue, 9 Jun 2026 18:03:40 +0800 Subject: [PATCH 1/3] feat: add per-page Open Graph images Generate a branded OG image per route at build time with nuxt-og-image (Takumi renderer). Sessions render a card with title, speakers, room, and time; every other page uses a Default template. Session images are prerendered for both zh and en. - Add @nuxt/fonts with Noto Sans SC/TC/JP/KR (weight 400) for CJK glyph coverage. SC is primary: Takumi selects one font per script run rather than per glyph, and SC has the widest Han coverage (Simplified and Traditional, each in its correct form). - Add @iconify-json/noto for full emoji coverage (the module bundles only ~100 by default). - Raise the build heap to 8 GB via cross-env for 4 CJK fonts + ~670 images. - Set nitro.prerender.failOnError: false to tolerate transient Pretalx 500s. - Drop the static site-wide og:image/twitter:image meta; the module now injects both per page. - Share the colors, font-family chain, logo path, and base card layout across both templates via a small app/components/OgImage/theme.ts module. --- app/app.vue | 3 + app/components/OgImage/Default.takumi.vue | 65 + app/components/OgImage/Session.takumi.vue | 68 + app/components/OgImage/theme.ts | 31 + app/pages/[...slug].vue | 5 + app/pages/session.vue | 2 +- app/pages/session/[id].vue | 8 + nuxt.config.ts | 29 +- package.json | 9 +- pnpm-lock.yaml | 1635 +++++++++++++++++---- 10 files changed, 1526 insertions(+), 329 deletions(-) create mode 100644 app/components/OgImage/Default.takumi.vue create mode 100644 app/components/OgImage/Session.takumi.vue create mode 100644 app/components/OgImage/theme.ts diff --git a/app/app.vue b/app/app.vue index 81883dbf..aaab2ebc 100644 --- a/app/app.vue +++ b/app/app.vue @@ -18,6 +18,9 @@ useHead({ { property: 'og:url', content: canonicalUrl }, ], }) + +// Site-wide fallback OG image; individual pages override it with their own. +defineOgImage('Default')