chore(deps-dev): bump tailwindcss from 4.0.7 to 4.1.5

Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss) from 4.0.7 to 4.1.5.
- [Release notes](https://github.com/tailwindlabs/tailwindcss/releases)
- [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/tailwindlabs/tailwindcss/commits/v4.1.5/packages/tailwindcss)

---
updated-dependencies:
- dependency-name: tailwindcss
  dependency-version: 4.1.5
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/main.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Pull in dev.to posts
         uses: gautamkrishnar/blog-post-workflow@v1
         with:
-          template: $newline - [$date 【$categories】 $title]($url)
+          template: $newline - [$date $title]($url)
           date_format: "yyyy-mm-dd"
           feed_list: "https://blog.kazoottt.top/rss.xml"
           max_post_count: 25

README.md

@@ -1,52 +1,13 @@
-# KazooTTT | 声控烤箱 博客
+# KazooTTT 博客
 
-## [Blog](https://blog.kazoottt.top/posts/)
-<!-- BLOG-POST-LIST:START -->
- - [2025-02-16 【周报】 2025-W07](https://blog.kazoottt.top/posts/2025-W07/)
- - [2025-02-09 【周报】 2025-W06](https://blog.kazoottt.top/posts/2025-W06/)
- - [2025-02-09 【前端】 不引入astro wiki plugin实现链接跳转的思路](https://blog.kazoottt.top/posts/redirect-links-without-astro-wiki-plugin/)
- - [2025-02-06 【软件】 Obsidian Web Clipper 离线阅读同人作品](https://blog.kazoottt.top/posts/obsidian-web-clipper-offline-reading-fanfics/)
- - [2025-02-01 【软件】 封面生成器推荐](https://blog.kazoottt.top/posts/cover-generator/)
- - [2025-01-30 【年报】 Y5-2024年度总结](https://blog.kazoottt.top/posts/2024-annual-summary/)
- - [2025-01-14 【frontend】 how to generate the path like router config in vite + react + react-router project](https://blog.kazoottt.top/posts/how-to-generate-the-path-like-router-config-in-vite-react-react-router-project/)
- - [2025-01-12 【随笔】 原来亲人在侧，是我最深重的感谢](https://blog.kazoottt.top/posts/plain-and-simple-is-true/)
- - [2025-01-07 【随笔】 ollama + excel 处理器开发总结](https://blog.kazoottt.top/posts/ollama-excel-processor-development-summary/)
- - [2025-01-06 【项目】 MUV家元旦24H限定食堂 - 汇总网站](https://blog.kazoottt.top/posts/milklovemuv/)
- - [2024-12-19 【推荐】 值得一看的博客](https://blog.kazoottt.top/posts/blogs-worth-reading/)
- - [2024-12-18 【】 与hanser有关的github仓库](https://blog.kazoottt.top/posts/hanser-repository/)
- - [2024-12-17 【】 Share My Incorrect Usage Cases of Zustand](https://blog.kazoottt.top/posts/share-my-incorrect-usage-case-of-zustand-en/)
- - [2024-12-17 【前端】 分享一下我的zustand错误使用案例](https://blog.kazoottt.top/posts/zustand-use-record/)
- - [2024-12-11 【】 raycast + imessage 2fa，messauto的半平替](https://blog.kazoottt.top/posts/raycast-imessage-2fa/)
- - [2024-11-29 【】 使用github action定时同步obsidian内容到astro博客仓库](https://blog.kazoottt.top/posts/synchronize-profiles-to-remote-and-local-on-a-regular-basis/)
- - [2024-11-23 【软件】 个人工具与设备清单202502](https://blog.kazoottt.top/posts/personal-tools-and-equipment-inventory-202502/)
- - [2024-11-12 【旅行】 五一 上海-重庆-成都流水账](https://blog.kazoottt.top/posts/may-1st-shanghai-chongqing-chengdu-flow-account/)
- - [2024-09-02 【旅行】 2024 小缘永不完结的冒险 武汉线下vlog](https://blog.kazoottt.top/posts/yukari-2024-live/)
- - [2024-07-30 【项目】 微信读书网页版复制快捷键](https://blog.kazoottt.top/posts/wechat-reading-web-version-copy-shortcut/)
- - [2024-07-17 【旅行】 2024 BW记录-个人向流水账版](https://blog.kazoottt.top/posts/bw-record-personal-notes/)
- - [2024-07-11 【周报】 2024-W03](https://blog.kazoottt.top/posts/2024-W03/)
- - [2024-07-11 【周报】 2024-W03-编程篇](https://blog.kazoottt.top/posts/2024-W03-programming/)
- - [2024-07-11 【周报】 2023-W48](https://blog.kazoottt.top/posts/2023-W48/)
- - [2024-07-08 【旅行】 2024 端午去广州玩了](https://blog.kazoottt.top/posts/duanwu-guangzhou-trip/)<!-- BLOG-POST-LIST:END -->
+## 关于我
 
-## [Memos](https://blog.kazoottt.top/notes/)
-<!-- MEMO-POST-LIST:START -->
- - [2025-02-19 2024-10-21 11分17秒 使用飞书来记账](https://blog.kazoottt.top/notes/fragmented-notes-2025-02-19-21-08-36/)
- - [2025-02-19 2024-10-28 18分05秒 craft收费](https://blog.kazoottt.top/notes/fragmented-notes-2025-02-19-21-11-13/)
- - [2025-02-19 241029 1144 vite环境变量](https://blog.kazoottt.top/notes/fragmented-notes-2025-02-19-21-11-25/)
- - [2025-02-19 碎片-2025-02-19 17时30分 You Should Use Hono in your Next Projec](https://blog.kazoottt.top/notes/fragmented-notes-2025-02-19-17-30-55/)
- - [2025-02-17 碎片-2025-02-17 10时55分 做事设计](https://blog.kazoottt.top/notes/fragmented-notes-2025-02-17-10-55-29/)
- - [2025-02-16 2024-10-25 13分02秒 Vintage Camera Lab](https://blog.kazoottt.top/notes/fragmented-notes-2025-02-16-23-41-18/)
- - [2025-02-14 碎片-2025-02-14 15时00分 状态没变更？记录一次没阻止冒泡导致的bug](https://blog.kazoottt.top/notes/fragmented-notes-2025-02-14-15-00-49/)
- - [2025-02-14 碎片-2025-02-14 15时18分 飞书 excalidraw画图对比](https://blog.kazoottt.top/notes/fragmented-notes-2025-02-14-15-18-56/)
- - [2025-02-11 碎片-2025-02-11 12时32分](https://blog.kazoottt.top/notes/fragmented-notes-2025-02-11-12-32-42/)
- - [2025-02-08 如何解决 Nginx 启动时未联网无法访问DNS而挂掉的问题](https://blog.kazoottt.top/notes/nginx-startup-fix-configure-local-hosts-file/)
- - [2025-02-06 小红书长文切图笔记？其实 craft 就可以实现。](https://blog.kazoottt.top/notes/use-craft-to-cut-the-long-text-note-of-xiaohongshu/)
- - [2025-02-06 试试action5 pro推流到本地rtmp和有线连接的效果](https://blog.kazoottt.top/notes/action5-pro-obs-rtmp/)
- - [2025-02-05 askfm的关停](https://blog.kazoottt.top/notes/askfm-shutdown/)
- - [2025-02-05 使用 1password 的 secure notes 存储提示词](https://blog.kazoottt.top/notes/use-1password-secure-notes-to-store-prompt-templates/)
- - [2025-02-03 记录一次滴滴打车维权](https://blog.kazoottt.top/notes/record-a-ride-sharing-complaint/)
- - [2025-01-31 Blender on macOS - Steam Version Limitations for Apple Silicon Devices](https://blog.kazoottt.top/notes/blender-macos-steam-version-limitations/)
- - [2025-01-31 how to split window in blender](https://blog.kazoottt.top/notes/split-window-in-blender/)
- - [2025-01-20 how to separate object in blender](https://blog.kazoottt.top/notes/how-to-separate-object-in-blender/)
- - [2025-01-20 win11如何下载chatgpt](https://blog.kazoottt.top/notes/win11chatgpt/)
- - [2025-01-15 how to make a hollow cylinder in blender](https://blog.kazoottt.top/notes/how-to-make-a-hollow-cylinder-in-blender/)<!-- MEMO-POST-LIST:END -->
+无论是博客还是笔记，最重要的服务对象是我自己。
+
+[平台合集](https://bento.me/kazoottt)
+
+[个人博客｜Blog](https://blog.kazoottt.top/)
+
+[个人笔记 ｜ Notes](https://notes.kazoottt.top/)
+
+[GitHub](https://github.com/KazooTTT)

package.json

@@ -21,7 +21,7 @@
 		"@astrojs/rss": "4.0.11",
 		"@astrojs/sitemap": "3.2.1",
 		"@giscus/react": "^3.1.0",
-		"@tailwindcss/vite": "4.0.3",
+		"@tailwindcss/vite": "4.0.7",
 		"astro": "5.2.5",
 		"astro-expressive-code": "^0.40.1",
 		"astro-icon": "^1.1.5",
@@ -66,7 +66,8 @@
 		"prettier-plugin-astro": "0.14.1",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"reading-time": "^1.5.0",
-		"tailwindcss": "4.0.4",
+		"tailwindcss": "4.1.5",
 		"typescript": "^5.7.3"
-	}
+	},
+	"packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
 }

src/components/ArticleContainer.astro

@@ -61,19 +61,16 @@ const { className = "", dataPagefindBody = true } = Astro.props;
 
 	/* 修改图片相关样式 */
 	:global(article img) {
-		opacity: 0;
 		position: relative;
 		background-color: #f0f0f0;
 		transition: all 0.5s ease-in-out;
 	}
 
 	:global(article img.loading) {
-		opacity: 1;
 		filter: blur(10px);
 	}
 
 	:global(article img.loaded) {
-		opacity: 1;
 		filter: blur(0);
 	}
 </style>

src/components/BaseHead.astro

@@ -121,6 +121,11 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
 	})(window, document, "clarity", "script", "kvbyuhu6d2");
 </script>
 
+<script
+	defer
+	src="https://cloud.umami.is/script.js"
+	data-website-id="247d7726-70c1-46fd-9453-fbe95630c3d6"></script>
+
 <meta content={Astro.generator} name="generator" />
 
 <style is:global>

src/components/RecentUpdate.astro

@@ -0,0 +1,30 @@
+---
+import { getAllCollectionPosts } from "@/data/post";
+import { MAX_LATEST_POSTS } from "@/utils/constant";
+import { getLatestUpdatedPost } from "@/utils/date";
+const allPosts = await getAllCollectionPosts();
+const latestUpdatedPost = allPosts.sort(getLatestUpdatedPost).slice(0, MAX_LATEST_POSTS);
+---
+
+{
+	(
+		<div>
+			<h2 class="title mb-4 flex items-center gap-2 text-lg">
+				<a class="">最近更新</a>
+			</h2>
+			<ul class="flex flex-wrap gap-2">
+				{latestUpdatedPost.map((post) => (
+					<li>
+						<a
+							href={`${post.collection === "post" ? "/posts/" : "/notes/"}${post.id}/`}
+							class="hover:text-link"
+						>
+							<span>{post.data.date_modified.toLocaleDateString()}</span>
+							{post.data.title}
+						</a>
+					</li>
+				))}
+			</ul>
+		</div>
+	)
+}

src/components/SocialList.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from "astro-icon/components";
 
-/** 
+/**
 	Uses https://www.astroicon.dev/getting-started/
 	Find icons via guide: https://www.astroicon.dev/guides/customization/#open-source-icon-sets
 	Only installed pack is: @iconify-json/mdi
@@ -27,14 +27,9 @@ const socialLinks: {
 		link: "https://x.com/kazoottt",
 		name: "mdi:twitter",
 	},
-	{
-		friendlyName: "Bilibili",
-		link: "https://space.bilibili.com/391236013",
-		name: "mdi:video",
-	},
 	{
 		friendlyName: "YouTube",
-		link: "https://www.youtube.com/@kazoottt4718",
+		link: "https://www.youtube.com/@kazoottt255",
 		name: "mdi:youtube",
 	},
 	{
@@ -47,6 +42,11 @@ const socialLinks: {
 		link: "https://bento.me/KazooTTT",
 		name: "mdi:open-in-new",
 	},
+	{
+		friendlyName: "rss",
+		link: "https://blog.kazoottt.top/rss.xml",
+		name: "mdi:rss-box",
+	},
 ];
 ---
 

src/components/blog/Masthead.astro

@@ -1,18 +1,18 @@
 ---
-import type { CollectionEntry } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
 import Card from "../componentsBefore/Card.astro";
 import { Icon } from "astro-icon/components";
 import Label from "../componentsBefore/Label.astro";
+import type { PostItem } from "@/types";
 
 interface Props {
-	content: CollectionEntry<"post">;
+	content: PostItem;
 	readingTime: string;
 	ogImage: string;
 }
 
 const {
-	content: { data },
+	content: { data, dateToCmp },
 	readingTime,
 	ogImage,
 } = Astro.props;
@@ -27,13 +27,7 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
 {
 	socialImageURL && (
 		<div class="mb-6 aspect-video">
-			<img
-				alt={socialImageURL}
-				class="rounded-lg object-cover"
-				fetchpriority="high"
-				loading="eager"
-				src={socialImageURL}
-			/>
+			<img alt={socialImageURL} class="rounded-lg object-cover" src={socialImageURL} />
 		</div>
 	)
 }
@@ -54,7 +48,7 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
 </h1>
 <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
 	<p class="font-semibold">
-		<FormattedDate date={data.date} dateTimeOptions={dateTimeOptions} /> /{" "}
+		<FormattedDate date={dateToCmp} dateTimeOptions={dateTimeOptions} /> /{" "}
 		{readingTime}
 	</p>
 	{

src/components/blog/PostPreview.astro

@@ -1,10 +1,10 @@
 ---
-import type { CollectionEntry } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
 import type { HTMLTag, Polymorphic } from "astro/types";
+import type { AllItem } from "@/types";
 
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
-	post: CollectionEntry<"post">;
+	post: AllItem;
 	withDesc?: boolean;
 };
 
@@ -17,7 +17,11 @@ const { as: Tag = "div", post, withDesc = false } = Astro.props;
 />
 <Tag>
 	{post.data.draft && <span class="text-red-500">(Draft) </span>}
-	<a class="cactus-link" data-astro-prefetch href={`/posts/${post.id}/`}>
+	<a
+		class="hover:text-link"
+		data-astro-prefetch
+		href={`${post.collection === "post" ? "/posts/" : "/notes/"}${post.id}/`}
+	>
 		{post.data.fixedToTop && <span class="text-accent-2 mr-2">*</span>}
 		{post.data.title}
 	</a>

src/components/componentsBefore/layout/Header.astro

@@ -1,111 +1,111 @@
 ---
-import kazootttAvatar from '../../assets/kazoottt-avatar.jpeg'
-import { Image } from 'astro:assets'
+import kazootttAvatar from "../../assets/kazoottt-avatar.jpeg";
+import { Image } from "astro:assets";
 ---
 
-<header class='fixed left-0 right-0 top-0 z-50 bg-white shadow-sm dark:bg-gray-800'>
+<header class="fixed top-0 right-0 left-0 z-50 bg-white shadow-sm dark:bg-gray-800">
 	<nav
-		class='mx-auto flex w-full items-center justify-between px-4 py-3 lg:flex lg:w-3/5 lg:w-4/5 lg:items-center'
-		aria-label='global'
+		class="mx-auto flex w-full items-center justify-between px-4 py-3 lg:flex lg:w-3/5 lg:w-4/5 lg:items-center"
+		aria-label="global"
 	>
-		<a class='flex items-center' href='/'>
+		<a class="flex items-center" href="/">
 			<Image
 				src={kazootttAvatar}
-				alt='profile photo'
-				class='mr-2 h-8 w-auto rounded-full lg:hidden'
-				loading='eager'
+				alt="profile photo"
+				class="mr-2 h-8 w-auto rounded-full lg:hidden"
+				loading="eager"
 			/>
-			<div class='hidden flex-none text-xl font-semibold lg:block' aria-label='Brand'>声控烤箱</div>
+			<div class="hidden flex-none text-xl font-semibold lg:block" aria-label="Brand">KazooTTT</div>
 		</a>
 
 		<!-- Mobile menu button -->
 		<button
-			id='mobileMenuButton'
-			class='rounded-md p-2 hover:bg-border lg:hidden'
-			aria-label='Toggle mobile menu'
+			id="mobileMenuButton"
+			class="hover:bg-border rounded-md p-2 lg:hidden"
+			aria-label="Toggle mobile menu"
 		>
 			<svg
-				xmlns='http://www.w3.org/2000/svg'
-				width='24'
-				height='24'
-				viewBox='0 0 24 24'
-				class='h-6 w-6'
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				class="h-6 w-6"
 			>
-				<path fill='currentColor' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'></path>
+				<path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
 			</svg>
 		</button>
 
 		<!-- Desktop Navigation -->
-		<div class='hidden flex-row items-center justify-center gap-x-7 lg:flex'>
-			<div class='relative'>
+		<div class="hidden flex-row items-center justify-center gap-x-7 lg:flex">
+			<div class="relative">
 				<a
-					href='/blog'
-					class={`peer flex items-center text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith('/blog') ? 'text-green-400' : ''}`}
-					aria-label='Blog Menu'
+					href="/blog"
+					class={`peer flex items-center text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith("/blog") ? "text-green-400" : ""}`}
+					aria-label="Blog Menu"
 				>
 					Blog
 					<svg
-						xmlns='http://www.w3.org/2000/svg'
-						width='20'
-						height='20'
-						viewBox='0 0 24 24'
-						class='ml-1 transform transition-transform duration-200 peer-hover:rotate-180'
+						xmlns="http://www.w3.org/2000/svg"
+						width="20"
+						height="20"
+						viewBox="0 0 24 24"
+						class="ml-1 transform transition-transform duration-200 peer-hover:rotate-180"
 					>
-						<path fill='currentColor' d='m12 15l-5-5h10z'></path>
+						<path fill="currentColor" d="m12 15l-5-5h10z"></path>
 					</svg>
 				</a>
 				<div
-					class='invisible absolute left-0 mt-2 w-48 rounded-md bg-white py-2 opacity-0 shadow-lg transition-all duration-200 hover:visible hover:opacity-100 peer-hover:visible peer-hover:opacity-100 dark:bg-gray-800'
+					class="invisible absolute left-0 mt-2 w-48 rounded-md bg-white py-2 opacity-0 shadow-lg transition-all duration-200 peer-hover:visible peer-hover:opacity-100 hover:visible hover:opacity-100 dark:bg-gray-800"
 				>
 					<a
-						href='/categories'
-						class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100  ${Astro.url.pathname.startsWith('/categories') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
-						aria-label='Categories Page'
+						href="/categories"
+						class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100  ${Astro.url.pathname.startsWith("/categories") ? "text-green-400" : ""} dark:hover:bg-gray-700`}
+						aria-label="Categories Page"
 					>
 						Categories
 					</a>
 					<a
-						href='/tags'
-						class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100  ${Astro.url.pathname.startsWith('/tags') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
-						aria-label='Tags Page'
+						href="/tags"
+						class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100  ${Astro.url.pathname.startsWith("/tags") ? "text-green-400" : ""} dark:hover:bg-gray-700`}
+						aria-label="Tags Page"
 					>
 						Tags
 					</a>
 					<a
-						href='/diary'
-						class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100  ${Astro.url.pathname.startsWith('/diary') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
-						aria-label='Diary Page'
+						href="/diary"
+						class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100  ${Astro.url.pathname.startsWith("/diary") ? "text-green-400" : ""} dark:hover:bg-gray-700`}
+						aria-label="Diary Page"
 					>
 						Diary
 					</a>
 				</div>
 			</div>
 			<a
-				href='/tools'
-				class={`flex-none text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith('/tools') ? 'text-green-400' : ''}`}
-				aria-label='Nav Menu Item'
+				href="/tools"
+				class={`flex-none text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith("/tools") ? "text-green-400" : ""}`}
+				aria-label="Nav Menu Item"
 				>Tools
 			</a>
-			<div class='relative'>
-				<button class='peer flex items-center text-[1.05rem] font-medium' aria-label='More Menu'>
+			<div class="relative">
+				<button class="peer flex items-center text-[1.05rem] font-medium" aria-label="More Menu">
 					More
 					<svg
-						xmlns='http://www.w3.org/2000/svg'
-						width='20'
-						height='20'
-						viewBox='0 0 24 24'
-						class='ml-1 transform transition-transform duration-200 peer-hover:rotate-180'
+						xmlns="http://www.w3.org/2000/svg"
+						width="20"
+						height="20"
+						viewBox="0 0 24 24"
+						class="ml-1 transform transition-transform duration-200 peer-hover:rotate-180"
 					>
-						<path fill='currentColor' d='m12 15l-5-5h10z'></path>
+						<path fill="currentColor" d="m12 15l-5-5h10z"></path>
 					</svg>
 				</button>
 				<div
-					class='invisible absolute right-0 mt-2 w-48 rounded-md bg-white py-2 opacity-0 shadow-lg transition-all duration-200 hover:visible hover:opacity-100 peer-hover:visible peer-hover:opacity-100 dark:bg-gray-800'
+					class="invisible absolute right-0 mt-2 w-48 rounded-md bg-white py-2 opacity-0 shadow-lg transition-all duration-200 peer-hover:visible peer-hover:opacity-100 hover:visible hover:opacity-100 dark:bg-gray-800"
 				>
 					<a
-						href='/friends'
-						class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100  ${Astro.url.pathname.startsWith('/friends') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
-						aria-label='Friends Page'
+						href="/friends"
+						class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100  ${Astro.url.pathname.startsWith("/friends") ? "text-green-400" : ""} dark:hover:bg-gray-700`}
+						aria-label="Friends Page"
 					>
 						Friends
 					</a>
@@ -113,30 +113,30 @@ import { Image } from 'astro:assets'
 			</div>
 
 			<button
-				id='toggleDarkMode'
-				class='relative rounded-md border border-border p-1.5 transition-all hover:bg-border'
+				id="toggleDarkMode"
+				class="border-border hover:bg-border relative rounded-md border p-1.5 transition-all"
 			>
-				<span class='sr-only'>Dark Theme</span>
+				<span class="sr-only">Dark Theme</span>
 				<svg
-					xmlns='http://www.w3.org/2000/svg'
-					width='32'
-					height='32'
-					viewBox='0 0 24 24'
-					class='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:hidden dark:-rotate-90 dark:scale-0'
+					xmlns="http://www.w3.org/2000/svg"
+					width="32"
+					height="32"
+					viewBox="0 0 24 24"
+					class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:hidden dark:scale-0 dark:-rotate-90"
 					><path
-						fill='currentColor'
-						d='M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12'
+						fill="currentColor"
+						d="M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12"
 					></path></svg
 				>
 				<svg
-					xmlns='http://www.w3.org/2000/svg'
-					width='32'
-					height='32'
-					viewBox='0 0 24 24'
-					class='hidden h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:block dark:rotate-0 dark:scale-100'
+					xmlns="http://www.w3.org/2000/svg"
+					width="32"
+					height="32"
+					viewBox="0 0 24 24"
+					class="hidden h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:block dark:scale-100 dark:rotate-0"
 					><path
-						fill='currentColor'
-						d='M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20'
+						fill="currentColor"
+						d="M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20"
 					></path></svg
 				>
 			</button>
@@ -144,71 +144,71 @@ import { Image } from 'astro:assets'
 
 		<!-- Mobile Navigation -->
 		<div
-			id='mobileMenu'
-			class='fixed inset-x-0 top-[72px] z-50 hidden max-h-[calc(100vh-72px)] overflow-y-auto rounded-b-lg bg-white shadow-lg dark:bg-gray-800 lg:hidden'
+			id="mobileMenu"
+			class="fixed inset-x-0 top-[72px] z-50 hidden max-h-[calc(100vh-72px)] overflow-y-auto rounded-b-lg bg-white shadow-lg lg:hidden dark:bg-gray-800"
 		>
-			<div class='space-y-2 px-4 py-2'>
+			<div class="space-y-2 px-4 py-2">
 				<a
-					href='/blog'
-					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith('/blog') ? 'text-green-400' : ''}`}
+					href="/blog"
+					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith("/blog") ? "text-green-400" : ""}`}
 				>
 					Blog
 				</a>
 				<a
-					href='/categories'
-					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith('/categories') ? 'text-green-400' : ''}`}
+					href="/categories"
+					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith("/categories") ? "text-green-400" : ""}`}
 				>
 					Categories
 				</a>
 				<a
-					href='/tags'
-					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith('/tags') ? 'text-green-400' : ''}`}
+					href="/tags"
+					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith("/tags") ? "text-green-400" : ""}`}
 				>
 					Tags
 				</a>
 				<a
-					href='/diary'
-					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith('/diary') ? 'text-green-400' : ''}`}
+					href="/diary"
+					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith("/diary") ? "text-green-400" : ""}`}
 				>
 					Diary
 				</a>
 				<a
-					href='/tools'
-					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith('/tools') ? 'text-green-400' : ''}`}
+					href="/tools"
+					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith("/tools") ? "text-green-400" : ""}`}
 				>
 					Tools
 				</a>
 				<a
-					href='/friends'
-					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith('/friends') ? 'text-green-400' : ''}`}
+					href="/friends"
+					class={`block py-2 text-[1.05rem] font-medium  ${Astro.url.pathname.startsWith("/friends") ? "text-green-400" : ""}`}
 				>
 					Friends
 				</a>
 				<button
-					id='mobileToggleDarkMode'
-					class='mt-2 flex w-full items-center py-2 text-[1.05rem] font-medium'
+					id="mobileToggleDarkMode"
+					class="mt-2 flex w-full items-center py-2 text-[1.05rem] font-medium"
 				>
 					<span>Theme</span>
 					<svg
-						xmlns='http://www.w3.org/2000/svg'
-						width='32'
-						height='32'
-						viewBox='0 0 24 24'
-						class='ml-2 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:hidden dark:-rotate-90 dark:scale-0'
+						xmlns="http://www.w3.org/2000/svg"
+						width="32"
+						height="32"
+						viewBox="0 0 24 24"
+						class="ml-2 h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:hidden dark:scale-0 dark:-rotate-90"
 						><path
-							fill='currentColor'
-							d='M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12'
+							fill="currentColor"
+							d="M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12"
 						></path></svg
 					>
 					<svg
-						xmlns='http://www.w3.org/2000/svg'
-						width='32'
-						height='32'
-						viewBox='0 0 24 24'
-						class='ml-2 hidden h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:block dark:rotate-0 dark:scale-100'
+						xmlns="http://www.w3.org/2000/svg"
+						width="32"
+						height="32"
+						viewBox="0 0 24 24"
+						class="ml-2 hidden h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:block dark:scale-100 dark:rotate-0"
 						><path
-							fill='currentColor'
-							d='M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20'
+							fill="currentColor"
+							d="M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20"
 						></path></svg
 					>
 				</button>
@@ -219,59 +219,59 @@ import { Image } from 'astro:assets'
 
 <script>
 	function getCurrentTheme() {
-		return localStorage.getItem('theme')
+		return localStorage.getItem("theme");
 	}
 
 	function setupDarkModeToggle() {
-		const toggleDarkModeButton = document.getElementById('toggleDarkMode')
-		const mobileToggleDarkMode = document.getElementById('mobileToggleDarkMode')
+		const toggleDarkModeButton = document.getElementById("toggleDarkMode");
+		const mobileToggleDarkMode = document.getElementById("mobileToggleDarkMode");
 
 		function toggleTheme() {
-			const currentTheme = getCurrentTheme()
-			const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
-			localStorage.setItem('theme', newTheme)
-			document.documentElement.classList.toggle('dark')
+			const currentTheme = getCurrentTheme();
+			const newTheme = currentTheme === "dark" ? "light" : "dark";
+			localStorage.setItem("theme", newTheme);
+			document.documentElement.classList.toggle("dark");
 
 			// Dispatch theme change event
-			window.dispatchEvent(new CustomEvent('theme-change', { detail: { theme: newTheme } }))
+			window.dispatchEvent(new CustomEvent("theme-change", { detail: { theme: newTheme } }));
 		}
 
 		if (toggleDarkModeButton) {
-			toggleDarkModeButton.addEventListener('click', toggleTheme)
+			toggleDarkModeButton.addEventListener("click", toggleTheme);
 		}
 
 		if (mobileToggleDarkMode) {
-			mobileToggleDarkMode.addEventListener('click', toggleTheme)
+			mobileToggleDarkMode.addEventListener("click", toggleTheme);
 		}
 	}
 
 	function setupMobileMenu() {
-		const mobileMenuButton = document.getElementById('mobileMenuButton')
-		const mobileMenu = document.getElementById('mobileMenu')
-		if (!mobileMenuButton || !mobileMenu) return
+		const mobileMenuButton = document.getElementById("mobileMenuButton");
+		const mobileMenu = document.getElementById("mobileMenu");
+		if (!mobileMenuButton || !mobileMenu) return;
 
-		mobileMenuButton.addEventListener('click', () => {
-			mobileMenu.classList.toggle('hidden')
-		})
+		mobileMenuButton.addEventListener("click", () => {
+			mobileMenu.classList.toggle("hidden");
+		});
 
 		// Close mobile menu when clicking outside
-		document.addEventListener('click', (event) => {
+		document.addEventListener("click", (event) => {
 			if (
 				!mobileMenuButton.contains(event.target as Node) &&
 				!mobileMenu.contains(event.target as Node)
 			) {
-				mobileMenu.classList.add('hidden')
+				mobileMenu.classList.add("hidden");
 			}
-		})
+		});
 	}
 
 	// Setup initial functionality
-	setupDarkModeToggle()
-	setupMobileMenu()
+	setupDarkModeToggle();
+	setupMobileMenu();
 
 	// Re-setup functionality after view transitions
-	document.addEventListener('astro:after-swap', () => {
-		setupDarkModeToggle()
-		setupMobileMenu()
-	})
+	document.addEventListener("astro:after-swap", () => {
+		setupDarkModeToggle();
+		setupMobileMenu();
+	});
 </script>