Add Coral, Remark42 (#441)idea/coral-remark42-integration

Add Coral Remark42 comment engines.

Co-authored-by: Koichi MATSUMOTO <mzch@me.com>

5 files changed, 60 insertions, 3 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 42acdc3..a2a6f41 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -47,7 +47,15 @@ disqusShortname = ""
   algolia_currentLanguageOnly = true
 
   # Enable / Disable comments on the articles via commento
+  commento        = false
   # commentoJsURL = "https://commento.lednerb.de/js/commento.js"
+  # Enable / Disable comments on the articles via Coral
+  coral           = false
+  # coralJsURL    = ""
+  # Enable / Disable comments on the articles via Remark42
+  remark42        = false
+  # remarkJsURL   = ""
+  # remarkID      = "remark"
 
   # Enable / Disable Giscus comments
   giscus             = false
@@ -71,7 +79,7 @@ disqusShortname = ""
   utterancesLabel       = "Comment"
   utterancesTheme       = "github-light"
   utterancesCrossOrigin = "anonymous"
-
+  
   # Media configuration
     # let hugo automatically resize and crop your images to the correct sizes
     # NB: When enabled the image files get renamed by adding additional information,
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3ce6d43..531b278 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -10,6 +10,8 @@
     {{ if ( .Params.showComments | default true ) }}
         <div id="comments-container">
             {{ template "_internal/disqus.html" . }}
+            {{ partial "coral.html" . }}
+            {{ partial "remark42.html" . }}
             {{ partial "commento.html" . }}
             {{ partial "giscus.html" . }}
             {{ partial "utterances.html" . }}
diff --git a/layouts/partials/commento.html b/layouts/partials/commento.html
index 7271a20..bbf6f66 100644
--- a/layouts/partials/commento.html
+++ b/layouts/partials/commento.html
@@ -1,4 +1,5 @@
-{{ if isset .Site.Params "commentojsurl" }}
-    <script defer src="{{.Site.Params.commentoJsURL}}"></script>
+{{ if .Site.Params.commento }}
     <div id="commento"></div>
+    <script defer src="{{ .Site.Params.commentoJsURL }}"></script>
+	<noscript>Please enable JavaScript to view the comments powered by <a href="https://commento.io/">Commento</a>.</noscript>
 {{ end }}
diff --git a/layouts/partials/coral.html b/layouts/partials/coral.html
new file mode 100644
index 0000000..893a630
--- /dev/null
+++ b/layouts/partials/coral.html
@@ -0,0 +1,29 @@
+{{ if .Site.Params.coral }}
+<div id="coral-thread"></div>
+<script type="text/javascript">
+  (function() {
+    if (window.location.hostname == "localhost")
+      return;
+    var d = document, s = d.createElement('script');
+    s.src = {{ .Site.Params.coralJsURL }};
+    s.async = false;
+    s.defer = true;
+    s.onload = function() {
+        Coral.createStreamEmbed({
+            id: "coral-thread",
+            autoRender: true,
+            rootURL: {{ .Site.Params.coralJsURL }}
+            // Uncomment these lines and replace with the ID of the
+            // story's ID and URL from your CMS to provide the
+            // tightest integration. Refer to our documentation at
+            // https://docs.coralproject.net for all the configuration
+            // options.
+            // storyID: '${storyID}',
+            // storyURL: '${storyURL}',
+        });
+    };
+    (d.head || d.body).appendChild(s);
+  })();
+</script>
+<noscript>Please enable JavaScript to view the comments powered by <a href="https://coralproject.net/">Coral</a>.</noscript>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/remark42.html b/layouts/partials/remark42.html
new file mode 100644
index 0000000..5d0078c
--- /dev/null
+++ b/layouts/partials/remark42.html
@@ -0,0 +1,17 @@
+{{ if .Site.Params.remark42 }}
+<div id="remark42"></div>
+<script type="text/javascript">
+  var remark_config = {
+    host: "{{ .Site.Params.RemarkJsURL }}", // url of remark server, same as REMARK_URL in backend config
+    site_id: "{{ .Site.Params.RemarkID }}",
+    components: ['embed'], // optional param; which components to load. default to ["embed"]
+                          // to load all components define components as ['embed', 'last-comments', 'counter']
+                          // available component are:
+                          //     - 'embed': basic comments widget
+                          //     - 'last-comments': last comments widget, see `Last Comments` section below
+                          //     - 'counter': counter widget, see `Counter` section below
+  };
+  !function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);
+</script>
+<noscript>Please enable JavaScript to view the comments powered by <a href="https://remark42.com/">Remark42</a>.</noscript>
+{{ end }}