From a46c20ef9365ed9089afc95205998f08441e14ec Mon Sep 17 00:00:00 2001
From: Philipp Oppermann <dev@phil-opp.com>
Date: Sat, 12 Jun 2021 16:12:38 +0200
Subject: [PATCH] Switch comments from utterances to giscus

to use GitHub discussions instead of issues for comment threads.
---
 blog/static/css/edition-2/main.css     |  8 ++++++++
 blog/templates/edition-2/base.html     |  2 ++
 blog/templates/edition-2/extra.html    |  5 +++--
 blog/templates/edition-2/page.html     |  4 +++-
 blog/templates/news-page.html          |  3 ++-
 blog/templates/snippets.html           | 26 +++++++++++++++++++++-----
 blog/templates/status-update-page.html |  3 ++-
 7 files changed, 41 insertions(+), 10 deletions(-)
diff --git a/blog/static/css/edition-2/main.css b/blog/static/css/edition-2/main.css
index 32587de6..8fc7c411 100644
--- a/blog/static/css/edition-2/main.css
+++ b/blog/static/css/edition-2/main.css
@@ -462,3 +462,11 @@ a strong {
 .status-update-list li {
   margin-bottom: .5rem;
 }
+
+#comments {
+  visibility: hidden;
+}
+
+.comment-directly-on-github {
+  margin-top: 1rem;
+}
diff --git a/blog/templates/edition-2/base.html b/blog/templates/edition-2/base.html
index 628f1aff..f7587a9e 100644
--- a/blog/templates/edition-2/base.html
+++ b/blog/templates/edition-2/base.html
@@ -20,6 +20,8 @@
     <script async src="/js/edition-2/main.js"></script>
 
     <title>{% block title %}{% endblock title %}</title>
+
+    {% block head %}{% endblock head %}
 </head>
 
 <body>
diff --git a/blog/templates/edition-2/extra.html b/blog/templates/edition-2/extra.html
index 93c98f59..03079415 100644
--- a/blog/templates/edition-2/extra.html
+++ b/blog/templates/edition-2/extra.html
@@ -3,6 +3,7 @@
 {% import "snippets.html" as snippets %}
 
 {% block title %}{{ page.title }} | {{ config.title }}{% endblock title %}
+{% block head %}<meta property="og:title" content="{{ page.title }}" />{% endblock head %}
 
 {% block description -%}
 {{ page.summary | safe | striptags | truncate(length=150) }}
@@ -16,7 +17,7 @@
 {% block after_main %}
     <hr>
     <section>
-        <h2>Comments</h2>
-        {{ snippets::utterances() }}
+        <h2 id="comments">Comments</h2>
+        {{ snippets::giscus() }}
     </section>
 {% endblock after_main %}
diff --git a/blog/templates/edition-2/page.html b/blog/templates/edition-2/page.html
index 799110f1..536d2ec8 100644
--- a/blog/templates/edition-2/page.html
+++ b/blog/templates/edition-2/page.html
@@ -4,6 +4,8 @@
 {% import "snippets.html" as snippets %}
 
 {% block title %}{{ page.title }} | {{ config.title }}{% endblock title %}
+{% block head %}<meta property="og:title" content="{{ page.title }}" />{% endblock head %}
+
 {% block header %}
     {% if lang != "en" -%}
     <aside id="all-posts-link"><a href="{{ config.base_url | safe }}/{{ lang }}" title="All Posts">{{ trans(key="all_posts", lang=lang) }}</a></aside>
@@ -102,7 +104,7 @@
         </p>
         {% endif %}
 
-        {{ snippets::utterances() }}
+        {{ snippets::giscus() }}
     </section>
 
     <aside class="page-aside-right">
diff --git a/blog/templates/news-page.html b/blog/templates/news-page.html
index 0de7b67c..6171e59f 100644
--- a/blog/templates/news-page.html
+++ b/blog/templates/news-page.html
@@ -3,6 +3,7 @@
 {% import "snippets.html" as snippets %}
 
 {% block title %}{{ page.title }} | {{ config.title }}{% endblock title %}
+{% block head %}<meta property="og:title" content="{{ page.title }}" />{% endblock head %}
 
 {% block main %}
     <h1>{{ page.title }}</h1>
@@ -17,7 +18,7 @@
     <hr>
     <section>
         <h2 id="comments">Comments</h2>
-        {{ snippets::utterances() }}
+        {{ snippets::giscus() }}
     </section>
 
 {% endblock after_main %}
diff --git a/blog/templates/snippets.html b/blog/templates/snippets.html
index d3057a32..d1dba5ac 100644
--- a/blog/templates/snippets.html
+++ b/blog/templates/snippets.html
@@ -10,12 +10,28 @@
 </p>
 {% endmacro support %}
 
-{% macro utterances() %}
-    <script src="https://utteranc.es/client.js"
+{% macro giscus(discussion_number=0) %}
+    <div class="giscus"></div>
+
+    {% if discussion_number == 0 %}
+        {% set discussion_mapping="og:title" %}
+    {% else %}
+        {% set discussion_mapping="number" %}
+    {% endif %}
+
+    <script src="https://giscus.app/client.js"
         data-repo="phil-opp/blog_os"
-        data-issue-term="url"
-        data-label="comments"
+        data-repo-id="MDEwOlJlcG9zaXRvcnkzOTU3NTEwMQ=="
+        data-category="Post Comments"
+        data-category-id="MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMzMDE4OTg1"
+        data-mapping="og:title"
+        data-reactions-enabled="1"
+        data-theme="preferred_color_scheme"
         crossorigin="anonymous"
         async>
     </script>
-{% endmacro utterances %}
\ No newline at end of file
+
+    <p class="comment-directly-on-github">
+        Instead of authenticating the <a href="https://giscus.app">giscus</a> application, you can also comment directly on the <span class="discussion_link">on GitHub. Just click the <i>"X comments"</i> link at the <a href="#comments">top</a> — or the date of any comment — to go to the GitHub discussion.</span>
+    </p>
+{% endmacro giscus %}
diff --git a/blog/templates/status-update-page.html b/blog/templates/status-update-page.html
index 45741e7d..1ee76f69 100644
--- a/blog/templates/status-update-page.html
+++ b/blog/templates/status-update-page.html
@@ -3,6 +3,7 @@
 {% import "snippets.html" as snippets %}
 
 {% block title %}{{ page.title }} | {{ config.title }}{% endblock title %}
+{% block head %}<meta property="og:title" content="{{ page.title }}" />{% endblock head %}
 
 {% block main %}
     <h1>{{ page.title }}</h1>
@@ -32,7 +33,7 @@
     <hr>
     <section>
         <h2 id="comments">Comments</h2>
-        {{ snippets::utterances() }}
+        {{ snippets::giscus() }}
     </section>
 
 {% endblock after_main %}
