Skip to content

UI & TS migration Update

Latest
Latest

Choose a tag to compare

View all tags
@Klaynight-dev Klaynight-dev released this 15 Aug 21:01
v1.250808
f6d4ec9

v1.25.08.08

✨ Nouvelles fonctionnalités

🎯 Barre de Statut Discord

  • Statut dynamique avec détection automatique d'état
  • 4 états prédéfinis : En ligne (vert), Occupé (rouge), Absent (orange), Hors ligne (gris)
  • Positionnement précis sur le profil (coin bas-droite)
  • Interactions fluides : Affichage du texte au survol et clic
  • Design authentique Discord avec glassmorphism

🔒 Système de Sécurité Renforcé

  • Validation stricte des URLs avec whitelist de protocoles
  • Sanitisation automatique de tous les contenus utilisateur
  • Protection XSS intégrée dans toutes les fonctions
  • Validation des couleurs (hex, RGB, noms CSS)
  • Headers CSP pour la sécurité

💾 Migration TypeScript

  • Conversion complète de JavaScript vers TypeScript
  • Typage strict pour toutes les interfaces
  • Meilleure robustesse et détection d'erreurs à la compilation
  • IntelliSense amélioré pour le développement
  • Compilation optimisée avec tsconfig.json et le workflow

🎨 Design Glassmorphism

  • Effets de flou avancés avec backdrop-filter
  • Transparences sophistiquées et dégradés
  • Ombres multicouches pour la profondeur
  • Animations GPU-accelerated pour la performance
  • Responsive design optimisé mobile

🎭 Easter Eggs Interactifs

  • Système de spam du bouton copie email (1000 niveaux)
  • Messages humoristiques progressifs
  • Effets visuels : vibrations, fissures, explosion
  • Roleplay narratif pour engagement utilisateur
  • Animations de destruction du bouton

🔧 Améliorations

📱 Responsive et Accessibilité

  • Mobile First approach avec breakpoints optimisés
  • Touch gestures pour interactions tactiles
  • Conformité WCAG 2.1 niveau AA
  • Support screen readers avec attributs ARIA
  • Respect de prefers-reduced-motion

⚡ Performance

  • Lazy loading pour toutes les images
  • Code splitting des modules JavaScript
  • Optimisations CSS avec will-change et transform3d
  • Debouncing des événements coûteux
  • Intersection Observer pour animations

🎨 Thèmes et Animations

  • 8 thèmes prédéfinis couvrant tous les styles
  • Système de thème opposé pour adaptation automatique
  • 15+ animations CSS fluides et optimisées
  • 20+ animations canvas avec effets particules
  • Configuration granulaire de tous les effets

🛠️ Changements Techniques

Architecture

Avant (v0.x) :
contents/js/
├── init.js (JavaScript)
├── profileConfig.js
└── basic functions

Après (v1.0) :
contents/js/
├── init.ts (TypeScript) ✨
├── tools.ts (TypeScript) ✨
├── assets/security.js ✨
├── config/ (Configuration modulaire)
└── canvaAnimation/ (Animations avancées)

Nouvelles Fonctions

  • createStatusBar() - Barre de statut Discord
  • isSafeUrl() - Validation sécurisée des URLs
  • setSafeText() - Sanitisation des textes
  • isSafeColor() - Validation des couleurs
  • showCopyModal() - Modales de feedback

🚀 Workflows & Déploiement

🏗️ Workflows CI/CD

  • Automatisation du build via GitHub Actions (npm run build)
  • Vérification automatique du typage TypeScript à chaque push
  • Linting et tests unitaires intégrés dans le workflow
  • Déploiement automatique sur GitHub Pages à chaque merge sur main
  • Notifications de build sur Discord (webhook configurable)
  • Prévisualisation des Pull Requests avec déploiement temporaire

📦 Procédure de Déploiement

  • Build optimisé : npm run build génère les assets minifiés
  • Upload automatique des fichiers sur la branche gh-pages
  • Support du fichier CNAME pour domaines personnalisés
  • Gestion des versions via tags Git (v1.x.x)
  • Rollback simplifié en cas d’erreur (restauration via GitHub)

