đŸ Archived View for bwog-notes.chagratt.site âș 2023 âș des-commentaires-via-le-f%C3%A9diverse âș index⊠captured on 2024-08-24 at 23:53:18. Gemini links have been rewritten to link to archived content
âŹ ïž Previous capture (2024-08-18)
-=-=-=-=-=-=-
RĂ©digĂ© le 5 juillet 2023 - modifiĂ© le 6 juillet 2023. Ătiquettes : hugo blog
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
.
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 ?
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.
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 }}
<aside class="card" id="commentaires-fediverse">
<h3>Commentaires</h3>
<p id="fedi-comments-list"><button id="load-comment">Charger les commentaires</button></p>
<noscript><p>JavaScript est nécessaire pour afficher les commentaires.</p></noscript>
<p>Vous pouvez utiliser votre compte sur le Fédiverse pour commenter cet article en répondant <a class="link" href="https://{{ $.Params.comments.host }}/notice/{{ $.Params.comments.id }}">à ce pouet</a>.</p>
<p>Vous pouvez Ă©galement copier et coller l'URL ci-dessous dans le champ de recherche de votre application Fediverse
ou dans l'interface web de votre instance.</p>
<p>
<label for="fediverseURL">Lien du pouet</label>:
<input class="textbox" id="fediverseURL" type="text" readonly="" size="40" value="https://{{ $.Params.comments.host }}/notice/{{ $.Params.comments.id }}">
<button class="button" id="fediverseCopyButton">Copier</button>
</p>
<p>
Pour plus de détails à ce sujet, vous pouvez <a href="{{ ref $ "003-commentaires-via-fedi.md" }}">lire cet article</a>.
</p>
<script src="/js/purify.min.js"></script>
<script type="text/javascript">
const dateOptions = {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
};
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
document.getElementById('fediverseCopyButton').addEventListener('click', () => {
navigator.clipboard.writeText('https://{{ $.Params.comments.host }}/notice/{{ $.Params.comments.id }}');
});
document.getElementById("load-comment").addEventListener("click", function() {
document.getElementById("load-comment").innerHTML = "Chargement...";
fetch('https:///{{ $.Params.comments.host }}/api/v1/statuses/{{ $.Params.comments.id }}/context')
.then(function(response) {
return response.json();
})
.then(function(data) {
if(data['descendants'] &&
Array.isArray(data['descendants']) &&
data['descendants'].length > 0) {
document.getElementById('fedi-comments-list').innerHTML = "";
data['descendants'].forEach(function(reply) {
reply.account.display_name = escapeHtml(reply.account.display_name);
reply.account.reply_class = reply.in_reply_to_id == "{{ $.Params.comments.id }}" ? "reply-original" : "reply-child";
reply.created_date = new Date(reply.created_at);
// remplacer Ă©mojis customs par image dans les pseudos
reply.account.emojis.forEach(emoji => {
reply.account.display_name = reply.account.display_name.replace(:${emoji.shortcode}:,
<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />);
});
// la mĂȘme, mais dans les corps des pouets
reply.emojis.forEach(emoji => {
reply.content = reply.content.replace(:${emoji.shortcode}:,
<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />);
});
fediComment =
```
<div class="fedi-wrapper">
<div class="comment-level ${reply.account.reply_class}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" stroke="currentColor" d="m 307,477.17986 c -11.5,-5.1 -19,-16.6 -19,-29.2 v -64 H 176 C 78.8,383.97986 -4.6936293e-8,305.17986 -4.6936293e-8,207.97986 -4.6936293e-8,94.679854 81.5,44.079854 100.2,33.879854 c 2.5,-1.4 5.3,-1.9 8.1,-1.9 10.9,0 19.7,8.9 19.7,19.7 0,7.5 -4.3,14.4 -9.8,19.5 -9.4,8.8 -22.2,26.4 -22.2,56.700006 0,53 43,96 96,96 h 96 v -64 c 0,-12.6 7.4,-24.1 19,-29.2 11.6,-5.1 25,-3 34.4,5.4 l 160,144 c 6.7,6.2 10.6,14.8 10.6,23.9 0,9.1 -3.9,17.7 -10.6,23.8 l -160,144 c -9.4,8.5 -22.9,10.6 -34.4,5.4 z" />
</svg></div>
<div class="fedi-comment">
<div class="comment">
<div class="comment-avatar"><img src="${escapeHtml(reply.account.avatar_static)}" alt=""></div>
<div class="comment-author">
<div class="comment-author-name"><a href="${reply.account.url}" rel="nofollow">${reply.account.display_name}</a></div>
<div class="comment-author-reply"><a href="${reply.account.url}" rel="nofollow">${escapeHtml(reply.account.acct)}</a></div>
</div>
<div class="comment-author-date"><a href="${reply.url}" rel="nofollow" title="Voir le pouet d'origine">${reply.created_date.toLocaleString(navigator.language, dateOptions)}</a></div>
</div>
<div class="comment-content">${reply.content}</div>
</div>
</div>
document.getElementById('fedi-comments-list').appendChild(DOMPurify.sanitize(fediComment, {'RETURN_DOM_FRAGMENT': true}));
});
} else {
document.getElementById('fedi-comments-list').innerHTML = "<p>Aucun commentaire trouvé.</p>";
}
});
});
</script>
</aside>
{{ 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;
}
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
}
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. ## RĂ©flexions finales _Section ajoutĂ©e le 06/07/2023_ ### La modĂ©ration AprĂšs quelques Ă©changes avec => https://mastouille.fr/@koala3k koala3k , est venue tardivement la question de la modĂ©ration des commentaires. Sujet Ă©pineux s'il en est, et pourtant je l'avais complĂštement mise de cĂŽtĂ©. Je dois dire qu'Ă©tant admin de ma propre instance, je ne _devrais_ pas avoir trop de difficultĂ©s. Mais ce point est important Ă prendre en compte si ça n'est pas votre cas. Il peut y avoir de nombreuses raisons, allant d'une instance qui s'en fiche Ă une Ă©quipe de modĂ©ration dĂ©bordĂ©e. Dans tous les cas, la solution que j'ai mise en place aujourd'hui, et qui sera la vĂŽte si vous prenez ma dĂ©marche telle quelle, ne permet pas de modĂ©ration en amont. Elle ne sera qu'Ă postĂ©riori, si elle arrive (cf. phrases prĂ©cĂ©dentes). Cependant, koala3k a eu une idĂ©e que je tenterai un jour : regarder dans le JSON si la rĂ©ponse a Ă©tĂ© mise en favori par l'auteur du pouet d'origine. Ăa semble potentiellement possible. Gardons toutefois Ă l'esprit que ça rajouterait une couche de complexitĂ© non nĂ©gligeable au code qui se veut simple et que ce n'est pas une solution parfaite (tout comme celle d'origine, restons intellectuellement honnĂȘtes). ### Les commentaires sont Ă©phĂ©mĂšres Enfin, il y a aussi le souci de la disparition dans le futur de certains pouets formant le fil. Je pense d'abord aux miens, mais Ă©galement Ă ceux formant les rĂ©ponses. Il y a de nombreuses personnes et instances (dont moi) qui ont activĂ© une purge automatique de leurs pouets. Un jour, les conversations en commentaire seront donc Ă trous. C'est une certitude. Cependant, il faut se dire que quoi qu'il arrive, Ă la base, lorsque l'on Ă©change sur le fĂ©diverse, il faut s'attendre Ă perdre la moindre information que l'on a pas rappatriĂ©e sur un support plus fiable. Ăa fait partie du jeu. Personnellement, je l'accepte sans soucis. C'est pour cela que j'ai mis cet article Ă jour Ă©galement, pour fiabiliser et faciliter l'accĂšs aux autres Ă ces rĂ©flexions que j'ai pu avoir Ă l'aide de personnes qui sont justement venues commenter. ## Les liens => https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ L'article de Carl Schwan qui m'a dĂ©cidĂ© Ă faire ça (en anglais) => https://berglyd.net/blog/2023/03/mastodon-comments/ Un article de Veronica Berglyd Olsen sur la maniĂšre de prĂ©senter les pouets rĂ©cupĂ©rĂ©s (en anglais) => https://isso-comments.de/ Isso => https://lord.re/fast-posts/22-ouverture-des-commentaires/ Un vieux post de Lord sur la mise en place de Isso ------------------------------- => gemini://bwog-notes.chagratt.site/2023/prise-de-notes-simple-avec-vim/index.gmi â Plus rĂ©cent : Prise de notes simple avec Vim => gemini://bwog-notes.chagratt.site/2023/avoir-l%C3%A9tat-des-cartes-r%C3%A9seaux-sans-programme-externe/index.gmi â Plus ancien : Avoir l'Ă©tat des cartes rĂ©seaux sans programme externe => gemini://bwog-notes.chagratt.site/2019/logrotate-et-ses-subtilit%C3%A9s-%C3%A0-propos-des-tailles-de-fichiers/index.gmi AlĂ©atoire : Logrotate et ses subtilitĂ©s Ă propos des tailles de fichiers => / Retour Ă l'accueil Contenu sous licence CC-BY-SA