feat(comments): add Giscus support (#50)

* feat(comments) add Giscus support

* feat: default value for reactionsEnabled and emitMetadata

* feat: support custom mapping

* fix: add quote

* style: giscus border and top padding

assets/sass/base/_scaffolding.scss

@@ -79,7 +79,7 @@ a.section-button {
 }
 
 .container {
-    max-width: 825px;
+    max-width: 830px;
     padding: 0 1.5rem;
     margin-left: auto;
     margin-right: auto;

assets/sass/components/_comments.scss

@@ -4,4 +4,8 @@
 
 #cusdis_thread {
     padding-top: 2rem;
+}
+
+.giscus {
+    padding-top: 2rem;
 }

layouts/partials/comments/provider/giscus.html

@@ -0,0 +1,42 @@
+<script src="https://giscus.app/client.js" 
+        data-repo="{{ .Site.Params.comments.giscus.repo }}"
+        data-repo-id="{{ .Site.Params.comments.giscus.id }}"
+        {{ with .Site.Params.comments.giscus.category }}
+        data-category="{{ .name }}"
+        data-category-id="{{ .id }}"
+        {{ end }}
+        data-mapping="{{ .Site.Params.comments.giscus.mapping | default "pathname" }}"
+        data-reactions-enabled="{{ .Site.Params.comments.giscus.reactionsEnabled | default 1 }}"
+        data-emit-metadata="{{ .Site.Params.comments.giscus.emitMetadata | default 0 }}"
+        data-theme="light"
+        crossorigin="anonymous"
+        async
+        >
+</script>
+
+<script>
+    function setGiscusTeheme(theme) {
+        let giscus = document.querySelector('.giscus iframe');
+        if (giscus) {
+            giscus.contentWindow.postMessage(
+                {
+                    giscus: {
+                        setConfig: {
+                            theme: theme
+                        }
+                    }
+                },
+                'https://giscus.app'
+            )
+        }
+    }
+
+    addEventListener('message', event => {
+        if (event.origin !== 'https://giscus.app') return;
+        setGiscusTeheme(document.documentElement.dataset.userColorScheme)
+    });
+
+    window.addEventListener('onColorSchemeChange', (e) => {
+        setGiscusTeheme(e.detail)
+    })
+</script>