Les comment’hairs, faut que tu tiff’asses

SALUT ! Ça faisait un baiiiiil !

Tout d’abord je tiens à vous dire que vous êtes sauvé·e d’un titre d’article totalement pourrave. Parce que ça a failli être « Inblox – ou l’appeau de Roastez Ma Bite », sur lequel j’avais bloqué parce que ça me faisait rire 😬. Ceci dit pas sûr que celui-ci soit bien mieux 😂.

Si vous avez connu ce blog depuis qu’il est haut comme trois DOMs, vous aurez peut-être remarqué l’apparition d’une nouvelle section en bas des articles.
Eh oui, vous pouvez commenter maintenant ! Youhou !!!

Et le sujet de cet article, ce sera justement de vous présenter le système de commentaires que ce blog utilise. Car c’est moi qui l’ai développé, eh ouais !
Et je suis si content de comment je l’ai développé que je me suis dit que ça serait sympa d’en faire un article.

Disclaimer
Ça va devenir très 🤓 dans les paragraphes qui suivent.
N’hésitez pas à vous plaindre dans les commz, les babez ;) C’est fait pour ça, après tout !
J’essaie de présenter de façon assez accessible les technologies, mais n’hésitez pas à demander une mise à jour ou d’autres articles pour développer certains aspects.

Préambule : Roastez-moi/Rust émois/Rust et moi

Si vous vous intéressez au domaine du dev, vous avez très probablement vu passer le nom de Rust. C’est le langage de programmation qui a apporté beaucoup de choses :

• son exquis mélange de paradigmes entre le fonctionnel et l’impératif
• ses capacités de langage haut niveau tout en permettant les opérations très bas niveau
• ses règles (ownership, borrowing…) assurant une sûreté mémoire lors de l’exécution
• ses performances folles, proches des langages les plus rapides comme le C et le C++

Le langage est très apprécié : il est le langage le plus aimé/admiré sur les sondages StackOverflow depuis 2016. Tellement que l’équipe de Linux est en pleine adoption du langage pour développer le noyau, c’est dire à quel point c’est robuste !

L’écosystème a énormément bénéficié des contributions de la communauté, et se trouve à un degré de maturité suffisant pour lancer des projets avec une stack technologique se reposant sur Rust.
J’ai pour exemple Tori, qui est un framework permettant de développer des applications cross-plateformes.
On voit même arriver des moteurs de jeu vidéo utilisant Rust, comme Bevy.

Comme pour beaucoup, Rust m’a piqué. C’était lorsque j’étais encore étudiant. J’avais passé des mois à l’apprendre, un chapitre du book après l’autre.
Une erreur du compilateur après l’autre. Je l’avais même utilisé en master, comme langage support pour implémenter les exercices de mon cours sur les intelligences artificielles.

Bien sûr, lorsqu’on arrive dans le monde professionnel, le choix des technologies est bien plus pragmatique que ceux d’un étudiant en info.
Exit Rust, je suis donc parti sur des stacks plus conventionnelles pour les missions de web qu’on m’avait assignées : .net, rails, angular, react.

Mais toujours, le doux souvenir de Rust me restait. Et j’ai continué de répandre la bonne parole sur Rust dans ma boîte, auprès de mes potes et collègues pour leur expliquer à quel point ce langage changeait tout !

J’ai dû laisser Rust de côté pour je dirais 6 ans, jusqu’à ce que je lise un article qui m’a inspiré. Un article dont l’auteur expliquait l’importance des sections commentaires sur les blogs, pour lui. Comment on devrait tous les remettre en place. Et quitte à le faire, si on est dev, de le faire nous même. Moi qui ai un peu de mal à me trouver des idées de projet perso, cet article a provoqué un déclic chez moi !

Et bien sûr, je n’ai pas eu à réfléchir une seule seconde pour trouver la techno sur laquelle j’allais coder ce petit projet : CE SERAIT RUST !

