Des commentaires avec l’API GitHub

Salut, il y a quelques temps je vous parlais de la migration du blog sous Gatsby et parmi les inconvénients je listais les systèmes de commentaires. Aujourd’hui j’ai trouvé un outil qui a l’air pas mal et qui est basé sur l’API GitHub.

La bonne idée

Les interactions sur GitHub sont vraiment cool je trouve, le système de commentaires est plaisant et fluide. Le génie est parfois aussi dans la bonne combinaison des ressources et il me semble qu’ici ça fonctionne.

L’idée de @jdanyow a donc consisté à utiliser le système d’issues de GitHub pour mettre en place un système de commentaires ultra-portable et compatible avec énormément de configurations de projets en utilisant l’API de GitHub.

Ce qui m’a plu

A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!
Open source. 🙌
No tracking, no ads, always free. 📡🚫
No lock-in. All data stored in GitHub issues. 🔓
Styled with Primer, the css toolkit that powers GitHub. 💅
Dark theme. 🌘
Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲

Fifou non ?

Comment mettre en place

Aller sur la page dédiée : https://utteranc.es/

c’est vraiment bien expliqué, mais si vous ne lisez pas en anglais, grosso modo il faut créer un dépôt public et donner l’autorisation à l’application Utteranc d’écrire dedans notamment publier des issues.

Exemple en React

Pour le javaScript classique c’est assez direct, reprenez l’exemple de la doc, si vous êtes en React comme moi ici, faites simplement ça dans votre template :

import React, {Component} from "react";

export default class Comments extends Component {

  componentDidMount () {
      let script = document.createElement("script");
      let anchor = document.getElementById("inject-comments-for-uterances");
      script.setAttribute("src", "https://utteranc.es/client.js");
      script.setAttribute("crossorigin","anonymous");
      script.setAttribute("async", true);
      script.setAttribute("repo", "[ENTER REPO HERE]");
      script.setAttribute("issue-term", "pathname");
      script.setAttribute( "theme", "github-light");
      anchor.appendChild(script);
  }

  render() {
    return (
        <div id="inject-comments-for-uterances"></div>
    );
  }
}

Source

Pour ce blog “[ENTER REPO HERE]” est remplacé par “jmau111/julien-maury.com”

Et côté utilisateur ?

Il faudra autoriser aussi l’appli :

Mais il est possible de contourner cela comme je l’explique plus bas, en allant commenter directement sur l’URL des issues dépôt.

Warnings

Mêmes risques que d’habitude, open source, est-ce que ça va être maintenu, etc.

Conclusion

Facile à implémenter, ultra-compatible, l’essayer c’est l’adopter.

Plus sérieusement c’est une alternative crédible et efficace à Disqus…