feat: Centralize OG image font loading and sizing, simplify product page OG generation, and refine template styling.
Some checks failed
Build & Deploy KLZ Cables / 🔍 Prepare Environment (push) Successful in 21s
Build & Deploy KLZ Cables / 🧪 Quality Assurance (push) Successful in 1m36s
Build & Deploy KLZ Cables / 🏗️ Build & Push (push) Failing after 1m31s
Build & Deploy KLZ Cables / 🚀 Deploy (push) Has been skipped
Build & Deploy KLZ Cables / 🔔 Notifications (push) Successful in 3s

This commit is contained in:
2026-02-01 11:05:37 +01:00
parent 5f9ee7d976
commit 03e597442b
15 changed files with 3074 additions and 144 deletions

42
lib/og-helper.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { readFileSync } from 'fs';
import { join } from 'path';
/**
* Loads the Inter fonts for use in Satori (Next.js OG Image generation).
* Since we are using runtime = 'nodejs', we can read them from the filesystem.
*/
export async function getOgFonts() {
const boldFontPath = join(process.cwd(), 'public/fonts/Inter-Bold.ttf');
const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.ttf');
try {
const boldFont = readFileSync(boldFontPath);
const regularFont = readFileSync(regularFontPath);
return [
{
name: 'Inter',
data: boldFont,
weight: 700 as const,
style: 'normal' as const,
},
{
name: 'Inter',
data: regularFont,
weight: 400 as const,
style: 'normal' as const,
},
];
} catch (error) {
console.error('Failed to load OG fonts from filesystem, falling back to system fonts:', error);
return [];
}
}
/**
* Common configuration for OG images
*/
export const OG_IMAGE_SIZE = {
width: 1200,
height: 630,
};

View File

@@ -305,7 +305,6 @@ const getLabels = (locale: 'en' | 'de') => {
export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
product,
locale,
logoUrl = '/media/logo.svg',
}) => {
const labels = getLabels(locale);
@@ -338,8 +337,12 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
</View>
<View style={styles.productImageCol}>
{product.featuredImage ? (
<Image src={product.featuredImage} style={styles.heroImage} />
<Image
src={product.featuredImage}
style={styles.heroImage}
/>
) : (
<Text style={styles.noImage}>{labels.noImage}</Text>
)}
</View>
@@ -370,7 +373,7 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
style={[
styles.specsTableRow,
index === product.attributes.length - 1 &&
styles.specsTableRowLast,
styles.specsTableRowLast,
]}
>
<View style={styles.specsTableLabelCell}>