Inblox, la boîte aux lettres virtuelle

Pour concevoir ce qui est devenu Inblox, j’ai commencé en listant mes besoins :

• Permettre aux visiteur·se·s de laisser des commentaires sous chacun de mes articles.
• Faire passer les commentaires par une phase de modération avant d’apparaître sur le site.
• Prévoir une façon d’intégrer les commentaires validés sur le site.

À partir de ça, j’ai construit les différentes fonctionnalités petit à petit, en faisant le choix des technos complémentaires au fur et à mesure.

L’intégration des commentaires avec HTMX

Ce dernier point – l’intégration des commentaires sous chaque article – était peut-être celui sur lequel j’étais le moins au clair, au départ. Je voulais initialement faire un export JSON des commentaires par mon service, qui aurait été utilisé par Hugo (le générateur de site statique, ou SSG qui compile ce site).
Mais la limite de cette solution, c’est que les commentaires ne seraient affichés qu’au prochain déploiement de mon site. Soit un rafraîchissement une fois par jour. Je voulais que la disponibilité des commentaires soit immédiate, et non dépendante de la génération de mon site.

Pour répondre à cette problématique, le nom du framework htmx a surgi d’un coin de ma tête. C’est un framework javascript très léger, qui permet de rendre les pages web intéractives, et ce en permettant à toute balise HTML d’envoyer des requêtes à différents serveurs, et d’intégrer leurs réponses, qui sont des documents HTML partiels, directement dans la page.
Certain·es en parlaient comme le pourfendeur des frameworks frontend comme React, Angular et Vue. Et d’une option pour revenir à une architecture où le backend est vraiment la source de vérité pour tout le contenu d’un site
Là où l’état de l’art des applis web s’était déplacé vers les frontends lourds (les fameuses SPA, Single Page Applications)

Naturellement, comme je suis toujours curieux de tester les technos, j’ai opté pour une intégration des commentaires avec htmx !

Voici ce qu’il se passe pour les commentaires : lorsque vous scrollez jusqu’à la section commentaires, votre navigateur va contacter le serveur Inblox afin de demander la liste des commentaires de la page, et prendre la réponse pour l’intégrer dans la section commentaires.

Voici un exemple de liste des commentaires que le serveur renvoie sur l’article des législatives 2024 :

<article>
    <header>Raphaël</header>
    <main>Bon article, bravo !</main>
    <footer><small>07/03/2026 à 22:00</small></footer>
</article>
<article>
    <header>Riviael</header>
    <main>@Raphaël Merci beaucoup :D</main>
    <footer><small>14/03/2026 à 10:07</small></footer>
</article>

La section commentaires porte des atributs htmx, pour lui indiquer justement d’effectuer le chargement à l’arrivée de l’utilisateur sur la section :

<h2>Commentaires</h2>
<section
    class="comments-list"
    hx-get="https://inblox.riviael.fr/comments?url=EXEMPLE"
    hx-trigger="intersect once"
>
    <p>Chargement des commentaires…</p>
</section>

• hx-trigger décrit dans quelles circonstances l’élément requête le serveur. Ici intersect signifie lorsque cet élément est partiellement visible sur l’écran de l’utilisateur·ice, et once empêche de faire plusieurs requêtes si la personne fait du yoyo avec son défilement.
• hx-get donne l’URL à aller requêter
• J’aurais pu utiliser l’attribut hx-swap si je voulais faire une opération particulière, afficher les commentaires ailleurs sur la page. Mais là je l’ai laissé dans son comportement par défaut, à savoir remplacer tout le contenu de la balise. Donc ici ça remplace la balise <p> qui n’est là que le temps de faire la requête.

Et voilà grosso modo comment les commentaires sont intégrés ! Bien sûr il faut aussi que je présente le backend, même si c’est bien plus classique !

Petit tour des fonctionnalités

