Blog Giscus Comments Engine

[giscus[bot]]

Blog Giscus Comments Engine

This module adds support for the Giscus comments engine, which powered by GitHub Discussions.

https://hbstack.dev/en/modules/blog/comments/giscus/

[TetraTheta]

I'm not sure why Giscus doesn't get translated to my language even though it is supported by Giscus.

# hugo.yaml
defaultContentLanguage: ko
hasCJKLanguage: true
languageCode: ko

# params.yaml
hb:
  blog:
    giscus:
      repo: 
      repo_id: [REDACTED]
      category: [REDACTED]
      category_id: [REDACTED]
      languages_mapping:
        ko: ko
        # None of these works
        #ko-KR: ko
        #ko-KR: ko-KR
        #ko-KR: ko-kr
        #ko-kr: ko
        #ko-kr: ko-KR
        #ko-kr: ko-kr
        #ko: ko
        #ko: ko-KR
        #ko: ko-kr

# languages.yaml
ko:
  languageCode: ko-KR
  languageName: 한국어
  weight: 1

Korean is supported language of Giscus, as ko. I've tried to set params.hb.blog.giscus.languages_mapping to ko-kr: ko, ko: ko, ko: ko-kr, ko-kr: ko-kr but none of them worked.

I don't think I mis-configured other params of Giscus because I copied values from https://giscus.app/ko.

When I inspect giscus script, data-lang was empty like data-lang="". I think my configuration didn't accepted by Giscus module.

What did I have done wrong?

[razonyang]

Yep, it's a bug, didn't notice that, just fixed via hugomods/giscus#18, please upgrade the latest release of the module to verify it.

[TetraTheta]

I can confirm that the issue was resolved with manually putting github.com/hugomods/giscus above github.com/hbstack/blog/modules/giscus like this:

# hugo.yaml
module:
  imports:
    - path: github.com/hugomods/giscus
    - path: github.com/hbstack/blog/modules/giscus

Now I see localized Giscus. Thank you for the quick bug fix!

[diogoguilhen]

im getting this error :/ any tip?

chromewebdata/:1

   Failed to load resource: the server responded with a status of 404 ()

(index):6587 crbug/1173575, non-JS module files deprecated.
(anonymous) @ (index):6587
Refused to frame 'https://giscus.app/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

docs/:1 Unchecked runtime.lastError: The message port closed before a response was received.

[diogoguilhen]

sure! https://productcommunity.netlify.app/

[razonyang]

Seems not available in this moment, I got ERR_NAME_NOT_RESOLVED error (redirect to https://productcommunity.com.br/pt-br/).

[diogoguilhen]

sry i just update and this take time to redirect https://productcommunity.netlify.app/pt-br/docs/

[razonyang]

The error indicates that the pt-br isn't support by Giscus (404), you can fallback to one of supported languages by setting the giscus.languagesMapping.

// params.yaml
giscus:
  languagesMapping:
    # the key is the site language code, the value is the Giscus supported language code.
    pt-br: pt

See https://github.com/giscus/giscus/blob/main/CONTRIBUTING.md#adding-localizations.

[diogoguilhen]

tks! !

[LITUATUI]

Is it possible to open external links made in the comment section in a new tab?

Thanks!

[razonyang]

Although we can't control the comments rendering, it's possible by using extra JavaScript.

It would be a new module, but may affect all links (globally, not only comments section), is it OK?

[razonyang]

Hmm, I've tried, but comments are rendered within a iframe, I'd recommend creating an issue on corresponding comments engine's repo.

[LITUATUI]

Giscus supports lazy loading, can you enable it in this module?

data-loading="lazy"

[razonyang]

😕 Already enabled, you can check the source code of your site.

[razonyang]

You can also configure these options

[LITUATUI]

Thanks you're right.

It isn't working in my latest post probably because the text is too short. It works on longer articles.

Sorry!

[razonyang]

No problem.