feat: personalize blog and update configurations

src/pages/friends.astro

@@ -0,0 +1,78 @@
+---
+import BaseLayout from "@/layouts/Base.astro";
+
+const friends: { name: string; url: string; description?: string }[] = [
+	{
+		name: "Yuang's Blog",
+		url: "https://yuuuuang.com/",
+	},
+	{
+		name: "huaiying",
+		url: "https://blog.csdn.net/huaiyingdetective",
+	},
+	{
+		name: "Sorry404 Wang",
+		url: "http://40404.site/",
+	},
+	{
+		name: "lijinghua",
+		url: "www.lijinghua.club",
+	},
+	{
+		name: "思无道",
+		url: "https://siwudao.github.io/",
+	},
+	{
+		name: "Kai",
+		url: "https://kaiyi.cool/",
+	},
+	{
+		name: "buyfakett",
+		url: "https://www.tteam.icu/",
+	},
+	{
+		name: "poivre",
+		url: "https://blog.poivrehxx.site/",
+	},
+	{
+		name: `Roi's Blog`,
+		url: "https://roi.moe/",
+	},
+];
+---
+
+<BaseLayout
+	meta={{
+		title: `Friends`,
+		description: "my friends ",
+	}}
+>
+	<div class="container mx-auto px-4 py-8">
+		<h1 class="title mb-6">Friends</h1>
+		<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+			{
+				friends.map((friend) => (
+					<a
+						href={friend.url.startsWith("http") ? friend.url : `https://${friend.url}`}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="block rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg dark:bg-gray-800"
+					>
+						<h2 class="text-xl font-semibold">{friend.name}</h2>
+						{friend.description && (
+							<p class="mt-2 truncate text-sm text-gray-600 dark:text-gray-400">
+								{friend.description}
+							</p>
+						)}
+					</a>
+				))
+			}
+		</div>
+	</div>
+</BaseLayout>
+
+<style>
+	.container {
+		max-width: 1200px;
+	}
+</style>