fix: client load

src/components/GiscusComment.tsx

@@ -1,18 +1,13 @@
+'use client'
+
 import React from 'react'
 import Giscus from '@giscus/react'
 
 const id = 'inject-comments'
 
 const GiscusComment = () => {
-	const [mounted, setMounted] = React.useState(false)
-
-	React.useEffect(() => {
-		setMounted(true)
-	}, [])
-
 	return (
 		<div id={id} className='mt-8 w-full'>
-			{mounted ? (
 			<Giscus
 				id={id}
 				repo='KazooTTT/kazoottt-blog'
@@ -28,7 +23,6 @@ const GiscusComment = () => {
 				lang='zh-CN'
 				loading='lazy'
 			/>
-			) : null}
 		</div>
 	)
 }

src/pages/blog/[slug].astro

@@ -23,5 +23,5 @@ const { Content } = await entry.render()
 
 <PostLayout post={entry}>
 	<Content />
-	<GiscusComment client:only='react' />
+	<GiscusComment client:only='react' client:load />
 </PostLayout>

src/pages/index.astro

@@ -211,5 +211,5 @@ const projects = [...directProjects, ...mdProjects].slice(0, MAX_PROJECTS)
 			</div>
 		</Section>
 	</div>
-	<GiscusComment client:only='react' />
+	<GiscusComment client:only='react' client:load />
 </PageLayout>

src/pages/tools/index.astro

@@ -14,7 +14,7 @@ const SOFTWARE_TOOLS = {
 					{
 						name: 'WindSurf',
 						description: 'AI-Powered IDE',
-            href: 'https://windsurf.app/',
+						href: 'https://windsurf.app/'
 					},
 					{
 						name: 'Cursor',
@@ -403,16 +403,10 @@ const DEVICES = {
 				<p>Tools, software, and devices I use daily</p>
 			</div>
 
-      <CategorySection 
+			<CategorySection title='Software Tools' categories={Object.values(SOFTWARE_TOOLS)} />
-        title="Software Tools" 
-        categories={Object.values(SOFTWARE_TOOLS)} 
-      />
 
-      <CategorySection 
+			<CategorySection title='Hardware Devices' categories={Object.values(DEVICES)} />
-        title="Hardware Devices" 
-        categories={Object.values(DEVICES)} 
-      />
 		</div>
 	</div>
-  <GiscusComment client:only='react' />
+	<GiscusComment client:only='react' client:load />
 </PageLayout>