{{- with .Site.Params.comments.remark42 -}}
<div id="remark42"></div>
<script>
    var remark_config = {
        host: '{{ .host }}',
        site_id: '{{ .site }}',
        components: ['embed'],
        url: '{{ $.Permalink }}',
        max_shown_comments: {{ default 15 .max_shown_comments }},
        theme: document.documentElement.dataset.scheme,
        page_title: '{{ $.Title }}',
        locale: '{{ default "en" .locale }}',
        show_email_subscription: {{ default true .show_email_subscription }}
    };

    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);

    window.addEventListener('onColorSchemeChange', (e) => {
        window.REMARK42.changeTheme(e.detail);
    })
</script>
{{- end -}}