Pouvoir commenter des articles sur un blog afin d’interagir avec la personne qui rédige, c’est un concept presque aussi vieux que les blogs eux-mêmes. Les moyens pour le faire sont nombreux. Je pense que je ne vous apprends rien. Par contre, quand on parle de commentaires directement intégrés à la page d’un article, au lieu de s’échanger des mails qui seront publiés après-coup (avec autorisation), on tombe vite sur une situation compliquée lorsqu’il s’agit d’un site statique. En effet à ce moment-là les options deviennent vite limitées, et si l’on veut respecter les données des visiteurs, on en revient vite au bon vieux mail uniquement. Même s’il existe des solutions comme Isso. Ayant la flemme d’installer et d’administrer une instance Isso, et refusant de stocker le contenu ailleurs (coucou Disqus et autres), je me suis longtemps dit que j’allais laisser tomber et juste ouvrir ma boite mail de temps en temps. Puis un beau jour, je suis tombé par hasard sur un article de blog de Carl Schwan intitulé « Adding comments to your static blog with Mastodon ». Ajouter des commentaires à votre blog statique via Mastodon. Tous les mots-clefs intéressants pour moi sont là. En plus je dispose de ma propre instance sur le Fédiverse. Et si je testais ça ? Techniquement, comment ça fonctionne ? Lorsque l’on publie un pouet, ce dernier possède un identifiant unique sur l’instance. Lorsque des réponses y sont faites, ces pouets référence celui d’origine. L’API de Mastodon, et les autres implémentations (notamment Pleroma) permettent de récupérer ce pouet ainsi que toutes ses réponses. À condition que ces publications soient publiques. Il suffit donc de faire un petit appel API sur ce pouet, et de boucler sur les réponses. Le fameux point d’API est : https:///{{ host }}/api/v1/statuses/{{ id }}/context Avec cet appel, si notre pouet a des réponses, on récupère un json avec plein d’infos intéressantes. Notamment avec la clef descendants qui contient un tableau des pouets en réponse. De là, il suffit de boucler et d’extraire les champs qui nous intéressent. Mon implémentation Je me suis basé sur celle de Carl Schwan : j’ai fait un Partial dans mon thème Hugo et hop. commentaires.html {{ with .Params.comments.show }} {{ end }} Rien de bien compliqué. Dans un bloc séparé, si j’ai bien rempli l’en-tête de l’article, j’affiche le bouton pour charger les réponses à la demande ainsi qu’un petit texte explicatif. Je n’ai pas voulu faire un bouton avec une pop-up pour copier le lien du pouet et mettre les explications. Ensuite, le JS qui sse charge de récupérer le pouet et ses réponses, puis de boucler dessus pour générer le html qui sera ensuite inséré à la place du bouton. Un poil de CSS également pour la forme et … C’est terminé ! Les règles CSS à rajouter .fedi-comment { margin-bottom: 3rem; display: flex; gap: 1rem; flex-direction: column; flex-grow: 2; } #commentaires-fediverse { font-size: 0.8em; } .fedi-wrapper { display: flex; gap: 3rem; flex-direction: row; flex-direction: row; } .fedi-comment .comment { display: flex; flex-direction: row; gap: 1rem; flex-wrap: wrap; } .fedi-comment .comment-avatar img { width: 2rem; } .fedi-comment .content { flex-grow: 2; } .fedi-comment .comment-author { display: flex; flex-direction: column; } .fedi-comment .comment-author-name { font-weight: bold; } .fedi-comment .comment-author-name a { display: flex; align-items: center; } .fedi-comment .comment-author-date { margin-left: auto; } .fedi-comment-content p:first-child { margin-top: 0; } .comment-level { max-width: 1.5rem; min-width: 1.5rem; } .reply-original { display:none } #fediverseURL { background-color:var(--inner-blocks-bg-color); border: none; color:var(--inner-blocks-font-color); } Enfin presque, il manque un petit paramétrage en en-tête de l’article : [comments] show = true host = "mon.instance.pleroma" id = "id_du_pouet_principal" Tant que j’y suis, je pré-paramètre ça dans l’archétype également (à false, oui, le temps d’écrire tranquillement) : [comments] show = false host = "mon.instance.pleroma" id = "a_changer" Et maintenant ? Maintenant ? Il n’y a plus qu’à continuer de publier. Vu mon rythme, je ne pense pas voir la différence, mais je me dis que cela peut être plus sympa si jamais quelqu’un ayant déjà un compte sur une instance veut échanger avec moi, sans avoir à ouvrir son client mail. Le vrai soucis avec cette méthode, c’est que ça m’ajoute quelques opérations manuelles : Publier l’article en premier lieu (bon ça, je le faisais déjà avant). Faire un pouet (avec un lien vers l’article). Relever l’identifiant de ce pouet. Modifier l’en-tête de mon article pour y intégrer cet identifiant, afin d’activer les commentaires. Publier de nouveau l’article. Je finirais bien par réfléchir à une autre solution un jour, après tout je ne publie pas si souvent que cela. Et je suis content de proposer facilement un autre moyen d’échanger sur ce que j’écris. Qui sait, peut-être que j’aurais un jour plus de retours, ce qui me permettra de m’améliorer. C’est toujours ça. Par contre, ça va également me forcer à faire des pouets pour présenter mes nouveaux articles. Moi qui laissais le flux RSS faire son travail de l’ombre, ça me fait bizarre de me dire que je vais de moi-même pousser publiquement l’apparition d’un nouveau contenu. D’autres le font déjà très bien, certes, mais pour moi c’est quelque chose de tout nouveau. Dernier inconvénient : pour les anciens articles, il faudrait démarrer un fil sur le fédiverse, et, vous savez maintenant : récupérer les id de ces fils, et les paramétrer, pousser la mise à jour sur le blog, etc. Les liens L’article de Carl Schwan qui m’a décidé à faire ça (en anglais) Un article de Veronica Berglyd Olsen sur la manière de présenter les pouets récupérés (en anglais) Isso Un vieux post de Lord sur la mise en place de Isso