# Plan 10-03 — HytaleDemoGrid Component + /hytale Integration

## Goal

Afficher sur `/hytale` une section "Live Demos" présentant les 5 plugins de Phase 10 (ou ceux déjà shippés), avec screenshot/gif + description + lien GitHub + tag techno.

## Depends on

- Plan 10-02 Wave 1 minimum (au moins 1 plugin publié) pour avoir du contenu réel
- Peut être développé en parallèle avec placeholder data au début

## Success Criteria

1. Composant `HytaleDemoGrid.vue` créé dans `app/components/`, auto-importé
2. Section "Live Demos" visible sur `/hytale` (FR + EN), SSR rendu
3. Chaque card affiche : image/gif, titre, description 1 phrase, tag techno, lien GitHub (externe `rel="noopener"`), wow factor indicator optionnel
4. Data source centralisée : `app/data/hytaleDemos.ts` typé avec `HytaleDemo` interface
5. i18n `hytale.demos.*` ajouté dans `fr.json` + `en.json` (title, subtitle, empty state)
6. Responsive : grille 1 col mobile, 2 cols tablet, 3 cols desktop
7. Typecheck vert : `pnpm typecheck` exit 0

## Tasks

### Wave 1 — Data Layer
- [ ] Créer `shared/types/hytaleDemo.ts` :
  ```ts
  export interface HytaleDemo {
    id: string
    titleKey: string   // i18n key
    descKey: string    // i18n key
    image: string      // /public/demos/<id>.gif ou .webp
    github: string     // URL repo
    tech: 'Java' | 'Kotlin'
    wowFactor?: 1 | 2 | 3 | 4 | 5
  }
  ```
- [ ] Créer `app/data/hytaleDemos.ts` avec les 5 entries (ou les shippés au moment du code)
- [ ] Placer placeholders dans `public/demos/` : `.webp` 400×225 avec texte "Demo coming soon" si gif pas prêt

### Wave 2 — Component
- [ ] Créer `app/components/HytaleDemoGrid.vue` :
  - Props : `demos: HytaleDemo[]` (default = import depuis data)
  - Template : `<UCard>` Nuxt UI v3 par démo
  - Image `<NuxtImg>` avec `loading="lazy"`, fallback si manquante
  - Description via `<I18nT :keypath>` pour interpolations
  - Badge `<UBadge>` pour `tech` (couleur selon Java/Kotlin)
  - Lien `<NuxtLink external target="_blank" rel="noopener noreferrer">` vers GitHub
- [ ] Variant `featured` avec card plus grande pour 1 démo vedette (optionnel)
- [ ] Empty state : si `demos` vide → message "Demos coming soon" traduit

### Wave 3 — Integration
- [ ] Ajouter section sur `app/pages/hytale.vue` après pricing/témoignages :
  ```vue
  <section class="py-16">
    <h2>{{ t('hytale.demos.title') }}</h2>
    <p>{{ t('hytale.demos.subtitle') }}</p>
    <HytaleDemoGrid />
  </section>
  ```
- [ ] Ajouter ancre `#demos` pour deep-linking
- [ ] Vérifier responsive sur mobile/tablet/desktop (Chrome DevTools)

### Wave 4 — i18n
- [ ] Ajouter dans `i18n/locales/fr.json` :
  ```json
  "hytale": {
    "demos": {
      "title": "Live Demos",
      "subtitle": "Plugins open-source que j'ai développés pour Hytale. Code et documentation complète sur GitHub.",
      "viewCode": "Voir le code",
      "emptyState": "Démos à venir"
    }
  }
  ```
- [ ] Équivalent EN dans `en.json`
- [ ] Clés i18n par démo : `hytale.demos.gravityFlip.title`, `.description` etc. (5 démos × 2 clés × 2 langues = 20 clés)

### Wave 5 — Polish
- [ ] SEO : ajouter démos au JSON-LD de `/hytale` (liste `CreativeWork` ou `SoftwareSourceCode`) pour Google
- [ ] Animation hover card : scale 1.02 + shadow (Tailwind transition)
- [ ] Preload première image (`<link rel="preload">` pour la démo featured)
- [ ] Test dark/light : vérifier contraste images et text overlay

## Technical Decisions

- **Data source** : TypeScript fichier statique (pas JSON) pour avoir typing + auto-import
- **Images** : WebP prioritaire, fallback .gif si animation critique (GravityFlip, BlackHole = gif ; Paintball screenshot screenshot)
- **Pas de CMS/frontmatter** : les démos sont stables et peu nombreuses, data-as-code suffit
- **Couleurs tech badge** : Java = orange, Kotlin = purple (conventions ecosystem)
- **Fallback gracieux** : si image manque, show text card "Demo image coming soon"

## Deferred / Out of Scope

- Satori og:image dynamique par démo (hors Phase 10)
- Player vidéo embedded YouTube (MP4 trop lourd, gif suffit pour MVP)
- Stats téléchargement GitHub en live (overkill, scrap manuel)
- Internationalisation des repos GitHub README (EN only, aligné target server owners)

## Commit Atomic Points

- Wave 1 : `feat(hytale): add HytaleDemo type + data source`
- Wave 2 : `feat(components): add HytaleDemoGrid component`
- Wave 3 : `feat(hytale): integrate demos section on /hytale`
- Wave 4 : `feat(i18n): add hytale.demos.* keys FR+EN`
- Wave 5 : `polish(hytale): demos section hover + JSON-LD + dark mode check`

## Success Validation

- [ ] Curl `https://killiandalcin.fr/hytale` → HTML contient markup `HytaleDemoGrid`
- [ ] Curl `https://killiandalcin.fr/en/hytale` → HTML contient traductions EN
- [ ] Check lighthouse sur `/hytale` : score perf pas dégradé (images optimisées)
- [ ] DMs Discord : copier l'URL `https://killiandalcin.fr/hytale#demos` et confirmer que le rendu est pro