From 6a19ac31c0c6c401b50965d8efd58a272c127d7f Mon Sep 17 00:00:00 2001
From: Jinuk Im <iju707@gmail.com>
Date: Wed, 27 Sep 2023 04:47:22 +0900
Subject: [PATCH] feat: add giscus support (#92)

* feat: add giscus support #89

* Update comment.html

* Update giscus.html

* Update giscus.html

---------

Co-authored-by: Xin <xin@imfing.com>
---
 layouts/_default/list.html               |  1 +
 layouts/_default/single.html             |  1 +
 layouts/blog/single.html                 |  1 +
 layouts/docs/list.html                   |  1 +
 layouts/docs/single.html                 |  1 +
 layouts/partials/components/comment.html |  8 +++
 layouts/partials/components/giscus.html  | 62 ++++++++++++++++++++++++
 7 files changed, 75 insertions(+)
 create mode 100644 layouts/partials/components/comment.html
 create mode 100644 layouts/partials/components/giscus.html

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 9b58790e..2cd87af3 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -10,6 +10,7 @@ <h1>{{ .Title }}</h1>
         </div>
         <div class="mt-16"></div>
         {{ partial "components/last-updated.html" . }}
+        {{ partial "components/comment.html" . }}
       </main>
     </article>
   </div>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 25a5a293..11c3bc49 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -10,6 +10,7 @@ <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dar
         <div class="content">
           {{ .Content }}
         </div>
+        {{ partial "components/comment.html" . }}
       </main>
     </article>
   </div>
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index dee6cb9b..c7059f50 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -28,6 +28,7 @@ <h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate
         {{ partial "components/last-updated.html" . }}
         {{ .Scratch.Set "reversePagination" true }}
         {{ partial "components/pager.html" . }}
+        {{ partial "components/comment.html" . }}
       </main>
     </article>
   </div>
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index 8d1be7a0..d4e9bbc7 100644
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -12,6 +12,7 @@ <h1>{{ .Title }}</h1>
         <div class="mt-16"></div>
         {{ partial "components/last-updated.html" . }}
         {{ partial "components/pager.html" . }}
+        {{ partial "components/comment.html" . }}
       </main>
     </article>
   </div>
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index da9b205b..81656b5b 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -11,6 +11,7 @@ <h1>{{ .Title }}</h1>
         </div>
         {{ partial "components/last-updated.html" . }}
         {{ partial "components/pager.html" . }}
+        {{ partial "components/comment.html" . }}
       </main>
     </article>
   </div>
diff --git a/layouts/partials/components/comment.html b/layouts/partials/components/comment.html
new file mode 100644
index 00000000..cb95e7ec
--- /dev/null
+++ b/layouts/partials/components/comment.html
@@ -0,0 +1,8 @@
+{{- $commentEnable := site.Params.comment.enable | default false -}}
+{{- $commentPageEnable := .Params.comment | default true -}}
+
+{{- if and $commentEnable $commentPageEnable -}}
+  {{- if eq site.Params.comment.type "giscus" -}}
+    {{ partial "components/giscus.html" . }}
+  {{- end -}}
+{{- end -}}
diff --git a/layouts/partials/components/giscus.html b/layouts/partials/components/giscus.html
new file mode 100644
index 00000000..1ea3dc87
--- /dev/null
+++ b/layouts/partials/components/giscus.html
@@ -0,0 +1,62 @@
+{{- with site.Params.comment.giscus -}}
+
+{{- $lang = site.Language.Lang | default `en` -}}
+<script>
+  /*
+   * "preferred color scheme" theme in giscus works using "prefers-color-scheme" in media query.
+   * but, hugo's theme switch function works by using "color-theme" in local storage.
+   * This solution was created with reference to:
+   * https://github.com/giscus/giscus/issues/336#issuecomment-1214366281
+  */
+  function getGiscusTheme() {
+    return localStorage.getItem("color-theme");
+  }
+
+  function setGiscusTheme() {
+    function sendMessage(message) {
+      const iframe = document.querySelector('iframe.giscus-frame');
+      if (!iframe) return;
+      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+    }
+    sendMessage({
+      setConfig: {
+        theme: getGiscusTheme(),
+      },
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const giscusAttributes = {
+      "src": "https://giscus.app/client.js",
+      "data-repo": "{{ .repo }}",
+      "data-repo-id": "{{ .repoId }}",
+      "data-category": "{{ .category }}",
+      "data-category-id": "{{ .categoryId }}",
+      "data-mapping": "{{ .mapping | default `pathname` }}",
+      "data-strict": "{{ (string .strict) | default 0 }}",
+      "data-reactions-enabled": "{{ (string .reactionsEnabled) |  default 1 }}",
+      "data-emit-metadata": "{{ (string .emitMetadata) | default 0 }}",
+      "data-input-position": "{{ .inputPosition | default `top` }}",
+      "data-theme": getGiscusTheme(),
+      "data-lang": "{{ .lang | default $lang }}",
+      "crossorigin": "anonymous",
+      {{ if .lazyLoading -}}
+      "data-loading": "lazy",
+      {{ end -}}
+      "async": "",
+    };
+
+    // Dynamically create script tag
+    const giscusScript = document.createElement("script");
+    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
+    document.getElementById('giscus').appendChild(giscusScript);
+
+    // Update giscus theme when theme switcher is clicked
+    const toggle = document.querySelector('.theme-toggle');
+    if (toggle) {
+      toggle.addEventListener('click', setGiscusTheme);
+    }
+  });
+</script>
+<div id="giscus"></div>
+{{- end -}}