Toute l’appli Inblox tourne avec la librairie de serveurs HTTP axum, elle-même se reposant sur hyper qui est bien plus bas niveau. Le stockage des commentaires se fait grâce à une petite base de données SQLite, avec laquelle j’intéragis via la librairie rusqlite. Le rendu HTML se fait grâce à la librairie maud, qui propose des macros pour ce faire, je n’ai donc aucun fichier de template HTML dans mon appli, tout se fait avec du code Rust !

1. Réception du commentaire

Vous avez décidé de laisser un commentaire sous un article, vous utilisez les saucisses vous servant de doigts pour le rédiger, et cliquez sur “Envoyer”.

Le serveur va stocker le contenu des champs que vous avez remplis, l’url de l’article, l’horodatage de commentaire, ainsi que l’info que le commentaire est à modérer. Voici un code qui convertit le contenu du formulaire en un nouveau commentaire en base, avant que celui-ci ne soit enregistré :

impl From<CreateCommentBody> for Comment {
    fn from(value: CreateCommentBody) -> Self {
        Comment {
            id: None,
            name: value.name,
            email: value.email,
            comment: value.comment,
            page_url: value.page_url,
            timestamp: Utc::now(),
            moderation_status: None,
            moderation_timestamp: None,
            published: false,
        }
    }
}

2. La batcave – modération des commentaires

La modération des commentaires est tout un rituel. J’entre dans ma batcave, dans laquelle sont projetés tous les nouveaux commentaires, que j’observe d’un air sérieux dans l’obscurité, me frottant intensément le menton…

Voici un petit aperçu de ma batcave.

C’est un site web vraiment basique, pour lequel j’ai utilisé pico css comme framework graphique. Htmx est aussi sur ce backoffice, notamment pour déplacer les commentaires une fois que je les ai modérés, et envoyer les requêtes de décision de modération au serveur lors de mes clics.

Pour l’instant j’ai vraiment fait uniquement les fonctionnalités dont j’ai eu besoin. Il y a aussi une vue des commentaires approuvés répartis par page. Htmx charge ici les commentaires uniquement quand je révèle les détails d’une page.

3. Bat signal – mais comment je suis prévenu de nouveaux commentaires à modérer ?

Je ne suis pas très assidu dans mon organisation, et étant conscient de ça, je savais que je n’irais pas forcément vérifier régulièrement sur Inblox les différents commentaires à modérer.
Surtout que mon blog n’a jamais vraiment eu d’activité, jusqu’ici. Je pense que le verdict statistique dans mon comportement, c’est que je n’irais jamais 😂.

Je me suis donc mis en place un petit système de notifications, afin que je reste réactif lorsque de nouveaux commentaires arrivent.

Comme le mot d’ordre pour Inblox c’était de rester relativement simple, je n’ai pas voulu faire d’envoi de mails ou de notifications push.

La solution choisie n’est peut-être pas très orthodoxe, mais elle me convient parfaitement : les commentaires à modérer sont représentés par un flux RSS !
Alors c’est pas vraiment un flux RSS, c’est juste le nom le plus commun qu’on donne aux formats de syndication de contenus. Il s’agit en fait d’un flux au format Atom, qui est plus actuel et askip moins ambigu.

J’ai donc mis ça en place côté Inblox, c’est l’appli de lecture de flux Feeder, sur mon téléphone, qui va requêter le flux toutes les 15 minutes. Et je l’ai paramétré pour me prévenir des nouveaux items par une notification :)

Et pour la suite ?

Je pense avoir atteint le niveau de fonctionnalités idéal pour le moment. Si mes besoins évoluent, je développerai davantage Inblox. Ou si d’autres aimeraient utiliser la solution pour leur blog aussi, je considèrerai de le mettre open source. Mais je pense le laisser tel quel tant que son utilisation me convient.

Si jamais vous voulez plus de détails sur certains aspects ou que je présente une technologie plus en détails, n’hésitez pas à demander. Ce serait avec plaisir ❤️.

Bisous ! 💋

Historique des modifications