Commit 693acd6

@@ -1,73 +0,0 @@
-<script>
-  import { asideConfig, commentConfig } from '@/config';
-  import {
-    cleanCommentHtml,
-    cleanPlaceholders,
-    createCommentItem,
-    getTemplate,
-  } from './utils.ts';
-
-  async function setup() {
-    const artalkConfig = commentConfig.artalk!;
-    const commentCount = asideConfig.recentComment.count;
-
-    const apiCommentUrl = new URL(
-      `api/v2/stats/latest_comments?limit=${commentCount}`,
-      artalkConfig.serverURL
-    ).toString();
-    const apiConfigUrl = new URL(`api/v2/conf`, artalkConfig.serverURL).toString();
-
-    const responseComment = fetch(apiCommentUrl, {
-      method: 'GET',
-    });
-    const responseConfig = fetch(apiConfigUrl, {
-      method: 'GET',
-    });
-    if (!(await responseComment).ok) {
-      throw new Error('Failed to fetch recent comments');
-    }
-    if (!(await responseConfig).ok) {
-      throw new Error('Failed to fetch comment config');
-    }
-
-    const commentData: {
-      id: number;
-      nick: string;
-      content_marked: string;
-      date: string;
-      email_encrypted: string;
-      page_url: string;
-    }[] = (await (await responseComment).json()).data;
-    const configData: {
-      gravatar: {
-        mirror: string;
-        params: string;
-      };
-    } = (await (await responseConfig).json()).frontend_conf;
-
-    const getAvatarUrl = (email: string) => {
-      return `${configData.gravatar.mirror}${email}?${configData.gravatar.params}`;
-    };
-
-    const { container, template } = getTemplate()!;
-    if (container && !template) {
-      // 说明已经加载完毕, 模板被删除了
-      return;
-    }
-
-    commentData.forEach((item) =>
-      createCommentItem(container, template!, {
-        avatarUrl: getAvatarUrl(item.email_encrypted),
-        commentContent: cleanCommentHtml(item.content_marked),
-        commentUrl: `${item.page_url}#atk-comment-${item.id}`,
-        author: item.nick,
-        time: new Date(item.date),
-      })
-    );
-
-    cleanPlaceholders(container, template!);
-  }
-
-  document.addEventListener('astro:page-load', setup);
-  await setup();
-</script>

@@ -0,0 +1,71 @@
+import {
+  cleanCommentHtml,
+  cleanPlaceholders,
+  createCommentItem,
+  getTemplate,
+} from './utils.ts';
+import { asideConfig, commentConfig } from '@/config';
+
+async function setup() {
+  const artalkConfig = commentConfig.artalk!;
+  const commentCount = asideConfig.recentComment.count;
+
+  const apiCommentUrl = new URL(
+    `api/v2/stats/latest_comments?limit=${commentCount}`,
+    artalkConfig.serverURL
+  ).toString();
+  const apiConfigUrl = new URL(`api/v2/conf`, artalkConfig.serverURL).toString();
+
+  const responseComment = fetch(apiCommentUrl, {
+    method: 'GET',
+  });
+  const responseConfig = fetch(apiConfigUrl, {
+    method: 'GET',
+  });
+  if (!(await responseComment).ok) {
+    throw new Error('Failed to fetch recent comments');
+  }
+  if (!(await responseConfig).ok) {
+    throw new Error('Failed to fetch comment config');
+  }
+
+  const commentData: {
+    id: number;
+    nick: string;
+    content_marked: string;
+    date: string;
+    email_encrypted: string;
+    page_url: string;
+  }[] = (await (await responseComment).json()).data;
+  const configData: {
+    gravatar: {
+      mirror: string;
+      params: string;
+    };
+  } = (await (await responseConfig).json()).frontend_conf;
+
+  const getAvatarUrl = (email: string) => {
+    return `${configData.gravatar.mirror}${email}?${configData.gravatar.params}`;
+  };
+
+  const { container, template } = getTemplate()!;
+  if (container && !template) {
+    // 说明已经加载完毕, 模板被删除了
+    return;
+  }
+
+  commentData.forEach((item) =>
+    createCommentItem(container, template!, {
+      avatarUrl: getAvatarUrl(item.email_encrypted),
+      commentContent: cleanCommentHtml(item.content_marked),
+      commentUrl: `${item.page_url}#atk-comment-${item.id}`,
+      author: item.nick,
+      time: new Date(item.date),
+    })
+  );
+
+  cleanPlaceholders(container, template!);
+}
+
+document.addEventListener('astro:page-load', setup);
+await setup();

