302 lines
12 KiB
TypeScript
302 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { ArrowLeft, Calendar, User, Tag, Clock, Share2, BookOpen, Anchor } from 'lucide-react';
|
|
import { Link } from '@/i18n/navigation';
|
|
import { LandingHeader, LandingFooter } from '@/components/layout';
|
|
import { getBlogPost, type BlogPost } from '@/lib/api/blog';
|
|
|
|
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
|
|
|
|
function resolveUrl(url: string | null | undefined): string | undefined {
|
|
if (!url) return undefined;
|
|
if (url.startsWith('http')) return url;
|
|
return `${API_BASE_URL}${url}`;
|
|
}
|
|
|
|
function formatDate(dateStr: string): string {
|
|
return new Date(dateStr).toLocaleDateString('fr-FR', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
});
|
|
}
|
|
|
|
function estimateReadingTime(content: string): number {
|
|
const text = content.replace(/<[^>]*>/g, '');
|
|
const words = text.trim().split(/\s+/).length;
|
|
return Math.max(1, Math.ceil(words / 200));
|
|
}
|
|
|
|
const CATEGORY_LABELS: Record<string, string> = {
|
|
industry: 'Industrie',
|
|
technology: 'Technologie',
|
|
guides: 'Guides',
|
|
news: 'Actualités',
|
|
};
|
|
|
|
function LoadingSkeleton() {
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<LandingHeader />
|
|
<div className="max-w-4xl mx-auto px-6 pt-32 pb-20">
|
|
<div className="animate-pulse space-y-6">
|
|
<div className="h-4 bg-gray-200 rounded w-24" />
|
|
<div className="h-10 bg-gray-200 rounded w-3/4" />
|
|
<div className="h-5 bg-gray-200 rounded w-1/2" />
|
|
<div className="h-72 bg-gray-200 rounded-2xl mt-8" />
|
|
<div className="space-y-3 mt-8">
|
|
{[...Array(6)].map((_, i) => (
|
|
<div key={i} className="h-4 bg-gray-200 rounded" style={{ width: `${85 + (i % 3) * 5}%` }} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<LandingFooter />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NotFoundView() {
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<LandingHeader />
|
|
<div className="max-w-4xl mx-auto px-6 pt-32 pb-20 text-center">
|
|
<Anchor className="w-24 h-24 text-gray-200 mx-auto mb-6" />
|
|
<h1 className="text-3xl font-bold text-brand-navy mb-4">Article introuvable</h1>
|
|
<p className="text-gray-600 mb-8">
|
|
Cet article n'existe pas ou n'est pas encore publié.
|
|
</p>
|
|
<Link href="/blog">
|
|
<span className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-semibold">
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span>Retour au blog</span>
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
<LandingFooter />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function BlogPostContent({ slug }: { slug: string }) {
|
|
const [post, setPost] = useState<BlogPost | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [notFound, setNotFound] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!slug) return;
|
|
let cancelled = false;
|
|
|
|
getBlogPost(slug)
|
|
.then(p => {
|
|
if (!cancelled) setPost(p);
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) setNotFound(true);
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setLoading(false);
|
|
});
|
|
|
|
return () => { cancelled = true; };
|
|
}, [slug]);
|
|
|
|
if (loading) return <LoadingSkeleton />;
|
|
if (notFound || !post) return <NotFoundView />;
|
|
|
|
const readingTime = estimateReadingTime(post.content);
|
|
const processedContent = post.content.replace(
|
|
/src="(\/api\/v1\/blog\/images\/[^"]+)"/g,
|
|
`src="${API_BASE_URL}$1"`
|
|
);
|
|
|
|
const handleShare = () => {
|
|
if (navigator.share) {
|
|
navigator.share({ title: post.title, url: window.location.href });
|
|
} else {
|
|
navigator.clipboard.writeText(window.location.href);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<LandingHeader />
|
|
|
|
{/* Hero */}
|
|
<section className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy via-brand-navy to-[#1a2a5e]">
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise/10 rounded-full blur-3xl" />
|
|
<div className="absolute bottom-10 right-20 w-64 h-64 bg-blue-400/10 rounded-full blur-3xl" />
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-4xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<Link href="/blog">
|
|
<span className="inline-flex items-center space-x-2 text-white/60 hover:text-white transition-colors mb-8 text-sm group">
|
|
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
|
|
<span>Retour au blog</span>
|
|
</span>
|
|
</Link>
|
|
|
|
<div className="flex items-center flex-wrap gap-3 mb-6">
|
|
<span className="px-3 py-1 bg-brand-turquoise text-white text-sm font-medium rounded-full">
|
|
{CATEGORY_LABELS[post.category] ?? post.category}
|
|
</span>
|
|
{post.isFeatured && (
|
|
<span className="px-3 py-1 bg-white/15 text-white text-sm font-medium rounded-full border border-white/20">
|
|
À la une
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<h1 className="text-3xl lg:text-5xl font-bold text-white mb-6 leading-tight tracking-tight">
|
|
{post.title}
|
|
</h1>
|
|
|
|
<p className="text-lg text-white/75 mb-10 leading-relaxed max-w-2xl">{post.excerpt}</p>
|
|
|
|
<div className="flex flex-wrap items-center gap-x-6 gap-y-3 text-white/55 text-sm">
|
|
<div className="flex items-center space-x-2">
|
|
<User className="w-4 h-4" />
|
|
<span>{post.authorName}</span>
|
|
</div>
|
|
{post.publishedAt && (
|
|
<div className="flex items-center space-x-2">
|
|
<Calendar className="w-4 h-4" />
|
|
<span>{formatDate(post.publishedAt)}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center space-x-2">
|
|
<Clock className="w-4 h-4" />
|
|
<span>{readingTime} min de lecture</span>
|
|
</div>
|
|
{post.tags.length > 0 && (
|
|
<div className="flex items-center space-x-2">
|
|
<Tag className="w-4 h-4" />
|
|
<span>{post.tags.join(', ')}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="absolute bottom-0 left-0 right-0">
|
|
<svg className="w-full h-16" viewBox="0 0 1440 64" preserveAspectRatio="none">
|
|
<path d="M0,32 C360,64 720,0 1080,32 C1260,48 1380,24 1440,32 L1440,64 L0,64 Z" fill="white" />
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Cover Image */}
|
|
{post.coverImageUrl && (
|
|
<div className="max-w-4xl mx-auto px-6 lg:px-8 -mt-6 relative z-10 mb-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
>
|
|
<img
|
|
src={resolveUrl(post.coverImageUrl)}
|
|
alt={post.title}
|
|
className="w-full h-72 lg:h-[420px] object-cover rounded-2xl shadow-2xl"
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Content + Sidebar */}
|
|
<section className="py-12">
|
|
<div className="max-w-4xl mx-auto px-6 lg:px-8">
|
|
<div className="lg:grid lg:grid-cols-[1fr_80px] lg:gap-8 items-start">
|
|
{/* Article body */}
|
|
<motion.article
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
className="prose prose-lg prose-slate max-w-none
|
|
prose-headings:font-bold prose-headings:text-brand-navy prose-headings:tracking-tight
|
|
prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:border-l-4 prose-h2:border-brand-turquoise prose-h2:pl-4
|
|
prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3
|
|
prose-p:text-gray-700 prose-p:leading-relaxed prose-p:mb-5
|
|
prose-a:text-brand-turquoise prose-a:font-medium hover:prose-a:underline
|
|
prose-strong:text-brand-navy
|
|
prose-blockquote:not-italic
|
|
prose-ul:text-gray-700 prose-ol:text-gray-700
|
|
prose-img:rounded-xl prose-img:shadow-lg"
|
|
dangerouslySetInnerHTML={{ __html: processedContent }}
|
|
/>
|
|
|
|
{/* Floating share button (desktop) */}
|
|
<div className="hidden lg:block sticky top-24">
|
|
<button
|
|
onClick={handleShare}
|
|
className="w-10 h-10 flex items-center justify-center bg-white border border-gray-200 rounded-full shadow-sm text-gray-400 hover:text-brand-turquoise hover:border-brand-turquoise transition-colors"
|
|
title="Partager l'article"
|
|
>
|
|
<Share2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
{post.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-12 pt-8 border-t border-gray-100">
|
|
{post.tags.map(tag => (
|
|
<span
|
|
key={tag}
|
|
className="px-3 py-1.5 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors"
|
|
>
|
|
#{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* CTA */}
|
|
<div className="mt-16 rounded-2xl bg-gradient-to-br from-brand-navy to-[#1a2a5e] p-8 lg:p-10 text-center">
|
|
<BookOpen className="w-8 h-8 text-brand-turquoise mx-auto mb-4" />
|
|
<h2 className="text-xl lg:text-2xl font-bold text-white mb-3">
|
|
Prêt à tester Xpeditis ?
|
|
</h2>
|
|
<p className="text-white/70 mb-6 max-w-md mx-auto text-sm leading-relaxed">
|
|
Créez votre compte en 2 minutes et lancez votre premier chiffrage maritime instantané.
|
|
C'est gratuit et sans engagement.
|
|
</p>
|
|
<a
|
|
href="/register"
|
|
className="inline-flex items-center gap-2 px-6 py-3 bg-brand-turquoise text-white rounded-xl font-semibold hover:bg-brand-turquoise/90 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5"
|
|
>
|
|
Créer mon compte gratuitement
|
|
</a>
|
|
</div>
|
|
|
|
{/* Back + Share */}
|
|
<div className="mt-10 flex items-center justify-between">
|
|
<Link href="/blog">
|
|
<span className="inline-flex items-center space-x-2 px-5 py-2.5 bg-brand-navy text-white rounded-xl hover:bg-brand-navy/90 transition-all font-medium text-sm group">
|
|
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
|
|
<span>Retour au blog</span>
|
|
</span>
|
|
</Link>
|
|
<button
|
|
onClick={handleShare}
|
|
className="lg:hidden inline-flex items-center space-x-2 px-4 py-2.5 border border-gray-200 rounded-xl text-gray-600 hover:border-brand-turquoise hover:text-brand-turquoise transition-colors text-sm"
|
|
>
|
|
<Share2 className="w-4 h-4" />
|
|
<span>Partager</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<LandingFooter />
|
|
</div>
|
|
);
|
|
}
|