diff --git a/app/[locale]/opengraph-image.tsx b/app/[locale]/opengraph-image.tsx index c28014fef..a2f5a0df3 100644 --- a/app/[locale]/opengraph-image.tsx +++ b/app/[locale]/opengraph-image.tsx @@ -16,7 +16,7 @@ export default async function Image({ params }: { params: Promise<{ locale: stri , { ...OG_IMAGE_SIZE, diff --git a/components/OGImageTemplate.tsx b/components/OGImageTemplate.tsx index 5a85b2546..1c112f4ac 100644 --- a/components/OGImageTemplate.tsx +++ b/components/OGImageTemplate.tsx @@ -15,9 +15,8 @@ export function OGImageTemplate({ image, mode = 'dark', }: OGImageTemplateProps) { - const primaryBlue = '#001a4d'; - const accentGreen = '#10a379'; - const saturatedBlue = '#011dff'; + const backgroundDark = '#1a1a1a'; + const primaryGreen = '#0e7a5c'; const containerStyle: React.CSSProperties = { height: '100%', @@ -26,7 +25,7 @@ export function OGImageTemplate({ flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', - backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue, + backgroundColor: mode === 'light' ? '#ffffff' : backgroundDark, padding: '80px', position: 'relative', fontFamily: 'Inter', @@ -65,7 +64,7 @@ export function OGImageTemplate({ left: 0, right: 0, bottom: 0, - background: 'linear-gradient(to right, rgba(0,26,77,0.95), rgba(0,26,77,0.6))', + background: 'linear-gradient(to right, rgba(26,26,26,0.95), rgba(26,26,26,0.6))', }} /> @@ -80,7 +79,7 @@ export function OGImageTemplate({ width: '600px', height: '600px', borderRadius: '300px', - backgroundColor: `${accentGreen}15`, + backgroundColor: `${primaryGreen}15`, display: 'flex', }} /> @@ -92,7 +91,7 @@ export function OGImageTemplate({ style={{ fontSize: '24px', fontWeight: 700, - color: accentGreen, + color: primaryGreen, textTransform: 'uppercase', letterSpacing: '0.3em', marginBottom: '32px', @@ -150,7 +149,7 @@ export function OGImageTemplate({ style={{ width: '80px', height: '6px', - backgroundColor: accentGreen, + backgroundColor: primaryGreen, borderRadius: '3px', marginRight: '24px', }} @@ -165,11 +164,11 @@ export function OGImageTemplate({ display: 'flex', }} > - KLZ Cables + E-TIB GmbH - {/* Saturated Blue Brand Strip */} + {/* Primary Green Brand Strip */}
diff --git a/lib/og-helper.tsx b/lib/og-helper.tsx index 27101c5ba..678d3e20a 100644 --- a/lib/og-helper.tsx +++ b/lib/og-helper.tsx @@ -11,10 +11,21 @@ export async function getOgFonts() { try { console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`); - const boldFont = readFileSync(boldFontPath); - const regularFont = readFileSync(regularFontPath); + const boldFontBuffer = readFileSync(boldFontPath); + const regularFontBuffer = readFileSync(regularFontPath); + + // Satori strictly requires an ArrayBuffer. + const boldFont = boldFontBuffer.buffer.slice( + boldFontBuffer.byteOffset, + boldFontBuffer.byteOffset + boldFontBuffer.byteLength, + ); + const regularFont = regularFontBuffer.buffer.slice( + regularFontBuffer.byteOffset, + regularFontBuffer.byteOffset + regularFontBuffer.byteLength, + ); + console.log( - `[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`, + `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`, ); return [