Add support for giscus comments (#1028)

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

_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
 

_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 @@
 
       <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 @@ layout: default
     {{ 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-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:

_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);
@@ -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(() => {