feat: add giscus comments system

xjasonlyu commented 1 year ago

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)
[x] Example

Testing Checklist

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

[x] Desktop Light Mode (Default)
[x] Desktop Dark Mode
[x] Desktop Light RTL Mode
[x] Desktop Dark RTL Mode
[x] Mobile Light Mode
[x] Mobile Dark Mode
[x] Mobile Light RTL Mode
[x] Mobile Dark RTL Mode

the giscus theme changes when the theme changes

Notify the following users

@lxndrblz

netlify[bot] commented 1 year ago

Deploy Preview for anatole-demo ready!

Name	Link
Latest commit	ab2cc7231dbb1ef76643d598872017c75442bc6e
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 commented 1 year ago

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

Thanks.

xjasonlyu commented 1 year ago

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"