From 36cd7f11aab2c2702e5e9a769c4b8f48e0297c8e Mon Sep 17 00:00:00 2001
From: kayjaydee <killian.dalcin@gmail.com>
Date: Tue, 21 Apr 2026 15:28:39 +0200
Subject: [PATCH] =?UTF-8?q?feat(05-02):=20ProseImg=20flexible=20=E2=80=94?=
 =?UTF-8?q?=20align=20left/right/center/full=20+=20caption=20+=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/css/main.css               |  5 +++
 app/components/content/ProseImg.vue   | 50 +++++++++++++++++++++------
 content/fr/blog/test-kotlin-syntax.md |  2 +-
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 0702286..e4a52ac 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -2,6 +2,11 @@
 @import "@nuxt/ui";
 @plugin "@tailwindcss/typography";
 
+/* Offset anchor scroll for sticky header (h-16 = 64px + 16px breathing room) */
+.prose :is(h1, h2, h3, h4, h5, h6) {
+  scroll-margin-top: 5rem;
+}
+
 /* Force Shiki dark theme in all color modes — code blocks always dark */
 .shiki,
 .shiki span {
diff --git a/app/components/content/ProseImg.vue b/app/components/content/ProseImg.vue
index a2e2100..dca0502 100644
--- a/app/components/content/ProseImg.vue
+++ b/app/components/content/ProseImg.vue
@@ -3,20 +3,50 @@ interface Props {
   src: string
   alt?: string
   title?: string
+  caption?: string
+  align?: 'left' | 'right' | 'center' | 'full'
   width?: string | number
   height?: string | number
 }
-const props = withDefaults(defineProps<Props>(), { alt: '' })
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+  align: 'full',
+})
+
+const figureClass = computed(() => {
+  const base = 'not-prose my-6'
+  switch (props.align) {
+    case 'left':
+      return `${base} float-left mr-6 mb-2 w-1/2 max-w-xs`
+    case 'right':
+      return `${base} float-right ml-6 mb-2 w-1/2 max-w-xs`
+    case 'center':
+      return `${base} mx-auto table`
+    default:
+      return `${base} w-full`
+  }
+})
+
+const imgClass = computed(() => {
+  const base = 'rounded-lg'
+  return props.align === 'full' ? `${base} w-full` : `${base} w-full`
+})
 </script>
 
 <template>
-  <img
-    :src="props.src"
-    :alt="props.alt"
-    :title="props.title"
-    :width="props.width"
-    :height="props.height"
-    loading="lazy"
-    class="not-prose my-6 w-full rounded-lg"
-  />
+  <figure :class="figureClass" :style="props.width && props.align !== 'full' ? `width: ${props.width}px` : undefined">
+    <img
+      :src="props.src"
+      :alt="props.alt"
+      :title="props.title || props.caption"
+      loading="lazy"
+      :class="imgClass"
+    />
+    <figcaption
+      v-if="props.caption"
+      class="mt-2 text-center text-xs text-neutral-500 dark:text-neutral-400 italic"
+    >
+      {{ props.caption }}
+    </figcaption>
+  </figure>
 </template>
diff --git a/content/fr/blog/test-kotlin-syntax.md b/content/fr/blog/test-kotlin-syntax.md
index 6dd0cf8..54973f3 100644
--- a/content/fr/blog/test-kotlin-syntax.md
+++ b/content/fr/blog/test-kotlin-syntax.md
@@ -19,7 +19,7 @@ fun createPlugin(name: String): Plugin {
 
 ## Image optimisée
 
-![Image de test pour NuxtImg dans les articles](/og-image.png)
+![Image de test pour NuxtImg dans les articles](/images/logo.webp)
 
 ## Tableau