Add support for giscus comments (#83)

rohandebsarkar · May 17, 2023 · 336533b · 336533b
2 parents 055e026 + a4d12ef
commit 336533b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/exampleSite/config/_default/params.yaml b/exampleSite/config/_default/params.yaml
@@ -28,3 +28,21 @@ socialNavbar: true # show social icons on navbar
 socialHomePage: true # show social icons on the home page
 
 colorTheme: blue # choose a theme from `data/themes` folder
+
+giscusScript: >
+  <script src="https://giscus.app/client.js"
+      data-repo="rohandebsarkar/academic-folio"
+      data-repo-id="R_kgDOI0baIw"
+      data-category="Comments (giscus)"
+      data-category-id="DIC_kwDOI0baI84CWhyL"
+      data-mapping="og:title"
+      data-strict="0"
+      data-reactions-enabled="1"
+      data-emit-metadata="0"
+      data-input-position="top"
+      data-theme="preferred_color_scheme"
+      data-lang="en"
+      data-loading="lazy"
+      crossorigin="anonymous"
+      async
+  ></script>
diff --git a/layouts/partials/scripts/giscus.html b/layouts/partials/scripts/giscus.html
@@ -0,0 +1,19 @@
+{{ safeHTML .Site.Params.giscusScript }}
+
+<script>
+    function 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
+            }
+        });
+    }
+</script>
+
+<noscript>Please enable JavaScript to view the <a href="http://giscus.app/?ref_noscript">comments powered by giscus.</a></noscript>
diff --git a/layouts/partials/scripts/theme.html b/layouts/partials/scripts/theme.html
@@ -1,7 +1,8 @@
 <script>
     function toggleTheme() {
         document.documentElement.classList.toggle('dark');
-        localStorage.theme = localStorage.theme === 'dark' ? 'light' : 'dark'
+        localStorage.theme = localStorage.theme === 'dark' ? 'light' : 'dark';
+        if(typeof setGiscusTheme == "function") setGiscusTheme(localStorage.theme);
     };
 
     if ((!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) || localStorage.theme === 'dark') {

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -48,4 +48,10 @@ <h3 class="text-sm italic text-secondary">
     <article class="markdown">
         {{ .Content }}
     </article>
+
+    {{ if (and .Site.Params.giscusScript (not .Params.disableGiscusComments)) }}
+        <div id="comments">
+            {{ partial "scripts/giscus" . }}
+        </div>
+    {{ end }}
 {{ end }}