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

fix: resolve pipeline timeouts, 418 hydration errors, and english category link 404s
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 14s
Details
Build & Deploy / 🧪 QA (push) Successful in 1m44s
Details
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Details
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Details
Build & Deploy / 🔔 Notify (push) Has been cancelled
Details
Build & Deploy / 🏗️ Build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-26 12:13:35 +01:00
parent 925765233e
commit fa02ac597f
8 changed files with 160 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/RelatedProducts.tsx
View File

@@ -41,10 +41,8 @@ export default async function RelatedProducts({
];
const catFileSlug =
categorySlugs.find((slug) => {
const key = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
const title = t(`categories.${key}.title`);
return product.frontmatter.categories.some(
(cat) => cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title,
(cat) => cat.toLowerCase().replace(/\s+/g, '-') === slug,
);
}) || 'low-voltage-cables';

77
components/home/RecentPosts.tsx
View File

@@ -36,39 +36,51 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
</Link>
</div>
<ul className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 list-none p-0 m-0">
<ul className="grid grid-cols-1 gap-10 list-none p-0 m-0">
{recentPosts.map((post, idx) => (
<li key={`${post.slug}-${idx}`}>
<Link href={`/${locale}/blog/${post.slug}`} className="group block h-full">
<Link
href={`/${locale}/blog/${post.slug}`}
className="group block h-full focus:outline-none"
>
<Card
tag="article"
className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl"
className="relative flex flex-col justify-end border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl overflow-hidden min-h-[400px] md:min-h-[450px]"
>
{post.frontmatter.featuredImage && (
<div className="relative h-64 overflow-hidden">
<>
<Image
src={post.frontmatter.featuredImage.split('?')[0]}
alt={post.frontmatter.title}
fill
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
className="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
style={{
objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
}}
sizes="(max-width: 768px) 100vw, 33vw"
sizes="(max-width: 768px) 100vw, 100vw"
loading="lazy"
/>
<div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="absolute inset-0 bg-neutral-dark/40 group-hover:bg-neutral-dark/30 transition-colors duration-500" />
</>
)}
<div className="relative z-10 w-full p-6 md:p-8 bg-neutral-dark/50 backdrop-blur-md border-t border-white/10 flex flex-col">
<div className="flex flex-wrap items-center gap-4 mb-4">
{post.frontmatter.category && (
<Badge variant="accent" className="absolute top-4 left-4 shadow-md">
<Badge variant="accent" className="shadow-md">
{post.frontmatter.category}
</Badge>
)}
{(new Date(post.frontmatter.date) > new Date() ||
post.frontmatter.public === false) && (
<span className="px-2 py-0.5 border border-white/40 text-white/90 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold bg-neutral-dark/40 shadow-sm">
Draft Preview
</span>
)}
</div>
)}
<div className="p-6 md:p-8 flex flex-col flex-grow">
<div className="text-xs md:text-sm font-medium text-text-light mb-3 md:mb-4 flex items-center gap-2">
<span className="w-6 md:w-8 h-px bg-neutral-medium" />
<time dateTime={post.frontmatter.date}>
<div className="flex items-center gap-3 text-xs md:text-sm font-bold text-white/80 mb-3 tracking-widest uppercase">
<time dateTime={post.frontmatter.date} suppressHydrationWarning>
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
year: 'numeric',
month: 'long',
@@ -76,25 +88,30 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
})}
</time>
</div>
<h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
<h3 className="text-xl md:text-2xl font-bold text-white mb-4 group-hover:text-accent transition-colors drop-shadow-md leading-tight max-w-4xl">
{post.frontmatter.title}
</h3>
<div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
{t('readMore')}
<svg
className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17 8l4 4m0 0l-4 4m4-4H3"
/>
</svg>
<div className="mt-auto flex items-center justify-between border-t border-white/20 pt-6">
<span className="text-accent text-sm md:text-base font-extrabold group-hover:text-white transition-colors">
{t('readMore')}
</span>
<div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-accent group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 backdrop-blur-sm border border-white/20">
<svg
className="w-5 h-5 transition-transform group-hover:translate-x-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17 8l4 4m0 0l-4 4m4-4H3"
/>
</svg>
</div>
</div>
</div>
</Card>