From 15700036e5d0d4f2cc2cd09b7ce25779c60616d8 Mon Sep 17 00:00:00 2001
From: streaper2 <streaper2@gmail.com>
Date: Sun, 10 May 2026 14:30:38 +0200
Subject: [PATCH] feat: add floating social share buttons and restore text
 justification

---
 app/blog/[id]/page.tsx          | 69 +++++++++++++++++++------------
 app/globals.css                 | 34 +++++++++------
 check_db.cjs                    | 31 ++++++++++++++
 components/BlogShareButtons.tsx | 73 +++++++++++++++++++++++++++++++++
 lib/sanitize.ts                 |  6 ++-
 5 files changed, 174 insertions(+), 39 deletions(-)
 create mode 100644 check_db.cjs
 create mode 100644 components/BlogShareButtons.tsx

diff --git a/app/blog/[id]/page.tsx b/app/blog/[id]/page.tsx
index 5a29697..34c927c 100644
--- a/app/blog/[id]/page.tsx
+++ b/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>
   );
-}
-
+}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index c9943d6..5ba484e 100644
--- a/app/globals.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/check_db.cjs b/check_db.cjs
new file mode 100644
index 0000000..5fd4bcd
--- /dev/null
+++ b/check_db.cjs
@@ -0,0 +1,31 @@
+const { PrismaClient } = require('@prisma/client');
+const prisma = new PrismaClient();
+
+async function main() {
+  const post = await prisma.blogPost.findUnique({
+    where: { slug: 'cyber-dome-cato' }
+  });
+  
+  if (!post) {
+    console.log("Post not found");
+    return;
+  }
+  
+  const snippet = post.content.substring(0, 1000);
+  console.log("Content start:");
+  console.log(snippet);
+  
+  const match = post.content.match(/s.e sont/);
+  if (match) {
+    console.log("Found 's.e sont':", match[0]);
+    console.log("Hex:", Buffer.from(match[0]).toString('hex'));
+  }
+  
+  const match2 = post.content.match(/cyberattaqu.es/);
+  if (match2) {
+    console.log("Found 'cyberattaqu.es':", match2[0]);
+    console.log("Hex:", Buffer.from(match2[0]).toString('hex'));
+  }
+}
+
+main().catch(console.error).finally(() => prisma.$disconnect());
diff --git a/components/BlogShareButtons.tsx b/components/BlogShareButtons.tsx
new file mode 100644
index 0000000..bbcb364
--- /dev/null
+++ b/components/BlogShareButtons.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Facebook, Instagram, Twitter, Link as LinkIcon, Check } from 'lucide-react';
+import toast from 'react-hot-toast';
+
+interface Props {
+  title: string;
+}
+
+export default function BlogShareButtons({ title }: Props) {
+  const [copied, setCopied] = useState(false);
+  const [url, setUrl] = useState('');
+
+  useEffect(() => {
+    setUrl(window.location.href);
+  }, []);
+
+  const handleCopy = (customMessage?: string) => {
+    if (!url) return;
+    navigator.clipboard.writeText(url);
+    setCopied(true);
+    toast.success(customMessage || 'Lien copié dans le presse-papiers !');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const shareLinks = {
+    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
+    twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
+  };
+
+  if (!url) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 lg:top-1/2 lg:right-8 lg:-translate-y-1/2 lg:bottom-auto flex flex-col gap-3 z-50">
+      <a 
+        href={shareLinks.facebook}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-white text-[#1877F2] shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
+        title="Partager sur Facebook"
+      >
+        <Facebook className="w-6 h-6 lg:w-5 lg:h-5" />
+      </a>
+      
+      <a 
+        href={shareLinks.twitter}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-white text-black shadow-xl flex items-center justify-center hover:scale-110 transition-transform border border-gray-100"
+        title="Partager sur X (Twitter)"
+      >
+        <Twitter className="w-6 h-6 lg:w-5 lg:h-5" />
+      </a>
+      
+      <button 
+        onClick={() => handleCopy('Lien copié ! Vous pouvez le coller sur Instagram.')}
+        className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
+        title="Copier le lien pour Instagram"
+      >
+        <Instagram className="w-6 h-6 lg:w-5 lg:h-5" />
+      </button>
+
+      <button 
+        onClick={() => handleCopy()}
+        className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-gray-800 text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
+        title="Copier le lien"
+      >
+        {copied ? <Check className="w-6 h-6 lg:w-5 lg:h-5 text-green-400" /> : <LinkIcon className="w-6 h-6 lg:w-5 lg:h-5" />}
+      </button>
+    </div>
+  );
+}
diff --git a/lib/sanitize.ts b/lib/sanitize.ts
index 61e450d..0e71076 100644
--- a/lib/sanitize.ts
+++ b/lib/sanitize.ts
@@ -7,7 +7,11 @@ import sanitizeHtml from 'sanitize-html';
 export function sanitizeHTML(html: string): string {
     if (!html) return '';
     
-    return sanitizeHtml(html, {
+    // Remplacer les espaces insécables par des espaces normaux
+    // Empêche le navigateur de considérer un paragraphe entier comme un seul mot
+    const cleanHtml = html.replace(/&nbsp;|\u00A0/g, ' ');
+    
+    return sanitizeHtml(cleanHtml, {
         allowedTags: [
             'p', 'br', 'b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li', 
             'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'span', 'div',