feat: add floating social share buttons and restore text justification

app/blog/[id]/page.tsx

@@ -4,25 +4,41 @@ import { notFound } from 'next/navigation';
 import { ArrowLeft, 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()
-      },
+      OR: [{ id: id }, { slug: id }],
+      publishedAt: { lte: new Date() },
       status: 'PUBLISHED'
     }
   });
@@ -44,16 +60,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 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()
-      },
+      OR: [{ id: id }, { slug: id }],
+      publishedAt: { lte: new Date() },
       status: 'PUBLISHED'
     }
   });
@@ -63,7 +73,11 @@ export default async function BlogPostPage({ params }: Props) {
   }
 
   return (
-    <article className="bg-gray-50 min-h-screen py-12">
+    <article className="bg-gray-50 min-h-screen py-12 relative">
+      {/* Injection du style de force pour le texte */}
+      <style dangerouslySetInnerHTML={{ __html: noBreakStyle }} />
+      <BlogShareButtons title={post.title} />
+
       <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Navigation */}
         <div className="mb-8">
@@ -73,7 +87,7 @@ export default async function BlogPostPage({ params }: Props) {
         </div>
 
         <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100">
-          {/* Header Image */}
+          {/* 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}
@@ -82,7 +96,7 @@ export default async function BlogPostPage({ params }: Props) {
             />
           </div>
 
-          {/* Header */}
+          {/* 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">
@@ -110,18 +124,22 @@ export default async function BlogPostPage({ params }: Props) {
             </h1>
           </header>
 
-          {/* Content */}
+          {/* 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>
-            <div 
+
+            {/* Corps du texte avec ID pour le contrôle CSS */}
+            <div
+              id="blog-content"
               className="mt-6"
-              dangerouslySetInnerHTML={{ __html: sanitizeHTML(post.content) }} 
+              dangerouslySetInnerHTML={{ __html: sanitizeHTML(post.content) }}
             />
           </div>
 
-          {/* Footer / Share */}
+          {/* Partage / Footer */}
           <div className="mt-12 pt-8 border-t border-gray-100 flex justify-between items-center">
             <p className="text-sm text-gray-500 font-medium">Vous avez aimé cet article ?</p>
             <div className="flex space-x-2">
@@ -134,5 +152,4 @@ export default async function BlogPostPage({ params }: Props) {
       </div>
     </article>
   );
-}
-
+}

app/globals.css

@@ -24,27 +24,37 @@ body {
   -moz-osx-font-smoothing: grayscale;
   font-family: var(--font-sans);
   text-align: left;
-  hyphens: none !important;
 }
 
-* {
+/* FORCE ABSOLUE SUR LE CONTENU DU BLOG
+   L'utilisation de l'ID #blog-content garantit que ces règles 
+   écrasent les styles par défaut du plugin typography.
+*/
+#blog-content,
+#blog-content *,
+.prose p,
+.prose li {
+  word-break: keep-all !important;
+  /* Interdit de couper les mots */
+  overflow-wrap: break-word !important;
+  /* Autorise le retour à la ligne si le mot est trop long */
   hyphens: none !important;
+  /* Supprime les tirets de césure */
+  line-break: normal !important;
+  /* Empêche les cassures de caractères bizarres */
 }
 
-.prose {
-  text-align: left;
-  hyphens: none !important;
+/* Nettoyage des titres */
+h1,
+h2,
+h3,
+h4 {
   word-break: normal !important;
-  overflow-wrap: break-word;
+  overflow-wrap: break-word !important;
+  hyphens: none !important;
 }
 
 .prose p {
   margin-bottom: 1.25em;
   text-align: left;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
-  hyphens: none !important;
-  text-align: left;
 }