Add support for giscus comments (alshedivat#1028)

adds support for comments on posts using https://giscus.app/
folguinch · Feb 12, 2023 · 10fd2e2 · 10fd2e2
1 parent 37703a2
commit 10fd2e2
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 30 deletions.
diff --git a/_config.yml b/_config.yml
@@ -119,6 +119,9 @@ permalink: /blog/:year/:title/
 pagination:
   enabled: true
 
+# Giscus comments (RECOMMENDED)
+# Follow instructions on https://giscus.app/ to setup for your repo to fill out
+# the information below.
 giscus:
   repo: folguinch/website      # <your-github-user-name>/<your-github-repo-name>
   repo_id: R_kgDOGvNyGw
@@ -132,7 +135,7 @@ giscus:
   emit_metadata: 0
   lang: en
 
-# Comments
+# Disqus comments (DEPRECATED)
 disqus_shortname: al-folio # put your disqus shortname
 # https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
@@ -275,7 +278,7 @@ more_authors_animation_delay: 10  # more authors are revealed on click using ani
 
 
 # -----------------------------------------------------------------------------
-# Jekyll Link Attributes 
+# Jekyll Link Attributes
 # -----------------------------------------------------------------------------
 
 # These are the defaults

diff --git a/_includes/disqus.html b/_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>
diff --git a/_includes/giscus.html b/_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>
diff --git a/_layouts/distill.html b/_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 -->

diff --git a/_layouts/post.html b/_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>
diff --git a/_posts/2022-12-10-giscus-comments.md b/_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.
diff --git a/assets/js/theme.js b/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);
 }