feat(comment): add support for Comentario (#1088)

* Add support for comentario.

* feat: add Comentario client configuration options in TOML

* fix: format theme attribute in comentario comments component

---------

Co-authored-by: Jimmy Cai <jimmy@cai.im>

config/_default/params.toml

@@ -162,3 +162,15 @@ SortBy              = "default"
     [comments.cusdis]
         host = "https://cusdis.com"
         id = ""
+
+    # Comentario client configuration
+    [comments.comentario]
+        url = ""
+        autoInit = false
+        autoNonInteractiveSso = false
+        cssOverride = ""
+        lang = ""
+        liveUpdate = false
+        maxLevel = 0
+        noFonts = false
+        theme = ""

layouts/_partials/comments/provider/comentario.html

@@ -0,0 +1,13 @@
+<script defer src="{{ .Site.Params.comments.comentario.url }}/comentario.js"></script>
+<comentario-comments auto-init="{{ .Site.Params.comments.comentario.autoInit }}"
+    auto-non-interactive-sso="{{ .Site.Params.comments.comentario.autoNonInteractiveSSO }}"
+    css-override="{{ .Site.Params.comments.comentario.cssOverride }}" lang="{{ .Site.Params.comments.comentario.lang }}"
+    live-update="{{ .Site.Params.comments.comentario.liveUpdate }}"
+    max-level="{{ .Site.Params.comments.comentario.maxLevel }}"
+    no-fonts="{{ .Site.Params.comments.comentario.noFonts }}"
+    theme="{{ .Site.Params.comments.comentario.theme }}"></comentario-comments>
+<script>
+    window.addEventListener('onColorSchemeChange', (e) => {
+        document.querySelector('comentario-comments').setAttribute('theme', e.detail);
+    })
+</script>