feat: add waline comment

src/components/Comments/Waline.astro

@@ -0,0 +1,37 @@
+---
+import { themeConfig } from '@/config'
+
+const {
+  serverURL = '',
+  emoji = [],
+  searchGif = false,
+  imageUploader = false,
+} = themeConfig.comment?.waline ?? {}
+---
+{serverURL && (
+  <>
+    <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
+    <div id="waline"></div>
+    <script
+      is:inline
+      type="module"
+      define:vars={{ serverURL, emoji, searchGif, imageUploader }}
+    >
+      import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js'
+
+      init({
+        el: '#waline',
+        serverURL,
+        lang: 'zh',
+        emoji,
+        dark: 'auto',
+        requiredMeta: ['nick'],
+        imageUploader: false,
+        highlighter: false,
+        texRenderer: false,
+        search: searchGif,
+        reaction: false,
+      })
+    </script>
+  </>
+)}

src/config.ts

@@ -42,12 +42,9 @@ export const themeConfig: ThemeConfig = {
   // COMMENT SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   comment: {
     waline: {
-      serverURL: '', // Waline server URL
-      emoji: [
-        '//unpkg.com/@waline/emojis@1.2.0/bmoji',
-        '//unpkg.com/@waline/emojis@1.2.0/weibo',
-      ], // see more at https://waline.js.org/guide/features/emoji.html
-      search: false, // whether to enable GIF search
+      serverURL: 'https://comment.radishzz.cc', // Waline server URL
+      emoji: ['https://unpkg.com/@waline/emojis@1.2.0/tw-emoji'], // see more at https://waline.js.org/en/guide/features/emoji.html
+      searchGif: false, // whether to enable GIF search
       imageUploader: false, // whether to enable image uploader
     },
   },
@@ -91,7 +88,7 @@ export const themeConfig: ThemeConfig = {
 
   // PRELOAD SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   preload: {
-    commentURL: '', // https://comment.example.com
+    commentURL: 'https://comment.radishzz.cc', // https://comment.example.com
     imageHostURL: 'https://image.radishzz.cc', // https://image.example.com
     // If you proxy analytics JavaScript to the custom domain, you can fill in below.
     // See more at https://gist.github.com/xiaopc/0602f06ca465d76bd9efd3dda9393738 and https://github.com/umami-software/umami/discussions/1026

src/layouts/Layout.astro

@@ -1,13 +1,13 @@
 ---
+import LanguageSwitcher from '@/components/Buttons/LanguageSwitcher.astro'
+// import PhotoSwipe from '@/components/PhotoSwipe.astro'
+// import Scrollbar from '@/components/Scrollbar.astro'
+import ThemeToggle from '@/components/Buttons/ThemeToggle.astro'
 // import BackToTop from '@/components/BackToTop.astro'
 import Footer from '@/components/Footer.astro'
-import LanguageSwitcher from '@/components/LanguageSwitcher.astro'
 import MainHeader from '@/components/MainHeader.astro'
 import MobileHeader from '@/components/MobileHeader.astro'
 import Navigation from '@/components/Navbar.astro'
-// import PhotoSwipe from '@/components/PhotoSwipe.astro'
-// import Scrollbar from '@/components/Scrollbar.astro'
-import ThemeToggle from '@/components/ThemeToggle.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
 import { getPagePath } from '@/utils/path'

src/pages/posts/[slug].astro

@@ -3,6 +3,7 @@ import Layout from '@/layouts/Layout.astro'
 import { checkSlugDuplication } from '@/utils/content'
 import { generatePostPaths } from '@/utils/i18n'
 import { getCollection } from 'astro:content'
+import Waline from '@/components/Comments/Waline.astro'
 
 export async function getStaticPaths() {
   const posts = await getCollection('posts')
@@ -35,7 +36,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
     </h1>
 
     <div
-      class="mb-15.5 block c-primary font-time"
+      class="mb-17 block c-primary font-time"
       transition:name={`time-${post.data.slug || post.slug}`}
       data-disable-transition-on-theme
     >
@@ -49,7 +50,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
     <Content />
 
     {post.data.tags && post.data.tags.length > 0 && (
-      <div class="mt-11.125">
+      <div class="mt-12.625">
         <div class="h-0.25 w-10 bg-secondary opacity-25"></div>
         <div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
           {post.data.tags.map(tag => (
@@ -64,15 +65,6 @@ const { Content, remarkPluginFrontmatter } = await post.render()
       </div>
     )}
   </article>
-</Layout>
 
-<!-- <script is:inline>
-function _handleBack(e) {
-  if (window.history.length > 2) {
-    e.preventDefault()
-    window.history.back()
-    return false
-  }
-  return true
-}
-</script> -->
+  <Waline />
+</Layout>

src/types/index.d.ts

@@ -40,7 +40,7 @@ export interface ThemeConfig {
     waline?: {
       serverURL?: string
       emoji?: string[]
-      search?: boolean
+      searchGif?: boolean
       imageUploader?: boolean
     }
   }