@@ -1,55 +0,0 @@
-<script>
-  import { asideConfig, commentConfig } from '@/config';
-  import { loadScript } from '@/scripts/utils';
-  import { CDN } from '@constants/cdn.mjs';
-  import {
-    cleanCommentHtml,
-    cleanPlaceholders,
-    createCommentItem,
-    getTemplate,
-  } from './utils.ts';
-
-  const twikooConfig = commentConfig.twikoo!;
-
-  async function setup() {
-    const waitTwikoo = () => {
-      if (typeof twikoo === 'undefined') {
-        setTimeout(waitTwikoo, 100);
-      }
-    };
-
-    // 判断当前页面是否已经加载了 Twikoo 的脚本
-    // 如果没有加载，则动态加载
-    const twikooWrapper = document.getElementById('twikoo-wrap');
-    if (!twikooWrapper) {
-      await loadScript(CDN.twikoo);
-    }
-    waitTwikoo();
-
-    const recentComments = await twikoo.getRecentComments({
-      envId: twikooConfig.envId,
-      pageSize: asideConfig.recentComment.count,
-    });
-
-    const { container, template } = getTemplate()!;
-    if (container && !template) {
-      // 说明已经加载完毕, 模板被删除了
-      return;
-    }
-
-    recentComments.forEach((comment) =>
-      createCommentItem(container, template!, {
-        avatarUrl: comment.avatar,
-        commentContent: cleanCommentHtml(comment.comment),
-        commentUrl: `${comment.url}#${comment.id}`,
-        author: comment.nick,
-        time: new Date(comment.created),
-      })
-    );
-
-    cleanPlaceholders(container, template!);
-  }
-
-  document.addEventListener('astro:page-load', setup);
-  await setup();
-</script>

@@ -0,0 +1,53 @@
+import {
+  cleanCommentHtml,
+  cleanPlaceholders,
+  createCommentItem,
+  getTemplate,
+} from './utils.ts';
+import { asideConfig, commentConfig } from '@/config';
+import { loadScript } from '@/scripts/utils';
+import { CDN } from '@constants/cdn.mjs';
+
+const twikooConfig = commentConfig.twikoo!;
+
+async function setup() {
+  const waitTwikoo = () => {
+    if (typeof twikoo === 'undefined') {
+      setTimeout(waitTwikoo, 100);
+    }
+  };
+
+  // 判断当前页面是否已经加载了 Twikoo 的脚本
+  // 如果没有加载，则动态加载
+  const twikooWrapper = document.getElementById('twikoo-wrap');
+  if (!twikooWrapper) {
+    await loadScript(CDN.twikoo);
+  }
+  waitTwikoo();
+
+  const recentComments = await twikoo.getRecentComments({
+    envId: twikooConfig.envId,
+    pageSize: asideConfig.recentComment.count,
+  });
+
+  const { container, template } = getTemplate()!;
+  if (container && !template) {
+    // 说明已经加载完毕, 模板被删除了
+    return;
+  }
+
+  recentComments.forEach((comment) =>
+    createCommentItem(container, template!, {
+      avatarUrl: comment.avatar,
+      commentContent: cleanCommentHtml(comment.comment),
+      commentUrl: `${comment.url}#${comment.id}`,
+      author: comment.nick,
+      time: new Date(comment.created),
+    })
+  );
+
+  cleanPlaceholders(container, template!);
+}
+
+document.addEventListener('astro:page-load', setup);
+await setup();

