mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

feat(og): adapt OG images to E-TIB branding and fix ArrayBuffer font parsing

Browse Source
This commit is contained in:
Marc Mintel
2026-06-22 09:12:50 +02:00
parent 3e37c37863
commit 4e4e44a5fd
3 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/opengraph-image.tsx
View File

@@ -16,7 +16,7 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
<OGImageTemplate <OGImageTemplate
title={t('title')} title={t('title')}
description={t('description')} description={t('description')}
label="Reliable Energy Infrastructure" label="Kabelnetzbau & Infrastruktur"
/>, />,
{ {
...OG_IMAGE_SIZE, ...OG_IMAGE_SIZE,

21
components/OGImageTemplate.tsx
View File

@@ -15,9 +15,8 @@ export function OGImageTemplate({
image, image,
mode = 'dark', mode = 'dark',
}: OGImageTemplateProps) { }: OGImageTemplateProps) {
const primaryBlue = '#001a4d'; const backgroundDark = '#1a1a1a';
const accentGreen = '#10a379'; const primaryGreen = '#0e7a5c';
const saturatedBlue = '#011dff';
const containerStyle: React.CSSProperties = { const containerStyle: React.CSSProperties = {
height: '100%', height: '100%',
@@ -26,7 +25,7 @@ export function OGImageTemplate({
flexDirection: 'column', flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue, backgroundColor: mode === 'light' ? '#ffffff' : backgroundDark,
padding: '80px', padding: '80px',
position: 'relative', position: 'relative',
fontFamily: 'Inter', fontFamily: 'Inter',
@@ -65,7 +64,7 @@ export function OGImageTemplate({
left: 0, left: 0,
right: 0, right: 0,
bottom: 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))',
}} }}
/> />
</div> </div>
@@ -80,7 +79,7 @@ export function OGImageTemplate({
width: '600px', width: '600px',
height: '600px', height: '600px',
borderRadius: '300px', borderRadius: '300px',
backgroundColor: `${accentGreen}15`, backgroundColor: `${primaryGreen}15`,
display: 'flex', display: 'flex',
}} }}
/> />
@@ -92,7 +91,7 @@ export function OGImageTemplate({
style={{ style={{
fontSize: '24px', fontSize: '24px',
fontWeight: 700, fontWeight: 700,
color: accentGreen, color: primaryGreen,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '0.3em', letterSpacing: '0.3em',
marginBottom: '32px', marginBottom: '32px',
@@ -150,7 +149,7 @@ export function OGImageTemplate({
style={{ style={{
width: '80px', width: '80px',
height: '6px', height: '6px',
backgroundColor: accentGreen, backgroundColor: primaryGreen,
borderRadius: '3px', borderRadius: '3px',
marginRight: '24px', marginRight: '24px',
}} }}
@@ -165,11 +164,11 @@ export function OGImageTemplate({
display: 'flex', display: 'flex',
}} }}
> >
KLZ Cables E-TIB GmbH
</div> </div>
</div> </div>
{/* Saturated Blue Brand Strip */} {/* Primary Green Brand Strip */}
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',
@@ -177,7 +176,7 @@ export function OGImageTemplate({
right: 0, right: 0,
width: '12px', width: '12px',
height: '100%', height: '100%',
backgroundColor: saturatedBlue, backgroundColor: primaryGreen,
}} }}
/> />
</div> </div>

17
lib/og-helper.tsx
View File

@@ -11,10 +11,21 @@ export async function getOgFonts() {
try { try {
console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`); console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`);
const boldFont = readFileSync(boldFontPath); const boldFontBuffer = readFileSync(boldFontPath);
const regularFont = readFileSync(regularFontPath); 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( console.log(
`[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`, `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`,
); );
return [ return [