339 lines
13 KiB
TypeScript
339 lines
13 KiB
TypeScript
import { notFound } from 'next/navigation';
|
|
import { MDXRemote } from 'next-mdx-remote/rsc';
|
|
import { getPostBySlug, getAdjacentPosts, getReadingTime, getHeadings } from '@/lib/blog';
|
|
import { Metadata } from 'next';
|
|
|
|
interface BlogPostProps {
|
|
params: {
|
|
locale: string;
|
|
slug: string;
|
|
};
|
|
}
|
|
|
|
export async function generateMetadata({ params: { locale, slug } }: BlogPostProps): Promise<Metadata> {
|
|
const post = await getPostBySlug(slug, locale);
|
|
|
|
if (!post) return {};
|
|
|
|
const description = post.frontmatter.excerpt || '';
|
|
|
|
return {
|
|
title: post.frontmatter.title,
|
|
description: description,
|
|
openGraph: {
|
|
title: post.frontmatter.title,
|
|
description: description,
|
|
type: 'article',
|
|
publishedTime: post.frontmatter.date,
|
|
authors: ['KLZ Cables'],
|
|
url: `https://klz-cables.com/${locale}/blog/${slug}`,
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: post.frontmatter.title,
|
|
description: description,
|
|
},
|
|
};
|
|
}
|
|
|
|
import Link from 'next/link';
|
|
import VisualLinkPreview from '@/components/blog/VisualLinkPreview';
|
|
import { Callout } from '@/components/ui';
|
|
import HighlightBox from '@/components/blog/HighlightBox';
|
|
import Stats from '@/components/blog/Stats';
|
|
import AnimatedImage from '@/components/blog/AnimatedImage';
|
|
import ChatBubble from '@/components/blog/ChatBubble';
|
|
import SplitHeading from '@/components/blog/SplitHeading';
|
|
import PostNavigation from '@/components/blog/PostNavigation';
|
|
import PowerCTA from '@/components/blog/PowerCTA';
|
|
import TableOfContents from '@/components/blog/TableOfContents';
|
|
|
|
const components = {
|
|
VisualLinkPreview,
|
|
Callout,
|
|
HighlightBox,
|
|
Stats,
|
|
AnimatedImage,
|
|
ChatBubble,
|
|
PowerCTA,
|
|
SplitHeading,
|
|
h1: () => null,
|
|
a: ({ href, children, ...props }: any) => {
|
|
if (href?.startsWith('/')) {
|
|
return (
|
|
<Link href={href} {...props} className="text-primary font-medium hover:underline decoration-2 underline-offset-2 transition-all">
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|
|
return (
|
|
<a
|
|
href={href}
|
|
{...props}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary font-medium hover:underline decoration-2 underline-offset-2 transition-all inline-flex items-center gap-1"
|
|
>
|
|
{children}
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
);
|
|
},
|
|
img: (props: any) => (
|
|
<AnimatedImage src={props.src} alt={props.alt} />
|
|
),
|
|
h2: ({ children, ...props }: any) => (
|
|
<SplitHeading {...props} className="mt-16 mb-6 pb-3 border-b-2 border-primary/20">
|
|
{children}
|
|
</SplitHeading>
|
|
),
|
|
h3: ({ children, ...props }: any) => (
|
|
<h3 {...props} className="text-2xl font-bold text-text-primary mt-12 mb-4">
|
|
{children}
|
|
</h3>
|
|
),
|
|
p: ({ children, ...props }: any) => (
|
|
<p {...props} className="text-lg text-text-secondary leading-relaxed mb-6">
|
|
{children}
|
|
</p>
|
|
),
|
|
ul: ({ children, ...props }: any) => (
|
|
<ul {...props} className="my-8 space-y-3">
|
|
{children}
|
|
</ul>
|
|
),
|
|
ol: ({ children, ...props }: any) => (
|
|
<ol {...props} className="my-8 space-y-3 list-decimal list-inside">
|
|
{children}
|
|
</ol>
|
|
),
|
|
li: ({ children, ...props }: any) => (
|
|
<li {...props} className="text-lg text-text-secondary flex items-start gap-3">
|
|
<span className="text-primary mt-1.5 flex-shrink-0">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
<span className="flex-1">{children}</span>
|
|
</li>
|
|
),
|
|
blockquote: ({ children, ...props }: any) => (
|
|
<blockquote {...props} className="my-8 pl-6 border-l-4 border-primary bg-neutral-light/30 py-4 pr-6 rounded-r-lg">
|
|
<div className="text-lg text-text-primary italic">
|
|
{children}
|
|
</div>
|
|
</blockquote>
|
|
),
|
|
strong: ({ children, ...props }: any) => (
|
|
<strong {...props} className="font-bold text-primary">
|
|
{children}
|
|
</strong>
|
|
),
|
|
code: ({ children, ...props }: any) => (
|
|
<code {...props} className="px-2 py-1 bg-neutral-light text-primary rounded font-mono text-sm">
|
|
{children}
|
|
</code>
|
|
),
|
|
pre: ({ children, ...props }: any) => (
|
|
<pre {...props} className="my-8 p-6 bg-neutral-dark/5 rounded-xl overflow-x-auto">
|
|
{children}
|
|
</pre>
|
|
),
|
|
table: ({ children, ...props }: any) => (
|
|
<div className="my-8 overflow-x-auto rounded-lg border border-neutral-200 shadow-sm">
|
|
<table {...props} className="w-full text-left text-sm text-text-secondary">
|
|
{children}
|
|
</table>
|
|
</div>
|
|
),
|
|
thead: ({ children, ...props }: any) => (
|
|
<thead {...props} className="bg-neutral-50 text-text-primary font-semibold border-b border-neutral-200">
|
|
{children}
|
|
</thead>
|
|
),
|
|
tbody: ({ children, ...props }: any) => (
|
|
<tbody {...props} className="divide-y divide-neutral-200 bg-white">
|
|
{children}
|
|
</tbody>
|
|
),
|
|
tr: ({ children, ...props }: any) => (
|
|
<tr {...props} className="hover:bg-neutral-50/50 transition-colors">
|
|
{children}
|
|
</tr>
|
|
),
|
|
th: ({ children, ...props }: any) => (
|
|
<th {...props} className="px-6 py-4 whitespace-nowrap">
|
|
{children}
|
|
</th>
|
|
),
|
|
td: ({ children, ...props }: any) => (
|
|
<td {...props} className="px-6 py-4">
|
|
{children}
|
|
</td>
|
|
),
|
|
};
|
|
|
|
export default async function BlogPost({ params: { locale, slug } }: BlogPostProps) {
|
|
const post = await getPostBySlug(slug, locale);
|
|
const { prev, next } = await getAdjacentPosts(slug, locale);
|
|
|
|
if (!post) {
|
|
notFound();
|
|
}
|
|
|
|
const headings = getHeadings(post.content);
|
|
|
|
return (
|
|
<article className="bg-white min-h-screen font-sans selection:bg-primary/10 selection:text-primary">
|
|
|
|
{/* Featured Image Header */}
|
|
{post.frontmatter.featuredImage ? (
|
|
<div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center transition-transform duration-[3s] ease-out scale-110 group-hover:scale-100"
|
|
style={{ backgroundImage: `url(${post.frontmatter.featuredImage})` }}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/40 to-transparent" />
|
|
|
|
{/* Title overlay on image */}
|
|
<div className="absolute inset-0 flex flex-col justify-end pb-16 md:pb-24">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-4xl">
|
|
{post.frontmatter.category && (
|
|
<div className="overflow-hidden mb-6">
|
|
<span className="inline-block px-4 py-1.5 bg-accent text-neutral-dark text-xs font-bold uppercase tracking-[0.2em] rounded-sm animate-slight-fade-in-from-bottom">
|
|
{post.frontmatter.category}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-8 leading-[1.1] drop-shadow-2xl animate-slight-fade-in-from-bottom [animation-delay:200ms]">
|
|
{post.frontmatter.title}
|
|
</h1>
|
|
<div className="flex flex-wrap items-center gap-6 text-white/80 text-sm md:text-base font-medium animate-slight-fade-in-from-bottom [animation-delay:400ms]">
|
|
<time dateTime={post.frontmatter.date}>
|
|
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</time>
|
|
<span className="w-1 h-1 bg-white/30 rounded-full" />
|
|
<span>{getReadingTime(post.content)} min read</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<header className="pt-32 pb-16 bg-neutral-50 border-b border-neutral-100">
|
|
<div className="container mx-auto px-4 max-w-4xl">
|
|
{post.frontmatter.category && (
|
|
<div className="mb-6">
|
|
<span className="inline-block px-4 py-1.5 bg-primary/10 text-primary text-xs font-bold uppercase tracking-[0.2em] rounded-sm">
|
|
{post.frontmatter.category}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<h1 className="text-4xl md:text-6xl font-bold text-text-primary mb-8 leading-tight">
|
|
{post.frontmatter.title}
|
|
</h1>
|
|
<div className="flex items-center gap-6 text-text-secondary font-medium">
|
|
<time dateTime={post.frontmatter.date}>
|
|
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</time>
|
|
<span className="w-1 h-1 bg-neutral-300 rounded-full" />
|
|
<span>{getReadingTime(post.content)} min read</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)}
|
|
|
|
{/* Main Content Area with Sticky Narrative Layout */}
|
|
<div className="container mx-auto px-4 py-16 md:py-24">
|
|
<div className="sticky-narrative-container">
|
|
{/* Left Column: Content */}
|
|
<div className="sticky-narrative-content">
|
|
{/* Excerpt/Lead paragraph if available */}
|
|
{post.frontmatter.excerpt && (
|
|
<div className="mb-16 animate-slight-fade-in-from-bottom [animation-delay:600ms]">
|
|
<p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
|
|
{post.frontmatter.excerpt}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main content with enhanced styling */}
|
|
<div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary animate-slight-fade-in-from-bottom [animation-delay:800ms]">
|
|
<MDXRemote source={post.content} components={components} />
|
|
</div>
|
|
|
|
{/* Power CTA */}
|
|
<div className="mt-24 animate-slight-fade-in-from-bottom">
|
|
<PowerCTA locale={locale} />
|
|
</div>
|
|
|
|
{/* Post Navigation */}
|
|
<div className="mt-16">
|
|
<PostNavigation prev={prev} next={next} locale={locale} />
|
|
</div>
|
|
|
|
{/* Back to blog link */}
|
|
<div className="mt-16 pt-10 border-t border-neutral-100">
|
|
<Link
|
|
href={`/${locale}/blog`}
|
|
className="inline-flex items-center gap-3 text-text-secondary hover:text-primary font-bold text-sm uppercase tracking-widest transition-all group"
|
|
>
|
|
<svg className="w-5 h-5 transition-transform group-hover:-translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
{locale === 'de' ? 'Zurück zur Übersicht' : 'Back to Overview'}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Sticky Sidebar */}
|
|
<aside className="sticky-narrative-sidebar hidden lg:block">
|
|
<div className="space-y-12">
|
|
<TableOfContents headings={headings} locale={locale} />
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Structured Data */}
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{
|
|
__html: JSON.stringify({
|
|
'@context': 'https://schema.org',
|
|
'@type': 'BlogPosting',
|
|
headline: post.frontmatter.title,
|
|
datePublished: post.frontmatter.date,
|
|
image: post.frontmatter.featuredImage ? `https://klz-cables.com${post.frontmatter.featuredImage}` : undefined,
|
|
author: {
|
|
'@type': 'Organization',
|
|
name: 'KLZ Cables',
|
|
url: 'https://klz-cables.com',
|
|
},
|
|
publisher: {
|
|
'@type': 'Organization',
|
|
name: 'KLZ Cables',
|
|
logo: {
|
|
'@type': 'ImageObject',
|
|
url: 'https://klz-cables.com/logo.png',
|
|
},
|
|
},
|
|
description: post.frontmatter.excerpt,
|
|
}),
|
|
}}
|
|
/>
|
|
</article>
|
|
);
|
|
}
|