1---
 2import { commentConfig, siteConfig } from '@/config';
 3import { CDN } from '@constants/cdn';
 4
 5const artalkConfig = commentConfig.artalk!;
 6---
 7
 8<div id="artalk-wrapper" class="mt-6"></div>
 9
10<link rel="stylesheet" href={CDN.artalkCss} />
11
12<script
13  type="module"
14  is:inline
15  define:vars={{
16    artalkConfig,
17    siteConfig: {
18      title: siteConfig.title,
19      lang: siteConfig.lang,
20    },
21  }}
22>
23  import Artalk from 'https://esm.sh/artalk@2.9.1';
24
25  function setup() {
26    function getCurrentMode() {
27      if (!('darkMode' in localStorage)) {
28        return window.matchMedia('(prefers-color-scheme: dark)').matches;
29      }
30      return localStorage.darkMode === 'true';
31    }
32
33    const warpper = document.getElementById('artalk-wrapper');
34    if (!warpper) return;
35    const artalk = Artalk.init({
36      el: warpper,
37      darkMode: getCurrentMode(),
38      pageKey: window.location.pathname,
39      pageTitle: document.title,
40      server: artalkConfig.serverURL,
41      site: siteConfig.title,
42      locale: artalkConfig.locale || siteConfig.lang,
43    });
44
45    document.addEventListener('blog:darkmode-change', (e) => {
46      const { isDark } = e.detail;
47      artalk.setDarkMode(isDark);
48    });
49
50    document.addEventListener('astro:before-swap', () => {
51      artalk.destroy();
52    });
53  }
54
55  document.addEventListener('astro:page-load', setup);
56  setup();
57</script>