236 lines
8.6 KiB
TypeScript
236 lines
8.6 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { notFound } from 'next/navigation';
|
|
import { ArrowLeft, ArrowRight, User, Calendar, Share2 } from 'lucide-react';
|
|
import { sanitizeHTML } from '../../../lib/sanitize';
|
|
import { prisma } from '../../../lib/prisma';
|
|
import BlogShareButtons from '../../../components/BlogShareButtons';
|
|
import { Metadata } from 'next';
|
|
|
|
interface Props {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
// Style spécifique pour empêcher strictement la coupure des mots tout en justifiant le texte
|
|
const noBreakStyle = `
|
|
#blog-content,
|
|
#blog-content p,
|
|
#blog-content li,
|
|
#blog-content span,
|
|
#blog-content strong {
|
|
word-break: normal !important;
|
|
overflow-wrap: break-word !important;
|
|
hyphens: none !important;
|
|
line-break: normal !important;
|
|
text-align: justify !important;
|
|
text-justify: inter-word !important;
|
|
}
|
|
|
|
/* Sécurité supplémentaire pour les navigateurs mobiles */
|
|
.prose * {
|
|
word-break: normal !important;
|
|
hyphens: none !important;
|
|
}
|
|
`;
|
|
|
|
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|
const { id } = await params;
|
|
const post = await prisma.blogPost.findFirst({
|
|
where: {
|
|
OR: [{ id: id }, { slug: id }],
|
|
publishedAt: { lte: new Date() },
|
|
status: 'PUBLISHED'
|
|
}
|
|
});
|
|
|
|
if (!post) return { title: 'Article non trouvé' };
|
|
|
|
return {
|
|
title: post.metaTitle || post.title,
|
|
description: post.metaDescription || post.excerpt,
|
|
keywords: post.tags,
|
|
openGraph: {
|
|
title: post.metaTitle || post.title,
|
|
description: post.metaDescription || post.excerpt,
|
|
images: [post.imageUrl],
|
|
type: 'article',
|
|
}
|
|
};
|
|
}
|
|
|
|
export default async function BlogPostPage({ params }: Props) {
|
|
const { id } = await params;
|
|
const post = await prisma.blogPost.findFirst({
|
|
where: {
|
|
OR: [{ id: id }, { slug: id }],
|
|
publishedAt: { lte: new Date() },
|
|
status: 'PUBLISHED'
|
|
}
|
|
});
|
|
|
|
if (!post) {
|
|
notFound();
|
|
}
|
|
|
|
// Articles en rapport : par tags communs, sinon les plus récents
|
|
let relatedPosts = await prisma.blogPost.findMany({
|
|
where: {
|
|
status: 'PUBLISHED',
|
|
publishedAt: { lte: new Date() },
|
|
id: { not: post.id },
|
|
tags: { hasSome: post.tags }
|
|
},
|
|
take: 3,
|
|
orderBy: { date: 'desc' }
|
|
});
|
|
|
|
// Compléter avec les articles récents si nécessaire
|
|
if (relatedPosts.length < 2) {
|
|
const excludedIds = [post.id, ...relatedPosts.map(p => p.id)];
|
|
const additionalPosts = await prisma.blogPost.findMany({
|
|
where: {
|
|
status: 'PUBLISHED',
|
|
publishedAt: { lte: new Date() },
|
|
id: { notIn: excludedIds }
|
|
},
|
|
take: 3 - relatedPosts.length,
|
|
orderBy: { date: 'desc' }
|
|
});
|
|
relatedPosts = [...relatedPosts, ...additionalPosts];
|
|
}
|
|
|
|
return (
|
|
<article className="bg-gray-50 min-h-screen py-12 relative">
|
|
{/* Injection du style de force pour le texte */}
|
|
<style dangerouslySetInnerHTML={{ __html: noBreakStyle }} />
|
|
|
|
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex gap-4 lg:gap-8 justify-center relative">
|
|
{/* Conteneur principal de l'article */}
|
|
<div className="w-[calc(100%-3rem)] sm:w-full max-w-3xl relative">
|
|
|
|
{/* Navigation */}
|
|
<div className="mb-8">
|
|
<Link href="/blog" className="inline-flex items-center text-gray-500 hover:text-brand-600 text-sm font-medium transition-colors">
|
|
<ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100 relative z-10">
|
|
{/* Image d'en-tête */}
|
|
<div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden">
|
|
<img
|
|
src={post.imageUrl}
|
|
alt={post.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Header de l'article */}
|
|
<header className="mb-8 border-b border-gray-100 pb-8">
|
|
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
|
|
<span className="flex items-center">
|
|
<User className="w-4 h-4 mr-1 text-brand-500" />
|
|
{post.author}
|
|
</span>
|
|
<span className="flex items-center">
|
|
<Calendar className="w-4 h-4 mr-1 text-brand-500" />
|
|
{new Date(post.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
|
|
</span>
|
|
{post.tags.length > 0 ? (
|
|
post.tags.map(tag => (
|
|
<span key={tag} className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
|
|
{tag}
|
|
</span>
|
|
))
|
|
) : (
|
|
<span className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
|
|
Article
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h1 className="text-3xl md:text-4xl font-serif font-bold text-gray-900 leading-tight">
|
|
{post.title}
|
|
</h1>
|
|
</header>
|
|
|
|
{/* Contenu de l'article */}
|
|
<div className="prose prose-lg prose-orange max-w-none text-gray-600">
|
|
{/* Résumé / Lead */}
|
|
<p className="lead text-xl text-gray-500 font-serif italic mb-6 border-b border-gray-100 pb-6">
|
|
{post.excerpt}
|
|
</p>
|
|
|
|
{/* Corps du texte avec ID pour le contrôle CSS */}
|
|
<div
|
|
id="blog-content"
|
|
className="mt-6"
|
|
dangerouslySetInnerHTML={{ __html: sanitizeHTML(post.content) }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Partage / Footer */}
|
|
<div className="mt-12 pt-8 border-t border-gray-100 flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<p className="text-gray-500 font-medium">Vous avez aimé cet article ?</p>
|
|
<Link
|
|
href="/blog"
|
|
className="inline-flex items-center text-brand-600 hover:text-brand-700 font-semibold transition-colors"
|
|
>
|
|
Lire d'autres articles
|
|
<ArrowRight className="ml-2 w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar flottante verticale à droite (suit l'article et s'arrête à la fin) */}
|
|
<div className="w-10 shrink-0 relative">
|
|
<div className="sticky top-32 z-50">
|
|
<BlogShareButtons title={post.title} />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Section Articles en rapport */}
|
|
{relatedPosts.length > 0 && (
|
|
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 mt-16 pt-16 border-t border-gray-200">
|
|
<h2 className="text-2xl md:text-3xl font-serif font-bold text-gray-900 mb-8">Articles en rapport</h2>
|
|
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
{relatedPosts.map((rPost) => (
|
|
<Link
|
|
key={rPost.id}
|
|
href={`/blog/${rPost.slug || rPost.id}`}
|
|
className="group bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100 hover:shadow-md transition-shadow"
|
|
>
|
|
<div className="aspect-video relative overflow-hidden">
|
|
<img
|
|
src={rPost.imageUrl}
|
|
alt={rPost.title}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors" />
|
|
</div>
|
|
<div className="p-5">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="text-[10px] font-bold uppercase tracking-wider text-brand-600 bg-brand-50 px-2 py-0.5 rounded">
|
|
{rPost.tags?.[0] || 'Article'}
|
|
</span>
|
|
<span className="text-xs text-gray-400">
|
|
{new Date(rPost.date).toLocaleDateString('fr-FR', { month: 'short', day: 'numeric' })}
|
|
</span>
|
|
</div>
|
|
<h3 className="text-lg font-bold text-gray-900 group-hover:text-brand-600 transition-colors line-clamp-2 leading-snug">
|
|
{rPost.title}
|
|
</h3>
|
|
<p className="mt-2 text-sm text-gray-500 line-clamp-2">
|
|
{rPost.excerpt}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</article>
|
|
);
|
|
} |