feat: add giscus comments system

[xjasonlyu]

Description

Adding the support for Giscus Comments System, a comments system powered by GitHub Discussions.

Giscus was heavily inspired by utterances, but with more config options and a better UI.

Issue Number:

Feature Request for #446

---

Additional Information (Optional)

Example/configuration can be found and generated at giscus.

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="light"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

Demo with Giscus

Light mode:

Dark mode:

---

Checklist

Yes, I included all necessary artefacts, including:

• Tests
• Documentation
• Implementation (Code and Ressources)
• Example

---

Testing Checklist

Yes, I ensured that all of the following scenarios were tested:

• Desktop Light Mode (Default)
• Desktop Dark Mode
• Desktop Light RTL Mode
• Desktop Dark RTL Mode
• Mobile Light Mode
• Mobile Dark Mode
• Mobile Light RTL Mode
• Mobile Dark RTL Mode

the giscus theme changes when the theme changes

---

Notify the following users

• @lxndrblz

[netlify]

✅ Deploy Preview for anatole-demo ready!

Name	Link
🔨 Latest commit	ab2cc72
🔍 Latest deploy log	https://app.netlify.com/sites/anatole-demo/deploys/64479cca49841000089dbe42
😎 Deploy Preview	https://deploy-preview-448--anatole-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[lxndrblz]

@xjasonlyu LGTM. Thanks for your PR.

[lxndrblz]

@xjasonlyu Would you mind adding a sample configuration as a coment that I could add to the wiki?

Thanks.

[xjasonlyu]

Yes, sure thing!

Adding Giscus

First generate the config according to the official document, and then enter those params in the config.toml:

[params.giscus]
repo = "githubuser/reponame"
repoID = "Github Repo ID"
category = "Discussions Category"
categoryID = "Discussions Category ID"
# <Optional Params>
# mapping = "pathname"
# strict = "0"
# reactionsEnabled = "1"
# emitMetadata = "0"
# inputPosition = "bottom"
# lang = "en"
# loading = "lazy"

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication