Webadge

Webadge est une webapp Vue 3 minimaliste orientée créateurs, permettant de concevoir rapidement des badges / assets (Discord, Twitch, etc.) avec un rendu temps réel et une exportation aux tailles usuelles.

Fonctionnalités

• Éditeur (texte + image)
  • Texte multi-ligne, retour à la ligne automatique, alignement, police, graisse, taille, interligne
  • Image en mode “cover” (remplissage sans déformation) + opacité
  • Formes : carré / arrondi / cercle
  • Fond optionnel (transparent par défaut)
• Prévisualisation
  • Rendu principal + mini-previews (Discord / Twitch)
  • Damier de transparence pour vérifier les PNG
• Export PNG
  • 512×512 (standard)
  • Discord : 128×128
  • Twitch : 112×112 / 56×56 / 28×28
• Thème : sombre / clair (toggle)
• Stockage local
  • Les réglages et l’état d’édition sont stockés dans le navigateur via LocalStorage
  • Aucun envoi serveur des images ou créations

Stack technique

• Vue 3 + TypeScript
• Vite
• Tailwind CSS 4
• @vueuse/core (thème, persistance)
• radix-vue (modales)
• lucide-vue-next (icônes)
• Motion-v (animations)

Démarrage

Installer les dépendances :

npm install

Lancer le serveur de dev :

npm run dev

Build de production :

npm run build

Preview du build :

npm run preview

Structure du projet

• src/components/editor/BadgeEditor.vue : UI de l’éditeur + previews + exports
• src/components/editor/useBadgeRenderer.ts : moteur de rendu Canvas (formes, image, texte, wrapping)
• src/components/layout/Header.vue : header flottant + toggle thème
• src/components/layout/Footer.vue : footer flottant + modales (confidentialité / cookies / conditions)
• src/components/ui/Modal.vue : modale style glass (radix-vue)
• src/style.css : tokens de thème + utilitaire .glass

Notes & conventions

• Transparence : le fond du badge peut rester transparent (utile pour Discord/Twitch).
• Polices : chargées via Google Fonts au runtime.
• Exports : générés via un rendu offscreen pour garantir une taille exacte et un rendu identique aux previews.

Licence

MIT — voir LICENSE.

Contribuer

Les contributions sont les bienvenues : bugs, idées, PR, presets, nouveaux types de calques.

Voir CONTRIBUTING.md.