From 4c05ddf143f02d48405deb2ee96cb834d5d91b18 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Thu, 24 Jul 2025 18:56:40 +0200
Subject: [PATCH] Refactor ProseImg component to remove unused 'label' prop and
 update alt text to use 'caption' instead Update toc button behavior to use
 hover mode and adjust styles for better UI consistency Change text-decoration
 style for headings in prose to ensure no underline is applied

---
 app/components/content/ProseImg.vue |  4 ++--
 app/pages/projects/[slug].vue       |  2 +-
 app/pages/writings/[slug].vue       | 16 +++++++++-------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/components/content/ProseImg.vue b/app/components/content/ProseImg.vue
index 78c8ee5..9515da2 100644
--- a/app/components/content/ProseImg.vue
+++ b/app/components/content/ProseImg.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-defineProps<{ src: string, label: string, caption?: string, rounded?: boolean }>()
+defineProps<{ src: string, caption?: string, rounded?: boolean }>()
 </script>
 
 <template>
   <div class="flex flex-col justify-center items-center prose-none my-8">
-    <img :src="src" :alt="label" class="w-full h-auto m-0 prose-none" :class="{ 'rounded-lg': rounded }">
+    <img :src="src" :alt="caption" class="w-full h-auto m-0 prose-none" :class="{ 'rounded-lg': rounded }">
     <p class="mt-2 text-sm text-gray-500 dark:text-gray-300 prose-none">
       {{ caption }}
     </p>
diff --git a/app/pages/projects/[slug].vue b/app/pages/projects/[slug].vue
index 8134f05..00d8145 100644
--- a/app/pages/projects/[slug].vue
+++ b/app/pages/projects/[slug].vue
@@ -134,7 +134,7 @@ useSeoMeta({
 .prose h2 a,
 .prose h3 a,
 .prose h4 a {
-  @apply no-underline;
+  text-decoration: none;
 }
 
 .prose img {
diff --git a/app/pages/writings/[slug].vue b/app/pages/writings/[slug].vue
index 4514101..da5bc3f 100644
--- a/app/pages/writings/[slug].vue
+++ b/app/pages/writings/[slug].vue
@@ -114,27 +114,29 @@ function scrollToSection(id: string) {
         {{ post.description }}
       </p>
     </div>
-    <div v-if="post.body.toc && post.body.toc.links.length > 0" class="flex justify-end sticky top-0 z-50 !cursor-pointer">
+    <div v-if="post.body.toc && post.body.toc.links.length > 0" class="pt-4 top-0 flex justify-end sticky z-50">
       <UPopover
-        mode="click"
+        mode="hover"
         :content="{
           align: 'end',
           side: 'bottom',
           sideOffset: 8,
         }"
+        :ui="{ content: 'cursor-pointer z-50 bg-[#fff] dark:bg-neutral-900 shadow-lg rounded-md ring ring-gray-100 dark:ring-neutral-800 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto' }"
       >
         <UButton
           :label="t('toc')"
+          variant="subtle"
           color="neutral"
-          variant="solid"
+          class="cursor-pointer text-white"
         />
 
         <template #content>
-          <div class="text-neutral-500 p-2">
+          <div class="p-2 z-50 bg-white flex flex-col gap-y-2">
             <div
               v-for="link in post!.body!.toc!.links"
               :key="link.id"
-              class="inline"
+              class="inline bg-white"
             >
               <UButton
                 size="lg"
@@ -142,7 +144,7 @@ function scrollToSection(id: string) {
                 variant="ghost"
                 color="neutral"
                 :block="true"
-                class="flex justify-start items-start p-1"
+                class="flex justify-start items-start p-1 cursor-pointer"
                 @click="scrollToSection(link.id)"
               />
             </div>
@@ -254,7 +256,7 @@ function scrollToSection(id: string) {
 .prose h2 a,
 .prose h3 a,
 .prose h4 a {
-  @apply no-underline;
+  text-decoration: none;
 }
 
 .prose img {