feat: support Waline

astro.config.mjs

@@ -12,6 +12,7 @@ import { wrapCode } from './src/plugins/shiki-transformers.ts';
 import { rehypeHeadingIds } from '@astrojs/markdown-remark';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
+import vue from '@astrojs/vue';
 // import { transformerNotationDiff } from '@shikijs/transformers';
 // import { transformerNotationHighlight } from '@shikijs/transformers';
 import tailwindcss from '@tailwindcss/vite';
@@ -36,6 +37,7 @@ export default defineConfig({
     sitemap({ filter: (page) => !page.includes('/archives/') && !page.includes('/about/') }),
     pagefind(),
     mdx(),
+    vue(),
   ],
   markdown: {
     shikiConfig: {

package.json

@@ -17,6 +17,7 @@
     "@astrojs/mdx": "^4.1.0",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/vue": "^5.0.7",
     "@iconify-json/ic": "^1.2.2",
     "@iconify-json/material-symbols": "^1.2.14",
     "@iconify-json/mdi": "^1.2.3",
@@ -29,6 +30,7 @@
     "@swup/scripts-plugin": "^2.1.0",
     "@swup/scroll-plugin": "^3.3.2",
     "@tailwindcss/vite": "^4.0.9",
+    "@waline/client": "^3.5.5",
     "astro": "^5.4.1",
     "astro-compress": "2.3.5",
     "astro-icon": "^1.1.5",
@@ -56,7 +58,8 @@
     "swup": "^4.8.1",
     "tailwindcss": "^4.0.9",
     "typescript": "^5.7.3",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "vue": "^3.5.13"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",

src/components/Comment.astro

@@ -2,6 +2,7 @@
 import { commentConfig } from '@/config';
 import Giscus from '@components/comment/Giscus.astro';
 import Twikoo from '@components/comment/Twikoo.astro';
+import Waline from '@components/comment/Waline.astro';
 ---
 
 <div id="page-comment">
@@ -12,6 +13,8 @@ import Twikoo from '@components/comment/Twikoo.astro';
           return <Twikoo />;
         case 'giscus':
           return <Giscus />;
+        case 'waline':
+          return <Waline />;
       }
     })()
   }

src/components/comment/Waline.astro

@@ -0,0 +1,20 @@
+---
+import { commentConfig } from '@/config';
+import { Waline as WalineComponent } from '@waline/client/component';
+import '@waline/client/meta';
+import '@waline/client/style';
+
+const walineConfig = commentConfig.waline!;
+---
+
+<WalineComponent
+  serverURL={walineConfig.serverURL}
+  path="window.location.pathname"
+  dark={false}
+  meta={walineConfig.meta || ['nick', 'mail', 'link']}
+  requiredMeta={walineConfig.requiredMeta || []}
+  login={walineConfig.login || 'enable'}
+  wordLimit={walineConfig.wordLimit || 500}
+  pageSize={walineConfig.pageSize || 10}
+  reaction={walineConfig.reaction || false}
+/>

src/config.ts

@@ -164,8 +164,8 @@ export const searchConfig: SearchConfig = {
 };
 
 export const commentConfig: CommentConfig = {
-  enable: false,
+  enable: true,
-  provider: 'twikoo',
+  provider: 'waline',
   twikoo: {
     envId: 'your-env-id',
   },
@@ -176,4 +176,10 @@ export const commentConfig: CommentConfig = {
     categoryId: 'your-category-id',
     mapping: 'og:title',
   },
+  waline: {
+    serverURL: 'https://astral-halo-comment.netlify.app/.netlify/functions/comment',
+    wordLimit: 100, // Set a lower limit for demo site, to prevent abuse and save free database space cost.
+    pageSize: 10,
+    reaction: false,
+  },
 };

src/types/config.ts

@@ -438,7 +438,7 @@ export type CommentConfig = {
    *
    * 评论的提供者。
    */
-  provider: 'twikoo' | 'giscus';
+  provider: 'twikoo' | 'giscus' | 'waline';
   /**
    * The configuration of Twikoo.
    *
@@ -566,4 +566,75 @@ export type CommentConfig = {
      */
     lazyLoad?: boolean;
   };
+  /**
+   * The configuration of Waline.
+   *
+   * Waline 的配置。
+   *
+   * @see https://waline.js.org/
+   */
+  waline?: {
+    /**
+     * The server URL of Waline.
+     *
+     * Waline 的服务端地址。
+     *
+     * @see https://waline.js.org/reference/client/props.html#serverurl
+     */
+    serverURL: string;
+    /**
+     * Reviewer attributes of Waline.
+     *
+     * Waline 的评论者相关属性。
+     *
+     * @default ['nick', 'mail', 'link']
+     * @see https://waline.js.org/reference/client/props.html#meta
+     */
+    meta?: ('nick' | 'mail' | 'link')[];
+    /**
+     * Required reviewer attributes of Waline.
+     *
+     * Waline 的评论者必填属性。
+     *
+     * @default []
+     * @see https://waline.js.org/reference/client/props.html#requiredmeta
+     */
+    requiredMeta?: [] | ['nick'] | ['nick', 'mail'];
+    /**
+     * Whether to enable or force to login.
+     *
+     * 是否启用或强制登录。
+     *
+     * @default 'enable'
+     * @see https://waline.js.org/reference/client/props.html#login
+     */
+    login?: 'enable' | 'disable' | 'force';
+    /**
+     * The word limit of the comment.
+     *
+     * 评论的字数限制。
+     *
+     * @default 500
+     * @see https://waline.js.org/reference/client/props.html#wordlimit
+     */
+    wordLimit?: number;
+    /**
+     * The page size of the comments.
+     *
+     * 评论的分页大小。
+     *
+     * @default 10
+     * @see https://waline.js.org/reference/client/props.html#pagesize
+     */
+    pageSize?: number;
+    /**
+     * Whether to enable reactions.
+     *
+     * 是否启用表情。
+     *
+     * @default false
+     * @see https://waline.js.org/reference/client/props.html#reaction
+     */
+    reaction?: boolean | string[];
+  };
 };

tsconfig.json

@@ -11,16 +11,37 @@
       }
     ],
     "paths": {
-      "@assets/*": ["src/assets/*"],
+      "@assets/*": [
-      "@components/*": ["src/components/*"],
+        "src/assets/*"
-      "@constants/*": ["src/constants/*"],
+      ],
-      "@i18n/*": ["src/i18n/*"],
+      "@components/*": [
-      "@layouts/*": ["src/layouts/*"],
+        "src/components/*"
-      "@scripts/*": ["src/scripts/*"],
+      ],
-      "@utils/*": ["src/utils/*"],
+      "@constants/*": [
-      "@/*": ["src/*"]
+        "src/constants/*"
-    }
+      ],
+      "@i18n/*": [
+        "src/i18n/*"
+      ],
+      "@layouts/*": [
+        "src/layouts/*"
+      ],
+      "@scripts/*": [
+        "src/scripts/*"
+      ],
+      "@utils/*": [
+        "src/utils/*"
+      ],
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "jsx": "preserve"
   },
-  "include": ["src/**/*"],
+  "include": [
-  "exclude": ["dist"]
+    "src/**/*"
-}
+  ],
+  "exclude": [
+    "dist"
+  ]
+}