support remark42 in comments

layouts/partials/comments.html

@@ -1,9 +1,13 @@
 {{- /* You can add your own layouts/comments.html to override this file */ -}}
 
-{{- with site.Params.commentSystem.disqus -}}
-  {{- partial "disqus.html" . }}
+{{- with site.Params.commentSystem.remark42 -}}
+  {{- partial "remark42.html" . }}
 {{- end -}}
 
 {{- with site.Params.commentSystem.telegramWidget -}}
   {{- partial "telegram_widget.html" . }}
 {{- end -}}
+
+{{- with site.Params.commentSystem.disqus -}}
+  {{- partial "disqus.html" . }}
+{{- end -}}

layouts/partials/remark42.html

@@ -0,0 +1,61 @@
+<div id="remark42"></div>
+
+<script>
+  var remark_config = {
+    host: '{{ .url }}',
+    site_id: '{{ .site }}',
+    components: ['embed'],
+    max_shown_comments: 20,
+    theme: 'light',
+    // page_title: 'My custom title for a page',
+    // show_email_subscription: false,
+    simple_view: true
+  };
+  if (isDarkTheme()) {
+    remark_config.theme = 'dark'
+  }
+
+  (function() {
+    console.log('ok')
+    const remark42 = window.REMARK42
+
+    if (remark42) {
+      remark42.destroy()
+      remark42.createInstance(remark_config)
+    } else {
+      for (const component of remark_config.components) {
+        var d = document, s = d.createElement('script');
+        s.src = `${remark_config.host}/web/${component}.mjs`;
+        s.type = 'module';
+        s.defer = true;
+        // prevent the <script> from loading mutiple times by InstantClick
+        s.setAttribute('data-no-instant', '')
+        d.head.appendChild(s);
+      }
+    }
+  })();
+</script>
+
+<script data-no-instant>
+  (function() {
+    if (!toggleThemeCallbacks) {
+      return;
+    }
+
+    toggleThemeCallbacks.push((isDark) => {
+      const remark42 = window.REMARK42
+      if (!remark42) {
+        return;
+      }
+      if (!document.getElementById('remark42')) {
+        return;
+      }
+
+      if (isDark) {
+        remark42.changeTheme('light');
+      } else {
+        remark42.changeTheme('dark');
+      }
+    });
+  })();
+</script>