cleanup
This commit is contained in:
@@ -1,254 +0,0 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { getPostBySlug, getPostsByLocale, getMediaById, getSiteInfo } from '@/lib/data';
|
||||
import { getLocalizedPath } from '@/lib/i18n';
|
||||
import { t } from '@/lib/i18n';
|
||||
import { SEO } from '@/components/SEO';
|
||||
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
|
||||
import { ContentRenderer } from '@/components/content/ContentRenderer';
|
||||
|
||||
interface PageProps {
|
||||
params: {
|
||||
slug: string;
|
||||
locale?: string;
|
||||
};
|
||||
}
|
||||
|
||||
function RelatedPosts({ currentSlug, locale }: { currentSlug: string; locale: 'en' | 'de' }) {
|
||||
const allPosts = getPostsByLocale(locale);
|
||||
const currentPost = allPosts.find((p: any) => p.slug === currentSlug);
|
||||
|
||||
if (!currentPost) return null;
|
||||
|
||||
// Get recent posts (excluding current)
|
||||
const relatedPosts = allPosts
|
||||
.filter((p: any) => p.slug !== currentSlug)
|
||||
.slice(0, 3);
|
||||
|
||||
if (relatedPosts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-16 border-t border-gray-200 pt-12">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||
{t('blog.relatedPosts', locale as 'en' | 'de')}
|
||||
</h2>
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{relatedPosts.map((post: any) => (
|
||||
<Link
|
||||
key={post.slug}
|
||||
href={getLocalizedPath(`/blog/${post.slug}`, locale as 'en' | 'de')}
|
||||
className="group block bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-all"
|
||||
>
|
||||
{post.featuredImage && (() => {
|
||||
const media = getMediaById(post.featuredImage);
|
||||
return media ? (
|
||||
<div className="h-40 bg-gray-100 overflow-hidden">
|
||||
<img
|
||||
src={media.localPath}
|
||||
alt={post.title}
|
||||
className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-200"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
})()}
|
||||
<div className="p-4">
|
||||
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors mb-2 line-clamp-2">
|
||||
{post.title}
|
||||
</h3>
|
||||
<div className="text-sm text-gray-600 line-clamp-2 mb-2">
|
||||
<ContentRenderer content={post.excerptHtml} />
|
||||
</div>
|
||||
<span className="text-xs text-blue-600 font-medium">
|
||||
{t('blog.readMore', locale as 'en' | 'de')} →
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
||||
const locale = (params.locale as string) || 'en';
|
||||
const post = getPostBySlug(params.slug, locale as 'en' | 'de');
|
||||
|
||||
if (!post) {
|
||||
return {
|
||||
title: 'Post not found',
|
||||
};
|
||||
}
|
||||
|
||||
const site = getSiteInfo();
|
||||
|
||||
// Get featured image URL if available
|
||||
let featuredImageUrl: string | undefined;
|
||||
if (post.featuredImage) {
|
||||
const media = getMediaById(post.featuredImage);
|
||||
if (media) {
|
||||
featuredImageUrl = media.localPath;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${post.title} | ${site.title}`,
|
||||
description: post.excerptHtml || undefined,
|
||||
alternates: {
|
||||
canonical: getLocalizedPath(`/blog/${post.slug}`, locale as 'en' | 'de'),
|
||||
languages: {
|
||||
'en': `/en/blog/${post.slug}`,
|
||||
'de': `/de/blog/${post.slug}`,
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title: post.title,
|
||||
description: post.excerptHtml || undefined,
|
||||
type: 'article',
|
||||
locale,
|
||||
publishedTime: post.datePublished,
|
||||
modifiedTime: post.updatedAt,
|
||||
...(featuredImageUrl && {
|
||||
images: [{ url: featuredImageUrl, alt: post.title }],
|
||||
}),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const postsEN = getPostsByLocale('en');
|
||||
const postsDE = getPostsByLocale('de');
|
||||
|
||||
const enParams = postsEN.map((post: any) => ({
|
||||
slug: post.slug,
|
||||
locale: 'en',
|
||||
}));
|
||||
|
||||
const deParams = postsDE.map((post: any) => ({
|
||||
slug: post.slug,
|
||||
locale: 'de',
|
||||
}));
|
||||
|
||||
return [...enParams, ...deParams];
|
||||
}
|
||||
|
||||
export default async function BlogDetailPage({ params }: PageProps) {
|
||||
const locale = (params.locale as string) || 'en';
|
||||
const post = getPostBySlug(params.slug, locale as 'en' | 'de');
|
||||
|
||||
if (!post) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Content is already processed during data export
|
||||
|
||||
return (
|
||||
<>
|
||||
<SEO
|
||||
title={post.title}
|
||||
description={post.excerptHtml}
|
||||
locale={locale as 'en' | 'de'}
|
||||
path={`/blog/${post.slug}`}
|
||||
type="article"
|
||||
publishedTime={post.datePublished}
|
||||
modifiedTime={post.updatedAt}
|
||||
images={post.featuredImage ? [getMediaById(post.featuredImage)?.localPath].filter(Boolean) : undefined}
|
||||
/>
|
||||
|
||||
<article className="bg-white py-12 sm:py-20">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Back to blog link */}
|
||||
<div className="mb-8">
|
||||
<Link
|
||||
href={getLocalizedPath('/blog', locale as 'en' | 'de')}
|
||||
className="inline-flex items-center text-sm text-gray-600 hover:text-gray-900 transition-colors"
|
||||
>
|
||||
<svg className="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
{t('blog.backToBlog', locale as 'en' | 'de')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Article Header */}
|
||||
<header className="mb-10">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<time className="text-sm text-gray-500">
|
||||
{new Date(post.datePublished).toLocaleDateString(locale as 'en' | 'de', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
{post.excerptHtml && (
|
||||
<p className="text-xl text-gray-600 leading-relaxed">
|
||||
<ContentRenderer content={post.excerptHtml} />
|
||||
</p>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Featured Image */}
|
||||
{post.featuredImage && (() => {
|
||||
const media = getMediaById(post.featuredImage);
|
||||
return media ? (
|
||||
<div className="mb-12 rounded-2xl overflow-hidden bg-gray-100">
|
||||
<img
|
||||
src={media.localPath}
|
||||
alt={post.title}
|
||||
className="w-full h-auto object-cover"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
})()}
|
||||
|
||||
{/* Article Content */}
|
||||
<div className="mb-12">
|
||||
<ContentRenderer
|
||||
content={post.contentHtml}
|
||||
className="prose prose-lg prose-blue"
|
||||
parsePatterns={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Article Footer */}
|
||||
<footer className="border-t border-gray-200 pt-8 mt-12">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div className="flex gap-4">
|
||||
<Link
|
||||
href={getLocalizedPath('/blog', locale as 'en' | 'de')}
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
{t('blog.backToList', locale as 'en' | 'de')}
|
||||
</Link>
|
||||
<Link
|
||||
href={getLocalizedPath('/contact', locale as 'en' | 'de')}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{t('nav.contact', locale as 'en' | 'de')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Related Posts */}
|
||||
<RelatedPosts currentSlug={params.slug} locale={locale as 'en' | 'de'} />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Locale Switcher */}
|
||||
<div className="bg-gray-50 py-8">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<LocaleSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,261 +0,0 @@
|
||||
import { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { getPostsByLocale, getCategoriesByLocale, getMediaById } from '@/lib/data';
|
||||
import { getSiteInfo, t, getLocalizedPath } from '@/lib/i18n';
|
||||
import { SEO } from '@/components/SEO';
|
||||
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
|
||||
import { ContentRenderer } from '@/components/content/ContentRenderer';
|
||||
|
||||
interface PageProps {
|
||||
params: {
|
||||
locale?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return [
|
||||
{ locale: 'en' },
|
||||
{ locale: 'de' },
|
||||
];
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
||||
const locale = (params?.locale as string) || 'en';
|
||||
const site = getSiteInfo();
|
||||
const title = t('blog.title', locale as 'en' | 'de');
|
||||
const description = t('blog.description', locale as 'en' | 'de');
|
||||
|
||||
return {
|
||||
title: `${title} | ${site.title}`,
|
||||
description,
|
||||
alternates: {
|
||||
canonical: getLocalizedPath('/blog', locale as 'en' | 'de'),
|
||||
languages: {
|
||||
'en': '/en/blog',
|
||||
'de': '/de/blog',
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title: `${title} | ${site.title}`,
|
||||
description,
|
||||
type: 'website',
|
||||
locale,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function BlogPage({ params }: PageProps) {
|
||||
const locale = (params?.locale as string) || 'en';
|
||||
const posts = getPostsByLocale(locale as 'en' | 'de');
|
||||
const categories = getCategoriesByLocale(locale as 'en' | 'de');
|
||||
|
||||
const title = t('blog.title', locale as 'en' | 'de');
|
||||
const description = t('blog.description', locale as 'en' | 'de');
|
||||
|
||||
// Get featured posts (first 3)
|
||||
const featuredPosts = posts.slice(0, 3);
|
||||
// Get remaining posts
|
||||
const remainingPosts = posts.slice(3);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SEO
|
||||
title={title}
|
||||
description={description}
|
||||
locale={locale as 'en' | 'de'}
|
||||
path="/blog"
|
||||
/>
|
||||
|
||||
<div className="bg-white py-24 sm:py-32">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-2xl">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl mb-6">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Categories */}
|
||||
{categories.length > 0 && (
|
||||
<div className="mb-12">
|
||||
<h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">
|
||||
{t('blog.categories', locale as 'en' | 'de')}
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((category) => (
|
||||
<Link
|
||||
key={category.slug}
|
||||
href={getLocalizedPath(`/blog/category/${category.slug}`, locale as 'en' | 'de')}
|
||||
className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-blue-50 text-blue-700 hover:bg-blue-100 transition-colors"
|
||||
>
|
||||
{category.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Featured Posts */}
|
||||
{featuredPosts.length > 0 && (
|
||||
<div className="mb-16">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||
{t('blog.featured', locale as 'en' | 'de')}
|
||||
</h2>
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{featuredPosts.map((post) => (
|
||||
<article
|
||||
key={post.slug}
|
||||
className="flex flex-col bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
|
||||
>
|
||||
{post.featuredImage && (() => {
|
||||
const media = getMediaById(post.featuredImage);
|
||||
return media ? (
|
||||
<div className="h-48 overflow-hidden bg-gray-100">
|
||||
<img
|
||||
src={media.localPath}
|
||||
alt={post.title}
|
||||
className="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
})()}
|
||||
<div className="flex-1 p-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<time className="text-xs text-gray-500">
|
||||
{new Date(post.datePublished).toLocaleDateString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</time>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
<Link
|
||||
href={getLocalizedPath(`/blog/${post.slug}`, locale as 'en' | 'de')}
|
||||
className="hover:text-blue-600 transition-colors"
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<div className="text-gray-600 line-clamp-3 text-sm mb-4">
|
||||
<ContentRenderer
|
||||
content={post.excerptHtml}
|
||||
className="text-gray-600 line-clamp-3 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<Link
|
||||
href={getLocalizedPath(`/blog/${post.slug}`, locale as 'en' | 'de')}
|
||||
className="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
{t('blog.readMore', locale as 'en' | 'de')}
|
||||
<svg className="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* All Posts */}
|
||||
{remainingPosts.length > 0 && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||
{t('blog.allPosts', locale as 'en' | 'de')}
|
||||
</h2>
|
||||
<div className="space-y-8">
|
||||
{remainingPosts.map((post) => (
|
||||
<article
|
||||
key={post.slug}
|
||||
className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<time className="text-xs text-gray-500">
|
||||
{new Date(post.datePublished).toLocaleDateString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</time>
|
||||
</div>
|
||||
<div className="flex gap-6">
|
||||
{post.featuredImage && (() => {
|
||||
const media = getMediaById(post.featuredImage);
|
||||
return media ? (
|
||||
<div className="w-32 h-32 flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={media.localPath}
|
||||
alt={post.title}
|
||||
className="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
})()}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
<Link
|
||||
href={getLocalizedPath(`/blog/${post.slug}`, locale as 'en' | 'de')}
|
||||
className="hover:text-blue-600 transition-colors"
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<div className="text-gray-600 mb-3">
|
||||
<ContentRenderer
|
||||
content={post.excerptHtml}
|
||||
className="text-gray-600 mb-3"
|
||||
/>
|
||||
</div>
|
||||
<Link
|
||||
href={getLocalizedPath(`/blog/${post.slug}`, locale as 'en' | 'de')}
|
||||
className="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
{t('blog.readMore', locale as 'en' | 'de')}
|
||||
<svg className="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{posts.length === 0 && (
|
||||
<div className="text-center py-16">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
|
||||
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
{t('blog.noPosts', locale as 'en' | 'de')}
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
{t('blog.noPostsDescription', locale as 'en' | 'de')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Locale Switcher */}
|
||||
<div className="bg-gray-50 py-8">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<LocaleSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user