Pelican, disqus, and privacy

4 files changed, 171 insertions, 0 deletions

diff --git a/content/Informatique/2015-08-09-disqus.rst b/content/Informatique/2015-08-09-disqus.rst
new file mode 100644
index 0000000..ab898dd
--- /dev/null
+++ b/content/Informatique/2015-08-09-disqus.rst
@@ -0,0 +1,171 @@
+.. -*- mode: rst -*-
+.. -*-  coding: utf-8 -*-
+
+==============================
+Pelican, disqus, et vie privée
+==============================
+
+:date: 2015-08-09
+:tags: Libre, blog, ViePrivée
+:slug: pelican-disqus-vie-privee
+:logo: /images/disqus/privacy.jpg
+:summary:   Comment configurer pelican pour utiliser les commentaires disqus,
+            sans que le service ne vienne systématiquement pister les
+            visiteurs…
+
+.. figure:: {filename}/images/disqus/privacy_240.jpg
+    :figwidth: 240
+    :figclass: floatright
+    :alt: Privacy !
+
+    Image : `Frankielon`_ (creativecommons_)
+
+.. _Frankielon: https://www.flickr.com/photos/armydre2008/3865993401/
+.. _creativecommons: https://creativecommons.org/licenses/by/2.0/
+
+Le moteur de blog statique propose nativement un plugin pour gérer les
+commentaires avec disqus. Il permet de donner un peu de dynamisme au blog, qui
+est entièrement statique… Sauf qu'il s'agit d'un service non libre, qui
+enregistre les données des utilisateurs…
+
+Le plugin disqus_static_ permet d'intégrer à la page html les commentaires
+trouvés sur le service disqus. Cela permet de les inclure nativement dans
+l'article, et évite au lecteur du blog d'informer disqus de sa navigation sur
+le site. Voici la manière dont je l'utilise sur le blog.
+
+.. _disqus_static: https://github.com/getpelican/pelican-plugins/tree/master/disqus_static
+
+.. admonition:: Attention !
+
+    Cette configuration est *moins pire* que celle proposée par défaut par le
+    blog, mais elle continue d'enregistrer l'ensemble des commentaires auprès
+    d'une entreprise privée. Mieux vaut, si vous en avez la possibilité,
+    basculer sur une solution hébergée comme isso_.
+
+.. _isso: http://posativ.org/isso/
+
+Création du compte
+==================
+
+En suivant la documentation du plugin, on enregistre notre application sur le
+site de l'`api de disqus`_ :
+
+.. _api de disqus: https://disqus.com/api/applications/
+
+.. image:: {filename}/images/disqus/disqus_api.png
+    :alt: Configuration du compte
+
+Le compte n'a besoin d'accéder aux commentaires qu'en mode lecture, penser
+aussi à renseigner le nom de domaine utilisé par le blog dans les paramètres du
+compte.
+
+Configuration du plugin
+=======================
+
+Le compte et la clef seront renseignés dans un fichier à part, que nous allons
+nommer `disqus.py`. Normalement, il devrait juste contenir ces lignes :
+
+.. code-block:: python
+
+    #!/usr/bin/env python
+    # -*- coding: utf-8 -*-
+
+    # Configuration des commentaires
+    DISQUS_SITENAME='Votre compte disqus'
+    DISQUS_SECRET_KEY = u'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+    DISQUS_PUBLIC_KEY = u'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+
+
+Pour éviter de diffuser ce fichier sur un serveur git public, ne pas oublier de
+l'ajouter au fichier .gitignore ! Ainsi, nous serons sûr que notre clef privée
+ne sera jamais transmise sur internet…
+
+Dans le fichier `publish.conf`, nous allons ajouter le chargement du plugin :
+
+.. code-block:: python
+
+    import sys
+    import os.path
+    try:
+        sys.path.append(os.path.dirname(os.path.abspath(__file__)))
+        from disqus import *
+        PLUGINS.append("disqus_static")
+    except:
+        pass
+
+Cela permet de génerer le blog, même si la configuration pour les commentaires
+n'est pas présente.
+
+Utiliser le fichier `publish.conf` permet de générer le blog sans faire appel à
+l'API pour éditer le blog, par contre, ceux-ci seront intégrés dès que l'on
+lancera la commande `make publish` pour publier le blog.
+
+Changement du template
+======================
+
+Maintenant que tout est prêt, il ne reste plus qu'à modifier son template pour
+éviter de charger disqus automatiquement. C'est dommage d'intégrer les
+commentaires dans la page, si ceux chargés par disqus sont affichés
+automatiquement…
+
+Sur mon blog, il faut cliquer sur le bouton pour recharger les commentaires (ou
+pour en ajouter de nouveaux). C'est juste un peu de javascript, et vous pouvez
+vous inspirer de ce bout de code :
+
+.. code-block:: html
+
+    {% if DISQUS_SITENAME %}
+
+    <div class="comments">
+    <h2>Commentaires&nbsp;:</h2>
+        <div id="disqus_thread">
+        {% if article.disqus_comments %}
+        <ul class="post-list">
+            {% for comment in article.disqus_comments recursive %}
+            <li class="post">
+                <div class="post-content">
+                    <div class="avatar hovercard">
+                        <img alt="Avatar" src="{{ comment.author.avatar.small.cache }}">
+                    </div>
+                    <div class="post-body">
+                        <header>
+                            <span class="publisher-anchor-color">{{ comment.author.name }}</span>
+                            <span class="time-ago" title="{{ comment.createdAt }}">{{ comment.createdAt }}</span>
+                        </header>
+                        <div class="post-message-container">
+                            <div class="post-message publisher-anchor-color ">
+                                {{ comment.message }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% if comment.children %}
+                <ul class="children">
+                    {{ loop(comment.children) }}
+                </ul>
+                {% endif %}
+            </li>
+            {% endfor %}
+        </ul>
+        {% else %}
+          Aucun commentaire pour l'instant.
+        {% endif %}
+        </div>
+    </div>
+    <div id="disqus_comments">
+        <button onclick="load_disqus()">recharger</button>
+    </div>
+    <script type="text/javascript">
+        var disqus_identifier = "{{ article.url }}";
+        function load_disqus() {
+            var dsq = document.createElement('script');
+            dsq.type = 'text/javascript';
+            dsq.async = true;
+            dsq.src = '//{{ DISQUS_SITENAME }}.disqus.com/embed.js';
+            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+            var load_button = document.getElementById('disqus_comments');
+            load_button.parentNode.removeChild(load_button);
+      };
+    </script>
+    {% endif %}
+
diff --git a/content/images/disqus/disqus_api.png b/content/images/disqus/disqus_api.png
new file mode 100644
index 0000000..4939679
--- /dev/null
+++ b/content/images/disqus/disqus_api.png
diff --git a/content/images/disqus/privacy.jpg b/content/images/disqus/privacy.jpg
new file mode 100644
index 0000000..dcc1702
--- /dev/null
+++ b/content/images/disqus/privacy.jpg
diff --git a/content/images/disqus/privacy_240.jpg b/content/images/disqus/privacy_240.jpg
new file mode 100644
index 0000000..0764df0
--- /dev/null
+++ b/content/images/disqus/privacy_240.jpg