J’ai ajouté une section de commentaires Bluesky à mon blog

• 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

[GN⁺]

Avis de Hacker News

• Si vous rendez votre blog ou votre site web avec un générateur de site statique (static site generator), quelqu’un propose de récupérer les commentaires comme fichiers de contenu et de les inclure dans le processus de build

  1. recueillir les commentaires via e-mail, script CGI, programme serveur, etc.
  2. les relire manuellement pour supprimer le spam
  3. enregistrer les commentaires dans des fichiers .md ou .html
  4. puis les rendre avec le reste du site au moment du build
     Ce processus demande beaucoup de travail, mais il a l’avantage du blocage du spam et de la pleine propriété des données
  • J’ai moi aussi mis en place un système similaire basé sur l’e-mail. Plus de détails dans mon billet de blog
  • Pour un petit site web, il n’y a souvent que quelques commentaires par jour à gérer, donc une relecture manuelle reste tout à fait faisable. On peut aussi facilement automatiser avec une mise à jour automatique des fichiers Markdown
  • « Moi, je n’accepte les commentaires que par fax ;) », plaisante quelqu’un
  • Un autre réagit en disant que « ça a l’air affreux », jugeant la méthode inefficace

• Si vous ne voulez pas utiliser React, vous pouvez jeter un œil au composant web de commentaires Bluesky que j’ai créé
  Disponible via le dépôt GitHub et le playground de thèmes.
  La personnalisation du thème est très simple

• En s’inspirant de l’idée du billet original, quelqu’un a réalisé un système de commentaires basé sur Mastodon
  Plus de détails dans son billet de blog

  • En réalité, ce type d’intégration de commentaires Fediverse est testé depuis longtemps avec Mastodon ou Bluesky
    Voir aussi : billet de blog connexe

• Avec les lois de l’UE sur les discours de haine, certains disent qu’un administrateur de site peut être sanctionné s’il ne filtre pas les commentaires, et quelqu’un se demande ce qu’il en est réellement
  C’est pour cela qu’il a tout simplement désactivé les commentaires

  • Je ne suis pas juriste, mais ce genre de risque est souvent exagéré pour des motifs politiques. Le droit de l’UE tient compte de la taille et de la finalité du site. Je n’ai jamais entendu parler d’un petit site personnel sanctionné
  • On peut utiliser le moderation labeler de Bluesky pour faire un filtrage en amont. Il n’existe rien de prêt pour les critères de l’UE, mais on pourrait créer son propre labeler afin de ne filtrer que les commentaires problématiques
  • Au-delà de la loi, je ne veux tout simplement pas voir de discours de haine apparaître sur un site qui porte mon nom

• Mon blog est entièrement statique, et un script Cloudflare Worker de 50 lignes reçoit les commentaires et les ajoute directement au Markdown.
  Il est donc possible de faire cela sans embarquer de fonctionnalité de commentaires

  • Il serait amusant d’utiliser des Pull Requests commitées automatiquement pour les commentaires, en se servant des PR comme outil de revue
  • « Ce serait encore mieux si c’était vraiment du ColdFusion », plaisante quelqu’un
  • Quelqu’un demande aussi : « Est-ce que tu pourrais partager le lien ou les détails d’implémentation ? »

• En exploitant l’API Bluesky, on pourrait aussi automatiser la recherche du premier post contenant un lien vers un billet de blog donné, puis le relier aux commentaires

• Quelqu’un a créé un compte de test parce qu’il pense que cela pourrait aussi aider à la croissance de Bluesky. Ça ressemble à une idée de growth hacking assez amusante

  • Mais selon lui, un réseau social à but lucratif finira toujours par devenir comme Twitter.
    Dans l’idéal, un système de commentaires auto-hébergé ou basé sur le Fediverse serait plus durable
  • Un autre estime aussi qu’il est difficile de réussir simplement avec le message : « Nous ne sommes pas cette autre plateforme »

• Mon blog n’est pas très populaire, mais j’ai déjà connu par le passé un enfer de spam et de commentaires haineux
  Donc je n’ai aucune intention de rouvrir les commentaires sur un blog personnel

• Même avec un système basé sur Bluesky, on peut ajouter soi-même un labeler pour filtrer les commentaires portant certains labels, ce qui permet une modération interne

• Sur une idée similaire, quelqu’un a aussi ajouté sur cartes.app, en plus de son blog, une fonction de commentaires par lieu OSM
  Les avis peuvent être laissés avec un compte ATproto, et les données sont stockées sur le PDS sous forme de JSON appartenant à l’utilisateur

  • Un commentaire demande : « Vraiment très cool. Comment récupères-tu ces données ? Est-ce que tu écoutes le firehose Bluesky ? »