UI & TS migration Update

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

• Klaynight Dev - Développeur principal - @Klaynight-dev

🙏 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

v1.25.05.31

📦 Plinkk — Changelog

🏷️ Version v1.250531 — 31 mai 2025

✨ Nouvelles fonctionnalités

• 🎉 Ajout d’un easter egg caché dans l’interface pour les curieux 👀
• 📋 Bouton copier l’email ajouté (avec anti-spam) pour faciliter le contact
• ⚡ Ajout d’une barre de statut et de messages d’erreur/avertissement
• 🌗 Détection automatique du thème clair/sombre via les préférences système
• 🧪 Nouvelle fonction validateProfileConfig() dans la console
• 🍪 Préférences utilisateurs désormais stockées en cookie

🐛 Corrections de bugs

• 🐞 Fix du hover sur le lien e-mail
• 🎨 Correction du style scrollbar, icônes sociales, et overflow
• 🧩 Résolution d’un bug de taille de l’image de profil
• ✍️ Plusieurs corrections orthographiques
• 🧼 Suppression de logs de debug et de métadonnées inutiles

🛠️ Améliorations & maintenance

• 🎨 Refonte visuelle légère avec un nouveau thème
• 🔧 Mise à jour du workflow GitHub Actions pour les mentions
• 📄 Mise à jour de la documentation technique et utilisateur
• 📬 Ajout d’une description pour les liens et rôles dans la console

---

🔁 Voir tous les commits depuis la version précédente

Full Changelog: v1.250207...v1.250531

Version 1.25.02.07

📢 Notes de version pour la v1.250207

🚀 Nouvelles fonctionnalités

• 🔍 Amélioration des balises Meta : Ajout de balises meta complètes pour un meilleur SEO et partage sur les réseaux sociaux.
• 🎨 Styles dynamiques : Amélioration des capacités de style dynamique avec plus d'options de personnalisation.
• ✨ Améliorations des animations : Meilleure gestion des animations pour les articles, les arrière-plans et les boutons.
• 🔄 Bouton de basculement de thème : Introduction d'un bouton pour changer de thème dynamiquement.
• 🖋️ Design du pied de page : Mise à jour du design du pied de page avec un nouveau lien vers Klaynight Studio et Pacman.
• 📝 Description : Ajout de la possibilité d'ajouter une description détaillée.
• 🏷️ Bouton de label : Ajout de boutons de label pour une meilleure organisation.
• 🖼️ Gestion des Canva : Support pour 17 nouveaux canva et 1 nouveau thème.
• 💡 Activation du néon de profil : Possibilité d'activer ou de désactiver l'effet néon sur le profil.
• 🎉 Nouvelles animations : Ajout de 6 nouvelles animations pour les boutons et les articles.
• 🔀 Basculement Canva/Image : Possibilité de basculer entre un canva et une image.
• 📏 Modification de la taille de l'arrière-plan : Ajustement de la taille de l'arrière-plan en pourcentage.
• 🛠️ Gestion des erreurs de Canva : Si un canva rencontre une erreur, l'arrière-plan par défaut sera une image.
• 🎨 Arrière-plan de couleur : Possibilité de définir un arrière-plan de couleur en utilisant une liste au lieu d'une URL, permettant des couleurs unies ou dégradées.

🐛 Corrections de bugs

• 🔍 Analyse JSON : Ajout d'une validation pour s'assurer que profileData est une chaîne JSON valide avant de l'analyser.
• 🔢 Calcul de l'index du thème : Correction du calcul de l'index du thème pour gérer correctement les indices négatifs.

📈 Améliorations

• 🛠️ Refactorisation du code : Refactorisation du code pour une meilleure lisibilité et maintenabilité.
• ⚡ Optimisation des performances : Optimisation des performances en réduisant les manipulations DOM inutiles et les tests inutiles.

⚠️ Problèmes connus

• ⏱️ Délais d'animation : Certaines animations peuvent encore avoir de légers délais dans certaines conditions.
• 🌐 Compatibilité des thèmes : Tous les thèmes ne sont pas entièrement compatibles avec les anciens navigateurs.

👥 Contributeurs

• Klaynight Studio
• Pacman

Pour plus de détails, visitez le répertoire GitHub.

Full Changelog: v1.0.0...v1.250207

Version 1.0

Version 1.0

✨ Fonctionnalités

• 👤 Affichage de Profil:

  • 🖼️ Image de profil avec effet de pivot: Affichez une image de profil avec un effet de rotation 3D au survol.
  • 🔧 Icône et texte personnalisables pour le site: Personnalisez l'icône et le texte affichés sous l'image de profil.
  • 🔗 Lien vers le profil ou site externe: Ajoutez un lien cliquable vers votre profil ou site externe.

