Switch from remark42 to talkyard

config.yaml

@@ -31,6 +31,9 @@ params:
   gitFileURL: https://github.com/BBaoVanC/bbaovanc.com/blob/master
   gitFileIcon: code
 
+  talkyardServerUrl: "https://talkyard.bbaovanc.com"
+  talkyardScriptUrl: "https://talkyard.bbaovanc.com/-/talkyard-comments.min.js"
+
 # see https://gohugo.io/about/hugo-and-gdpr/#all-privacy-settings
 # you probably want to keep this default
 privacy:

layouts/partials/comments.html

@@ -1,63 +1,27 @@
-{{ if ne .Site.BaseURL "https://bbaovanc.com" }}
+<noscript>
-    <i>Comment section is not available during development previews.</i>
+    <small>
+        <i>Enable JavaScript to see the comment section.</i>
+    </small>
+</noscript>
+
+{{ $id := "" }}
+{{ with .Params.discussionId }}
+    {{ $id = . }}
 {{ else }}
-
-    <noscript>
-        <style>
-            #comments-hr {
-                display: none;
-            }
-        </style>
-
-        <small>
-            <i>Enable JavaScript to see the comment section.</i>
-        </small>
-    </noscript>
-
-    {{ $url := .Permalink }}
-
     {{ if .IsTranslated }}
         {{ with index .AllTranslations 0 }}
-            {{ $url = .Permalink }}
+            {{ $id = .RelPermalink }}
         {{ end }}
+    {{ else }}
+        {{ $id = .RelPermalink }}
     {{ end }}
-
-    <script>
-        var remark_config = {
-            host: "https://remark.bbaovanc.com",
-            site_id: "bbaovanc.com",
-            components: [
-                "embed",
-                //"last-comments",
-                //"counter",
-            ],
-            url: "{{ $url }}", // make this permalink the main language so all languages have the same comments
-            max_shown_comments: 10,
-            page_title: "{{ .Title }}",
-            locale: "{{ .Language.Lang }}",
-            show_email_subscription: true,
-            simple_view: false,
-        };
-
-        if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-            remark_config["theme"] = "light";
-        } else {
-            remark_config["theme"] = "dark";
-        }
-    </script>
-    <script>!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>
-
-    <script>
-        const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: light)');
-        darkModeMediaQuery.addListener((e) => {
-            if (e.matches) {
-                window.REMARK42.changeTheme('light');
-            } else {
-                window.REMARK42.changeTheme('dark');
-            }
-        });
-    </script>
-
-    <div id="remark42"></div>
-
 {{ end }}
+
+<script>talkyardServerUrl='{{ .Site.Params.talkyardServerUrl }}';</script>
+<script async defer src="{{ .Site.Params.talkyardScriptUrl }}"></script>
+<!-- You can specify a per page discussion id on the next line, if your URLs might change. -->
+<div class="talkyard-comments" data-discussion-id="{{ $id }}" style="margin-top: 45px;">
+<p style="margin-top: 25px; opacity: 0.9; font-size: 96%">Comments powered by
+<a href="https://www.talkyard.io">Talkyard</a>.</p>
+<small>Discussion ID: {{ $id }}</small>
+</div>