feat: add waline comment

package.json

@@ -2,7 +2,7 @@
   "name": "astro-theme-retypeset",
   "type": "module",
   "version": "0.0.1",
-  "packageManager": "pnpm@10.5.0",
+  "packageManager": "pnpm@10.5.2",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
@@ -53,6 +53,7 @@
     "@unocss/eslint-plugin": "66.1.0-beta.3",
     "@unocss/preset-attributify": "66.1.0-beta.3",
     "@unocss/reset": "66.1.0-beta.3",
+    "@waline/client": "^3.5.5",
     "astro-eslint-parser": "^1.2.1",
     "eslint": "^9.21.0",
     "eslint-plugin-astro": "^1.3.1",

pnpm-lock.yaml

@@ -117,6 +117,9 @@ importers:
       '@unocss/reset':
         specifier: 66.1.0-beta.3
         version: 66.1.0-beta.3
+      '@waline/client':
+        specifier: ^3.5.5
+        version: 3.5.5(typescript@5.8.2)
       astro-eslint-parser:
         specifier: ^1.2.1
         version: 1.2.1
@@ -927,6 +930,9 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@typescript-eslint/eslint-plugin@8.26.0':
     resolution: {integrity: sha512-cLr1J6pe56zjKYajK6SSSre6nl1Gj6xDp1TY0trpgPzjVbgDwd09v2Ws37LABxzkicmUjhEeg/fAUjPJJB1v5Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1142,6 +1148,23 @@ packages:
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
+  '@vueuse/core@12.8.2':
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+
+  '@vueuse/metadata@12.8.2':
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+
+  '@vueuse/shared@12.8.2':
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+
+  '@waline/api@1.0.0':
+    resolution: {integrity: sha512-o0lWjt+/oZH1/4q3DJxTf5kdkgNbSmoLRXIiGznW225A6hq9/9IkOO1DiAijIsxGYJS6psFC+58+IzkD1EerBA==}
+    engines: {node: '>=18'}
+
+  '@waline/client@3.5.5':
+    resolution: {integrity: sha512-0SLrtBJ/WMuBkelN953X5zrPBTdt6mSt7CBfDcRsYb8mPWKZFix3BeAMwzEwbMWm0S+eCrGFT+4LVJxyb5iYJw==}
+    engines: {node: '>=18'}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1234,6 +1257,9 @@ packages:
     peerDependencies:
       '@astrojs/compiler': '>=0.27.0'
 
+  autosize@6.0.1:
+    resolution: {integrity: sha512-f86EjiUKE6Xvczc4ioP1JBlWG7FKrE13qe/DxBCpe8GCipCq2nFw73aO8QEBKHfSbYGDN5eB9jXWKen7tspDqQ==}
+
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
@@ -2390,6 +2416,16 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked-highlight@2.2.1:
+    resolution: {integrity: sha512-SiCIeEiQbs9TxGwle9/OwbOejHCZsohQRaNTY2u8euEXYt2rYUFoiImUirThU3Gd/o6Q1gHGtH9qloHlbJpNIA==}
+    peerDependencies:
+      marked: '>=4 <16'
+
+  marked@15.0.7:
+    resolution: {integrity: sha512-dgLIeKGLx5FwziAnsk4ONoGwHwGPJzselimvlVskE9XLN4Orv9u2VA3GWw/lYUqjfA0rUT/6fqKwfZJapP9BEg==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   mdast-util-definitions@6.0.0:
     resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==}
 
@@ -2889,6 +2925,9 @@ packages:
   reading-time@1.5.0:
     resolution: {integrity: sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==}
 
+  recaptcha-v3@1.11.3:
+    resolution: {integrity: sha512-sEE6J0RzUkS+sKEBpgCD/AqCU0ffrAVOADGjvAx9vcttN+VLK42SWMkj/J/I6vHu3Kew+xcfbBqDVb65N0QGDw==}
+
   recma-build-jsx@1.0.0:
     resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
 
@@ -4531,6 +4570,8 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@typescript-eslint/eslint-plugin@8.26.0(@typescript-eslint/parser@8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2))(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -4892,6 +4933,37 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
+  '@vueuse/core@12.8.2(typescript@5.8.2)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 12.8.2
+      '@vueuse/shared': 12.8.2(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.8.2)
+    transitivePeerDependencies:
+      - typescript
+
+  '@vueuse/metadata@12.8.2': {}
+
+  '@vueuse/shared@12.8.2(typescript@5.8.2)':
+    dependencies:
+      vue: 3.5.13(typescript@5.8.2)
+    transitivePeerDependencies:
+      - typescript
+
+  '@waline/api@1.0.0': {}
+
+  '@waline/client@3.5.5(typescript@5.8.2)':
+    dependencies:
+      '@vueuse/core': 12.8.2(typescript@5.8.2)
+      '@waline/api': 1.0.0
+      autosize: 6.0.1
+      marked: 15.0.7
+      marked-highlight: 2.2.1(marked@15.0.7)
+      recaptcha-v3: 1.11.3
+      vue: 3.5.13(typescript@5.8.2)
+    transitivePeerDependencies:
+      - typescript
+
   acorn-jsx@5.3.2(acorn@8.14.1):
     dependencies:
       acorn: 8.14.1
@@ -5125,6 +5197,8 @@ snapshots:
       '@astrojs/compiler': 2.10.4
       synckit: 0.9.2
 
+  autosize@6.0.1: {}
+
   axobject-query@4.1.0: {}
 
   bail@2.0.2: {}
@@ -6415,6 +6489,12 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
+  marked-highlight@2.2.1(marked@15.0.7):
+    dependencies:
+      marked: 15.0.7
+
+  marked@15.0.7: {}
+
   mdast-util-definitions@6.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -7211,6 +7291,8 @@ snapshots:
 
   reading-time@1.5.0: {}
 
+  recaptcha-v3@1.11.3: {}
+
   recma-build-jsx@1.0.0:
     dependencies:
       '@types/estree': 1.0.6

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
     }
   }