feat(05-02): add Columns/Details/Video/Badge MDC components + full showcase article
This commit is contained in:
@@ -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 :
|
||||
|
||||
|
||||
```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) :**
|
||||
|
||||
|
||||
|
||||
**Centrée avec taille fixe et légende :**
|
||||
|
||||
{align="center" width="120" caption="Logo Killian' DAL-CIN"}
|
||||
|
||||
**Flottant à gauche :**
|
||||
|
||||
{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 :**
|
||||
|
||||
{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 :**
|
||||
|
||||
{.w-16 .mx-auto .block}
|
||||
|
||||
---
|
||||
|
||||
## Tableaux
|
||||
|
||||
| Composant | Syntaxe | Usage |
|
||||
|-----------|---------|-------|
|
||||
| Alert | `::alert{type="info"}` | Callouts colorés |
|
||||
| Image | `{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`
|
||||
|
||||
Reference in New Issue
Block a user