feat: add Twikoo comments system

README.md

@@ -26,8 +26,8 @@ A minimalism, personal blog theme for Astro
 - [x] 🔗 Social media integration
 - [x] 📰 RSS feed & sitemap support
 - [x] 🛠️ Google analysis integration
+- [x] 💬 Commenting Integration (Twikoo)
 - [ ] 🔍 Local search functionality
-- [ ] 💬 Commenting Integration
 - [ ] 🎨 Enhance Transition and Animation
 - [ ] ...and more
 

package.json

@@ -28,6 +28,7 @@
     "react-dom": "^18.3.1",
     "sanitize-html": "^2.13.1",
     "tailwindcss": "^3.4.16",
+    "twikoo": "^1.6.40",
     "typescript": "^5.7.2"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -59,6 +59,9 @@ importers:
       tailwindcss:
         specifier: ^3.4.16
         version: 3.4.16
+      twikoo:
+        specifier: ^1.6.40
+        version: 1.6.40
       typescript:
         specifier: ^5.7.2
         version: 5.7.2
@@ -3322,6 +3325,9 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  twikoo@1.6.40:
+    resolution: {integrity: sha512-Rl1OZAij95/czD1oiwmTi4Om5yZeKNENqIR7Kq0SygEztV6w2423ac9PHbOXDZPYnvTJB9wqBapS2+AlKFWcfg==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -7613,6 +7619,8 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  twikoo@1.6.40: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1

src/components/astro/comments.astro

@@ -0,0 +1,13 @@
+---
+import Twikoo from "~/components/react/comment/twikoo.tsx"
+import { common } from "~/config"
+import "~/styles/comment.css"
+---
+
+<div class="relative z-10 my-10">
+  {
+    common.comments.enabled && common.comments.twikoo.enabled && (
+      <Twikoo client:only="react" />
+    )
+  }
+</div>

src/components/react/comment/twikoo.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from "react"
+// @ts-ignore
+import twikoo from "twikoo"
+import { common, defaultLanguage } from "~/config"
+
+const Twikoo = () => {
+  useEffect(() => {
+    twikoo({
+      envId: common.comments.twikoo.envId,
+      el: "#tcomment",
+      lang: defaultLanguage === "zh" ? "zh-CN" : "en-GB",
+    }).then(() => {
+      console.log("comment loading success")
+    })
+  }, [])
+
+  return <div id="tcomment" />
+}
+
+export default Twikoo

src/config/index.ts

@@ -33,6 +33,13 @@ export const common = {
     about: true,
   },
   latestPosts: 8,
+  comments: {
+    enabled: true,
+    twikoo: {
+      enabled: true,
+      envId: "https://astro-air-twikoo.netlify.app/.netlify/functions/twikoo",
+    },
+  },
 }
 
 export const zh = {

src/layouts/main.astro

@@ -1,19 +1,26 @@
 ---
+import Comments from "~/components/astro/comments.astro"
 import Header from "~/components/astro/header.astro"
 import Navigation from "~/components/astro/nav.astro"
 import BaseLayout from "~/layouts/base.astro"
 
-const { title, description, ogImage } = Astro.props
+const { title, description, ogImage, needComment } = Astro.props
 const filename = Astro.url.pathname.split("/").filter(Boolean).pop() ?? ""
 const openGraphImage = !ogImage ? `/og/${filename}.png` : ogImage
 ---
 
-<BaseLayout title={title} description={description} ogImage={openGraphImage}>
+<BaseLayout
+  title={title}
+  description={description}
+  ogImage={openGraphImage}
+  needComment={needComment}
+>
   <main class="max-auto mb-10 w-full max-w-3xl">
     <div class="relative z-10">
       <Header />
       <Navigation />
       <slot />
     </div>
+    {needComment && <Comments />}
   </main>
 </BaseLayout>

src/pages/[lang]/about/index.astro

@@ -15,7 +15,12 @@ const AboutContent = lang === "zh" ? AboutContentZh : AboutContentEn
 const ogImage = "https://sunguoqi.com/me.png"
 ---
 
-<MainLayout title="about" description="test" ogImage={ogImage}>
+<MainLayout
+  title="about"
+  description="test"
+  ogImage={ogImage}
+  needComment={true}
+>
   <div class="prose relative z-10 dark:prose-invert">
     <AboutContent />
   </div>

src/pages/[lang]/posts/[...slug].astro

@@ -1,5 +1,6 @@
 ---
 import { render } from "astro:content"
+import Comments from "~/components/astro/comments.astro"
 import { langs } from "~/i18n/ui"
 import { getLangFromUrl } from "~/i18n/utils"
 import MainLayout from "~/layouts/main.astro"
@@ -53,5 +54,6 @@ const { Content } = await render(post)
         ))
       }
     </div>
+    <Comments />
   </article>
 </MainLayout>

src/styles/comment.css

@@ -0,0 +1,7 @@
+.el-loading-spinner {
+  left: 50% !important;
+}
+
+.tk-admin-container {
+  height: 150% !important;
+}