feat: add Giscus comments component to blog posts for enhanced user engagement

Author: TechWatching

app/components/GiscusComments.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Giscus from '@giscus/vue'
+
+const colorMode = useColorMode()
+const theme = computed(() => colorMode.value === 'dark' ? 'dark' : 'light')
+</script>
+
+<template>
+  <Giscus
+    repo="techwatching/techwatching.dev"
+    repo-id="R_kgDOGPrzmQ"
+    category="Announcements"
+    category-id="DIC_kwDOGPrzmc4B_fVQ"
+    mapping="pathname"
+    strict="0"
+    reactions-enabled="1"
+    emit-metadata="0"
+    input-position="top"
+    :theme="theme"
+    loading="lazy"
+    crossorigin="anonymous"
+  />
+</template>

app/pages/posts/[slug].vue

@@ -86,6 +86,8 @@ if (post.value.image?.src) {
         <USeparator v-if="surround?.length" />
 
         <UContentSurround :surround="surround" />
+
+        <GiscusComments />
       </UPageBody>
 
       <template