From c9a14a9086f85910d43a1a459f44c35afb1b9137 Mon Sep 17 00:00:00 2001
From: kayjaydee <killian.dalcin@gmail.com>
Date: Tue, 21 Apr 2026 14:36:22 +0200
Subject: [PATCH] feat(05-02): create MDC components ProseImg.vue and Alert.vue

- ProseImg.vue: transparent NuxtImg override for markdown images (BLOG-05)
- Alert.vue: MDC callout component with 4 types (info/warning/tip/danger) via UAlert
- ContentSlot required for MDC slot content rendering (Pitfall 4)
---
 app/components/content/Alert.vue    | 34 +++++++++++++++++++++++++++++
 app/components/content/ProseImg.vue | 24 ++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 app/components/content/Alert.vue
 create mode 100644 app/components/content/ProseImg.vue

diff --git a/app/components/content/Alert.vue b/app/components/content/Alert.vue
new file mode 100644
index 0000000..5132f9f
--- /dev/null
+++ b/app/components/content/Alert.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  type?: 'info' | 'warning' | 'tip' | 'danger'
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+})
+
+const iconMap = {
+  info: 'i-heroicons-information-circle',
+  warning: 'i-heroicons-exclamation-triangle',
+  tip: 'i-heroicons-light-bulb',
+  danger: 'i-heroicons-x-circle',
+}
+const colorMap = {
+  info: 'info',
+  warning: 'warning',
+  tip: 'success',
+  danger: 'error',
+}
+</script>
+
+<template>
+  <UAlert
+    :icon="iconMap[props.type]"
+    :color="colorMap[props.type] as any"
+    variant="soft"
+    class="my-4"
+  >
+    <template #description>
+      <ContentSlot :use="$slots.default" unwrap="p" />
+    </template>
+  </UAlert>
+</template>
diff --git a/app/components/content/ProseImg.vue b/app/components/content/ProseImg.vue
new file mode 100644
index 0000000..c71b862
--- /dev/null
+++ b/app/components/content/ProseImg.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  src: string
+  alt?: string
+  title?: string
+  width?: string | number
+  height?: string | number
+}
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+})
+</script>
+
+<template>
+  <NuxtImg
+    :src="props.src"
+    :alt="props.alt"
+    :title="props.title"
+    :width="props.width"
+    :height="props.height"
+    class="rounded-lg w-full"
+    sizes="sm:600px md:800px lg:1000px"
+  />
+</template>