feat: Add content footer, update tools and layout components

src/components/BaseHead.astro

@@ -128,12 +128,12 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
 		width: 100%;
 	}
 	/* 确保所有图片不会溢出容器 */
-	img {
+	.prose img {
 		margin-left: auto;
 		margin-right: auto;
 		max-width: 100%;
 	}
-	iframe {
+	.prose iframe {
 		margin-left: auto;
 		margin-right: auto;
 		max-width: 100%;

src/components/ContentFooter.astro

@@ -0,0 +1,14 @@
+<div class="mt-12 border-t border-gray-200 pt-8">
+	<div class="flex flex-col items-center space-y-2">
+		<div class="text-sm text-gray-600">感谢阅读到这里，期待收到更多的反馈</div>
+		<div class="flex flex-col items-center gap-y-1">
+			<div class="text-xs text-gray-800">欢迎关注公众号</div>
+			<div>kazoottt</div>
+			<img
+				src="https://pictures.kazoottt.top/2025/02/20250208-be1adbf7a54795ed26312929bb6c6786.png"
+				alt="公众号二维码"
+				class="!my-0 h-36 w-36 rounded shadow transition-shadow duration-300 hover:shadow-lg"
+			/>
+		</div>
+	</div>
+</div>

src/components/layout/Footer.astro

@@ -11,6 +11,16 @@ const year = new Date().getFullYear();
 		© {siteConfig.author}
 		{year}.<span class="inline-block">&nbsp;🚀&nbsp;{siteConfig.title}</span>
 	</div>
+	<div class="group relative flex items-center gap-x-2">
+		<div class="absolute bottom-6 left-0 hidden group-hover:block">
+			<img
+				src="https://pictures.kazoottt.top/2025/02/20250208-be1adbf7a54795ed26312929bb6c6786.png"
+				alt="公众号"
+				class="h-24 w-24"
+			/>
+		</div>
+		<div>公众号：kazoottt</div>
+	</div>
 	<nav
 		aria-labelledby="footer_links"
 		class="flex gap-x-2 sm:gap-x-0 sm:divide-x sm:divide-gray-500"

src/components/note/Note.astro

@@ -5,6 +5,7 @@ import type { HTMLTag, Polymorphic } from "astro/types";
 import GiscusComment from "@/components/componentsBefore/GiscusComment";
 import ArticleContainer from "../ArticleContainer.astro";
 import ShareButtons from "../ShareButtons.astro";
+import ContentFooter from "../ContentFooter.astro";
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 	note: CollectionEntry<"note">;
 	isPreview?: boolean | undefined;
@@ -78,4 +79,12 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
 			</div>
 		)
 	}
+	{
+		!isPreview && (
+			<div class="mt-8 border-t pt-4">
+				<ShareButtons />
+			</div>
+		)
+	}
+	{!isPreview && <ContentFooter />}
 </ArticleContainer>

src/components/tools/index.astro

@@ -1,6 +1,12 @@
 ---
 import CategorySection from "@/components/componentsBefore/CategorySection.astro";
 
+type Props = {
+	enableCollapse?: boolean;
+	defaultOpen?: boolean;
+};
+const { enableCollapse = false, defaultOpen = false } = Astro.props;
+
 const SOFTWARE_TOOLS = {
 	development: {
 		title: "Development",
@@ -372,21 +378,38 @@ const DEVICES = {
 ---
 
 <div class="w-full">
-	<div class="mt-5 flex w-full flex-col gap-y-10">
+	<div class="mt-5 flex w-full flex-col gap-y-4">
 		<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 class="prose prose-base prose-cactus max-w-none">
+				<p>
+					Tools, software, and devices I use daily. more details in <a
+						class="cactus-link inline-block"
+						href="/posts/personal-tools-and-equipment-inventory-202502"
+						rel="noreferrer"
+						target="_blank">个人工具与设备清单</a
+					>
+				</p>
+			</div>
 		</div>
 
-		<CategorySection title="Software Tools" categories={Object.values(SOFTWARE_TOOLS)} />
-		<CategorySection title="Hardware Devices" categories={Object.values(DEVICES)} />
+		{
+			enableCollapse ? (
+				<details open={defaultOpen}>
+					<summary class="cursor-pointer">
+						<span class="">查看详细列表</span>
+					</summary>
+					<div class="mt-4">
+						<CategorySection title="Software Tools" categories={Object.values(SOFTWARE_TOOLS)} />
+						<CategorySection title="Hardware Devices" categories={Object.values(DEVICES)} />
+					</div>
+				</details>
+			) : (
+				<>
+					<CategorySection title="Software Tools" categories={Object.values(SOFTWARE_TOOLS)} />
+					<CategorySection title="Hardware Devices" categories={Object.values(DEVICES)} />
+				</>
+			)
+		}
 	</div>
 </div>

src/layouts/BlogPost.astro

@@ -8,6 +8,7 @@ import GiscusComment from "@/components/componentsBefore/GiscusComment";
 import BaseLayout from "./Base.astro";
 import ArticleContainer from "@/components/ArticleContainer.astro";
 import ShareButtons from "@/components/ShareButtons.astro";
+import ContentFooter from "@/components/ContentFooter.astro";
 
 interface Props {
 	post: CollectionEntry<"post">;
@@ -51,6 +52,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
 				>
 					<slot />
 					<WebMentions />
+					<ContentFooter />
 					<GiscusComment client:load />
 					<div class="mt-8 border-t pt-4">
 						<ShareButtons />
@@ -73,6 +75,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
 				<WebMentions />
 			</div>
 		</div>
+		<ContentFooter />
 		<GiscusComment client:load />
 		<div class="mt-8 border-t pt-4">
 			<ShareButtons />

src/pages/about.astro

@@ -2,6 +2,8 @@
 import PageLayout from "@/layouts/Base.astro";
 import Tools from "@/components/tools/index.astro";
 import GiscusComment from "@/components/componentsBefore/GiscusComment";
+import SocialList from "@/components/SocialList.astro";
+import ContentFooter from "@/components/ContentFooter.astro";
 const meta = {
 	description: "introduction for KazooTTT",
 	title: "About",
@@ -11,7 +13,8 @@ const meta = {
 <PageLayout meta={meta}>
 	<h1 class="title mb-6">About</h1>
 	<div class="prose prose-base prose-cactus max-w-none">TODO ...</div>
-	<div class="mt-2">
+
+	<div class="my-2">
 		<a href="https://wakatime.com/@d3dc2570-e4bf-4469-b0c2-127b495e8b91"
 			><img
 				src="https://wakatime.com/badge/user/d3dc2570-e4bf-4469-b0c2-127b495e8b91.svg"
@@ -20,6 +23,8 @@ const meta = {
 		>
 	</div>
 
-	<Tools />
+	<SocialList />
+	<Tools enableCollapse={true} defaultOpen={false} />
+	<ContentFooter />
 	<GiscusComment client:load />
 </PageLayout>