🧩 Fonctionnement & Configuration

  • Configuration modulaire dans config
  • Séparation stricte des assets, scripts et styles
  • Initialisation centralisée dans init.ts
  • Sécurité renforcée dès le chargement (sanitisation, CSP)
  • Support multi-environnements (local, staging, production)
  • Documentation technique pour chaque étape du workflow

🐛 Corrections

Sécurité

  • ✅ Protection XSS : Échappement automatique de tous les contenus
  • ✅ Validation URLs : Blocage des protocoles dangereux
  • ✅ CSP Headers : Content Security Policy strict
  • ✅ Input sanitization : Nettoyage de tous les inputs utilisateur

Interface

  • ✅ Overflow mobile : Gestion des débordements sur petits écrans
  • ✅ Focus trap : Navigation clavier améliorée
  • ✅ Touch targets : Zones de toucher minimum 44px
  • ✅ Contrast ratios : Respect du ratio 4.5:1 minimum

Performance

  • ✅ Memory leaks : Nettoyage des event listeners
  • ✅ Animation lag : Optimisation des transitions CSS
  • ✅ Image loading : Gestion des erreurs de chargement
  • ✅ Bundle size : Réduction de 30% avec tree-shaking

📚 Documentation

Nouveaux Fichiers

  • ✨ INSTALL.md - Guide d'installation rapide
  • 🔄 README.md - Documentation utilisateur mise à jour
  • 🔄 docs.md - Documentation technique complète

Guides Ajoutés

  • 🎯 Configuration de la barre de statut
  • 🔒 Guide de sécurité pour développeurs
  • 📱 Optimisation mobile et responsive
  • 🎨 Création de thèmes personnalisés
  • 🐛 Dépannage et FAQ étendus
  • 🚀 Déploiement automatisé et gestion des workflows

💥 Changements Breaking

Configuration

// ANCIEN (v0.x) - Ne fonctionne plus
const profileData = {
    status: "online" // ❌ Supprimé
};

// NOUVEAU (v1.0+) - Format requis
const profileData = {
    statusbar: {           // ✅ Nouveau format
        text: "En ligne",
        color: "#43b581"   // Optionnel
    }
};

Structure des Fichiers

  • 📁 contents/js/tools.js → tools.ts
  • 📁 contents/js/init.js → init.ts
  • 📁 Nouveau : contents/js/assets/security.js

Fonctions API

// ANCIEN
createButton(data) // ❌ JavaScript

// NOUVEAU  
createButton(data: ButtonData): HTMLElement // ✅ TypeScript

🚀 Roadmap Futur

Version Up1

  • Export/Import de configuration

Version Up2

  • Support multilingue (EN, FR, ES, DE)
  • Analytics intégrés (respectueux de la vie privée)
  • PWA (Progressive Web App)
  • Mode hors ligne basique

🤝 Contribution

Comment Contribuer

  1. 🍴 Fork le repository
  2. 🌿 Créez une branche feature (git checkout -b feature/awesome-feature)
  3. 💾 Commit vos changements (git commit -m 'Add awesome feature')
  4. 📤 Push vers la branche (git push origin feature/awesome-feature)
  5. 🔄 Ouvrez une Pull Request

Types de Contributions

  • 🐛 Bug fixes - Corrections de bugs
  • ✨ Features - Nouvelles fonctionnalités
  • 📚 Documentation - Améliorations docs
  • 🎨 Design - Améliorations UI/UX
  • 🔒 Security - Corrections sécurité
  • ⚡ Performance - Optimisations

Standards

  • ✅ Code TypeScript avec typage strict
  • ✅ Tests pour les nouvelles fonctionnalités
  • ✅ Documentation mise à jour
  • ✅ Responsive design obligatoire
  • ✅ Accessibilité WCAG 2.1 AA

📄 Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

👤 Auteurs

🙏 Remerciements

  • Discord - Inspiration design
  • Community - Feedback et suggestions
  • Open Source - Écosystème fantastique
  • TypeScript Team - Excellent langage

💫 Merci d'utiliser Plinkk ! N'hésitez pas à donner une ⭐ au projet si vous l'appréciez.

Full Changelog: v1.250531...v1.250808

Assets 2
Loading