feat(i18n): localize OG preview image for maxdaten.de

Pass locale as query parameter to the OG image route so the server
resolves translated text (headline, subheadline, badge, brand) via the
existing i18n system. German shares on social media now show German copy
and the maxdaten.de brand instead of hardcoded English.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: MaxDaten

src/routes/+layout.ts

@@ -13,7 +13,10 @@ export const prerender = true;
 
 export const load = ({ url }) => {
     const locale: Locale = getLocaleFromPath(url.pathname);
-    const ogImageUrl = new URL(`/og.jpg?v=${version}`, url.origin).href;
+    const ogImageUrl = new URL(
+        `/og.jpg?locale=${locale}&v=${version}`,
+        url.origin
+    ).href;
 
     const description = t(locale, 'meta.description');
     const title = t(locale, 'meta.title');

src/routes/og.jpg/+server.ts

@@ -3,15 +3,21 @@ import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { generateOgImage } from '$lib/server/og-generation';
 import { loadProfileImageUrl } from './profile-image';
+import { t, type Locale } from '$lib/i18n';
 
 export const prerender = false;
 
 export const GET: RequestHandler = async ({ url }) => {
     try {
+        const locale = (url.searchParams.get('locale') as Locale) || 'en';
         const avatarUrl = await loadProfileImageUrl(url);
 
         return await generateOgImage(ProfileOgCard, {
-            badge: 'Available for 2026',
+            badge: t(locale, 'hero.badge'),
+            headline: t(locale, 'hero.headline'),
+            headlineAccent: t(locale, 'hero.headlineAccent'),
+            sub: t(locale, 'hero.subheadline'),
+            brand: locale === 'de' ? 'maxdaten.de' : 'maxdaten.io',
             avatarUrl,
         });
     } catch (err) {

src/routes/og.jpg/ProfileOgCard.svelte

@@ -3,10 +3,21 @@
 <script lang="ts">
     type Props = {
         badge?: string;
+        headline?: string;
+        headlineAccent?: string;
+        sub?: string;
+        brand?: string;
         avatarUrl?: string;
     };
 
-    let { badge = 'Available for 2026', avatarUrl }: Props = $props();
+    let {
+        badge = 'Available for 2026',
+        headline = 'Products that ship',
+        headlineAccent = 'Systems that scale',
+        sub = 'Full-stack product engineering with knowledge transfer built in — 15+ years from startup to 100M+ requests/day.',
+        brand = 'maxdaten.io',
+        avatarUrl,
+    }: Props = $props();
 </script>
 
 <div class="wrapper">
@@ -17,25 +28,24 @@
     <div class="container">
         <!-- Left Text Column -->
         <div class="og_textbox">
-            <div class="brand">maxdaten.io</div>
+            <div class="brand">{brand}</div>
             <div class="badge">{badge}</div>
             <h1>
-                <span class="line">Products that ship.</span>
+                <span class="line">{headline}.</span>
                 <span class="line"
-                    ><span class="highlight">Systems that scale</span>.</span
+                    ><span class="highlight">{headlineAccent}</span>.</span
                 >
             </h1>
             <p class="sub">
-                Full-stack product engineering with knowledge transfer built in
-                — 15+ years from startup to 100M+ requests/day.
+                {sub}
             </p>
         </div>
 
         <!-- Right Card - Extends beyond frame edge -->
         <div class="card-wrapper">
             <div class="card">
                 <div class="card-header">
-                    <span>MAXDATEN.IO</span>
+                    <span>{brand.toUpperCase()}</span>
                 </div>
                 {#if avatarUrl}
                     <img src={avatarUrl} alt="Avatar" class="avatar" />

src/routes/og.jpg/preview/+page.svelte

@@ -24,7 +24,7 @@
     </div>
 
     <div class="og-preview-card">
-        <ProfileOgCard badge="Available for 2026" avatarUrl={data.avatarUrl} />
+        <ProfileOgCard {...data.ogProps} avatarUrl={data.avatarUrl} />
     </div>
 
     <div class="og-preview-info">

src/routes/og.jpg/preview/+page.ts

@@ -2,17 +2,27 @@ import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 import { authors } from '$lib/data/authors';
 import { loadProfileImageUrl } from '../profile-image';
+import { t, type Locale } from '$lib/i18n';
 
 export const prerender = 'auto';
 
 export const load: PageLoad = async ({ url }) => {
     try {
+        const locale = (url.searchParams.get('locale') as Locale) || 'en';
         const author = authors.jloos;
         const avatarUrl = await loadProfileImageUrl(url);
 
         return {
             author,
             avatarUrl,
+            locale,
+            ogProps: {
+                badge: t(locale, 'hero.badge'),
+                headline: t(locale, 'hero.headline'),
+                headlineAccent: t(locale, 'hero.headlineAccent'),
+                sub: t(locale, 'hero.subheadline'),
+                brand: locale === 'de' ? 'maxdaten.de' : 'maxdaten.io',
+            },
         };
     } catch (err) {
         console.error('Failed to load data for profile OG preview', err);