From c4cd4bf9a174f9c273801f8859f662a85a58cbf5 Mon Sep 17 00:00:00 2001
From: zhixuan <59254886+zhixuan666@users.noreply.github.com>
Date: Sun, 15 Aug 2021 19:03:59 +0900
Subject: [PATCH] feat(comments): giscus integration (#304)

Co-authored-by: Jimmy Cai <github@jimmycai.com>
---
 exampleSite/config.yaml                       | 15 +++++-
 .../partials/comments/provider/giscus.html    | 49 +++++++++++++++++++
 2 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 layouts/partials/comments/provider/giscus.html

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index ac67c62..425a142 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -93,6 +93,17 @@ params:
             path:
             lang:
 
+        giscus:
+            repo:
+            repoID:
+            category:
+            categoryID:
+            mapping:
+            lightTheme:
+            darkTheme:
+            reactionsEnabled: 1
+            emitMetadata: 0
+
     widgets:
         enabled:
             - search
@@ -143,8 +154,8 @@ menu:
           weight: -100
           pre: home
           params:
-            ### For demonstration purpose, the home link will be open in a new tab
-            newTab: true
+              ### For demonstration purpose, the home link will be open in a new tab
+              newTab: true
 
 related:
     includeNewer: true
diff --git a/layouts/partials/comments/provider/giscus.html b/layouts/partials/comments/provider/giscus.html
new file mode 100644
index 0000000..f36ead9
--- /dev/null
+++ b/layouts/partials/comments/provider/giscus.html
@@ -0,0 +1,49 @@
+{{- with .Site.Params.comments.giscus -}}
+<script
+    src="https://giscus.app/client.js"
+    data-repo="{{- .repo -}}"
+    data-repo-id="{{- .repoID -}}"
+    data-category="{{- .category -}}"
+    data-category-id="{{- .categoryID -}}"
+    data-mapping="{{- default `title` .mapping -}}"
+    data-reactions-enabled="{{- default 1 .reactionsEnabled -}}"
+    data-emit-metadata="{{- default 0 .emitMetadata -}}"
+    data-theme="{{- default `light` .lightTheme -}}"
+    crossorigin="anonymous"
+    async
+></script>
+<script>
+    function setGiscusTheme(theme) {
+        let giscus = document.querySelector('iframe.giscus-frame');
+        if (giscus) {
+            giscus.contentWindow.postMessage(
+                { 
+                    giscus: {
+                        setConfig: { 
+                            theme: theme 
+                        }
+                    }
+                },
+                "https://giscus.app"
+            );
+        };
+    };
+
+    (function(){
+        addEventListener('message', (e) => {
+            if (event.origin !== 'https://giscus.app') return;
+            handler()
+        });
+        window.addEventListener('onColorSchemeChange', handler);
+
+        function handler() {
+            if (document.documentElement.dataset.scheme === "light") {
+                setGiscusTheme('{{- default "light" .lightTheme -}}');
+            } else {
+                setGiscusTheme('{{- default "dark_dimmed" .darkTheme -}}');
+            };
+        };
+    }());
+</script>
+{{- end -}}
+