feat: add comment

src/components/layout/Header.astro

@@ -31,8 +31,9 @@ import { menuLinks, siteConfig } from "@/site.config";
 					fill="#53C68C"></path>
 				<path d="M45.334 240 0 213.334v120L45.334 360V240Z" fill="#B04304"></path>
 			</svg>
-			<span class="text-xl font-bold sm:text-2xl">{siteConfig.title}</span>
 		</a>
+		<span class="text-xl font-bold sm:text-2xl">{siteConfig.title}</span>
+
 		<nav
 			aria-label="Main menu"
 			class="bg-global-bg/85 text-accent sm:divide-accent absolute -inset-x-4 top-14 hidden flex-col items-end gap-y-4 rounded-md py-4 shadow backdrop-blur-sm group-[.menu-open]:z-50 group-[.menu-open]:flex sm:static sm:z-auto sm:-ms-4 sm:mt-1 sm:flex sm:flex-row sm:items-center sm:divide-x sm:rounded-none sm:bg-transparent sm:py-0 sm:shadow-none sm:backdrop-blur-none"

src/components/note/Note.astro

@@ -2,7 +2,7 @@
 import { type CollectionEntry, render } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
 import type { HTMLTag, Polymorphic } from "astro/types";
-
+import GiscusComment from "@/components/componentsBefore/GiscusComment";
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 	note: CollectionEntry<"note">;
 	isPreview?: boolean | undefined;
@@ -52,4 +52,5 @@ const date = note.data.date_created ?? note.data.date;
 	>
 		<Content />
 	</div>
+	{!isPreview && <GiscusComment client:load />}
 </article>

src/components/tools/index.astro

@@ -376,6 +376,14 @@ const DEVICES = {
 		<div>
 			<h1 class="mb-1 text-2xl font-bold">Tools & Devices</h1>
 			<p>Tools, software, and devices I use daily</p>
+			<p>
+				more details in <a
+					class="cactus-link inline-block"
+					href="/posts/personal-tools-and-equipment-inventory-202502"
+					rel="noreferrer"
+					target="_blank">个人工具与设备清单</a
+				>
+			</p>
 		</div>
 
 		<CategorySection title="Software Tools" categories={Object.values(SOFTWARE_TOOLS)} />

src/layouts/BlogPost.astro

@@ -4,7 +4,7 @@ import { type CollectionEntry, render } from "astro:content";
 import Masthead from "@/components/blog/Masthead.astro";
 import TOC from "@/components/blog/TOC.astro";
 import WebMentions from "@/components/blog/webmentions/index.astro";
-
+import GiscusComment from "@/components/componentsBefore/GiscusComment";
 import BaseLayout from "./Base.astro";
 
 interface Props {
@@ -47,6 +47,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
 				<WebMentions />
 			</div>
 		</div>
+		<GiscusComment client:load />
 	</article>
 	<button
 		class="hover:border-link fixed end-4 bottom-8 z-90 flex h-10 w-10 translate-y-28 cursor-pointer items-center justify-center rounded-full border-2 border-transparent bg-zinc-200 text-3xl opacity-0 transition-all transition-discrete duration-300 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 sm:end-8 sm:h-12 sm:w-12 dark:bg-zinc-700"

src/pages/about.astro

@@ -1,6 +1,7 @@
 ---
 import PageLayout from "@/layouts/Base.astro";
 import Tools from "@/components/tools/index.astro";
+import GiscusComment from "@/components/componentsBefore/GiscusComment";
 const meta = {
 	description: "introduction for KazooTTT",
 	title: "About",
@@ -20,4 +21,5 @@ const meta = {
 	</div>
 
 	<Tools />
+	<GiscusComment client:load />
 </PageLayout>