From dc5ca47b1d4c4ad329ebe9c85d8c8f981dd96a3c Mon Sep 17 00:00:00 2001
From: Erison Silva <hey@erison.work>
Date: Wed, 12 Mar 2025 10:04:09 -0300
Subject: [PATCH] docs: update giscus integration guide for AstroPaper v5
 (#472)

---
 src/data/blog/how-to-integrate-giscus-comments.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/data/blog/how-to-integrate-giscus-comments.md b/src/data/blog/how-to-integrate-giscus-comments.md
index 5058aed..99b3b1e 100644
--- a/src/data/blog/how-to-integrate-giscus-comments.md
+++ b/src/data/blog/how-to-integrate-giscus-comments.md
@@ -1,7 +1,7 @@
 ---
 author: FjellOverflow
 pubDatetime: 2024-07-25T11:11:53Z
-modDatetime: 2024-09-25T12:07:53Z
+modDatetime: 2025-03-12T12:28:53Z
 title: How to integrate Giscus comments into AstroPaper
 slug: how-to-integrate-giscus-comments
 featured: false
@@ -103,14 +103,14 @@ The embedded script tag in the layout is quite static, with the _Giscus_ configu
 Firstly, we are going to install the [React component](https://www.npmjs.com/package/@giscus/react) for _Giscus_:
 
 ```bash
-npm i @giscus/react
+npm i @giscus/react && npx astro add react
 ```
 
 Then we create a new `Comments.tsx` React component in `src/components`:
 
 ```tsx
 import Giscus, { type Theme } from "@giscus/react";
-import { GISCUS } from "@config";
+import { GISCUS } from "@/config";
 import { useEffect, useState } from "react";
 
 interface CommentsProps {
@@ -190,12 +190,14 @@ Note that specifying a `theme` here will override the `lightTheme` and `darkThem
 To complete the process, add the new Comments component to `src/layouts/PostDetails.astro` (replacing the `script` tag from the previous step).
 
 ```diff
-+ import Comments from "@components/Comments";
++ import Comments from "@/components/Comments";
 
       <ShareLinks />
     </div>
 
-+    <Comments client:only="react" />
++   <Comments client:only="react" />
+
+    <hr class="my-6 border-dashed" />
 
   </main>
   <Footer />