From fce10c4e32ee57d14a74d3f0c0489fed355daa50 Mon Sep 17 00:00:00 2001 From: Guoqi Sun Date: Sun, 22 Dec 2024 20:27:11 +0800 Subject: [PATCH] feat: add Twikoo comments system --- README.md | 2 +- package.json | 1 + pnpm-lock.yaml | 8 ++++++++ src/components/astro/comments.astro | 13 +++++++++++++ src/components/react/comment/twikoo.tsx | 20 ++++++++++++++++++++ src/config/index.ts | 7 +++++++ src/layouts/main.astro | 11 +++++++++-- src/pages/[lang]/about/index.astro | 7 ++++++- src/pages/[lang]/posts/[...slug].astro | 2 ++ src/styles/comment.css | 7 +++++++ 10 files changed, 74 insertions(+), 4 deletions(-) create mode 100644 src/components/astro/comments.astro create mode 100644 src/components/react/comment/twikoo.tsx create mode 100644 src/styles/comment.css diff --git a/README.md b/README.md index 7e2df4b..592933a 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 9516e72..1be22e3 100644 --- a/package.json +++ b/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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a1b0fd1..ccc7f75 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/components/astro/comments.astro b/src/components/astro/comments.astro new file mode 100644 index 0000000..a7919aa --- /dev/null +++ b/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" +--- + +
+ { + common.comments.enabled && common.comments.twikoo.enabled && ( + + ) + } +
diff --git a/src/components/react/comment/twikoo.tsx b/src/components/react/comment/twikoo.tsx new file mode 100644 index 0000000..0920d35 --- /dev/null +++ b/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
+} + +export default Twikoo diff --git a/src/config/index.ts b/src/config/index.ts index c4f0bc3..06c3049 100644 --- a/src/config/index.ts +++ b/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 = { diff --git a/src/layouts/main.astro b/src/layouts/main.astro index 8359a94..1422dc5 100644 --- a/src/layouts/main.astro +++ b/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 --- - +
+ {needComment && }
diff --git a/src/pages/[lang]/about/index.astro b/src/pages/[lang]/about/index.astro index 8b16074..0e65868 100644 --- a/src/pages/[lang]/about/index.astro +++ b/src/pages/[lang]/about/index.astro @@ -15,7 +15,12 @@ const AboutContent = lang === "zh" ? AboutContentZh : AboutContentEn const ogImage = "https://sunguoqi.com/me.png" --- - +
diff --git a/src/pages/[lang]/posts/[...slug].astro b/src/pages/[lang]/posts/[...slug].astro index 7252a7a..35f810b 100644 --- a/src/pages/[lang]/posts/[...slug].astro +++ b/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) )) }
+ diff --git a/src/styles/comment.css b/src/styles/comment.css new file mode 100644 index 0000000..cbfc195 --- /dev/null +++ b/src/styles/comment.css @@ -0,0 +1,7 @@ +.el-loading-spinner { + left: 50% !important; +} + +.tk-admin-container { + height: 150% !important; +}