@coffic/cosy-ui 0.1.25

package/README.md

@@ -0,0 +1,83 @@
+# Coffic Shared UI
+
+这是一个 Astro 组件库，为同一个组织下的多个项目提供统一的 UI 风格。
+
+## 安装
+
+```bash
+npm install @coffic/shared-ui
+```
+
+## 必要依赖
+
+本组件库依赖以下包，请确保您的项目中已正确安装和配置：
+
+### 1. Astro
+
+确保您的项目是一个 Astro 项目。如果不是，可以按照以下步骤创建：
+
+```bash
+npm create astro@latest
+```
+
+### 2. TailwindCSS
+
+如果您的项目还没有配置 TailwindCSS，请按照以下步骤安装：
+
+```bash
+npm install -D tailwindcss @astrojs/tailwind
+```
+
+然后在您的 `astro.config.mjs` 中添加：
+
+```javascript
+import tailwind from '@astrojs/tailwind';
+
+export default defineConfig({
+  integrations: [tailwind()],
+});
+```
+
+### 3. DaisyUI
+
+安装 DaisyUI：
+
+```bash
+npm install -D daisyui
+```
+
+在您的 `tailwind.config.js` 中添加 DaisyUI：
+
+```javascript
+export default {
+  plugins: [require('daisyui')],
+};
+```
+
+### 4. CSS
+
+```css
+@source '../node_modules/@coffic/shared-ui';
+```
+
+## 内置组件
+
+- Footer
+- 更多组件可通过 IDE 的智能提示看到
+
+## 注意事项
+
+1. 本组件库使用 TailwindCSS 和 DaisyUI 的样式类，这意味着：
+
+   - 组件的样式会受到您项目中 Tailwind 配置的影响
+   - 如果您修改了 Tailwind 的默认主题或 DaisyUI 的主题，可能会影响组件的外观
+
+2. 建议在您的项目中保持默认的 Tailwind 和 DaisyUI 配置，以确保组件显示正常
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 许可证
+
+MIT

package/index.ts

@@ -0,0 +1,7 @@
+export { default as Header } from './src/components/Header.astro';
+export { default as Footer } from './src/components/Footer.astro';
+export { default as Banner } from './src/components/Banner.astro';
+export { default as Link } from './src/components/Link.astro';
+export { default as SocialIcon } from './src/components/SocialIcon.astro';
+export { default as Component } from './src/components/Component.astro';
+export { default as ThemeItem } from './src/components/ThemeItem.astro';

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@coffic/cosy-ui",
+  "version": "0.1.25",
+  "description": "A astro component library",
+  "repository": {
+    "url": "https://github.com/CofficLab/cosy-ui"
+  },
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./index.ts",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-component"
+  ],
+  "scripts": {
+    "format": "prettier -w .",
+    "lint": "eslint . --ext .ts,.js,.astro src",
+    "dev": "cd example && astro dev --host 0.0.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.14",
+    "@types/chai": "^5.2.0",
+    "@types/eslint": "^9.6.1",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^22.13.10",
+    "@typescript-eslint/parser": "^8.26.1",
+    "astro": "^5.5.1",
+    "chai": "^4.5.0",
+    "daisyui": "^5.0.3",
+    "eslint": "^8.57.1",
+    "eslint-plugin-astro": "^1.3.1",
+    "mocha": "^10.8.2",
+    "prettier": "^3.5.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "tailwindcss": "^4.0.14",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
+    "@remixicon/vue": "^4.6.0",
+    "@astrojs/vue": "^5.0.7",
+    "astro": "^5.0.0",
+    "daisyui": "^5.0.3",
+    "tailwindcss": "^4.0.13"
+  },
+  "dependencies": {
+    "@astrojs/vue": "^5.0.7",
+    "vue": "^3.5.13"
+  }
+}

package/src/components/Banner.astro

@@ -0,0 +1,12 @@
+<div class="w-full px-8 z-50 mx-auto">
+	<div
+		class="mt-0 hero p-4 rounded-2xl bg-base-300/50 dark:bg-base-200/50 backdrop-blur-xl hover:shadow-2xl transform duration-100">
+		<div class="text-center hero-content">
+			<div class="max-w-md flex flex-row justify-center items-center mx-auto">
+				<p class="text-2xl md:text-3xl font-bold text-base-content">
+					<slot />
+				</p>
+			</div>
+		</div>
+	</div>
+</div>

