Add giscus (#753)

### Prerequisites

Put an `x` into the box(es) that apply:

- [ ] This pull request fixes a bug.
- [x] This pull request adds a feature.
- [ ] This pull request introduces breaking change.

### Description

Adds support for [Giscus](https://giscus.app) as an alternative to
[Utterances](https://utteranc.es), for a more extensive comment system
based on GitHub Discussions (supports threading) rather than GitHub
Issues.

I've also implemented dynamic theme changing depending on the site theme
set, similar to Utterances. Giscus inherits the same existing theme
names as it uses the `dark` and `light` values, unlike Utterances which
uses `github-dark` and `github-light`.

This was helpful for dynamic theme changing as I'm not too experienced
with JavaScript: https://github.com/giscus/giscus/issues/336. I was also
wondering if empty attributes in the script tag in `giscus.html` should
be avoided (by not loading the params if not set), since not all are
required. As for defaults, the sames ones as on
[giscus](https://giscus.app) are used. Let me know if any optimizations
are needed.

### Issues Resolved

Closes #747.

### Checklist

Put an `x` into the box(es) that apply:

#### General

- [x] Describe what changes are being made
- [x] Explain why and how the changes were necessary and implemented
respectively
- [x] Reference issue with `#<ISSUE_NO>` if applicable

#### Resources

- [ ] If you have changed any SCSS code, run `make release` to
regenerate all CSS files

#### Contributors

- [x] Add yourself to `CONTRIBUTORS.md` if you aren't on it already

assets/js/coder.js

@@ -75,6 +75,17 @@ function setTheme(theme) {
         })
         
     }
+
+    function sendMessage(message) {
+        const iframe = document.querySelector('iframe.giscus-frame');
+        if (!iframe) return;
+        iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+      }
+      sendMessage({
+        setConfig: {
+          theme: theme,
+        },
+      });
     
     // Create and send event
     const event = new Event('themeChanged');

docs/configurations.md

@@ -14,6 +14,7 @@
     * [Disqus](#disqus)
     * [Commento](#commento)
     * [Utterances](#utterances)
+    * [Giscus](#giscus)
 * [Theme Parameters](#theme-parameters)
   * [Social Icons Configuration](#social-icons-configuration)
   * [Menu Items Configurations](#menu-items-configurations)
@@ -39,6 +40,7 @@ This theme supports:
   * [Disqus](https://disqus.com/)
   * [Commento](https://commento.io/)
   * [Utterances](https://utteranc.es/)
+  * [Giscus](https://giscus.app/)
 
 ### Analytics
 
@@ -123,6 +125,25 @@ Follow [these steps](https://gohugo.io/content-management/comments/#configure-di
   theme = "" # https://utteranc.es/#heading-theme
 ```
 
+#### Giscus
+
+```toml
+[params.giscus] # https://giscus.app
+  repo = ""
+  repoID = "" 
+  category = ""
+  categoryID = ""
+  mapping = ""
+  term = ""
+  strict = ""
+  reactionsEnabled = ""
+  emitMetadata = ""
+  inputPosition = ""
+  theme = ""
+  lang = ""
+  loading = ""
+```
+
 ## Theme Parameters
 
 These are all the parameters used by `hugo-coder` theme.

layouts/partials/posts/giscus.html

@@ -0,0 +1,33 @@
+{{- if isset .Site.Params "giscus" -}}
+  {{- if and (isset .Site.Params.giscus "repo") (not (eq .Site.Params.giscus.repo "" )) (eq (.Params.disableComments | default false) false) -}}
+  <div class="comments">
+    <script>
+  
+    let getTheme = window.localStorage && window.localStorage.getItem("colorscheme");
+  
+    getTheme = getTheme == null ? '{{$.Site.Params.giscus.theme}}' : getTheme;
+    
+    let s = document.createElement('script');
+    s.src = 'https://giscus.app/client.js';
+    s.setAttribute('data-repo', '{{ .Site.Params.giscus.repo }}');
+    s.setAttribute('data-repo-id', '{{ .Site.Params.giscus.repoID }}');
+    s.setAttribute('data-category', '{{ .Site.Params.giscus.category }}');
+    s.setAttribute('data-category-id', '{{ .Site.Params.giscus.categoryID }}');
+    s.setAttribute('data-mapping', '{{ default "pathname" .Site.Params.giscus.mapping }}');
+    s.setAttribute('data-term', '{{ .Site.Params.giscus.term }}');
+    s.setAttribute('data-strict', '{{ default "0" .Site.Params.giscus.strict }}');
+    s.setAttribute('data-reactions-enabled', '{{ default "1" .Site.Params.giscus.reactionsEnabled }}');
+    s.setAttribute('data-emit-metadata', '{{ default "0" .Site.Params.giscus.emitMetadata }}');
+    s.setAttribute('data-input-position', '{{ default "bottom" .Site.Params.giscus.inputPosition }}');
+    s.setAttribute('data-theme', getTheme);
+    s.setAttribute('data-lang', '{{ default "en" .Site.Params.giscus.lang }}');
+    s.setAttribute('data-loading', '{{ .Site.Params.giscus.loading }}');
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
+  
+    </script>
+    </div>
+  {{- end -}}
+{{- end -}}

layouts/posts/single.html

@@ -44,6 +44,7 @@
         {{ partial "posts/disqus.html" . }}
         {{ partial "posts/commento.html" . }}
         {{ partial "posts/utterances.html" . }}
+        {{ partial "posts/giscus.html" . }}
       </footer>
     </article>