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 [