From 5f13ceb06a0f16fca4e902e6cdb7fb502eaeaa3c Mon Sep 17 00:00:00 2001
From: KazooTTT <turbopm@outlook.com>
Date: Sat, 8 Feb 2025 16:41:53 +0800
Subject: [PATCH] feat: Add content footer, update tools and layout components

---
 public/qrcode.png                  | Bin 0 -> 18106 bytes
 src/components/BaseHead.astro      |   4 +--
 src/components/ContentFooter.astro |  14 +++++++++
 src/components/layout/Footer.astro |  10 ++++++
 src/components/note/Note.astro     |   9 ++++++
 src/components/tools/index.astro   |  47 +++++++++++++++++++++--------
 src/layouts/BlogPost.astro         |   3 ++
 src/pages/about.astro              |   9 ++++--
 8 files changed, 80 insertions(+), 16 deletions(-)
 create mode 100644 public/qrcode.png
 create mode 100644 src/components/ContentFooter.astro

diff --git a/public/qrcode.png b/public/qrcode.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2b501829612bd8f6637d23ffcf21305c5203e91
GIT binary patch
literal 18106
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

literal 0
HcmV?d00001

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index bc0fecd..a70a46e 100644
--- a/src/components/BaseHead.astro
+++ b/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%;
diff --git a/src/components/ContentFooter.astro b/src/components/ContentFooter.astro
new file mode 100644
index 0000000..b471190
--- /dev/null
+++ b/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>
diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
index 5eea6e8..6b5a08c 100644
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -11,6 +11,16 @@ const year = new Date().getFullYear();
 		&copy; {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"
diff --git a/src/components/note/Note.astro b/src/components/note/Note.astro
index 5921b6f..75eb8f5 100644
--- a/src/components/note/Note.astro
+++ b/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>
diff --git a/src/components/tools/index.astro b/src/components/tools/index.astro
index a9c301d..5c6286f 100644
--- a/src/components/tools/index.astro
+++ b/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>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 3c049f8..a4081df 100644
--- a/src/layouts/BlogPost.astro
+++ b/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 />
diff --git a/src/pages/about.astro b/src/pages/about.astro
index a17f7c0..f5dda0c 100644
--- a/src/pages/about.astro
+++ b/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>