feat: add giscus

src/components/GiscusComment.tsx

@@ -0,0 +1,36 @@
+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='w-full'>
+			{mounted ? (
+				<Giscus
+					id={id}
+					repo='KazooTTT/kazoottt-blog'
+					repoId='R_kgDOMa4jRQ'
+					category='Announcements'
+					categoryId='DIC_kwDOMa4jRc4CjRFe'
+					mapping='pathname'
+					strict='0'
+					reactionsEnabled='1'
+					emitMetadata='0'
+					inputPosition='bottom'
+					theme='preferred_color_scheme'
+					lang='zh-CN'
+					loading='lazy'
+				/>
+			) : null}
+		</div>
+	)
+}
+
+export default GiscusComment

src/components/layout/Header.astro

@@ -7,7 +7,9 @@
 		class='relative mx-auto flex w-full items-center justify-between sm:flex sm:items-center'
 		aria-label='global'
 	>
-		<a class='flex-none text-xl font-semibold' href='/' aria-label='Brand'>KazooTTT</a>
+		<a class='hidden flex-none text-xl font-semibold sm:block' href='/' aria-label='Brand'>
+			KazooTTT
+		</a>
 
 		<div class='flex flex-row items-center justify-center gap-x-5 sm:gap-x-7'>
 			<a

src/pages/blog/[...page].astro

@@ -9,6 +9,7 @@ import Pagination from '@/components/Paginator.astro'
 import PostPreview from '@/components/blog/PostPreview.astro'
 import PageLayout from '@/layouts/BaseLayout.astro'
 import { getAllPosts, getUniqueCategories, getUniqueTags, sortMDByDate } from '@/utils'
+import GiscusComment from '@/components/GiscusComment'
 
 export const getStaticPaths = (async ({ paginate }) => {
 	const allPosts = await getAllPosts()
@@ -166,4 +167,5 @@ const paginationProps = {
 			)
 		}
 	</div>
+	<GiscusComment client:only='react' />
 </PageLayout>

src/pages/blog/[slug].astro

@@ -5,6 +5,7 @@ import type { GetStaticPaths, InferGetStaticPropsType } from 'astro'
 
 import PostLayout from '@/layouts/BlogPost.astro'
 import { getAllPosts } from '@/utils'
+import GiscusComment from '@/components/GiscusComment'
 
 export const getStaticPaths = (async () => {
 	const blogEntries = await getAllPosts()
@@ -22,4 +23,5 @@ const { Content } = await entry.render()
 
 <PostLayout post={entry}>
 	<Content />
+	<GiscusComment client:only='react' />
 </PostLayout>

src/pages/index.astro

@@ -12,6 +12,7 @@ import kazootttAvatar from '../assets/kazoottt-avatar.jpeg'
 
 import { getAllPosts, sortMDByDate } from '@/utils'
 import { Icon } from 'astro-icon/components'
+import GiscusComment from '@/components/GiscusComment'
 
 const frontend = ['react(熟悉)', 'vue2(了解)', 'next.js', 'tailwindcss']
 const backend = ['nodejs(熟悉)', 'python(了解)', 'elysiajs', 'nextjs', 'cloudflare d1', 'prisma']
@@ -130,4 +131,5 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
 			</div>
 		</Section>
 	</div>
+	<GiscusComment client:only='react' />
 </PageLayout>

src/pages/tools/index.astro

@@ -2,6 +2,7 @@
 import PageLayout from '@/layouts/BaseLayout.astro'
 import ToolSection from '@/components/ToolSection.astro'
 import Button from '@/components/Button.astro'
+import GiscusComment from '@/components/GiscusComment'
 
 const DESIGN = [
 	{
@@ -112,4 +113,5 @@ const Divices = [
 			<ToolSection title='Devices' tools={Divices} />
 		</div>
 	</div>
+	<GiscusComment client:only='react' />
 </PageLayout>

src/styles/app.css

@@ -15,7 +15,7 @@
 		--secondary: 240 4.8% 95.9%;
 		--secondary-foreground: 240 5.9% 10%;
 		--muted: 240 4.8% 95.9%;
-		--muted-foreground: 240 3.8% 46.1%;
+		--muted-foreground: 240 3.8% 20%;
 		--accent: 240 4.8% 95.9%;
 		--accent-foreground: 240 5.9% 10%;
 		--destructive: 0 72.22% 50.59%;