From 60e05f7a56ffa73d1ad3751e6330c296de958247 Mon Sep 17 00:00:00 2001
From: kayjaydee <killian.dalcin@gmail.com>
Date: Tue, 21 Apr 2026 15:31:00 +0200
Subject: [PATCH] feat(05-02): add Columns/Details/Video/Badge MDC components +
 full showcase article

---
 app/components/content/Badge.vue      |  27 +++
 app/components/content/Columns.vue    |  22 +++
 app/components/content/Details.vue    |  48 ++++++
 app/components/content/Video.vue      |  77 +++++++++
 content/fr/blog/test-kotlin-syntax.md | 235 +++++++++++++++++++++++---
 5 files changed, 386 insertions(+), 23 deletions(-)
 create mode 100644 app/components/content/Badge.vue
 create mode 100644 app/components/content/Columns.vue
 create mode 100644 app/components/content/Details.vue
 create mode 100644 app/components/content/Video.vue

diff --git a/app/components/content/Badge.vue b/app/components/content/Badge.vue
new file mode 100644
index 0000000..740366c
--- /dev/null
+++ b/app/components/content/Badge.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  color?: 'gray' | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'orange'
+}
+const props = withDefaults(defineProps<Props>(), { color: 'gray' })
+
+const colorClass = {
+  gray: 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300',
+  blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+  green: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
+  red: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  yellow: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
+  purple: 'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300',
+  orange: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
+}
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium font-mono',
+      colorClass[props.color],
+    ]"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/app/components/content/Columns.vue b/app/components/content/Columns.vue
new file mode 100644
index 0000000..7d6accf
--- /dev/null
+++ b/app/components/content/Columns.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+  cols?: 2 | 3 | 4
+  gap?: 'sm' | 'md' | 'lg'
+}
+const props = withDefaults(defineProps<Props>(), {
+  cols: 2,
+  gap: 'md',
+})
+
+const gridClass = computed(() => {
+  const cols = { 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4' }[props.cols]
+  const gap = { sm: 'gap-4', md: 'gap-6', lg: 'gap-10' }[props.gap]
+  return `not-prose my-6 grid grid-cols-1 ${cols} ${gap}`
+})
+</script>
+
+<template>
+  <div :class="gridClass">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/content/Details.vue b/app/components/content/Details.vue
new file mode 100644
index 0000000..c6b0fa4
--- /dev/null
+++ b/app/components/content/Details.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+interface Props {
+  summary?: string
+  open?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  summary: 'Voir plus',
+  open: false,
+})
+</script>
+
+<template>
+  <details
+    :open="props.open"
+    class="not-prose my-4 rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden"
+  >
+    <summary
+      class="flex cursor-pointer select-none items-center justify-between px-4 py-3
+             text-sm font-medium text-neutral-700 dark:text-neutral-300
+             hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors list-none"
+    >
+      {{ props.summary }}
+      <svg
+        class="size-4 shrink-0 text-neutral-400 transition-transform details-arrow"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </summary>
+    <div class="px-4 py-3 prose prose-neutral dark:prose-invert max-w-none
+                prose-code:before:content-none prose-code:after:content-none
+                prose-pre:p-0 prose-pre:bg-transparent text-sm">
+      <slot />
+    </div>
+  </details>
+</template>
+
+<style scoped>
+details[open] .details-arrow {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/app/components/content/Video.vue b/app/components/content/Video.vue
new file mode 100644
index 0000000..15b64d9
--- /dev/null
+++ b/app/components/content/Video.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+interface Props {
+  src: string
+  title?: string
+  aspect?: '16/9' | '4/3' | '1/1'
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  aspect: '16/9',
+  autoplay: false,
+  loop: false,
+  muted: false,
+})
+
+const isYoutube = computed(() =>
+  /youtube\.com|youtu\.be/.test(props.src)
+)
+
+const youtubeId = computed(() => {
+  const match = props.src.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+  )
+  return match?.[1] ?? ''
+})
+
+const youtubeUrl = computed(() => {
+  const params = new URLSearchParams({
+    ...(props.autoplay ? { autoplay: '1' } : {}),
+    ...(props.loop ? { loop: '1', playlist: youtubeId.value } : {}),
+    modestbranding: '1',
+    rel: '0',
+  })
+  return `https://www.youtube.com/embed/${youtubeId.value}?${params}`
+})
+
+const aspectClass = computed(() => ({
+  '16/9': 'aspect-video',
+  '4/3': 'aspect-[4/3]',
+  '1/1': 'aspect-square',
+}[props.aspect]))
+</script>
+
+<template>
+  <figure class="not-prose my-6 w-full overflow-hidden rounded-lg bg-black">
+    <!-- YouTube embed -->
+    <iframe
+      v-if="isYoutube"
+      :src="youtubeUrl"
+      :title="props.title"
+      :class="['w-full', aspectClass]"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+      loading="lazy"
+    />
+    <!-- Local video -->
+    <video
+      v-else
+      :src="props.src"
+      :title="props.title"
+      :class="['w-full', aspectClass]"
+      :autoplay="props.autoplay"
+      :loop="props.loop"
+      :muted="props.muted || props.autoplay"
+      controls
+      playsinline
+    />
+    <figcaption
+      v-if="props.title"
+      class="bg-neutral-900 px-4 py-2 text-center text-xs text-neutral-400 italic"
+    >
+      {{ props.title }}
+    </figcaption>
+  </figure>
+</template>
diff --git a/content/fr/blog/test-kotlin-syntax.md b/content/fr/blog/test-kotlin-syntax.md
index 54973f3..b66ae37 100644
--- a/content/fr/blog/test-kotlin-syntax.md
+++ b/content/fr/blog/test-kotlin-syntax.md
@@ -1,49 +1,238 @@
 ---
