portfolio/.planning/phases/10-demo-plugins/10-03-PLAN.md

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 :

  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 :

  <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 :

  "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