feat: add comment component and comment configuration (#37)

* ✨ feat: Add comment component and comment configuration

* chore: rebuild pnpm-lock

---------

Co-authored-by: saicaca <zephyird@gmail.com>

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"
     }
   }
-}
+}

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

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
+---
+
+<div id="disqus_thread"></div>
+
+<script is:inline define:vars={{ shortname, identifier, url, title }}>
+  // @ts-ignore
+  var disqus_config = function () {
+    this.page.url = url
+    this.page.identifier = identifier
+    this.page.title = title
+  }
+
+  ;(function () {
+    var d = document,
+      s = d.createElement('script')
+    s.src = 'https://' + shortname + '.disqus.com/embed.js'
+    s.setAttribute('data-timestamp', new Date().toString())
+    ;(d.head || d.body).appendChild(s)
+  })()
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<style is:global></style>

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
+---
+
+<giscus-widget
+  id="comments"
+  repo={giscus.repo}
+  repoId={giscus.repoId}
+  category={giscus.category}
+  categoryId={giscus.categoryId}
+  mapping={giscus.mapping}
+  term={giscus.term}
+  strict={giscus.strict}
+  reactionsEnabled={giscus.reactionsEnabled}
+  emitMetadata={giscus.emitMetadata}
+  inputPosition={giscus.inputPosition}
+  theme={giscus.theme}
+  lang={giscus.lang}
+  loading={giscus.loading}
+>
+</giscus-widget>
+
+<script>
+  import 'giscus'
+</script>

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,
+}
+---
+
+<div id="tcomment"></div>
+<script is:inline src="https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js"></script>
+<script is:inline define:vars={{ config }}>
+  twikoo.init(config)
+</script>

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'
+}
+---
+<div class="card-base p-6 mb-4">
+  {commentService === 'disqus' && <Disqus identifier={id} url={url} title={data.title} />}
+  {commentService === 'giscus' && <Giscus />}
+  {commentService === 'twikoo' && <Twikoo path={path} />}
+  {commentService === '' && null}
+</div>

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',
+  // },
+}

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 = {
         </div>
     </div>
 
+
+    <Comment post={entry}></Comment>
+
+
     <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
         <a href={getPostUrlBySlug(entry.data.nextSlug)} class="w-full font-bold overflow-hidden active:scale-95">
             {entry.data.nextSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center justify-start gap-4" >

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
+}