-title: "Test Kotlin Syntax Highlighting"
-description: "Article de test pour valider le renderer @nuxt/content"
+title: "Guide du format Markdown"
+description: "Référence complète de tous les éléments et composants disponibles dans les articles"
 date: "2026-04-21"
-tags: ["kotlin", "hytale", "test"]
+tags: ["guide", "markdown", "mdc"]
 ---
 
-## Bloc de code Kotlin
+## Typographie de base
+
+Paragraphe normal avec du **gras**, de l'*italique*, du ~~barré~~ et du `code inline`.
+
+Lien simple : [killiandalcin.fr](https://killiandalcin.fr)
+
+Citation :
+
+> Les meilleurs plugins Hytale naissent d'une obsession pour les détails.
+
+---
+
+## Blocs de code
+
+Bloc Kotlin avec coloration syntaxique :
 
 ```kotlin
-fun main() {
-    println("Hello, Hytale!")
-}
-
-fun createPlugin(name: String): Plugin {
-    return Plugin(name = name, version = "1.0.0")
+fun createPlugin(name: String): HytalePlugin {
+    return HytalePlugin.builder()
+        .name(name)
+        .version("1.0.0")
+        .onLoad { println("Plugin $name loaded!") }
+        .build()
 }
 ```
 
-## Image optimisée
+TypeScript :
 
-![Image de test pour NuxtImg dans les articles](/images/logo.webp)
+```typescript
+interface PluginConfig {
+  name: string
+  version: `${number}.${number}.${number}`
+  enabled: boolean
+}
 
-## Tableau
+const config: PluginConfig = {
+  name: 'hytale-core',
+  version: '1.0.0',
+  enabled: true,
+}
+```
 
-| Fonctionnalité | Statut | Notes |
-|----------------|--------|-------|
-| Syntax highlighting | ✅ Actif | Kotlin, Java, TypeScript, Shell |
-| Images optimisées | ✅ Actif | Via NuxtImg (lazy + srcset) |
-| Tableaux | ✅ Actif | Rendu prose |
-| Callouts | ✅ Actif | MDC ::alert{type} |
+Shell :
+
+```bash
+pnpm install @hytale/sdk
+pnpm run build
+docker build -t portfolio:latest .
+```
+
+---
+
+## Images
+
+**Pleine largeur (défaut) :**
+
+![Logo pleine largeur](/images/logo.webp)
+
+**Centrée avec taille fixe et légende :**
+
+![Logo centré](/images/logo.webp){align="center" width="120" caption="Logo Killian' DAL-CIN"}
+
+**Flottant à gauche :**
+
+![Logo gauche](/images/logo.webp){align="left" caption="Float left"}
+
+Texte qui entoure l'image flottante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+
+<div style="clear:both"></div>
+
+**Flottant à droite :**
+
+![Logo droite](/images/logo.webp){align="right" caption="Float right"}
+
+Texte qui entoure l'image flottante à droite. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+<div style="clear:both"></div>
+
+**Classes Tailwind directes :**
+
+![Logo petit centré](/images/logo.webp){.w-16 .mx-auto .block}
+
+---
+
+## Tableaux
+
+| Composant | Syntaxe | Usage |
+|-----------|---------|-------|
+| Alert | `::alert{type="info"}` | Callouts colorés |
+| Image | `![alt](src){align="left"}` | Photos flottantes |
+| Columns | `::columns{cols=2}` | Mise en page |
+| Details | `::details{summary="Voir"}` | Contenu repliable |
+| Video | `::video{src="..."}` | Embed YouTube/local |
+| Badge | `:badge[text]{color="blue"}` | Tags inline |
+
+---
 
 ## Callouts
 
 ::alert{type="info"}
-Ceci est un callout d'information.
+**Info** — Message informatif. Supporte le **gras** et le `code inline`.
 ::
 
 ::alert{type="warning"}
-Ceci est un avertissement.
+**Attention** — Vérifiez la compatibilité Nuxt 4 avant d'installer un module.
 ::
 
 ::alert{type="tip"}
-Conseil pratique de développement Kotlin.
+**Astuce** — Utilisez `pnpm` plutôt que `npm` pour les projets Nuxt (résolution plus rapide).
 ::
 
 ::alert{type="danger"}
-Erreur critique — à ne pas ignorer.
+**Danger** — Ne jamais committer de clés API ou secrets en clair.
 ::
+
+---
+
+## Colonnes
+
+::columns{cols=2}
+  ::div
+  **Colonne 1**
+
+  Contenu de la première colonne. Idéal pour comparer deux approches, montrer avant/après, ou lister des avantages et inconvénients.
+  ::
+
+  ::div
+  **Colonne 2**
+
+  Contenu de la seconde colonne. Les colonnes passent en empilé sur mobile automatiquement.
+  ::
+::
+
+::columns{cols=3 gap="lg"}
+  ::div
+  🚀 **Rapide**
+
+  Nuxt SSR génère le HTML côté serveur.
+  ::
+
+  ::div
+  🔍 **SEO**
+
+  Chaque page est crawlable sans JavaScript.
+  ::
+
+  ::div
+  🎨 **Flexible**
+
+  Tailwind + Nuxt UI pour tout styliser.
+  ::
+::
+
+---
+
+## Contenu repliable
+
+::details{summary="Voir l'implémentation complète du plugin"}
+```kotlin
+class HytalePlugin(
+    val name: String,
+    val version: String,
+    private val onLoad: () -> Unit,
+) {
+    fun load() {
+        println("Loading plugin: $name v$version")
+        onLoad()
+    }
+
+    companion object {
+        fun builder() = Builder()
+    }
+
+    class Builder {
+        private var name = ""
+        private var version = "0.0.1"
+        private var onLoad: () -> Unit = {}
+
+        fun name(n: String) = apply { name = n }
+        fun version(v: String) = apply { version = v }
+        fun onLoad(fn: () -> Unit) = apply { onLoad = fn }
+        fun build() = HytalePlugin(name, version, onLoad)
+    }
+}
+```
+::
+
+::details{summary="Pourquoi utiliser @nuxt/content ?" open=true}
+`@nuxt/content` transforme des fichiers Markdown en pages SSR crawlables. Avantages :
+
+- **Zéro CMS** — les articles sont dans le repo Git
+- **Typé** — schema Zod sur chaque collection
+- **MDC** — composants Vue dans le Markdown
+::
+
+---
+
+## Badges inline
+
+Versions : :badge[v1.0]{color="green"} :badge[v0.9 LTS]{color="blue"} :badge[deprecated]{color="red"}
+
+Statuts : :badge[stable]{color="green"} :badge[beta]{color="yellow"} :badge[wip]{color="orange"}
+
+Technologies : :badge[Kotlin]{color="purple"} :badge[Nuxt 4]{color="green"} :badge[TypeScript]{color="blue"}
+
+---
+
+## Vidéo
+
+**YouTube :**
+
+::video{src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Exemple d'embed YouTube"}
+::
+
+---
+
+## Listes
+
+Liste non ordonnée :
+
+- Premier point
+- Deuxième point avec `code`
+- Troisième point avec **gras**
+  - Sous-point imbriqué
+  - Autre sous-point
+
+Liste ordonnée :
+
+1. Installer les dépendances : `pnpm install`
+2. Lancer le dev server : `pnpm dev`
+3. Builder pour la prod : `pnpm build`