feat: add support for giscus (#397)

* add giscus support * polish: merge with #428 by hand --------- Co-authored-by: kands-code <[email protected]> Co-authored-by: reuixiy <[email protected]>
reuixiy · Jan 20, 2024 · 156a915 · 156a915
1 parent 3a40cc0
commit 156a915
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 2 deletions.
diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js
@@ -9,11 +9,11 @@ if (userPrefers === 'dark') {
     changeModeMeta('light');
 }
 
-window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
     changeMode();
 });
 
-window.addEventListener("DOMContentLoaded", event => {
+window.addEventListener("DOMContentLoaded", () => {
     // Update meta tags and code highlighting
     changeMode();
 
@@ -89,6 +89,28 @@ function changeMode() {
         }
     {{ end }}
 
+    {{ if and .Site.Params.enableGiscus (eq hugo.Environment "production") }}
+        // Change Giscus Comments Theme
+        if (isDark) {
+            changeGiscusTheme('{{ .Site.Params.giscusThemeDark | default "dark" }}');
+        } else {
+            changeGiscusTheme('{{ .Site.Params.giscusTheme | default "light" }}');
+        }
+        function changeGiscusTheme(theme) {
+            function sendMessage(message) {
+                const iframe = document.querySelector('iframe.giscus-frame');
+                if (iframe !== null) {
+                    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+                }
+            }
+            sendMessage({
+                setConfig: {
+                    theme: theme,
+                },
+            });
+        }
+    {{ end }}
+
     // Mermaid
     // https://github.com/reuixiy/hugo-theme-meme/issues/205
     if (typeof mermaidConfig !== 'undefined') {

diff --git a/config-examples/en/config.toml b/config-examples/en/config.toml
@@ -737,6 +737,22 @@ uglyURLs = false
     gitalkEnableHotKey = true
     # Note: https://github.com/gitalk/gitalk
 
+    ## Giscus
+    enableGiscus = false
+    giscusRepo = "[ENTER repo/you/want HERE]"
+    giscusRepoId = "[ENTER REPO ID HERE]"
+    giscusCategory = "[ENTER CATEGORY NAME HERE]"
+    giscusCategoryId = "[ENTER CATEGORY ID HERE]"
+    giscusMapping = "pathname"
+    giscusStrict = false
+    giscusReactionsEnabled = true
+    giscusEmitMetaData = false
+    giscusInputPosition = "top"
+    giscusTheme = "light"
+    giscusThemeDark = "dark"
+    giscusLang = "en"
+    # Note: https://giscus.app
+
 
     ######################################
     # Google Analytics

diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
@@ -683,6 +683,22 @@ uglyURLs = false
     gitalkEnableHotKey = true
     # 说明：https://github.com/gitalk/gitalk
 
+    ## Giscus
+    enableGiscus = false
+    giscusRepo = "[ENTER repo/you/want HERE]"
+    giscusRepoId = "[ENTER REPO ID HERE]"
+    giscusCategory = "[ENTER CATEGORY NAME HERE]"
+    giscusCategoryId = "[ENTER CATEGORY ID HERE]"
+    giscusMapping = "pathname"
+    giscusStrict = false
+    giscusReactionsEnabled = true
+    giscusEmitMetaData = false
+    giscusInputPosition = "top"
+    giscusTheme = "light"
+    giscusThemeDark = "dark"
+    giscusLang = "zh-CN"
+    # 说明：https://giscus.app/zh-CN
+
 
     ######################################
     # Google Analytics

diff --git a/config-examples/zh-tw/config.toml b/config-examples/zh-tw/config.toml
@@ -683,6 +683,22 @@ uglyURLs = false
     gitalkEnableHotKey = true
     # 說明：https://github.com/gitalk/gitalk
 
+    ## Giscus
+    enableGiscus = false
+    giscusRepo = "[ENTER repo/you/want HERE]"
+    giscusRepoId = "[ENTER REPO ID HERE]"
+    giscusCategory = "[ENTER CATEGORY NAME HERE]"
+    giscusCategoryId = "[ENTER CATEGORY ID HERE]"
+    giscusMapping = "pathname"
+    giscusStrict = false
+    giscusReactionsEnabled = true
+    giscusEmitMetaData = false
+    giscusInputPosition = "top"
+    giscusTheme = "light"
+    giscusThemeDark = "dark"
+    giscusLang = "zh-TW"
+    # 說明：https://giscus.app/zh-TW
+
 
     ######################################
     # Google Analytics

diff --git a/layouts/partials/components/comments.html b/layouts/partials/components/comments.html
@@ -22,5 +22,9 @@
         {{ if .Site.Params.enableGitalk }}
             <div id="gitalk-container"></div>
         {{ end }}
+
+        {{ if .Site.Params.enableGiscus }}
+            <div id="giscus"></div>
+        {{ end }}
     {{ end }}
 {{ end }}
diff --git a/layouts/partials/third-party/giscus.html b/layouts/partials/third-party/giscus.html
@@ -0,0 +1,61 @@
+{{- $src := partial "utils/lib.html" (dict "$" . "type" "giscus") -}}
+
+<script>
+    function loadComments() {
+        (function() {
+            const giscus = document.getElementById('giscus');
+            if (!giscus) return;
+            const script = document.createElement('script');
+
+            script.src = '{{ $src }}';
+            script.dataset.repo = '{{ .Site.Params.giscusRepo }}';
+            script.dataset.repoId = '{{ .Site.Params.giscusRepoId }}';
+            script.dataset.category = '{{ .Site.Params.giscusCategory }}';
+            script.dataset.categoryId = '{{ .Site.Params.giscusCategoryId }}';
+            script.dataset.mapping = '{{ .Site.Params.giscusMapping }}';
+
+            {{ if .Site.Params.giscusStrict }}
+                script.dataset.strict = '1';
+            {{ else }}
+                script.dataset.strict = '0';
+            {{ end }}
+            {{ if .Site.Params.giscusReactionsEnabled }}
+                script.dataset.reactionsEnabled = '1';
+            {{ else }}
+                script.dataset.reactionsEnabled = '0';
+            {{ end }}
+            {{ if .Site.Params.giscusEmitMetaData }}
+                script.dataset.emitMetadata = '1';
+            {{ else }}
+                script.dataset.emitMetadata = '0';
+            {{ end }}
+
+            script.dataset.inputPosition = '{{ .Site.Params.giscusInputPosition }}';
+            {{ template "giscus-theme" . }}
+            script.dataset.lang = '{{ .Site.Params.giscusLang }}';
+            script.dataset.loading = 'lazy';
+            script.crossOrigin = 'anonymous';
+            script.async = true;
+
+            giscus.appendChild(script);
+        })();
+    }
+</script>
+
+{{- define "giscus-theme" -}}
+    {{- $theme := .Site.Params.giscusTheme | default "light" -}}
+    {{- if and .Site.Params.enableDarkMode (eq .Site.Params.defaultTheme "dark") -}}
+        {{- $theme = .Site.Params.giscusThemeDark | default "dark" -}}
+    {{- end -}}
+
+    {{- if .Site.Params.enableDarkMode -}}
+        const isDark = getCurrentTheme() === 'dark';
+        if (isDark) {
+            script.dataset.theme = '{{ .Site.Params.giscusThemeDark | default "dark" }}';
+        } else {
+            script.dataset.theme = '{{ .Site.Params.giscusTheme | default "light" }}';
+        }
+    {{- else -}}
+        script.dataset.theme = '{{ $theme }}';
+    {{- end -}}
+{{- end -}}
diff --git a/layouts/partials/third-party/script.html b/layouts/partials/third-party/script.html
@@ -29,6 +29,10 @@
             {{ partial "third-party/gitalk.html" . }}
         {{ end }}
 
+        {{ if .Site.Params.enableGiscus }}
+            {{ partial "third-party/giscus.html" . }}
+        {{ end }}
+
     {{ end }}
 {{ end }}
 

diff --git a/layouts/partials/utils/lib.html b/layouts/partials/utils/lib.html
@@ -110,6 +110,11 @@
     {{- $host = $.Site.Params.lib.path.utterances | default $defalut -}}
 {{- end -}}
 
+{{- if eq $type "giscus" -}}
+    {{- $defalut := "https://giscus.app/client.js" -}}
+    {{- $host = $.Site.Params.lib.path.giscus | default $defalut -}}
+{{- end -}}
+
 <!--
 
   Third-party libraries/services/resources which not included in this file: