feat: Add professional portfolio images and Hero redesign
- Add 15 optimized WebP images for portfolio (21-53KB each) - Redesign Hero section with full-width background image - Add SSR support for Hero component - Update About section with new portrait image - Update Contact page with professional headshot - Add images to Services/Leistungen page - Add image optimization script (sharp) - Update translations for gallery section Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.5
+517
-131
@@ -1,25 +1,84 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowRight, Loader2, Calendar, Tag, ExternalLink } from 'lucide-react';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import { ArrowRight, Calendar, Tag, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import type { Metadata } from 'next';
|
||||
import { getAllBlogPosts, BlogPost } from '@/lib/blog';
|
||||
|
||||
interface BlogPost {
|
||||
slug: string;
|
||||
title: string;
|
||||
date: string;
|
||||
excerpt: string;
|
||||
coverImage: string;
|
||||
category?: string;
|
||||
tags?: string[];
|
||||
}
|
||||
const POSTS_PER_PAGE = 12;
|
||||
|
||||
// Blog posts data - in a real app, this would come from a CMS or MDX files
|
||||
const blogPostsData: Record<string, BlogPost[]> = {
|
||||
type Props = {
|
||||
params: Promise<{ locale: string }>;
|
||||
searchParams: Promise<{ page?: string }>;
|
||||
};
|
||||
|
||||
// Legacy blog posts with translations (these have manual translations)
|
||||
const legacyBlogPosts: Record<string, BlogPost[]> = {
|
||||
de: [
|
||||
{
|
||||
slug: 'n8n-automatisierung-tutorial',
|
||||
title: 'n8n Tutorial: Workflows automatisieren ohne Code - Schritt für Schritt',
|
||||
date: '2026-01-18',
|
||||
excerpt: 'Lernen Sie, wie Sie mit n8n leistungsstarke Automatisierungen erstellen. Von der Installation bis zum ersten produktiven Workflow - inklusive Best Practices.',
|
||||
category: 'Automatisierung',
|
||||
tags: ['n8n', 'Tutorial', 'Automatisierung', 'Workflow', 'No-Code', 'Self-Hosted'],
|
||||
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'geo-generative-engine-optimization',
|
||||
title: 'GEO: Generative Engine Optimization - SEO für die KI-Ära',
|
||||
date: '2026-01-17',
|
||||
excerpt: 'Wie Sie Ihre Inhalte für ChatGPT, Perplexity und andere KI-Suchmaschinen optimieren. Der neue Standard nach klassischem SEO.',
|
||||
category: 'Marketing',
|
||||
tags: ['GEO', 'SEO', 'KI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
||||
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'gpt-api-integration-praxisguide',
|
||||
title: 'GPT API Integration: Vom API-Key zur produktionsreifen Anwendung',
|
||||
date: '2026-01-16',
|
||||
excerpt: 'Praktische Anleitung zur Integration von OpenAI GPT-4 in Ihre Anwendungen. Token-Optimierung, Fehlerbehandlung und Best Practices.',
|
||||
category: 'KI-Entwicklung',
|
||||
tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
|
||||
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'ki-agenten-unternehmen-guide',
|
||||
title: 'KI-Agenten für Unternehmen: Der ultimative Praxisguide 2026',
|
||||
date: '2026-01-15',
|
||||
excerpt: 'Wie Unternehmen KI-Agenten einsetzen können, um Prozesse zu automatisieren, Kosten zu senken und Wettbewerbsvorteile zu gewinnen.',
|
||||
category: 'KI-Entwicklung',
|
||||
tags: ['KI-Agenten', 'Automatisierung', 'GPT-4', 'Claude', 'LLM', 'Unternehmen'],
|
||||
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'n8n-make-zapier-vergleich',
|
||||
title: 'n8n vs Make vs Zapier: Welches Automatisierungstool passt zu Ihnen?',
|
||||
date: '2026-01-10',
|
||||
excerpt: 'Ein detaillierter Vergleich der führenden Workflow-Automatisierungstools mit Vor- und Nachteilen für verschiedene Anwendungsfälle.',
|
||||
category: 'Automatisierung',
|
||||
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatisierung', 'No-Code'],
|
||||
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'voice-ai-kundenservice-trends',
|
||||
title: 'Voice AI im Kundenservice: Trends und Best Practices 2026',
|
||||
date: '2026-01-05',
|
||||
excerpt: 'Wie Voice AI den Kundenservice revolutioniert und welche Technologien Sie für Ihr Unternehmen evaluieren sollten.',
|
||||
category: 'Voice AI',
|
||||
tags: ['Voice AI', 'Sprachassistent', 'Kundenservice', 'NLP', 'Chatbot', 'Vapi'],
|
||||
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'saas-mvp-entwicklung-4-wochen',
|
||||
title: 'SaaS MVP in 4 Wochen: Von der Idee zum Launch',
|
||||
date: '2025-12-20',
|
||||
excerpt: 'Schritt-für-Schritt Anleitung zur schnellen Entwicklung eines SaaS MVP mit Next.js, Prisma und modernen Cloud-Diensten.',
|
||||
category: 'SaaS-Entwicklung',
|
||||
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Produktentwicklung', 'React'],
|
||||
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'erp-integration-breuninger',
|
||||
title: 'ApparelMagic und TradeByte: Analyse komplexer Integrationen',
|
||||
@@ -31,6 +90,69 @@ const blogPostsData: Record<string, BlogPost[]> = {
|
||||
},
|
||||
],
|
||||
en: [
|
||||
{
|
||||
slug: 'n8n-automatisierung-tutorial',
|
||||
title: 'n8n Tutorial: Automate Workflows Without Code - Step by Step',
|
||||
date: '2026-01-18',
|
||||
excerpt: 'Learn how to create powerful automations with n8n. From installation to your first production workflow - including best practices.',
|
||||
category: 'Automation',
|
||||
tags: ['n8n', 'Tutorial', 'Automation', 'Workflow', 'No-Code', 'Self-Hosted'],
|
||||
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'geo-generative-engine-optimization',
|
||||
title: 'GEO: Generative Engine Optimization - SEO for the AI Era',
|
||||
date: '2026-01-17',
|
||||
excerpt: 'How to optimize your content for ChatGPT, Perplexity and other AI search engines. The new standard after traditional SEO.',
|
||||
category: 'Marketing',
|
||||
tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
||||
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'gpt-api-integration-praxisguide',
|
||||
title: 'GPT API Integration: From API Key to Production-Ready Application',
|
||||
date: '2026-01-16',
|
||||
excerpt: 'Practical guide to integrating OpenAI GPT-4 into your applications. Token optimization, error handling and best practices.',
|
||||
category: 'AI Development',
|
||||
tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
|
||||
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'ki-agenten-unternehmen-guide',
|
||||
title: 'AI Agents for Business: The Ultimate Practical Guide 2026',
|
||||
date: '2026-01-15',
|
||||
excerpt: 'How companies can use AI agents to automate processes, reduce costs and gain competitive advantages.',
|
||||
category: 'AI Development',
|
||||
tags: ['AI Agents', 'Automation', 'GPT-4', 'Claude', 'LLM', 'Enterprise'],
|
||||
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'n8n-make-zapier-vergleich',
|
||||
title: 'n8n vs Make vs Zapier: Which Automation Tool is Right for You?',
|
||||
date: '2026-01-10',
|
||||
excerpt: 'A detailed comparison of leading workflow automation tools with pros and cons for different use cases.',
|
||||
category: 'Automation',
|
||||
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automation', 'No-Code'],
|
||||
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'voice-ai-kundenservice-trends',
|
||||
title: 'Voice AI in Customer Service: Trends and Best Practices 2026',
|
||||
date: '2026-01-05',
|
||||
excerpt: 'How Voice AI is revolutionizing customer service and which technologies you should evaluate for your business.',
|
||||
category: 'Voice AI',
|
||||
tags: ['Voice AI', 'Voice Assistant', 'Customer Service', 'NLP', 'Chatbot', 'Vapi'],
|
||||
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'saas-mvp-entwicklung-4-wochen',
|
||||
title: 'SaaS MVP in 4 Weeks: From Idea to Launch',
|
||||
date: '2025-12-20',
|
||||
excerpt: 'Step-by-step guide to quickly developing a SaaS MVP with Next.js, Prisma and modern cloud services.',
|
||||
category: 'SaaS Development',
|
||||
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Product Development', 'React'],
|
||||
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'erp-integration-breuninger',
|
||||
title: 'ApparelMagic and TradeByte: Complex Integration Analysis',
|
||||
@@ -42,6 +164,69 @@ const blogPostsData: Record<string, BlogPost[]> = {
|
||||
},
|
||||
],
|
||||
sr: [
|
||||
{
|
||||
slug: 'n8n-automatisierung-tutorial',
|
||||
title: 'n8n Tutorial: Automatizujte Radne Tokove Bez Koda - Korak po Korak',
|
||||
date: '2026-01-18',
|
||||
excerpt: 'Naučite kako da kreirate moćne automatizacije sa n8n. Od instalacije do prvog produktivnog radnog toka - uključujući najbolje prakse.',
|
||||
category: 'Automatizacija',
|
||||
tags: ['n8n', 'Tutorial', 'Automatizacija', 'Workflow', 'No-Code', 'Self-Hosted'],
|
||||
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'geo-generative-engine-optimization',
|
||||
title: 'GEO: Generative Engine Optimization - SEO za AI Eru',
|
||||
date: '2026-01-17',
|
||||
excerpt: 'Kako da optimizujete sadržaj za ChatGPT, Perplexity i druge AI pretraživače. Novi standard posle klasičnog SEO-a.',
|
||||
category: 'Marketing',
|
||||
tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
||||
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'gpt-api-integration-praxisguide',
|
||||
title: 'GPT API Integracija: Od API Ključa do Produkcione Aplikacije',
|
||||
date: '2026-01-16',
|
||||
excerpt: 'Praktični vodič za integraciju OpenAI GPT-4 u vaše aplikacije. Optimizacija tokena, rukovanje greškama i najbolje prakse.',
|
||||
category: 'AI Razvoj',
|
||||
tags: ['GPT-4', 'OpenAI', 'API', 'Integracija', 'Python', 'LLM', 'Prompt Engineering'],
|
||||
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'ki-agenten-unternehmen-guide',
|
||||
title: 'AI Agenti za Preduzeća: Ultimativni Praktični Vodič 2026',
|
||||
date: '2026-01-15',
|
||||
excerpt: 'Kako kompanije mogu koristiti AI agente za automatizaciju procesa, smanjenje troškova i sticanje konkurentskih prednosti.',
|
||||
category: 'AI Razvoj',
|
||||
tags: ['AI Agenti', 'Automatizacija', 'GPT-4', 'Claude', 'LLM', 'Preduzeća'],
|
||||
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'n8n-make-zapier-vergleich',
|
||||
title: 'n8n vs Make vs Zapier: Koji Alat za Automatizaciju je Pravi za Vas?',
|
||||
date: '2026-01-10',
|
||||
excerpt: 'Detaljna uporedna analiza vodećih alata za automatizaciju radnih tokova sa prednostima i manama za različite slučajeve upotrebe.',
|
||||
category: 'Automatizacija',
|
||||
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatizacija', 'No-Code'],
|
||||
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'voice-ai-kundenservice-trends',
|
||||
title: 'Voice AI u Korisničkoj Službi: Trendovi i Najbolje Prakse 2026',
|
||||
date: '2026-01-05',
|
||||
excerpt: 'Kako Voice AI revolucioniše korisničku službu i koje tehnologije treba da evaluirate za vaš posao.',
|
||||
category: 'Voice AI',
|
||||
tags: ['Voice AI', 'Glasovni Asistent', 'Korisnička Služba', 'NLP', 'Chatbot', 'Vapi'],
|
||||
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'saas-mvp-entwicklung-4-wochen',
|
||||
title: 'SaaS MVP za 4 Nedelje: Od Ideje do Lansiranja',
|
||||
date: '2025-12-20',
|
||||
excerpt: 'Korak-po-korak vodič za brz razvoj SaaS MVP-a sa Next.js, Prisma i modernim cloud servisima.',
|
||||
category: 'SaaS Razvoj',
|
||||
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Razvoj Proizvoda', 'React'],
|
||||
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
||||
},
|
||||
{
|
||||
slug: 'erp-integration-breuninger',
|
||||
title: 'ApparelMagic i TradeByte: Analiza kompleksnih integracija',
|
||||
@@ -54,29 +239,131 @@ const blogPostsData: Record<string, BlogPost[]> = {
|
||||
],
|
||||
};
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { locale } = await params;
|
||||
const t = await getTranslations({ locale, namespace: 'blog.meta' });
|
||||
|
||||
const keywords: Record<string, string[]> = {
|
||||
de: [
|
||||
'KI Blog',
|
||||
'Automatisierung Blog',
|
||||
'Tech Blog',
|
||||
'KI-Agenten',
|
||||
'n8n Tutorials',
|
||||
'Voice AI',
|
||||
'SaaS Entwicklung',
|
||||
'Python Tutorials',
|
||||
],
|
||||
en: [
|
||||
'AI Blog',
|
||||
'Automation Blog',
|
||||
'Tech Blog',
|
||||
'AI Agents Guide',
|
||||
'n8n Tutorials',
|
||||
'Voice AI Guide',
|
||||
'SaaS Development',
|
||||
'Python Tutorials',
|
||||
'GPT-4 Integration Guide',
|
||||
'AI Developer Blog',
|
||||
'Process Automation Tips',
|
||||
],
|
||||
sr: [
|
||||
'AI Blog',
|
||||
'Automatizacija Blog',
|
||||
'Tech Blog',
|
||||
'AI Agenti',
|
||||
'n8n Tutoriali',
|
||||
'Voice AI',
|
||||
'SaaS Razvoj',
|
||||
'Python Tutoriali',
|
||||
],
|
||||
};
|
||||
|
||||
const localePath = locale === 'de' ? '/blog' : `/${locale}/blog`;
|
||||
|
||||
return {
|
||||
title: t('title'),
|
||||
description: t('description'),
|
||||
keywords: keywords[locale] || keywords.de,
|
||||
alternates: {
|
||||
canonical: `${BASE_URL}${localePath}`,
|
||||
languages: {
|
||||
'x-default': `${BASE_URL}/blog`,
|
||||
de: `${BASE_URL}/blog`,
|
||||
en: `${BASE_URL}/en/blog`,
|
||||
sr: `${BASE_URL}/sr/blog`,
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title: t('title'),
|
||||
description: t('description'),
|
||||
url: `${BASE_URL}${localePath}`,
|
||||
type: 'website',
|
||||
locale: locale === 'de' ? 'de_DE' : locale === 'sr' ? 'sr_RS' : 'en_US',
|
||||
alternateLocale: ['de_DE', 'en_US', 'sr_RS'].filter(l => l !== (locale === 'de' ? 'de_DE' : locale === 'sr' ? 'sr_RS' : 'en_US')),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function getFormattedDate(date: string, locale: string) {
|
||||
const languageMap: Record<string, string> = {
|
||||
de: 'de-DE',
|
||||
en: 'en-US',
|
||||
sr: 'sr-RS',
|
||||
};
|
||||
|
||||
return new Date(date).toLocaleDateString(languageMap[locale] || 'de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
function getImagePath(coverImage: string) {
|
||||
if (coverImage.startsWith('http')) {
|
||||
return coverImage;
|
||||
}
|
||||
return coverImage.replace('/blog/', '/images/posts/');
|
||||
}
|
||||
|
||||
// Placeholder image for posts without cover images
|
||||
const PLACEHOLDER_IMAGE = 'data:image/svg+xml,' + encodeURIComponent(`
|
||||
<svg width="1792" height="1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="100%" height="100%" fill="#181C14"/>
|
||||
<rect x="40%" y="35%" width="20%" height="30%" rx="8" fill="#697565" opacity="0.3"/>
|
||||
<circle cx="50%" cy="45%" r="8%" fill="#697565" opacity="0.2"/>
|
||||
<rect x="30%" y="65%" width="40%" height="4%" rx="2" fill="#465B50" opacity="0.3"/>
|
||||
<rect x="35%" y="72%" width="30%" height="3%" rx="2" fill="#465B50" opacity="0.2"/>
|
||||
</svg>
|
||||
`);
|
||||
|
||||
// Known existing images (from public/images/posts/)
|
||||
const EXISTING_IMAGES = new Set([
|
||||
'/images/posts/erp-integration-breuninger/cover.jpg',
|
||||
'/images/posts/fullstack-development-timetracking/cover.jpg',
|
||||
'/images/posts/rfid-automation/cover.jpg',
|
||||
'/images/posts/automated-ad-creatives/cover.jpg',
|
||||
]);
|
||||
|
||||
// Blog image component with fallback
|
||||
function BlogImage({ src, alt, fallback }: { src: string; alt: string; fallback: string }) {
|
||||
const imageSrc = EXISTING_IMAGES.has(src) ? src : fallback;
|
||||
|
||||
return (
|
||||
<Image
|
||||
src={imageSrc}
|
||||
alt={alt}
|
||||
fill
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
unoptimized={imageSrc.startsWith('data:')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
|
||||
|
||||
const getFormattedDate = (date: string) => {
|
||||
const languageMap: Record<string, string> = {
|
||||
de: 'de-DE',
|
||||
en: 'en-US',
|
||||
sr: 'sr-RS',
|
||||
};
|
||||
|
||||
return new Date(date).toLocaleDateString(languageMap[locale] || 'de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const getImagePath = (coverImage: string) => {
|
||||
if (coverImage.startsWith('http')) {
|
||||
return coverImage;
|
||||
}
|
||||
return coverImage.replace('/blog/', '/images/posts/');
|
||||
};
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/${locale}/blog/${post.slug}`}
|
||||
@@ -87,20 +374,13 @@ function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
|
||||
focus:ring-zinc-600 focus:ring-offset-2 focus:ring-offset-zinc-950
|
||||
transform hover:-translate-y-1"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="relative overflow-hidden rounded-xl"
|
||||
>
|
||||
<div className="relative overflow-hidden rounded-xl">
|
||||
{/* Image Container */}
|
||||
<div className="aspect-[16/9] w-full relative overflow-hidden bg-zinc-900">
|
||||
<Image
|
||||
<BlogImage
|
||||
src={getImagePath(post.coverImage)}
|
||||
alt={post.title}
|
||||
fill
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
fallback={PLACEHOLDER_IMAGE}
|
||||
/>
|
||||
<div className="absolute inset-x-0 -bottom-20 top-0 bg-gradient-to-t from-zinc-900 via-zinc-900/70 to-transparent opacity-95" />
|
||||
</div>
|
||||
@@ -110,7 +390,7 @@ function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
|
||||
<div className="flex items-center gap-4 mb-4 text-zinc-500">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>{getFormattedDate(post.date)}</span>
|
||||
<span>{getFormattedDate(post.date, locale)}</span>
|
||||
</div>
|
||||
{post.tags && post.tags.length > 0 && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
@@ -159,110 +439,216 @@ function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
|
||||
<ExternalLink className="h-4 w-4 text-zinc-400" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BlogPage() {
|
||||
const t = useTranslations('blog');
|
||||
const locale = useLocale();
|
||||
const [posts, setPosts] = useState<BlogPost[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
// Pagination component
|
||||
function Pagination({
|
||||
currentPage,
|
||||
totalPages,
|
||||
locale,
|
||||
t,
|
||||
}: {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
locale: string;
|
||||
t: (key: string) => string;
|
||||
}) {
|
||||
const getPageNumbers = () => {
|
||||
const pages: (number | 'ellipsis')[] = [];
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const loadPosts = async () => {
|
||||
setLoading(true);
|
||||
// Get posts for current locale
|
||||
const currentPosts = blogPostsData[locale] || blogPostsData.de;
|
||||
setPosts(currentPosts);
|
||||
setLoading(false);
|
||||
};
|
||||
loadPosts();
|
||||
}, [locale]);
|
||||
if (totalPages <= 7) {
|
||||
// Show all pages if 7 or fewer
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
// Always show first page
|
||||
pages.push(1);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="flex flex-col items-center space-y-4"
|
||||
if (currentPage > 3) {
|
||||
pages.push('ellipsis');
|
||||
}
|
||||
|
||||
// Show pages around current
|
||||
const start = Math.max(2, currentPage - 1);
|
||||
const end = Math.min(totalPages - 1, currentPage + 1);
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
|
||||
if (currentPage < totalPages - 2) {
|
||||
pages.push('ellipsis');
|
||||
}
|
||||
|
||||
// Always show last page
|
||||
pages.push(totalPages);
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
return (
|
||||
<nav className="flex items-center justify-center gap-2 mt-12 sm:mt-16" aria-label="Pagination">
|
||||
{/* Previous button */}
|
||||
{currentPage > 1 ? (
|
||||
<Link
|
||||
href={`/${locale}/blog${currentPage > 2 ? `?page=${currentPage - 1}` : ''}`}
|
||||
className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
|
||||
bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
|
||||
hover:ring-zinc-600 transition-all duration-200"
|
||||
aria-label={t('ui.pagination.previous')}
|
||||
>
|
||||
<Loader2 className="h-8 w-8 text-zinc-400 animate-spin" />
|
||||
<p className="text-zinc-400 text-sm">{t('ui.loading.posts')}</p>
|
||||
</motion.div>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{t('ui.pagination.previous')}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<span
|
||||
className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
|
||||
bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
|
||||
aria-disabled="true"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{t('ui.pagination.previous')}</span>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Page numbers */}
|
||||
<div className="flex items-center gap-1">
|
||||
{getPageNumbers().map((page, index) => {
|
||||
if (page === 'ellipsis') {
|
||||
return (
|
||||
<span key={`ellipsis-${index}`} className="px-2 text-zinc-600">
|
||||
...
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const isCurrentPage = page === currentPage;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={page}
|
||||
href={`/${locale}/blog${page > 1 ? `?page=${page}` : ''}`}
|
||||
className={`min-w-[40px] h-10 flex items-center justify-center text-sm rounded-lg
|
||||
ring-1 transition-all duration-200
|
||||
${isCurrentPage
|
||||
? 'bg-[#697565] text-white ring-[#697565] font-medium'
|
||||
: 'text-zinc-400 hover:text-white bg-zinc-800/50 hover:bg-zinc-800 ring-zinc-700/50 hover:ring-zinc-600'
|
||||
}`}
|
||||
aria-current={isCurrentPage ? 'page' : undefined}
|
||||
>
|
||||
{page}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* Next button */}
|
||||
{currentPage < totalPages ? (
|
||||
<Link
|
||||
href={`/${locale}/blog?page=${currentPage + 1}`}
|
||||
className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
|
||||
bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
|
||||
hover:ring-zinc-600 transition-all duration-200"
|
||||
aria-label={t('ui.pagination.next')}
|
||||
>
|
||||
<span className="hidden sm:inline">{t('ui.pagination.next')}</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Link>
|
||||
) : (
|
||||
<span
|
||||
className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
|
||||
bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
|
||||
aria-disabled="true"
|
||||
>
|
||||
<span className="hidden sm:inline">{t('ui.pagination.next')}</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</span>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function BlogPage({ params, searchParams }: Props) {
|
||||
const { locale } = await params;
|
||||
const { page } = await searchParams;
|
||||
setRequestLocale(locale);
|
||||
|
||||
const t = await getTranslations('blog');
|
||||
|
||||
// Get dynamic posts from markdown files
|
||||
const dynamicPosts = getAllBlogPosts();
|
||||
|
||||
// Get legacy posts (with translations)
|
||||
const legacyPosts = legacyBlogPosts[locale] || legacyBlogPosts.de;
|
||||
|
||||
// Merge: dynamic posts first, then legacy posts (avoiding duplicates)
|
||||
const legacySlugs = new Set(legacyPosts.map(p => p.slug));
|
||||
const allPosts = [
|
||||
...dynamicPosts.filter(p => !legacySlugs.has(p.slug)),
|
||||
...legacyPosts,
|
||||
].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||
|
||||
// Pagination
|
||||
const currentPage = Math.max(1, parseInt(page || '1', 10) || 1);
|
||||
const totalPages = Math.ceil(allPosts.length / POSTS_PER_PAGE);
|
||||
const validPage = Math.min(currentPage, totalPages || 1);
|
||||
|
||||
const startIndex = (validPage - 1) * POSTS_PER_PAGE;
|
||||
const endIndex = startIndex + POSTS_PER_PAGE;
|
||||
const posts = allPosts.slice(startIndex, endIndex);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
|
||||
{/* Header Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-12 sm:mb-16 lg:mb-20"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="flex items-center gap-4 mb-8"
|
||||
>
|
||||
<div className="mb-12 sm:mb-16 lg:mb-20">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<ArrowRight className="h-5 w-5 text-zinc-500" />
|
||||
<h2 className="text-white text-sm tracking-wider">BLOG</h2>
|
||||
</motion.div>
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6"
|
||||
>
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
|
||||
{t('meta.header.title')}
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
className="text-lg sm:text-xl text-zinc-400 max-w-2xl"
|
||||
>
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-zinc-400 max-w-2xl">
|
||||
{t('meta.header.subtitle')}
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</p>
|
||||
{/* Post count */}
|
||||
<p className="text-sm text-zinc-500 mt-4">
|
||||
{t('ui.pagination.showing', {
|
||||
start: startIndex + 1,
|
||||
end: Math.min(endIndex, allPosts.length),
|
||||
total: allPosts.length,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Blog Posts Grid */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8"
|
||||
>
|
||||
{posts.map((post, index) => (
|
||||
<motion.div
|
||||
key={post.slug}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 * (index + 4) }}
|
||||
>
|
||||
<BlogPostCard post={post} locale={locale} />
|
||||
</motion.div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
|
||||
{posts.map((post) => (
|
||||
<BlogPostCard key={post.slug} post={post} locale={locale} />
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<Pagination
|
||||
currentPage={validPage}
|
||||
totalPages={totalPages}
|
||||
locale={locale}
|
||||
t={(key) => t(key)}
|
||||
/>
|
||||
|
||||
{/* Empty State */}
|
||||
{posts.length === 0 && !loading && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
className="text-center py-12"
|
||||
>
|
||||
{posts.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-zinc-400">{t('ui.errors.posts')}</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user