Add support for giscus comments (alshedivat#1028)

adds support for comments on posts using https://giscus.app/

Author: alshedivat

_config.yml

@@ -122,7 +122,23 @@ permalink: /blog/:year/:title/
 pagination:
   enabled: true
 
-# Comments
+# Giscus comments (RECOMMENDED)
+# Follow instructions on https://giscus.app/ to setup for your repo to fill out
+# the information below.
+giscus:
+  repo: alshedivat/al-folio      # <your-github-user-name>/<your-github-repo-name>
+  repo_id: MDEwOlJlcG9zaXRvcnk2MDAyNDM2NQ==
+  category: Comments             # name of the category under which discussions will be created
+  category_id: DIC_kwDOA5PmLc4CTBt6
+  mapping: title                 # identify discussions by post title
+  strict: 1                      # use strict identification mode
+  reactions_enabled: 1           # enable (1) or disable (0) emoji reactions
+  input_position: bottom         # whether to display input form below (bottom) or above (top) the comments
+  theme: preferred_color_scheme  # name of the color scheme (preferred works well with al-folio light/dark mode)
+  emit_metadata: 0
+  lang: en
+
+# Disqus comments (DEPRECATED)
 disqus_shortname: al-folio # put your disqus shortname
 # https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
@@ -265,7 +281,7 @@ more_authors_animation_delay: 10  # more authors are revealed on click using ani
 
 
 # -----------------------------------------------------------------------------
-# Jekyll Link Attributes 
+# Jekyll Link Attributes
 # -----------------------------------------------------------------------------
 
 # These are the defaults

_includes/disqus.html

@@ -0,0 +1,13 @@
+<div id="disqus_thread" style="max-width: {{ site.max_width }}; margin: 0 auto;">
+    <script type="text/javascript">
+        var disqus_shortname  = '{{ site.disqus_shortname }}';
+        var disqus_identifier = '{{ page.id }}';
+        var disqus_title      = {{ page.title | jsonify }};
+        (function() {
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+        })();
+    </script>
+    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+</div>

_includes/giscus.html

@@ -0,0 +1,27 @@
+<div id="giscus_thread" style="max-width: {{ site.max_width }}; margin: 0 auto;">
+  <script>
+    let giscusTheme = localStorage.getItem("theme");
+    let giscusAttributes = {
+        "src": "https://giscus.app/client.js",
+        "data-repo": "{{ site.giscus.repo }}",
+        "data-repo-id": "{{ site.giscus.repo_id }}",
+        "data-category": "{{ site.giscus.category }}",
+        "data-category-id": "{{ site.giscus.category_id }}",
+        "data-mapping": "{{ site.giscus.mapping }}",
+        "data-strict": "{{ site.giscus.strict }}",
+        "data-reactions-enabled": "{{ site.giscus.reactions_enabled }}",
+        "data-emit-metadata": "{{ site.giscus.emit_metadata }}",
+        "data-input-position": "{{ site.giscus.input_position }}",
+        "data-theme": giscusTheme,
+        "data-lang": "{{ site.giscus.lang }}",
+        "crossorigin": "anonymous",
+        "async": "",
+    };
+
+
+    let giscusScript = document.createElement("script");
+    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
+    document.getElementById("giscus_thread").appendChild(giscusScript);
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="http://giscus.app/?ref_noscript">comments powered by giscus.</a></noscript>
+</div>

_layouts/distill.html

@@ -98,20 +98,13 @@ <h3>Contents</h3>
 
       <d-bibliography src="{{ page.bibliography | prepend: '/assets/bibliography/' | relative_url }}"></d-bibliography>
 
-      {%- if site.disqus_shortname and page.comments -%}
-        <div id="disqus_thread" style="max-width: 800px; margin: 0 auto"></div>
-        <script type="text/javascript">
-          var disqus_shortname  = '{{ site.disqus_shortname }}';
-          var disqus_identifier = '{{ page.id }}';
-          var disqus_title      = {{ page.title | jsonify }};
-          (function() {
-            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-          })();
-        </script>
-        <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+      {%- if site.disqus_shortname and page.disqus_comments -%}
+        {% include disqus.html %}
       {%- endif %}
+      {%- if site.giscus.repo and page.giscus_comments -%}
+        {% include giscus.html %}
+      {%- endif -%}
+
     </div>
 
     <!-- Footer -->

_layouts/post.html

@@ -43,19 +43,11 @@ <h1 class="post-title">{{ page.title }}</h1>
     {{ content }}
   </article>
 
-  {%- if site.disqus_shortname and page.comments -%}
-    <div id="disqus_thread" style="max-width: {{ site.max_width }}; margin: 0 auto"></div>
-    <script type="text/javascript">
-      var disqus_shortname  = '{{ site.disqus_shortname }}';
-      var disqus_identifier = '{{ page.id }}';
-      var disqus_title      = {{ page.title | jsonify }};
-      (function() {
-        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-      })();
-    </script>
-    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+  {%- if site.disqus_shortname and page.disqus_comments -%}
+    {% include disqus.html %}
   {%- endif %}
+  {%- if site.giscus.repo and page.giscus_comments -%}
+    {% include giscus.html %}
+  {%- endif -%}
 
 </div>

_posts/2015-10-20-comments.md renamed to _posts/2015-10-20-disqus-comments.md

@@ -1,9 +1,9 @@
 ---
 layout: post
-title: a post with comments
+title: a post with disqus comments
 date: 2015-10-20 11:59:00-0400
-description: an example of a blog post with comments
-comments: true
+description: an example of a blog post with disqus comments
 categories: sample-posts external-services
+disqus_comments: true
 ---
 This post shows how to add DISQUS comments.

_posts/2018-12-22-distill.md

@@ -2,6 +2,7 @@
 layout: distill
 title: a distill-style blog post
 description: an example of a distill-style blog post and main elements
+giscus_comments: true
 date: 2021-05-22
 
 authors:
@@ -180,7 +181,7 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 1. First ordered list item
 2. Another item
-⋅⋅* Unordered sub-list. 
+⋅⋅* Unordered sub-list.
 1. Actual numbers don't matter, just that it's a number
 ⋅⋅1. Ordered sub-list
 4. And another item.
@@ -207,8 +208,8 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 Or leave it empty and use the [link text itself].
 
-URLs and URLs in angle brackets will automatically get turned into links. 
-http://www.example.com or <http://www.example.com> and sometimes 
+URLs and URLs in angle brackets will automatically get turned into links.
+http://www.example.com or <http://www.example.com> and sometimes
 example.com (but not on Github, for example).
 
 Some text to show that the reference links can follow later.
@@ -219,10 +220,10 @@ Some text to show that the reference links can follow later.
 
 Here's our logo (hover to see the title text):
 
-Inline-style: 
+Inline-style:
 ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
 
-Reference-style: 
+Reference-style:
 ![alt text][logo]
 
 [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
@@ -233,14 +234,14 @@ Inline `code` has `back-ticks around` it.
 var s = "JavaScript syntax highlighting";
 alert(s);
 ```
- 
+
 ```python
 s = "Python syntax highlighting"
 print s
 ```
- 
+
 ```
-No language indicated, so no syntax highlighting. 
+No language indicated, so no syntax highlighting.
 But let's throw in a <b>tag</b>.
 ```
 
@@ -253,7 +254,7 @@ Colons can be used to align columns.
 | zebra stripes | are neat      |    $1 |
 
 There must be at least 3 dashes separating each header cell.
-The outer pipes (|) are optional, and you don't need to make the 
+The outer pipes (|) are optional, and you don't need to make the
 raw Markdown line up prettily. You can also use inline Markdown.
 
 Markdown | Less | Pretty
@@ -266,7 +267,7 @@ Markdown | Less | Pretty
 
 Quote break.
 
-> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
 
 
 Here's a line for us to start with.

_posts/2022-02-01-redirect.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: a post with redirect
-date: 2021-07-04 17:39:00
+date: 2022-02-01 17:39:00
 description: you can also redirect to assets like pdf
 redirect: /assets/pdf/example_pdf.pdf
 ---

_posts/2022-12-10-giscus-comments.md

@@ -0,0 +1,9 @@
+---
+layout: post
+title: a post with giscus comments
+date: 2022-12-10 11:59:00-0400
+description: an example of a blog post with giscus comments
+categories: sample-posts external-services
+giscus_comments: true
+---
+This post shows how to add GISCUS comments.

assets/js/theme.js

@@ -12,6 +12,7 @@ let toggleTheme = (theme) => {
 let setTheme = (theme) =>  {
   transTheme();
   setHighlight(theme);
+  setGiscusTheme(theme);
 
   if (theme) {
     document.documentElement.setAttribute("data-theme", theme);
@@ -20,7 +21,7 @@ let setTheme = (theme) =>  {
     document.documentElement.removeAttribute("data-theme");
   }
   localStorage.setItem("theme", theme);
-  
+
   // Updates the background of medium-zoom overlay.
   if (typeof medium_zoom !== 'undefined') {
     medium_zoom.update({
@@ -30,6 +31,7 @@ let setTheme = (theme) =>  {
   }
 };
 
+
 let setHighlight = (theme) => {
   if (theme == "dark") {
     document.getElementById("highlight_theme_light").media = "none";
@@ -41,6 +43,23 @@ let setHighlight = (theme) => {
 }
 
 
+let setGiscusTheme = (theme) => {
+
+  function sendMessage(message) {
+    const iframe = document.querySelector('iframe.giscus-frame');
+    if (!iframe) return;
+    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+  }
+
+  sendMessage({
+    setConfig: {
+      theme: theme
+    }
+  });
+
+}
+
+
 let transTheme = () => {
   document.documentElement.classList.add("transition");
   window.setTimeout(() => {
@@ -56,7 +75,7 @@ let initTheme = (theme) => {
         theme = 'dark';
     }
   }
-  
+
   setTheme(theme);
 }