streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

synchronisation du contenu avec la DB et amélioration du CMS

Browse Source 
- Migration du blog et des interviews des données mockées vers PostgreSQL (Prisma).
- Refonte des pages publiques en Server Components pour de meilleures performances/SEO.
- Intégration d'un éditeur de texte riche (React Quill) avec titres H1-H6 et séparateurs.
- Correction des erreurs de validation Prisma liées aux paramètres asynchrones (Next.js 15+).
- Correction des problèmes d'affichage des modales de suspension via React Portals.
- Installation de @tailwindcss/typography et correction du débordement de texte (break-words).
- Implémentation des actions de modération (suspension/révocation) pour les utilisateurs et boutiques.
This commit is contained in:
streaper2
2026-04-12 18:59:20 +02:00
parent b73939d381
commit 887030ee47
84 changed files with 5577 additions and 15128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/blog/[id]/page.tsx
View File

@@ -1,31 +1,22 @@
"use client";
import React, { useEffect } from 'react';
import React from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { notFound } from 'next/navigation';
import { ArrowLeft, User, Calendar, Share2 } from 'lucide-react';
import { MOCK_BLOG_POSTS } from '../../../lib/mockData';
import { prisma } from '../../../lib/prisma';
const BlogPostPage = () => {
const { id } = useParams();
const post = MOCK_BLOG_POSTS.find(p => p.id === id);
interface Props {
params: Promise<{ id: string }>;
}
// Scroll to top when loading a new post
useEffect(() => {
window.scrollTo(0, 0);
}, [id]);
export default async function BlogPostPage({ params }: Props) {
const { id } = await params;
const post = await prisma.blogPost.findUnique({
where: { id }
});
if (!post) {
return (
<div className="min-h-[60vh] flex flex-col items-center justify-center">
<h2 className="text-3xl font-serif font-bold text-gray-900 mb-4">Article introuvable</h2>
<p className="text-gray-600 mb-8">L'article que vous recherchez n'existe pas ou a été supprimé.</p>
<Link href="/blog" className="text-brand-600 hover:text-brand-700 font-medium flex items-center">
<ArrowLeft className="w-4 h-4 mr-2" /> Retour au blog
</Link>
</div>
);
notFound();
}
return (
@@ -56,7 +47,7 @@ const BlogPostPage = () => {
</span>
<span className="flex items-center">
<Calendar className="w-4 h-4 mr-1 text-brand-500" />
{post.date}
{new Date(post.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
</span>
<span className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
Conseils
@@ -68,18 +59,14 @@ const BlogPostPage = () => {
</header>
{/* Content */}
<div className="prose prose-lg prose-orange max-w-none text-gray-600">
<p className="lead text-xl text-gray-500 font-serif italic mb-6">
<div className="prose prose-lg prose-orange max-w-none text-gray-600 break-words overflow-hidden">
<p className="lead text-xl text-gray-500 font-serif italic mb-6 border-b border-gray-100 pb-6">
{post.excerpt}
</p>
{/* Rendering paragraphs manually for the mock data */}
{post.content.split('\n').map((paragraph, index) => (
paragraph.trim() !== '' && (
<p key={index} className="mb-4 leading-relaxed">
{paragraph}
</p>
)
))}
<div
className="mt-6"
dangerouslySetInnerHTML={{ __html: post.content }}
/>
</div>
{/* Footer / Share */}
@@ -95,6 +82,5 @@ const BlogPostPage = () => {
</div>
</article>
);
};
}
export default BlogPostPage;

111
app/blog/page.tsx
View File

@@ -1,58 +1,69 @@
"use client";
import React from 'react';
import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { MOCK_BLOG_POSTS } from '../../lib/mockData';
import { prisma } from '../../lib/prisma';
const BlogPage = () => (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="text-center mb-12">
export const revalidate = 3600; // Revalidate every hour
export default async function BlogPage() {
const posts = await prisma.blogPost.findMany({
orderBy: { createdAt: 'desc' }
});
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="text-center mb-12">
<h1 className="text-3xl font-bold font-serif text-gray-900 sm:text-4xl">Le Blog de l'Entrepreneur</h1>
<p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
Conseils, actualités et success stories de l'écosystème africain.
Conseils, actualités et success stories de l'écosystème africain.
</p>
</div>
<div className="grid gap-8 lg:grid-cols-3">
{MOCK_BLOG_POSTS.map(post => (
<Link key={post.id} href={`/blog/${post.id}`} className="group flex flex-col rounded-lg shadow-lg overflow-hidden bg-white hover:shadow-xl transition-shadow duration-300">
<div className="flex-shrink-0 relative overflow-hidden h-48">
<img className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" src={post.imageUrl} alt={post.title} />
<div className="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
</div>
<div className="flex-1 bg-white p-6 flex flex-col justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-brand-600">Conseils</p>
<div className="block mt-2">
<p className="text-xl font-semibold text-gray-900 group-hover:text-brand-700 transition-colors">{post.title}</p>
<p className="mt-3 text-base text-gray-500 line-clamp-3">{post.excerpt}</p>
</div>
</div>
<div className="mt-6 flex items-center justify-between">
<div className="flex items-center">
<div className="flex-shrink-0">
<span className="sr-only">{post.author}</span>
<div className="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold border border-gray-300">
{post.author.charAt(0)}
</div>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-gray-900">{post.author}</p>
<div className="flex space-x-1 text-sm text-gray-500">
<time>{post.date}</time>
</div>
</div>
</div>
<span className="text-brand-600 opacity-0 group-hover:opacity-100 transition-opacity">
<ArrowRight className="w-5 h-5" />
</span>
</div>
</div>
</Link>
))}
</div>
</div>
);
</div>
{posts.length === 0 ? (
<div className="text-center py-20 bg-gray-50 rounded-2xl border-2 border-dashed border-gray-200">
<p className="text-gray-500">Aucun article n'a encore été publié.</p>
<p className="text-sm text-gray-400 mt-2">Revenez bientôt pour de nouveaux contenus !</p>
</div>
) : (
<div className="grid gap-8 lg:grid-cols-3">
{posts.map(post => (
<Link key={post.id} href={`/blog/${post.id}`} className="group flex flex-col rounded-lg shadow-lg overflow-hidden bg-white hover:shadow-xl transition-shadow duration-300">
<div className="flex-shrink-0 relative overflow-hidden h-48">
<img className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" src={post.imageUrl} alt={post.title} />
<div className="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
</div>
<div className="flex-1 bg-white p-6 flex flex-col justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-brand-600">Actualité</p>
<div className="block mt-2">
<p className="text-xl font-semibold text-gray-900 group-hover:text-brand-700 transition-colors line-clamp-2">{post.title}</p>
<p className="mt-3 text-base text-gray-500 line-clamp-3">{post.excerpt}</p>
</div>
</div>
<div className="mt-6 flex items-center justify-between">
<div className="flex items-center">
<div className="flex-shrink-0">
<div className="h-10 w-10 rounded-full bg-brand-50 flex items-center justify-center text-brand-600 font-bold border border-brand-100 uppercase">
{post.author.charAt(0)}
</div>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-gray-900">{post.author}</p>
<div className="flex space-x-1 text-sm text-gray-500">
<time>{new Date(post.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' })}</time>
</div>
</div>
</div>
<span className="text-brand-600 opacity-0 group-hover:opacity-100 transition-opacity">
<ArrowRight className="w-5 h-5" />
</span>
</div>
</div>
</Link>
))}
</div>
)}
</div>
);
}
export default BlogPage;