feat: support the discussion for each episode

README.md

@@ -24,7 +24,6 @@ pnpm dev
 - PWA
 - favicon
 - 搜索
-- 评论 (TBD)
 
 ## License
 

package.json

@@ -12,6 +12,7 @@
     "lint:fix": "eslint --ext .js,.ts,.vue . --fix"
   },
   "dependencies": {
+    "@giscus/vue": "^2.2.0",
     "@vueuse/core": "^9.3.0",
     "@vueuse/head": "^0.9.7",
     "date-fns": "^2.29.3",

src/components/episode-content.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Giscus from '@giscus/vue'
 import { getAllEpisode } from '../utils/episode'
 
 const episodes = getAllEpisode()
@@ -16,5 +17,22 @@ const episode = $computed(() => episodes.find((episode) => episode.id === id))
     </div>
 
     <component :is="episode.default" />
+
+    <Giscus
+      id="comments"
+      repo="opensource-f2f/website"
+      repo-id="R_kgDOH62a3Q="
+      category="General"
+      category-id="DIC_kwDOH62a3c4CR4dr"
+      mapping="pathname"
+      term="欢迎来到《开源面对面》"
+      reactions-enabled="1"
+      emit-metadata="0"
+      input-position="top"
+      theme="preferred_color_scheme"
+      lang="zh-CN"
+      crossorigin="anonymous"
+      loading="lazy"
+    />
   </div>
 </template>