From 8e20106df5212c230bdfdeaf85770c90e9ed5295 Mon Sep 17 00:00:00 2001 From: Moeyua Date: Fri, 21 Jun 2024 19:53:34 +0800 Subject: [PATCH] feat: add comment component and comment configuration (#37) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ feat: Add comment component and comment configuration * chore: rebuild pnpm-lock --------- Co-authored-by: saicaca --- package.json | 3 +- pnpm-lock.yaml | 52 +++++++++++++++++++++++++++++ src/components/comment/Disqus.astro | 36 ++++++++++++++++++++ src/components/comment/Giscus.astro | 31 +++++++++++++++++ src/components/comment/Twikoo.astro | 19 +++++++++++ src/components/comment/index.astro | 30 +++++++++++++++++ src/config.ts | 24 +++++++++++++ src/pages/posts/[...slug].astro | 5 +++ src/types/config.ts | 33 ++++++++++++++++++ 9 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 src/components/comment/Disqus.astro create mode 100644 src/components/comment/Giscus.astro create mode 100644 src/components/comment/Twikoo.astro create mode 100644 src/components/comment/index.astro diff --git a/package.json b/package.json index b04997e3..c29e223a 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "colorjs.io": "^0.5.0", "hastscript": "^9.0.0", "markdown-it": "^14.1.0", + "giscus": "^1.5.0", "mdast-util-to-string": "^4.0.0", "overlayscrollbars": "^2.8.3", "pagefind": "^1.1.0", @@ -66,4 +67,4 @@ "sharp": "^0.33.0" } } -} +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cea6f41e..4b8bfd33 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,6 +48,9 @@ importers: colorjs.io: specifier: ^0.5.0 version: 0.5.0 + giscus: + specifier: ^1.5.0 + version: 1.5.0 hastscript: specifier: ^9.0.0 version: 9.0.0 @@ -1247,6 +1250,12 @@ packages: '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} + '@lit-labs/ssr-dom-shim@1.2.0': + resolution: {integrity: sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==} + + '@lit/reactive-element@2.0.4': + resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==} + '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -1641,6 +1650,9 @@ packages: '@types/tar@6.1.13': resolution: {integrity: sha512-IznnlmU5f4WcGTh2ltRu/Ijpmk8wiWXfF0VA4s+HPjHZgvFggk1YaIkbo5krX/zUCzWF8N/l4+W/LNxnvAJ8nw==} + '@types/trusted-types@2.0.7': + resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} + '@types/unist@2.0.10': resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==} @@ -2476,6 +2488,9 @@ packages: resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==} engines: {node: '>= 0.4'} + giscus@1.5.0: + resolution: {integrity: sha512-t3LL0qbSO3JXq3uyQeKpF5CegstGfKX/0gI6eDe1cmnI7D56R7j52yLdzw4pdKrg3VnufwCgCM3FDz7G1Qr6lg==} + github-slugger@2.0.0: resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==} @@ -2989,6 +3004,15 @@ packages: linkify-it@5.0.0: resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==} + lit-element@4.0.6: + resolution: {integrity: sha512-U4sdJ3CSQip7sLGZ/uJskO5hGiqtlpxndsLr6mt3IQIjheg93UKYeGQjWMRql1s/cXNOaRrCzC2FQwjIwSUqkg==} + + lit-html@3.1.4: + resolution: {integrity: sha512-yKKO2uVv7zYFHlWMfZmqc+4hkmSbFp8jgjdZY9vvR9jr4J8fH6FUMXhr+ljfELgmjpvlF7Z1SJ5n5/Jeqtc9YA==} + + lit@3.1.4: + resolution: {integrity: sha512-q6qKnKXHy2g1kjBaNfcoLlgbI3+aSOZ9Q4tiGa9bGYXq5RBXxkVTqTIVmP2VWMp29L4GyvCFm8ZQ2o56eUAMyA==} + load-yaml-file@0.2.0: resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==} engines: {node: '>=6'} @@ -5986,6 +6010,12 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.4.15 + '@lit-labs/ssr-dom-shim@1.2.0': {} + + '@lit/reactive-element@2.0.4': + dependencies: + '@lit-labs/ssr-dom-shim': 1.2.0 + '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -6430,6 +6460,8 @@ snapshots: '@types/node': 20.14.7 minipass: 4.2.8 + '@types/trusted-types@2.0.7': {} + '@types/unist@2.0.10': {} '@types/unist@3.0.2': {} @@ -7509,6 +7541,10 @@ snapshots: es-errors: 1.3.0 get-intrinsic: 1.2.4 + giscus@1.5.0: + dependencies: + lit: 3.1.4 + github-slugger@2.0.0: {} glob-parent@5.1.2: @@ -8034,6 +8070,22 @@ snapshots: dependencies: uc.micro: 2.1.0 + lit-element@4.0.6: + dependencies: + '@lit-labs/ssr-dom-shim': 1.2.0 + '@lit/reactive-element': 2.0.4 + lit-html: 3.1.4 + + lit-html@3.1.4: + dependencies: + '@types/trusted-types': 2.0.7 + + lit@3.1.4: + dependencies: + '@lit/reactive-element': 2.0.4 + lit-element: 4.0.6 + lit-html: 3.1.4 + load-yaml-file@0.2.0: dependencies: graceful-fs: 4.2.11 diff --git a/src/components/comment/Disqus.astro b/src/components/comment/Disqus.astro new file mode 100644 index 00000000..e48d1ee5 --- /dev/null +++ b/src/components/comment/Disqus.astro @@ -0,0 +1,36 @@ +--- +import { commentConfig } from '@/config' +interface Props { + identifier: string + url: string + title: string +} + +const { identifier, url, title } = Astro.props + +if (!commentConfig || !commentConfig.disqus) { + throw new Error('Disqus comments are not configured') +} +const shortname = commentConfig.disqus.shortname +--- + +
+ + + + diff --git a/src/components/comment/Giscus.astro b/src/components/comment/Giscus.astro new file mode 100644 index 00000000..4fb6c5be --- /dev/null +++ b/src/components/comment/Giscus.astro @@ -0,0 +1,31 @@ +--- +import { commentConfig } from '@/config' + +if (!commentConfig || !commentConfig.giscus) { + throw new Error('Giscus comments are not configured') +} + +const giscus = commentConfig.giscus +--- + + + + + diff --git a/src/components/comment/Twikoo.astro b/src/components/comment/Twikoo.astro new file mode 100644 index 00000000..f41c9bb3 --- /dev/null +++ b/src/components/comment/Twikoo.astro @@ -0,0 +1,19 @@ +--- +import { commentConfig } from '@/config' + +interface Props { + path: string +} + +const config = { + ...commentConfig.twikoo, + el: '#tcomment', + path: Astro.props.path, +} +--- + +
+ + diff --git a/src/components/comment/index.astro b/src/components/comment/index.astro new file mode 100644 index 00000000..baea0fbc --- /dev/null +++ b/src/components/comment/index.astro @@ -0,0 +1,30 @@ +--- +import type { CollectionEntry } from 'astro:content' +import { commentConfig } from '@/config' +import Disqus from './Disqus.astro' +import Giscus from './Giscus.astro' +import Twikoo from './Twikoo.astro' +interface Props { + post: CollectionEntry<'posts'> +} + +const { id, data, slug } = Astro.props.post + +const path = `/posts/${slug}` +const url = `${Astro.site?.href}${path}` + +let commentService = '' +if (commentConfig?.disqus) { + commentService = 'disqus' +} else if (commentConfig?.giscus) { + commentService = 'giscus' +} else if (commentConfig?.twikoo) { + commentService = 'twikoo' +} +--- +
+ {commentService === 'disqus' && } + {commentService === 'giscus' && } + {commentService === 'twikoo' && } + {commentService === '' && null} +
diff --git a/src/config.ts b/src/config.ts index 05d8e431..eee76bec 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,4 +1,5 @@ import type { + CommentConfig, LicenseConfig, NavBarConfig, ProfileConfig, @@ -71,3 +72,26 @@ export const licenseConfig: LicenseConfig = { name: 'CC BY-NC-SA 4.0', url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/', } + +export const commentConfig: CommentConfig = { + disqus: { + shortname: 'fuwari', + }, + // giscus: { + // repo: 'moeyua/fuwari', + // repoId: 'R_kgDOKy9HOQ', + // category: 'General', + // categoryId: 'DIC_kwDOKy9HOc4CegmW', + // mapping: 'title', + // strict: '0', + // reactionsEnabled: '1', + // emitMetadata: '1', + // inputPosition: 'top', + // theme: 'light', + // lang: 'zh-CN', + // loading: 'lazy', + // }, + // twikoo: { + // envId: 'https://twikoo-tau-flame.vercel.app', + // }, +} diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro index 20bbe8cf..4967383e 100644 --- a/src/pages/posts/[...slug].astro +++ b/src/pages/posts/[...slug].astro @@ -13,6 +13,7 @@ import Markdown from "@components/misc/Markdown.astro"; import path from "path"; import {profileConfig} from "../../config"; import {formatDateToYYYYMMDD} from "../../utils/date-utils"; +import Comment from "@components/comment/index.astro" export async function getStaticPaths() { const blogEntries = await getCollection('posts', ({ data }) => { @@ -107,6 +108,10 @@ const jsonLd = { + + + +
{entry.data.nextSlug &&
diff --git a/src/types/config.ts b/src/types/config.ts index 0e7aff9c..dd62faae 100644 --- a/src/types/config.ts +++ b/src/types/config.ts @@ -1,3 +1,4 @@ +import type Giscus from 'giscus' import type { LIGHT_MODE, DARK_MODE, AUTO_MODE } from "@constants/constants" export type SiteConfig = { @@ -59,3 +60,35 @@ export type LicenseConfig = { } export type LIGHT_DARK_MODE = typeof LIGHT_MODE | typeof DARK_MODE | typeof AUTO_MODE + +export type CommentConfig = { + twikoo?: TwikooConfig + disqus?: DisqusConfig + giscus?: GiscusConfig +} + +type TwikooConfig = { + envId: string + region?: string + lang?: string +} + +type DisqusConfig = { + shortname: string +} + +type GiscusConfig = { + repo: Giscus.Repo + repoId?: string + category?: string + categoryId?: string + mapping?: Giscus.Mapping + term?: string + strict: Giscus.BooleanString + reactionsEnabled: Giscus.BooleanString + emitMetadata: Giscus.BooleanString + inputPosition: Giscus.InputPosition + theme: Giscus.Theme + lang: Giscus.AvailableLanguage + loading: Giscus.Loading +}