package/src/components/Component.astro

@@ -0,0 +1,10 @@
+---
+// Write your component code in this file!
+type Props = {
+	message: string;
+};
+
+const { message } = Astro.props;
+---
+
+<div>Hello {message}!</div>

package/src/components/Footer.astro

@@ -0,0 +1,128 @@
+---
+import { processSocialLink } from '../utils/social';
+import Link from './Link.astro';
+import Banner from './Banner.astro';
+import SocialIcon from './SocialIcon.astro';
+
+const {
+	siteName,
+	homeLink,
+	slogan,
+	company,
+	copyright,
+	inspirationalSlogan,
+	icp,
+	logo,
+	products = [],
+	aboutLink,
+	contactLink,
+	termsLink,
+	privacyLink,
+	socialLinks = [],
+} = Astro.props;
+
+const currentYear = new Date().getFullYear();
+
+// 处理社交链接
+const processedSocialLinks = socialLinks.map((link) => processSocialLink(link));
+---
+
+<footer class="bg-green-200/50 dark:bg-base-300/50 z-50 backdrop-blur-md">
+	<div class="footer sm:footer-horizontal p-10 text-base-content">
+		<aside class="flex flex-col items-center sm:items-start gap-2 place-self-center">
+			<Link href={homeLink}>
+				<div class="flex items-center gap-2 rounded-2xl">
+					{
+						logo && (
+							<img
+								src={logo.src}
+								alt={logo.alt}
+								class="h-6 w-6 fill-current rounded-2xl"
+								width="32"
+								height="32"
+							/>
+						)
+					}
+					<span class="text-xl font-bold">{siteName}</span>
+				</div>
+			</Link>
+			<p class="text-sm opacity-70 self-center">{slogan}</p>
+
+			<div class="flex gap-4 mt-4 sm:mt-0">
+				{
+					processedSocialLinks.map((link) => (
+						<a
+							href={link.url}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="btn btn-ghost btn-sm p-1 hover:text-primary"
+							title={link.name}>
+							<SocialIcon platform={link.platform} />
+							<span class="sr-only">{link.name}</span>
+						</a>
+					))
+				}
+			</div>
+		</aside>
+
+		{
+			products.length > 0 && (
+				<nav class="place-self-center text-center flex flex-col items-center min-h-[200px]">
+					<h6 class="footer-title">产品</h6>
+					<div class="flex flex-col gap-2">
+						{products.map((product) => (
+							<Link href={product.href} external={product.external}>
+								{product.name}
+							</Link>
+						))}
+					</div>
+				</nav>
+			)
+		}
+
+		{
+			(aboutLink || contactLink) && (
+				<nav class="place-self-center text-center flex flex-col items-center min-h-[200px]">
+					<h6 class="footer-title">关于</h6>
+					<div class="flex flex-col gap-2">
+						{aboutLink && <Link href={aboutLink}>关于我们</Link>}
+						{contactLink && <Link href={contactLink}>联系我们</Link>}
+					</div>
+				</nav>
+			)
+		}
+
+		{
+			(termsLink || privacyLink) && (
+				<nav class="place-self-center text-center flex flex-col items-center min-h-[200px]">
+					<h6 class="footer-title">法律</h6>
+					<div class="flex flex-col gap-2">
+						{termsLink && <Link href={termsLink}>服务条款</Link>}
+						{privacyLink && <Link href={privacyLink}>隐私政策</Link>}
+					</div>
+				</nav>
+			)
+		}
+	</div>
+
+	<Banner>
+		{inspirationalSlogan}
+	</Banner>
+
+	<div class="flex flex-col sm:flex-col justify-center items-center p-4 text-sm opacity-70">
+		<div class="flex items-center gap-2">
+			<p>
+				© {currentYear}
+				{company} - {copyright}
+			</p>
+		</div>
+
+		{
+			icp && (
+				<div class="text-center py-4">
+					<p>{icp}</p>
+				</div>
+			)
+		}
+	</div>
+</footer>

package/src/components/Header.astro