@@ -1,63 +0,0 @@
-<script>
-  import { asideConfig, commentConfig } from '@/config';
-  import {
-    cleanCommentHtml,
-    cleanPlaceholders,
-    createCommentItem,
-    getTemplate,
-  } from './utils.ts';
-
-  async function setup() {
-    const walineConfig = commentConfig.waline!;
-    const commentCount = asideConfig.recentComment.count;
-    const apiUrl = `${walineConfig.serverURL}/api/comment?type=recent&count=${commentCount}`;
-
-    const response = await fetch(apiUrl, {
-      method: 'GET',
-    });
-    if (!response.ok) {
-      throw new Error('Failed to fetch recent comments');
-    }
-
-    const data: {
-      nick: string;
-      sticky: 0 | 1;
-      status: string;
-      link: string;
-      comment: string;
-      url: string;
-      user_id: string;
-      objectId: string;
-      browser: string;
-      os: string;
-      type: string;
-      label: string;
-      avatar: string;
-      orig: string;
-      addr: string;
-      like: number;
-      time: number;
-    }[] = (await response.json()).data;
-
-    const { container, template } = getTemplate()!;
-    if (container && !template) {
-      // 说明已经加载完毕, 模板被删除了
-      return;
-    }
-
-    data.forEach((item) =>
-      createCommentItem(container, template!, {
-        avatarUrl: item.avatar,
-        commentContent: cleanCommentHtml(item.comment),
-        commentUrl: `${item.url}#${item.objectId}`,
-        author: item.nick,
-        time: new Date(item.time),
-      })
-    );
-
-    cleanPlaceholders(container, template!);
-  }
-
-  document.addEventListener('astro:page-load', setup);
-  await setup();
-</script>

@@ -0,0 +1,61 @@
+import {
+  cleanCommentHtml,
+  cleanPlaceholders,
+  createCommentItem,
+  getTemplate,
+} from './utils.ts';
+import { asideConfig, commentConfig } from '@/config';
+
+async function setup() {
+  const walineConfig = commentConfig.waline!;
+  const commentCount = asideConfig.recentComment.count;
+  const apiUrl = `${walineConfig.serverURL}/api/comment?type=recent&count=${commentCount}`;
+
+  const response = await fetch(apiUrl, {
+    method: 'GET',
+  });
+  if (!response.ok) {
+    throw new Error('Failed to fetch recent comments');
+  }
+
+  const data: {
+    nick: string;
+    sticky: 0 | 1;
+    status: string;
+    link: string;
+    comment: string;
+    url: string;
+    user_id: string;
+    objectId: string;
+    browser: string;
+    os: string;
+    type: string;
+    label: string;
+    avatar: string;
+    orig: string;
+    addr: string;
+    like: number;
+    time: number;
+  }[] = (await response.json()).data;
+
+  const { container, template } = getTemplate()!;
+  if (container && !template) {
+    // 说明已经加载完毕, 模板被删除了
+    return;
+  }
+
+  data.forEach((item) =>
+    createCommentItem(container, template!, {
+      avatarUrl: item.avatar,
+      commentContent: cleanCommentHtml(item.comment),
+      commentUrl: `${item.url}#${item.objectId}`,
+      author: item.nick,
+      time: new Date(item.time),
+    })
+  );
+
+  cleanPlaceholders(container, template!);
+}
+
+document.addEventListener('astro:page-load', setup);
+await setup();

@@ -2,9 +2,6 @@
 import { asideConfig, commentConfig } from '@/config';
 import I18nKey from '@i18n/I18nKey';
 import { i18n } from '@i18n/translation';
-import ArtalkRecentCommentScript from './recent-comments/Artalk.astro';
-import TwikooRecentCommentScript from './recent-comments/Twikoo.astro';
-import WalineRecentCommentScript from './recent-comments/Waline.astro';
 ---
 
 <div id="recent-comments-card" class="card border-base-300 bg-base-200/25 border">
@@ -48,11 +45,11 @@ import WalineRecentCommentScript from './recent-comments/Waline.astro';
   (() => {
     switch (commentConfig.provider) {
       case 'twikoo':
-        return <TwikooRecentCommentScript />;
+        return <script src="recent-comments/Twikoo.ts" />;
       case 'waline':
-        return <WalineRecentCommentScript />;
+        return <script src="recent-comments/Waline.ts" />;
       case 'artalk':
-        return <ArtalkRecentCommentScript />;
+        return <script src="recent-comments/Artalk.ts" />;
       default:
         throw new Error(
           `Unsupported comment provider: '${commentConfig.provider}' for recent comments`