add github discussions

Author: livensmi1e

astro.config.mjs

@@ -4,6 +4,7 @@ import remarkToc from "remark-toc";
 import remarkCollapse from "remark-collapse";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
+import react from '@astrojs/react';
 
 // https://astro.build/config
 export default defineConfig({
@@ -23,4 +24,5 @@ export default defineConfig({
       },
     },
   },
+  integrations: [react()],
 });

package.json

@@ -11,10 +11,15 @@
     "format": "prettier . --write"
   },
   "dependencies": {
+    "@astrojs/react": "^4.4.2",
     "@fontsource/inter": "^5.2.5",
+    "@giscus/react": "^3.1.0",
     "@tailwindcss/vite": "^4.1.11",
+    "@types/react-dom": "^19.2.3",
     "astro": "5.14.3",
     "photoswipe": "^5.4.4",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "rehype-katex": "^7.0.1",
     "remark-collapse": "^0.1.2",
     "remark-math": "^6.0.0",
@@ -24,6 +29,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
+    "@types/react": "^19.2.14",
     "globals": "^16.4.0",
     "prettier": "3.6.2",
     "prettier-plugin-astro": "0.14.1",

src/components/Comment.tsx

@@ -0,0 +1,20 @@
+import Giscus from '@giscus/react'
+
+const Comments = () => {
+  return (
+    <Giscus
+      repo="livensmi1e/space"
+      repoId="R_kgDONjwlNQ"
+      categoryId="DIC_kwDONjwlNc4C2rAt"
+      mapping="pathname"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="top"
+      lang="en"
+      loading="lazy"
+      strict="0"
+    />
+  )
+}
+
+export default Comments

src/components/Hero.astro

@@ -1,7 +1,7 @@
 <section class="hero">
     <p class="hero__title">~ My memories, my journey ~</p>
     <p class="hero__description">
-        This is place where I put my thoughts on life and post photos of sky on, beside my <a href="https://placetohidee.blogspot.com" target="_blank">first blog</a>.
+        This is place where I write tech posts and put photos on, beside my <a href="https://placetohidee.blogspot.com" target="_blank">first blog</a>.
     </p>
     <div class="hero__quote">
         <p class="quote">

src/layouts/Post.astro

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from "./Base.astro";
 import Markdown from "../components/Markdown.astro";
+import Comment from "../components/Comment.tsx";
 
 const notes = {
     "info": {
@@ -35,6 +36,7 @@ const { meta } = Astro.props;
         <Markdown>
             <slot />
         </Markdown>
+        <Comment client:only="react"/>
     </div>
 </BaseLayout>
 

tsconfig.json

@@ -1,5 +1,9 @@
 {
   "extends": "astro/tsconfigs/strict",
   "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
 }