Native support for Giscus comments

[yshalsager]

Is your feature request related to a problem? Please describe.
The theme provide support for Utterances comments and any custom widget, but custom widgets aren't well integrated with the theme. E.g. Toggling light/dark mode won't affect the custom comment widget.

I am using https://github.com/giscus as an alternative of Utterances comments, it does exactly the same thing but depends on GitHub Discussions instead of issues which I find more appealing to me.

As you can see here, in dark theme the widget is still using the white theme as set in custom.html partial.

Describe the solution you'd like
I would like to suggest adding https://github.com/giscus as a native option for comments, and integrate it with the theme the same way Utterances is supported.

Describe alternatives you've considered
Only setting up my own custom widget.

[razonyang]

For others who want to change the theme of your custom comments' engine, the theme will emit a custom event called hbs:mode on mode changed, you can change it via event listener.

import { getPreferMode } from 'js/mode/functions';

document.addEventListener('hbs:mode', (e: CustomEvent) => {
  changeTheme(e.detail.mode === 'auto' ? getPreferMode() : e.detail.mode);
});

function changeTheme() {
  // do some stuff.
}

See also https://hbs.razonyang.com/v1/en/docs/advanced/events/

[razonyang]

Implemented via #615. https://hbs.razonyang.com/v1/en/docs/widgets/comments/#giscus

[yshalsager]

Implemented via #615. https://hbs.razonyang.com/v1/en/docs/widgets/comments/#giscus

Awesome! Thank you!

[razonyang]

@yshalsager FYI, I saw that you've added the Arabic language to Giscus, you'll need to upgrade the theme to the latest commit to make it work. Since the theme maintaining it own languages list for avoiding getting errors of Giscus giscus/giscus#620 on the case of unsupported languages.

hugo-theme-bootstrap/layouts/partials/post/comments/giscus.html

Line 3 in 04629ed

{{- $validLangs := slice "ar" "de" "gsw" "es" "en" "fr" "id" "it" "ja" "ko" "pl" "pt" "ro" "ru" "tr" "vi" "zh-CN" "zh-TW" -}}

[yshalsager]

Thanks for letting me know, will do now :)