Add giscus (#753)

Nour Agha

04.15.2023 ad84713468add6b4ade8ff1754183565a8993dee

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 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 @@
  * [Disqus](https://disqus.com/)
  * [Commento](https://commento.io/)
  * [Utterances](https://utteranc.es/)
  * [Giscus](https://giscus.app/)

### Analytics

@@ -123,6 +125,25 @@
  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

New file
@@ -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>