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>

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