@@ -0,0 +1,322 @@
+---
+import { Image } from 'astro:assets';
+import { RiGithubFill, RiSearch2Line, RiMenuLine, RiSunCloudyLine } from '@remixicon/vue';
+import ThemeItem from './ThemeItem.astro';
+import Link from './Link.astro';
+
+interface Props {
+	logo: ImageMetadata;
+	languages?: Array<{ code: string; name: string }>;
+	currentLocale?: string;
+	navItems?: Array<{
+		href: string;
+		label: string;
+		match: (path: string) => boolean;
+	}>;
+	socialLinks?: Array<{
+		name: string;
+		url: string;
+		icon: any;
+	}>;
+}
+
+const {
+	logo,
+	languages = [
+		{ code: 'zh-cn', name: '简体中文' },
+		{ code: 'en', name: 'English' },
+	],
+	currentLocale = 'zh-cn',
+	navItems = [],
+} = Astro.props;
+
+const currentLanguageName =
+	languages.find((lang) => lang.code === currentLocale)?.name || '简体中文';
+
+const themes = [
+	{ id: 'default', name: 'Default' },
+	{ id: 'light', name: 'Light' },
+	{ id: 'dark', name: 'Dark' },
+	{ id: 'pastel', name: 'Pastel' },
+	{ id: 'lemonade', name: 'Lemonade' },
+	{ id: 'cupcake', name: 'Cupcake' },
+	{ id: 'nord', name: 'Nord' },
+	{ id: 'business', name: 'Business' },
+	{ id: 'luxury', name: 'Luxury' },
+];
+
+const currentPath = Astro.url.pathname;
+
+// 为每个语言生成对应的URL
+function generateLanguageUrl(langCode: string): string {
+	const pathParts = currentPath.split('/').filter(Boolean);
+	const firstPathPart = pathParts[0];
+	const supportedLanguages = languages.map((lang) => lang.code);
+	const isFirstPartLang = supportedLanguages.includes(firstPathPart);
+
+	if (isFirstPartLang) {
+		pathParts[0] = langCode;
+		return '/' + pathParts.join('/');
+	} else {
+		return '/' + langCode + (currentPath === '/' ? '' : currentPath);
+	}
+}
+---
+
+<header
+	class="bg-gradient-to-r from-neutral-900/80 via-neutral-800/80 to-neutral-900/80
+	dark:from-neutral-800/80 dark:via-neutral-700/80 dark:to-neutral-800/80 backdrop-blur
+	flex flex-row justify-between
+	text-neutral-200 dark:text-neutral-300
+	px-4
+	rounded-lg h-12 mt-1 mx-4 fixed top-0 left-0 right-0 z-50
+	border border-white/5 dark:border-black/5">
+	<div class="flex flex-row justify-start items-center">
+		<Link href="/" transition:persist>
+			<div class="h-8 w-8 flex flex-col items-center justify-center">
+				<Image src={logo} alt="logo" class="fill-current" />
+			</div>
+		</Link>
+
+		<!-- 移动端菜单按钮 -->
+		<button class="lg:hidden btn btn-ghost btn-sm p-1 ml-2" onclick="mobile_menu.showModal()">
+			<RiMenuLine class="w-5 h-5" />
+		</button>
+
+		<!-- 桌面端导航 -->
+		<div class="hidden lg:flex flex-row gap-4 items-center ml-4" transition:animate="fade">
+			{
+				navItems.map((item) => (
+					<Link
+						class:list={[
+							'btn btn-sm',
+							{
+								'btn-ghost': !item.match(currentPath),
+								'btn-primary': item.match(currentPath),
+							},
+						]}
+						href={item.href}>
+						{item.label}
+					</Link>
+				))
+			}
+		</div>
+	</div>
+
+	<div class="h-12 flex flex-row justify-end gap-2 items-center">
+		<div class="dropdown dropdown-end">
+			<div tabindex={0} role="button" class="btn btn-ghost btn-sm p-1">
+				{currentLanguageName}
+			</div>
+			<ul
+				tabindex={0}
+				class="dropdown-content menu bg-slate-900 dark:bg-slate-800 rounded-box z-[1] w-40 p-2 shadow-lg">
+				{
+					languages.map((lang) => (
+						<li>
+							<Link
+								href={generateLanguageUrl(lang.code)}
+								class:list={[
+									{
+										'bg-primary text-white': currentLocale === lang.code,
+									},
+								]}>
+								{lang.name}
+							</Link>
+						</li>
+					))
+				}
+			</ul>
+		</div>
+		<div class="dropdown dropdown-end">
+			<div tabindex={0} role="button" class="btn btn-ghost btn-sm p-1">
+				<RiSunCloudyLine class="w-5 h-5" />
+			</div>
+			<ul
+				tabindex={0}
+				class="dropdown-content menu bg-neutral-900 dark:bg-neutral-800 rounded-box z-[1] w-56 p-2 shadow-lg">
+				{themes.map((theme) => <ThemeItem theme={theme.id} label={theme.name} />)}
+			</ul>
+		</div>
+		<button class="btn btn-ghost btn-sm p-1" onclick="my_modal_1.showModal()">
+			<RiSearch2Line class="w-5 h-5" />
+		</button>
+	</div>
+</header>
+
+<!-- 移动端菜单模态框 -->
+<dialog id="mobile_menu" class="modal">
+	<div class="modal-box bg-neutral-900 dark:bg-neutral-800 text-neutral-200 dark:text-neutral-300">
+		<h3 class="font-bold text-lg mb-4">
+			{currentLocale === 'zh-cn' ? '菜单' : 'Menu'}
+		</h3>
+		<div class="flex flex-col gap-2">
+			{
+				navItems.map((item) => (
+					<a
+						class:list={[
+							'btn btn-sm w-full text-left justify-start',
+							{
+								'btn-ghost': !item.match(currentPath),
+								'btn-primary': item.match(currentPath),
+							},
+						]}
+						href={item.href}>
+						{item.label}
+					</a>
+				))
+			}
+		</div>
+		<div class="modal-action">
+			<form method="dialog">
+				<button class="btn">
+					{currentLocale === 'zh-cn' ? '关闭' : 'Close'}
+				</button>
+			</form>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop bg-black/20 backdrop-blur-sm">
+		<button>关闭</button>
+	</form>
+</dialog>
+
+<!-- 搜索模态框 -->
+<!-- <dialog id="my_modal_1" class="modal">
+	<div
+		class="modal-box bg-neutral-900 dark:bg-neutral-800 text-neutral-200 dark:text-neutral-300">
+		<Search />
+		<div class="modal-action">
+			<form method="dialog">
+				<button class="btn">
+					{currentLocale === 'zh-cn' ? '关闭' : 'Close'}
+				</button>
+			</form>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop bg-black/20 backdrop-blur-sm">
+		<button>关闭</button>
+	</form>
+</dialog> -->
+
+<style is:global>
+	.pagefind-ui {
+		--pagefind-ui-scale: 0.75;
+		--pagefind-ui-primary: navy;
+		--pagefind-ui-text: black;
+		--pagefind-ui-border: slategrey;
+		--pagefind-ui-border-width: 1px;
+		--pagefind-ui-border-radius: 0.25rem;
+		--pagefind-ui-font: sans-serif;
+		width: 100%;
+	}
+
+	.pagefind-ui.yellow {
+		--pagefind-ui-background: lightyellow;
+	}
+
+	.pagefind-ui.red {
+		--pagefind-ui-background: peachpuff;
+		width: 100%;
+	}
+
+	.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
+		position: relative;
+		padding: 0;
+		box-shadow: none;
+		background-color: transparent;
+	}
+
+	.pagefind-ui .pagefind-ui__result-link {
+		color: var(--pagefind-ui-primary);
+	}
+
+	.pagefind-ui .pagefind-ui__result-excerpt {
+		color: var(--pagefind-ui-text);
+	}
+
+	/* 响应式调整 */
+	@media (max-width: 1023px) {
+		.modal-box {
+			max-height: 80vh;
+			overflow-y: auto;
+		}
+	}
+
+	/* 模态框动画 */
+	.modal {
+		transition-duration: 200ms;
+	}
+
+	.modal-box {
+		transition-duration: 300ms;
+		transform-origin: center;
+	}
+
+	@keyframes slideUp {
+		from {
+			transform: translateY(1rem);
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	.modal[open] .modal-box {
+		animation: slideUp 0.3s ease-out forwards;
+	}
+
+	.modal[open] .modal-backdrop {
+		animation: fadeIn 0.2s ease-out forwards;
+	}
+</style>
+
+<script>
+	function initializeThemeSwitch() {
+		const themeItems = document.querySelectorAll('[data-set-theme]');
+		const updateActiveTheme = (currentTheme: string) => {
+			themeItems.forEach((item) => {
+				const themeId = item.getAttribute('data-set-theme');
+				const isActive = themeId === currentTheme;
+				item.classList.toggle('bg-primary', isActive);
+				item.classList.toggle('text-primary-content', isActive);
+			});
+		};
+
+		themeItems.forEach((item) => {
+			// 移除可能存在的旧事件监听器
+			item.removeEventListener('click', handleThemeClick);
+			// 添加新的事件监听器
+			item.addEventListener('click', handleThemeClick);
+		});
+
+		function handleThemeClick(event: Event) {
+			const item = event.currentTarget as HTMLElement;
+			const theme = item.getAttribute('data-set-theme');
+			document.documentElement.setAttribute('data-theme', theme ?? 'default');
+			localStorage.setItem('theme', theme ?? 'default');
+			updateActiveTheme(theme ?? 'default');
+		}
+
+		// 从本地存储中获取主题并更新激活状态
+		const savedTheme = localStorage.getItem('theme') || 'default';
+		document.documentElement.setAttribute('data-theme', savedTheme);
+		updateActiveTheme(savedTheme);
+	}
+
+	// 初始加载时初始化
+	document.addEventListener('DOMContentLoaded', initializeThemeSwitch);
+
+	// Astro view transitions 后重新初始化
+	document.addEventListener('astro:after-swap', initializeThemeSwitch);
+</script>

package/src/components/Link.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+	href: string;
+	external?: boolean;
+	class?: string;
+}
+
+const { href, external = false, class: className = '' } = Astro.props;
+---
+
+<a
+	href={href}
+	class={`link link-hover ${className} no-underline hover:no-underline`}
+	{...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}>
+	<slot />
+</a>

package/src/components/SocialIcon.astro

@@ -0,0 +1,36 @@
+---
+interface Props {
+	platform: string;
+	class?: string;
+}
+
+const { platform = 'default', class: className = 'w-4 h-4' } = Astro.props;
+
+// 所有平台的图标路径
+const icons = {
+	github:
+		'M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z',
+	twitter:
+		'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
+	linkedin:
+		'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
+	weibo:
+		'M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.016-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.017.259 2.608-2.759 5.047-6.737 5.44m6.853-7.421c-.34-.714-.996-1.002-1.563-.807-.566.193-.752.849-.414 1.555.336.714.992 1.002 1.559.807.572-.195.756-.85.418-1.555m2.84-2.89c-1.154-3.553-5.027-5.606-8.82-4.779-3.791.836-6.119 4.608-4.965 8.162 1.152 3.553 5.027 5.607 8.82 4.779 3.791-.834 6.119-4.607 4.965-8.162M22.371.748c-2.637-2.637-6.532-2.637-9.168 0L.748 13.203c-.998.998-.998 2.617 0 3.615l5.354 5.355c.998.998 2.617.998 3.615 0L22.371 9.916c2.637-2.637 2.637-6.532 0-9.168',
+	wechat:
+		'M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.182 0 .653-.52 1.182-1.162 1.182-.642 0-1.162-.529-1.162-1.182 0-.653.52-1.182 1.162-1.182zm5.813 0c.642 0 1.162.529 1.162 1.182 0 .653-.52 1.182-1.162 1.182-.642 0-1.162-.529-1.162-1.182 0-.653.52-1.182 1.162-1.182zm6.636 2.456c-3.963 0-7.174 2.803-7.174 6.26 0 3.458 3.211 6.26 7.174 6.26.826 0 1.621-.117 2.35-.332.092-.028.185-.042.277-.042.182 0 .359.056.51.16l1.573.923a.327.327 0 0 0 .168.054c.16 0 .29-.132.29-.295 0-.072-.03-.143-.048-.213l-.322-1.226a.589.589 0 0 1 .213-.665c1.508-1.192 2.363-2.923 2.363-4.624 0-3.457-3.21-6.26-7.174-6.26zm-2.896 3.028c.531 0 .962.438.962.978 0 .54-.43.978-.962.978s-.962-.438-.962-.978c0-.54.43-.978.962-.978zm5.813 0c.531 0 .962.438.962.978 0 .54-.43.978-.962.978s-.962-.438-.962-.978c0-.54.43-.978.962-.978z',
+	zhihu:
+		'M12.2 2.4c0-.4-.3-.7-.7-.7H5.9c-.4 0-.7.3-.7.7v1.4h7v-1.4zM6.9 5.7h2.8v12.8H6.9V5.7zm10.2 0H14v12.8h3.1V5.7zm.9-3.3H4c-.6 0-1 .4-1 1v16c0 .6.4 1 1 1h14c.6 0 1-.4 1-1v-16c0-.6-.4-1-1-1z',
+	bilibili:
+		'M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z',
+	youtube:
+		'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z',
+	discord:
+		'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z',
+	default:
+		'M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22c-5.523 0-10-4.477-10-10S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-15c-2.761 0-5 2.239-5 5s2.239 5 5 5 5-2.239 5-5-2.239-5-5-5zm0 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z',
+};
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class={className} fill="currentColor">
+	<path d={icons[platform] || icons.default}></path>
+</svg>

package/src/components/ThemeItem.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+  theme: string;
+  label: string;
+}
+
+const { theme, label } = Astro.props;
+---
+
+<button
+  class="btn btn-sm w-full text-left justify-start"
+  data-set-theme={theme}>
+  {label}
+</button> 

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

