feat: implement remark42 comments support

_config.yml

@@ -110,7 +110,7 @@ toc: true
 
 comments:
   # Global switch for the post-comment system. Keeping it empty means disabled.
-  provider: # [disqus | utterances | giscus]
+  provider: # [disqus | utterances | giscus | remark42]
   # The provider options are as follows:
   disqus:
     shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
@@ -129,6 +129,10 @@ comments:
     input_position: # optional, default to 'bottom'
     lang: # optional, default to the value of `site.lang`
     reactions_enabled: # optional, default to the value of `1`
+  # Remark42 options › https://remark42.com
+  remark42:
+    host: # e.g. 'https://remark42.example.com'
+    site_id: # optional, default to 'remark'
 
 # Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets
 assets:

_includes/comments/remark42.html

@@ -0,0 +1,27 @@
+<!-- Remark42 comments embed -->
+<!-- Temporay centering workaround -->
+<script>
+  const themeMapper = Theme.getThemeMapper("light", "dark");
+  const initTheme = themeMapper[Theme.visualState];
+  var remark_config = {
+    host: '{{ site.comments.remark42.host }}',
+    site_id: '{{ site.comments.remark42.site_id | default: "remark" }}',
+    theme: initTheme,
+    components: ['embed', 'counter'],
+    no_footer: true,
+  };
+
+  addEventListener("message", (event) => {
+    if (event.source === window && event.data && event.data.id === Theme.ID) {
+      const newTheme = themeMapper[Theme.visualState];
+      window.REMARK42.changeTheme(newTheme);
+    }
+  });
+
+  let remarkContainer = document.createElement('div');
+  remarkContainer.id = 'remark42';
+  let footer = document.querySelector('footer');
+  footer.insertAdjacentElement("beforebegin", remarkContainer);
+
+  !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>