• 🌐 Liens Externes:

  • ➕ Ajout de liens vers des sites externes: Ajoutez des liens vers des sites externes avec des icônes et des textes descriptifs.
  • ✨ Effets de survol pour les liens: Appliquez des effets de survol pour rendre les liens plus interactifs.

• 🎨 Thèmes Personnalisables:

  • 🎨 Plusieurs thèmes disponibles: Choisissez parmi une variété de thèmes pour personnaliser l'apparence du site.
  • 🎨 Couleurs et styles ajustables: Ajustez les couleurs et les styles pour correspondre à votre branding.

• 🎞️ Animations Configurables:

  • 🎞️ Animations pour les articles, boutons et arrière-plan: Ajoutez des animations pour les articles, les boutons et l'arrière-plan.
  • 🎞️ Options pour activer ou désactiver les animations: Activez ou désactivez les animations selon vos préférences.

• 🔔 Notifications Discord:

  • 🔔 Intégration avec Discord: Envoyez des notifications à un canal Discord lors des pushs, pull requests, issues, et releases.

🛠️ Exemples de Modification

1. 📂 Cloner le dépôt:

git clone https://github.com/Klaynight-dev/links_website_template.git
cd links_website_template

2. ✏️ Modifier les Informations de Profil:
   - Ouvrez contents/js/profileConfig.js et modifiez les valeurs de l'objet profileData:

const profileData = {
    profileLink: "https://votre-lien.com",
    profileImage: "https://votre-image.com/image.jpg",
    profileIcon: "https://votre-icone.com/icone.png",
    profileSiteText: "Votre site",
    userName: "Votre Nom",
    email: "votre.email@exemple.com",
    links: [
        { icon: "https://votre-icone.com/icone1.png", url: "https://votre-lien1.com", text: "Lien 1" },
        { icon: "https://votre-icone.com/icone2.png", url: "https://votre-lien2.com", text: "Lien 2" },
        { icon: "https://votre-icone.com/icone3.png", url: "https://votre-lien3.com", text: "Lien 3" }
    ],
    backgroundImage: "https://votre-image-de-fond.com/image.jpg",
    profileHoverColor: "#7289DA",
    neonColors: ["#7289DA", "#FF4500", "#00FF00", "#FFD700", "#FF69B4"],
    selectedThemeIndex: 0,
    selectedAnimationIndex: 0,
    selectedAnimationButtonIndex: 1,
    selectedAnimationBackgroundIndex: 2,
    EnableAnimationArticle: 1,
    EnableAnimationButton: 1,
    EnableAnimationBackground: 1,
    animationDurationBackground: 30
};

3. 🎨 Personnaliser les Thèmes:
   - Ajoutez ou modifiez les thèmes dans contents/js/themeConfig.js:

const themes = [
    {
        background: "rgba(0, 0, 0, 0.6)",
        hoverColor: "#7289DA",
        textColor: "white",
        buttonBackground: "#2C2F33",
        buttonHoverBackground: "#7289DA",
        buttonTextColor: "white",
        linkHoverColor: "#7289DA"
    },
    // Ajoutez d'autres thèmes ici
];

4. 🎞️ Configurer les Animations:
   - Ajoutez ou modifiez les animations dans contents/js/animation.js:

const animations = [
    {
        name: "fade",
        keyframes: "fade 1s ease-in-out"
    },
    // Ajoutez d'autres animations ici
];

🛤️ Roadmap pour les Améliorations Futures

Fonctionnalité	Description	Statut	Priorité
📹 Support pour les Vidéos	Ajouter la possibilité d'intégrer des vidéos de profil	Planifié	Élevée
🎨 Thèmes Dynamiques	Permettre la création de thèmes dynamiques personnalisés	Planifié	Moyenne
📊 Statistiques d'Utilisation	Ajouter des statistiques d'utilisation du site	Planifié	Élevée
🌐 Support Multilingue	Ajouter la prise en charge de plusieurs langues	Planifié	Moyenne
🌙 Mode Sombre/Clair	Ajouter un mode sombre et un mode clair	Déployé	Moyenne
🛠️ Personnalisation Avancée	Permettre une personnalisation avancée des animations	Planifié	Moyenne
🔌 Intégration avec API	Ajouter l'intégration avec des API tierces	Planifié	Faible
📱 Optimisation Mobile	Améliorer l'optimisation pour les appareils mobiles	En cours	Élevée
♿ Accessibilité	Améliorer l'accessibilité pour les utilisateurs	Planifié	Moyenne
📝 Description	Espace pour ajouter des descriptions supplémentaires	Déployé	Moyenne

Merci d'utiliser Klaynight-dev/links_website_template ! N'hésitez pas à contribuer et à partager vos retours.

📜 Full Changelog: https://github.com/Klaynight-dev/links_website_template/commits/v1.0.0