From 8b4e8553a4ed0db0af0b2fa98aaaa7cc8060110b Mon Sep 17 00:00:00 2001
From: Arthur Danjou <arthurdanjou@outlook.fr>
Date: Tue, 29 Jul 2025 15:23:49 +0000
Subject: [PATCH] =?UTF-8?q?Ajout=20de=20ClientOnly=20autour=20de=20Content?=
 =?UTF-8?q?Renderer=20pour=20am=C3=A9liorer=20le=20rendu=20c=C3=B4t=C3=A9?=
 =?UTF-8?q?=20client=20dans=20les=20composants=20projets=20et=20=C3=A9crit?=
 =?UTF-8?q?s.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/pages/projects/[slug].vue | 4 +++-
 app/pages/writings/[slug].vue | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/pages/projects/[slug].vue b/app/pages/projects/[slug].vue
index 6a2b31a..39689bd 100644
--- a/app/pages/projects/[slug].vue
+++ b/app/pages/projects/[slug].vue
@@ -91,10 +91,12 @@ const { copy, copied } = useClipboard({
       class="my-4"
       icon="i-ph-pencil-line-duotone"
     />
-    <ContentRenderer
+    <ClientOnly>
+      <ContentRenderer
       :value="project"
       class="!max-w-none prose dark:prose-invert"
     />
+    </ClientOnly>
     <div class="space-y-4 mt-8">
       <PostFooter />
       <div class="flex gap-4 items-center flex-wrap">
diff --git a/app/pages/writings/[slug].vue b/app/pages/writings/[slug].vue
index 267ab48..a6ae5f9 100644
--- a/app/pages/writings/[slug].vue
+++ b/app/pages/writings/[slug].vue
@@ -157,13 +157,15 @@ function scrollToSection(id: string) {
       icon="i-ph-pencil-line-duotone"
     />
     <article class="mt-8">
-      <ContentRenderer
+      <ClientOnly>
+        <ContentRenderer
         :value="post"
         class="!max-w-none prose dark:prose-invert"
       />
+      </ClientOnly>
       <div class="space-y-4 mt-8">
         <PostFooter />
-        <div class="flex gap-4 items-center flex-wrap">
+        <div class="flex gap-4 items-center flex-wrap justify-between sm:justify-start">
           <UButton
             :label="(postDB?.likes ?? 0) > 1 ? `${postDB?.likes ?? 0} likes` : `${postDB?.likes ?? 0} like`"
             :color="likeCookie ? 'red' : 'neutral'"