feat: optimize event capturing and playback accuracy

This commit is contained in:
2026-02-15 18:06:50 +01:00
parent e9ce406a31
commit 4e762ebfdf
38 changed files with 2847 additions and 523 deletions

View File

@@ -212,8 +212,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
<Container className="relative z-10">
<div className="max-w-4xl animate-slide-up">
<nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
<Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
{t('title')}
<Link href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`} className="hover:text-accent transition-colors">
{t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
</Link>
<span className="mx-3 opacity-30">/</span>
<span className="text-white/90">{categoryTitle}</span>
@@ -361,8 +361,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
<Container className="relative z-10">
<div className="max-w-4xl animate-slide-up">
<nav className="flex items-center mb-12 text-white/40 text-[10px] font-black uppercase tracking-[0.2em]">
<Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
{t('title')}
<Link href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`} className="hover:text-accent transition-colors">
{t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
</Link>
<span className="mx-4 opacity-20">/</span>
<Link

View File

@@ -10,7 +10,7 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
const t = await getTranslations({ locale, namespace: 'Products' });
const fonts = await getOgFonts();
const title = t('meta.title') || t('title');
const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
const description = t('meta.description') || t('subtitle');
return new ImageResponse(

View File

@@ -17,23 +17,23 @@ interface ProductsPageProps {
export async function generateMetadata({ params }: ProductsPageProps): Promise<Metadata> {
const { locale } = await params;
const t = await getTranslations({ locale, namespace: 'Products' });
const title = t('meta.title') || t('title');
const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
const description = t('meta.description') || t('subtitle');
return {
title,
description,
alternates: {
canonical: `/${locale}/products`,
canonical: `/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
languages: {
de: '/de/products',
en: '/en/products',
'x-default': '/en/products',
de: `/de/${await mapFileSlugToTranslated('products', 'de')}`,
en: `/en/${await mapFileSlugToTranslated('products', 'en')}`,
'x-default': `/en/${await mapFileSlugToTranslated('products', 'en')}`,
},
},
openGraph: {
title: `${title} | KLZ Cables`,
description,
url: `${SITE_URL}/${locale}/products`,
url: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
},
twitter: {
card: 'summary_large_image',
@@ -54,34 +54,36 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
const highVoltageSlug = await mapFileSlugToTranslated('high-voltage-cables', locale);
const solarSlug = await mapFileSlugToTranslated('solar-cables', locale);
const productsSlug = await mapFileSlugToTranslated('products', locale);
const categories = [
{
title: t('categories.lowVoltage.title'),
desc: t('categories.lowVoltage.description'),
img: '/uploads/2024/11/low-voltage-category.webp',
icon: '/uploads/2024/11/Low-Voltage.svg',
href: `/${locale}/products/${lowVoltageSlug}`,
href: `/${locale}/${productsSlug}/${lowVoltageSlug}`,
},
{
title: t('categories.mediumVoltage.title'),
desc: t('categories.mediumVoltage.description'),
img: '/uploads/2024/11/medium-voltage-category.webp',
icon: '/uploads/2024/11/Medium-Voltage.svg',
href: `/${locale}/products/${mediumVoltageSlug}`,
href: `/${locale}/${productsSlug}/${mediumVoltageSlug}`,
},
{
title: t('categories.highVoltage.title'),
desc: t('categories.highVoltage.description'),
img: '/uploads/2024/11/high-voltage-category.webp',
icon: '/uploads/2024/11/High-Voltage.svg',
href: `/${locale}/products/${highVoltageSlug}`,
href: `/${locale}/${productsSlug}/${highVoltageSlug}`,
},
{
title: t('categories.solar.title'),
desc: t('categories.solar.description'),
img: '/uploads/2024/11/solar-category.webp',
icon: '/uploads/2024/11/Solar.svg',
href: `/${locale}/products/${solarSlug}`,
href: `/${locale}/${productsSlug}/${solarSlug}`,
},
];