feat(05-02): ProseImg flexible — align left/right/center/full + caption + width

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 {

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>
+  <figure :class="figureClass" :style="props.width && props.align !== 'full' ? `width: ${props.width}px` : undefined">
     <img
       :src="props.src"
       :alt="props.alt"
-    :title="props.title"
+      :title="props.title || props.caption"
-    :width="props.width"
-    :height="props.height"
       loading="lazy"
-    class="not-prose my-6 w-full rounded-lg"
+      :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>

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