feat: add giscus support (#92)

* feat: add giscus support #89

* Update comment.html

* Update giscus.html

* Update giscus.html

---------

Co-authored-by: Xin <[email protected]>

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>

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>

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>

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>

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>

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 -}}

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 -}}