feat: support Artalk comment system (#1306)

* feat: support artalk comment system

* chore: change url from testingcf to cdn prefix

* refactor(comments): align artalk provider style and keep custom css overrides

* fix: update Artalk CDN links to use the correct URL

* refactor(comments): simplify Artalk implementation

* fix(artalk): update script tag to use ESM for Artalk

* fix(artalk): set locale to 'auto' for Artalk comments

* refactor: move artalk style and script link to external.toml

---------

Co-authored-by: Jimmy Cai <jimmy@cai.im>

assets/scss/partials/comments/artalk.scss

@@ -0,0 +1,80 @@
+@import "../../breakpoints";
+@import "../../mixins";
+
+.artalk-container {
+    @include card-style;
+    padding: 5px;
+
+    @include respond(md) {
+        padding: var(--card-padding);
+    }
+}
+
+.artalk {
+    --at-color-bg: var(--card-background);
+    --at-color-font: var(--card-text-color-main);
+    --at-color-sub: var(--card-text-color-secondary);
+    --at-color-main: var(--accent-color);
+    --at-color-border: var(--card-separator-color);
+    --at-border-radius: var(--card-border-radius);
+    --at-color-link: var(--accent-color);
+}
+
+.artalk a {
+    color: var(--at-color-link);
+    text-decoration: none;
+    transition: color 0.3s ease;
+
+    &:hover {
+        color: var(--accent-color-darker);
+    }
+}
+
+.artalk .atk-content a,
+.artalk .atk-editor-plug-preview a {
+    color: var(--accent-color);
+    box-shadow: 0px -2px 0px rgba(var(--link-background-color), var(--link-background-opacity)) inset;
+    transition: all 0.3s ease;
+
+    &:hover {
+        color: var(--accent-color-darker);
+        box-shadow: 0px calc(-1rem * var(--article-line-height)) 0px rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
+    }
+}
+
+[data-scheme="dark"] .artalk {
+    --at-color-main: var(--accent-color);
+    --at-color-link: var(--accent-color);
+    --at-color-bg: var(--card-background);
+    --at-color-bg-transl: rgba(66, 66, 66, 0.95);
+    --at-color-bg-grey: rgba(255, 255, 255, 0.08);
+    --at-color-bg-grey-transl: rgba(255, 255, 255, 0.06);
+    --at-color-bg-light: rgba(255, 255, 255, 0.08);
+    --at-color-border: var(--card-separator-color);
+    --at-color-font: var(--card-text-color-main);
+    --at-color-deep: var(--card-text-color-main);
+    --at-color-sub: var(--card-text-color-secondary);
+    --at-color-meta: var(--card-text-color-secondary);
+    --at-color-grey: var(--card-text-color-secondary);
+    --at-color-gradient: linear-gradient(
+        180deg,
+        transparent,
+        var(--card-background)
+    );
+}
+
+.artalk code {
+    font-family: var(--code-font-family);
+}
+
+.artalk .atk-avatar img {
+    border-radius: var(--card-border-radius);
+}
+
+[data-scheme="dark"] .artalk .atk-avatar img {
+    filter: brightness(0.75);
+}
+
+[data-scheme="dark"] .artalk .atk-send-btn {
+    color: var(--accent-color-text);
+}

config/_default/params.toml

@@ -101,6 +101,10 @@ SortBy         = "default"
     enabled  = true
     provider = "disqus"
 
+    [comments.artalk]
+        serverUrl = ""
+        site      = ""
+
     [comments.disqusjs]
         shortname  = ""
         apiUrl     = ""

data/external.toml

@@ -13,3 +13,7 @@ Cactus = [
     Style    = "https://cdn.jsdelivr.net/npm/photoswipe@5.4.4/dist/photoswipe.css"
     Core     = "https://cdn.jsdelivr.net/npm/photoswipe@5.4.4/dist/photoswipe.esm.min.js"
     Lightbox = "https://cdn.jsdelivr.net/npm/photoswipe@5.4.4/dist/photoswipe-lightbox.esm.min.js"
+
+[Artalk]
+    Style  = "https://cdn.jsdelivr.net/npm/artalk@2.9.1/dist/Artalk.css"
+    Script = "https://cdn.jsdelivr.net/npm/artalk@2.9.1/+esm"

layouts/_partials/comments/provider/artalk.html

@@ -0,0 +1,30 @@
+{{- $style := resources.Get "scss/partials/comments/artalk.scss" | toCSS | minify -}}
+{{- with .Site.Params.comments.artalk -}}
+<link rel="stylesheet" href="{{ hugo.Data.external.Artalk.Style }}">
+<link rel="stylesheet" href="{{ $style.RelPermalink }}">
+
+<div id="Comments" class="artalk-container"></div>
+
+<script type="module">
+    import Artalk from '{{ hugo.Data.external.Artalk.Script }}';
+
+    function isDarkMode() {
+        return document.documentElement.dataset.scheme === 'dark';
+    }
+
+    const artalkInstance = Artalk.init({
+        el: '#Comments',
+        pageKey: '{{ $.RelPermalink }}',
+        pageTitle: '{{ $.Title }}',
+        server: '{{ .serverUrl }}',
+        site: '{{ .site }}',
+        darkMode: isDarkMode(),
+        locale: 'auto',
+    });
+
+    window.addEventListener('onColorSchemeChange', (e) => {
+        if (!artalkInstance || typeof artalkInstance.setDarkMode !== 'function') return;
+        artalkInstance.setDarkMode(e.detail === 'dark');
+    });
+</script>
+{{- end -}}