mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

build
All checks were successful
Build & Deploy KLZ Cables / build-and-deploy (push) Successful in 3m34s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-27 00:14:10 +01:00
parent 13ab4bde75
commit 3c45e5563e
2 changed files with 44 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/[locale]/products/[...slug]/opengraph-image.tsx
View File

@@ -1,62 +0,0 @@
import { ImageResponse } from 'next/og';
import { getProductBySlug } from '@/lib/mdx';
import { getTranslations } from 'next-intl/server';
import { OGImageTemplate } from '@/components/OGImageTemplate';
export const runtime = 'nodejs';
export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string[] } }) {
const productSlug = slug[slug.length - 1];
const t = await getTranslations('Products');
// Check if it's a category page
const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
if (categories.includes(productSlug)) {
const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : productSlug;
const categoryDesc = t.has(`categories.${categoryKey}.description`) ? t(`categories.${categoryKey}.description`) : '';
return new ImageResponse(
(
<OGImageTemplate
title={categoryTitle}
description={categoryDesc}
label="Product Category"
/>
),
{
width: 1200,
height: 630,
}
);
}
const product = await getProductBySlug(productSlug, locale);
if (!product) {
return new ImageResponse(
<div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
);
}
const featuredImage = product.frontmatter.images?.[0]
? (product.frontmatter.images[0].startsWith('http')
? product.frontmatter.images[0]
: `https://klz-cables.com${product.frontmatter.images[0]}`)
: undefined;
return new ImageResponse(
(
<OGImageTemplate
title={product.frontmatter.title}
description={product.frontmatter.description}
label={product.frontmatter.categories?.[0] || 'Product'}
image={featuredImage}
/>
),
{
width: 1200,
height: 630,
}
);
}

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

@@ -1,20 +1,57 @@
import { ImageResponse } from 'next/og'; import { ImageResponse } from 'next/og';
import { getProductBySlug } from '@/lib/mdx';
import { getTranslations } from 'next-intl/server'; import { getTranslations } from 'next-intl/server';
import { OGImageTemplate } from '@/components/OGImageTemplate'; import { OGImageTemplate } from '@/components/OGImageTemplate';
export const runtime = 'nodejs'; export const runtime = 'nodejs';
export default async function Image({ params: { locale } }: { params: { locale: string } }) { export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string[] } }) {
const t = await getTranslations({ locale, namespace: 'Products' }); const productSlug = slug[slug.length - 1];
const title = t('meta.title') || t('title'); const t = await getTranslations('Products');
const description = t('meta.description') || t('subtitle');
// Check if it's a category page
const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
if (categories.includes(productSlug)) {
const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : productSlug;
const categoryDesc = t.has(`categories.${categoryKey}.description`) ? t(`categories.${categoryKey}.description`) : '';
return new ImageResponse(
(
<OGImageTemplate
title={categoryTitle}
description={categoryDesc}
label="Product Category"
/>
),
{
width: 1200,
height: 630,
}
);
}
const product = await getProductBySlug(productSlug, locale);
if (!product) {
return new ImageResponse(
<div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
);
}
const featuredImage = product.frontmatter.images?.[0]
? (product.frontmatter.images[0].startsWith('http')
? product.frontmatter.images[0]
: `https://klz-cables.com${product.frontmatter.images[0]}`)
: undefined;
return new ImageResponse( return new ImageResponse(
( (
<OGImageTemplate <OGImageTemplate
title={title} title={product.frontmatter.title}
description={description} description={product.frontmatter.description}
label="Products" label={product.frontmatter.categories?.[0] || 'Product'}
image={featuredImage}
/> />
), ),
{ {