- Exemple d’implémentation permettant d’afficher des commentaires même sur un site statique via l’API Bluesky
- Comme Bluesky gère l’authentification des comptes, la gestion du spam, le stockage et la modération, il n’est pas nécessaire de maintenir un serveur séparé
- L’implémentation représente environ 200 lignes de code TypeScript et utilise
@bluesky/api ainsi que Tanstack react-query
- Les commentaires sont affichés en lecture seule, avec chargement automatique en reliant l’ID d’un post Bluesky aux métadonnées de chaque article du blog
- Une implémentation expérimentale qui montre la possibilité de combiner une plateforme sociale ouverte et un blog statique
Contexte de l’implémentation d’une section de commentaires Bluesky
- Le point de départ est la difficulté d’héberger soi-même une fonctionnalité de commentaires sur un site généré statiquement
- Un contenu statique déployé sur un CDN ne permet pas de stocker des données dynamiques
- Exploiter un VPS ou un service cloud séparé entraîne des coûts et une charge de gestion importants
- Bluesky, en tant que plateforme ouverte fondée sur une API publique et le protocole AT, fournit déjà les fonctions nécessaires à la gestion des commentaires
- Bluesky prend en charge l’authentification des comptes, le filtrage du spam, le stockage et la modération
- Côté blog, il suffit d’appeler l’API pour afficher les commentaires
Autres alternatives et raisons du choix de Bluesky
- Des alternatives comme Twitter, Disqus ou giscus (basé sur GitHub Discussions) ont aussi été envisagées
- Bluesky est construit sur le protocole AT décentralisé, ce qui réduit le risque d’un contrôle par une entreprise spécifique
- Par rapport aux solutions basées sur GitHub, il convient mieux à l’hébergement de commentaires en tant que plateforme centrée sur la conversation
Méthode d’implémentation
- Le package bluesky-comments publié par Cory Zue a servi de référence, mais le choix a été fait d’implémenter la solution directement
- Écriture d’un code maison pour permettre une personnalisation adaptée au style du site et une meilleure extensibilité à l’avenir
- L’implémentation complète, composants UI et fonctions API compris, représente environ 200 lignes
- Au départ, la possibilité d’une publication directe via OAuth a aussi été envisagée, mais elle a été écartée en raison de la complexité de l’UI et des contraintes de temps
- Au final, seule une fonction d’affichage des commentaires en lecture seule a été implémentée
Stack technique
- Le site est construit avec React Server Components et Parcel
- Le contenu est rédigé en MDX, ce qui permet d’inclure directement du JavaScript/JSX
- L’objet
metadata de chaque article inclut bskyPostId afin de l’associer à un post Bluesky
- Le SDK TypeScript de Bluesky (
@bluesky/api) est utilisé pour récupérer les données du fil de commentaires depuis le point de terminaison getPostThread
- Les requêtes API sont gérées avec Tanstack react-query
- Gestion automatique des états d’erreur, de chargement et de nouvelle tentative
Conception de l’UI
- Seul le contenu texte de la réponse Bluesky est extrait pour être affiché dans une UI de commentaires simple
- La structure en fil est distinguée par l’indentation et une bordure à gauche
- L’image de profil et la date de publication s’inspirent du design de Bluesky
- En haut, un lien vers le post Bluesky d’origine est ajouté afin d’encourager la participation à la conversation
- Il n’existe pas de fonction de rédaction de commentaire sur le blog ; les utilisateurs laissent directement leurs réponses sur Bluesky
Possibilités futures
- Si besoin, cette implémentation pourrait être publiée sous forme de package indépendant
- Cependant, le code actuel est adapté au site personnel de son auteur
- La structure étant simple, d’autres développeurs peuvent aussi s’appuyer sur le code source pour l’implémenter facilement
- On ne sait pas encore si l’intégration des commentaires Bluesky aidera réellement à améliorer l’engagement sur le blog
Réactions des utilisateurs de Bluesky
- Plusieurs utilisateurs de Bluesky ont laissé des réactions positives dans les commentaires, comme « bonne idée », « réactivité rapide », « adapté comme alternative à Disqus »
- Certains ont aussi posé des questions sur la gestion du spam, le traitement des commentaires imbriqués et la prise en charge des pièces jointes
- L’auteur a expliqué que la fonction de modération personnelle de Bluesky permet de masquer certains commentaires
Aucun commentaire pour le moment.