package/src/types/footer.ts

@@ -0,0 +1,11 @@
+export interface FooterLink {
+	key: string;
+	href: string;
+	external: boolean;
+	text: string;
+}
+
+export interface FooterNavGroup {
+	titleKey: string;
+	links: FooterLink[];
+}

package/src/utils/social.ts

@@ -0,0 +1,90 @@
+// 定义支持的社交平台及其配置
+interface PlatformConfig {
+	name: string;
+	domains: string[];
+}
+
+// 处理后的社交链接类型
+export interface ProcessedSocialLink {
+	url: string;
+	name: string;
+	platform: string;
+}
+
+// 社交平台配置
+const platformConfigs: Record<string, PlatformConfig> = {
+	github: {
+		name: 'GitHub',
+		domains: ['github.com'],
+	},
+	twitter: {
+		name: 'Twitter',
+		domains: ['twitter.com', 'x.com'],
+	},
+	linkedin: {
+		name: 'LinkedIn',
+		domains: ['linkedin.com'],
+	},
+	weibo: {
+		name: '微博',
+		domains: ['weibo.com'],
+	},
+	wechat: {
+		name: '微信',
+		domains: ['wechat.com', 'weixin.qq.com'],
+	},
+	zhihu: {
+		name: '知乎',
+		domains: ['zhihu.com'],
+	},
+	bilibili: {
+		name: 'BiliBili',
+		domains: ['bilibili.com'],
+	},
+	youtube: {
+		name: 'YouTube',
+		domains: ['youtube.com', 'youtu.be'],
+	},
+	discord: {
+		name: 'Discord',
+		domains: ['discord.com', 'discord.gg'],
+	},
+};
+
+// 从 URL 判断社交平台
+function detectPlatform(url: string): [string, PlatformConfig] | null {
+	try {
+		const urlObj = new URL(url);
+		const hostname = urlObj.hostname.toLowerCase();
+
+		for (const [platform, config] of Object.entries(platformConfigs)) {
+			if (config.domains.some((domain) => hostname.includes(domain))) {
+				return [platform, config];
+			}
+		}
+	} catch (e) {
+		console.error('Invalid URL:', url);
+	}
+	return null;
+}
+
+// 处理社交链接
+export function processSocialLink(url: string): ProcessedSocialLink {
+	const platformInfo = detectPlatform(url);
+
+	if (!platformInfo) {
+		// 如果无法识别平台，返回默认值
+		return {
+			url,
+			name: new URL(url).hostname,
+			platform: 'default',
+		};
+	}
+
+	const [platform, config] = platformInfo;
+	return {
+		url,
+		name: config.name,
+		platform,
+	};
+}