- Les anciens systèmes de commentaires (Disqus, auto-hébergement, GitHub Issues, etc.) ne sont pas utilisés à cause de problèmes de performance, de tracking, de maintenance et de limites utilisateurs.
- Bluesky convient aux commentaires de blog car il n’exige pas de maintenance d’infrastructure, prend en charge le contenu riche, utilise des comptes à identité réelle et autorise des conversations cross-platform.
- La méthode d’implémentation consiste à publier l’article du blog, à le partager sur Bluesky, à ajouter l’AT URI aux métadonnées du post, puis à charger et afficher le thread de commentaires de ce post.
- Les composants sont séparés en 3 : affichage global des commentaires, affichage des commentaires avec leurs réponses, et traitement des embeds (images, liens, etc.).
- Les réponses imbriquées sont affichées en récursif, jusqu’à une profondeur maximale de 5 niveaux ; les images utilisent une grille et un affichage modal, les liens une carte dédiée, et les embeds non pris en charge affichent un message de remplacement.
- Intégration Astro + React avec chargement côté client via
client:load ; l’activation se fait en ajoutant le DID et le postCid au frontmatter.
- Utilisation des types TypeScript de
@atcute/client pour la sûreté du typage, avec une logique de progressive enhancement où le contenu de l’article reste affiché même si le JavaScript est désactivé.
- Performance assurée en exploitant l’API Bluesky et le CDN, sans serveur ni base de données.
- Cette approche garantit l’évolutivité et l’indépendance en se connectant à la plateforme déjà utilisée par les utilisateurs, plutôt que de réimplémenter les fonctionnalités sociales site par site.
Pourquoi choisir Bluesky comme système de commentaires
- Pas de maintenance d’infrastructure nécessaire
- Prise en charge de contenus enrichis comme les images, les liens et les posts cités
- Fiabilité et responsabilité grâce aux comptes Bluesky
- Trafic croisé possible entre blog et réseaux sociaux
- Propriété du contenu séparée (article détenu par l’éditeur, commentaires détenus par leurs auteurs)
Comprendre le protocole AT
- DID : identifiant utilisateur décentralisé
- CID : identifiant du contenu
- AT URI : adresse de forme
at://did:.../app.bsky.feed.post/...
- Récupération du thread de commentaires possible via l’appel API
getPostThread, sans authentification
Structure des composants
- Composant principal des commentaires
- Composant de rendu d’un commentaire et de ses réponses imbriquées
- Composant de gestion des embeds (images, liens, etc.)
Gestion des commentaires imbriqués
- Rendu récursif, profondeur maximale limitée à 5 niveaux
- Représentation hiérarchique par indentation visuelle
Gestion du contenu enrichi
- Images : fournies par un CDN, vue grille pour plusieurs images et modal
- Liens externes : rendu de cartes avec miniature et description
- Autres embeds : affichage d’un texte de remplacement
Intégration à Astro
- Composants React + utilisation de
client:load
- Activation des commentaires via ajout du DID et du postCid de Bluesky dans le frontmatter
Retour d’expérience de développement
- Stabilité grâce au support des types TypeScript
- Grâce au progressive enhancement, l’article reste intact même en cas de panne de l’API
- Utilisation de l’infrastructure Bluesky sans charge serveur ou base de données
Conclusion
- Éviter les limites des systèmes de commentaires existants en se connectant à une plateforme déjà utilisée par les utilisateurs
- Hausse potentielle du nombre de participants avec la croissance de Bluesky
- Basé sur ATProto, la transition vers d’autres AppView ou implémentations propres est facilitée
Aucun commentaire pour le moment.