@coffic/cosy-ui 0.6.2 → 0.6.6

package/dist/collection.ts

@@ -0,0 +1,104 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+export const makeArticleCollection = (base: string) => {
+	return defineCollection({
+		loader: glob({
+			pattern: '**/*.{md,mdx}',
+			base,
+		}),
+		schema: z.object({
+			title: z.string(),
+			folder: z.boolean(),
+			order: z.number(),
+			description: z.string().optional(),
+		}),
+	});
+};
+
+export const makeBlogCollection = (base: string) => {
+	return defineCollection({
+		loader: glob({
+			pattern: '**/*.{md,mdx}',
+			base,
+		}),
+		schema: z.object({
+			title: z.string(),
+			description: z.string().optional(),
+			tags: z.array(z.string()).optional(),
+			date: z.date().optional(),
+			authors: z
+				.array(
+					z.object({
+						name: z.string(),
+						picture: z.string().optional(),
+						url: z.string().optional(),
+					})
+				)
+				.optional(),
+		}),
+	});
+};
+
+export const makeCourseCollection = (base: string) => {
+	return defineCollection({
+		loader: glob({
+			pattern: '**/*.{md,mdx}',
+			base,
+		}),
+		schema: z.object({
+			title: z.string(),
+			description: z.string().optional(),
+			folder: z.boolean(),
+			order: z.number(),
+		}),
+	});
+};
+
+export const makeExperimentCollection = (base: string) => {
+	return defineCollection({
+		loader: glob({
+			pattern: '**/*.{md,mdx}',
+			base,
+		}),
+		schema: z.object({
+			title: z.string(),
+			description: z.string().optional(),
+			pubDate: z.date().optional(),
+		}),
+	});
+};
+
+export const makeLessonCollection = (base: string) => {
+	return defineCollection({
+		loader: glob({
+			pattern: '**/*.{md,mdx}',
+			base,
+		}),
+		schema: z.object({
+			title: z.string(),
+			description: z.string().optional(),
+			authors: z
+				.array(
+					z.object({
+						name: z.string(),
+						picture: z.string().optional(),
+					})
+				)
+				.optional(),
+		}),
+	});
+};
+
+export const makeMetaCollection = (base: string) => {
+	return defineCollection({
+		loader: glob({
+			pattern: '**/*.{md,mdx}',
+			base,
+		}),
+		schema: z.object({
+			title: z.string(),
+			description: z.string().optional(),
+		}),
+	});
+};

package/dist/components/errors/404.astro

@@ -1,12 +1,27 @@
 ---
 import { LinkUtil } from '../../utils/link';
 const baseUrl = LinkUtil.getBaseUrl();
+const path = Astro.url.pathname;
+
+interface Error404Props {
+	debugKVs: Record<string, string>;
+}
+
+const { debugKVs = {} } = Astro.props as Error404Props;
 ---
 
 <div class="flex flex-col items-center justify-center h-screen">
 	<div class="flex flex-col justify-center items-center min-h-[50vh] text-center">
 		<h1 class="mb-4 font-bold text-4xl">404 - 页面未找到</h1>
 		<p class="mb-8 text-lg">抱歉，您要找的文档不存在。</p>
+		<p class="mb-8 text-lg">路径：{path}</p>
+		{
+			Object.entries(debugKVs).map(([key, value]) => (
+				<p class="mb-8 text-lg">
+					{key}: {value}
+				</p>
+			))
+		}
 		<a href={baseUrl} class="btn btn-primary"> 返回首页 </a>
 	</div>
 </div>

package/dist/components/layouts/Header.astro

@@ -60,6 +60,7 @@
 import '../../app.css';
 import Link from '../base/Link.astro';
 import Image from '../base/Image.astro';
+import NavItems from './NavItems.astro';
 import { LanguageSwitcher, LinkUtil, type IHeaderProps, type INavItem } from '../../index';
 import Logo from '../../assets/logo-rounded.png';
 
@@ -147,7 +148,6 @@ const activeLink = LinkUtil.getActiveLink(
 			'cosy:py-16': paddingVertical === '3xl',
 		},
 	]}>
-	<!-- 背景 -->
 	<div
 		class:list={[
 			'cosy:bg-accent/70 cosy:flex cosy:flex-grow cosy:backdrop-blur not-prose cosy:border-base-200',
@@ -162,7 +162,6 @@ const activeLink = LinkUtil.getActiveLink(
 			headerHeightClass,
 			{ 'cosy:border cosy:border-dashed cosy:border-red-500': debug },
 		]}>
-		<!-- 左侧 -->
 		<div class="cosy:navbar-start cosy:pl-1">
 			{
 				navPosition === 'start' ? (
@@ -182,22 +181,13 @@ const activeLink = LinkUtil.getActiveLink(
 								class={logoSizeClass}
 							/>
 						</Link>
-						<ul
-							class:list={[
-								'cosy:hidden cosy:lg:flex cosy:px-1 cosy:menu cosy:menu-horizontal',
-								linkHeightClass,
-							]}>
-							{navItems.map((item: INavItem) => (
-								<li>
-									<Link
-										variant={activeLink == item.href ? 'primary' : 'default'}
-										href={item.href}
-										class:list={[linkHeightClass]}>
-										{item.label}
-									</Link>
-								</li>
-							))}
-						</ul>
+						<div class="cosy:hidden cosy:lg:flex">
+							<NavItems
+								navItems={navItems}
+								activeLink={activeLink}
+								linkHeightClass={linkHeightClass}
+							/>
+						</div>
 					</div>
 				) : (
 					<Link
@@ -219,49 +209,26 @@ const activeLink = LinkUtil.getActiveLink(
 			}
 		</div>
 
-		<!-- 中间 -->
 		{
 			navPosition === 'center' && (
 				<div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
-					<ul class:list={['cosy:px-1 cosy:menu cosy:menu-horizontal', linkHeightClass]}>
-						{navItems.map((item: INavItem) => (
-							<li>
-								<Link
-									variant={activeLink == item.href ? 'primary' : 'default'}
-									href={item.href}
-									class:list={[linkHeightClass]}>
-									{item.label}
-								</Link>
-							</li>
-						))}
-					</ul>
+					<NavItems navItems={navItems} activeLink={activeLink} linkHeightClass={linkHeightClass} />
 				</div>
 			)
 		}
 
-		<!-- 右侧 -->
 		<div class="cosy:navbar-end cosy:pr-1">
 			{
 				navPosition === 'end' && (
-					<ul
-						class:list={[
-							'cosy:hidden cosy:lg:flex cosy:px-1 cosy:menu cosy:menu-horizontal',
-							linkHeightClass,
-						]}>
-						{navItems.map((item: INavItem) => (
-							<li>
-								<Link
-									variant={activeLink == item.href ? 'primary' : 'default'}
-									href={item.href}
-									class:list={[linkHeightClass]}>
-									{item.label}
-								</Link>
-							</li>
-						))}
-					</ul>
+					<div class="cosy:hidden cosy:lg:flex">
+						<NavItems
+							navItems={navItems}
+							activeLink={activeLink}
+							linkHeightClass={linkHeightClass}
+						/>
+					</div>
 				)
 			}
-			<!-- 语言切换 -->
 			<LanguageSwitcher languages={languages} />
 		</div>
 	</div>

package/dist/components/layouts/NavItems.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * @component NavItems
+ *
+ * @description
+ * NavItems 组件用于渲染导航栏中的导航项目列表。
+ *
+ * @usage
+ * ```astro
+ * <NavItems
+ *   navItems={navItems}
+ *   activeLink={activeLink}
+ *   linkHeightClass={linkHeightClass}
+ * />
+ * ```
+ */
+import '../../app.css';
+import Link from '../base/Link.astro';
+import type { INavItem } from '../../index';
+
+interface Props {
+	navItems: INavItem[];
+	activeLink: string;
+	linkHeightClass: string;
+}
+
+const { navItems, activeLink, linkHeightClass } = Astro.props;
+---
+
+<ul
+	data-active-link={activeLink}
+	class:list={['cosy:px-1 cosy:menu cosy:menu-horizontal', linkHeightClass]}>
+	{
+		navItems.map((item) => (
+			<li>
+				<Link
+					variant={activeLink === item.href ? 'primary' : 'default'}
+					href={item.href}
+					class:list={[linkHeightClass]}>
+					{item.label}
+				</Link>
+			</li>
+		))
+	}
+</ul>

package/dist/components/layouts/Sidebar.astro

@@ -104,6 +104,7 @@ const currentSection = sidebarItems.find((section) =>
 {/* 桌面端侧边栏 */}
 <aside
 	data-sidebar
+	data-current-path={currentPath}
 	data-margin-top={marginTop}
 	data-margin-bottom={marginBottom}
 	class:list={[

package/dist/components/layouts/SidebarNav.astro

@@ -37,7 +37,10 @@ const { sidebarItems, currentPath, debug = false, class: className } = Astro.pro
 const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
 ---
 
-<nav class:list={['cosy:p-4', debugClass, className]}>
+<nav
+	data-sidebar-nav
+	data-current-path={currentPath}
+	class:list={['cosy:p-4', debugClass, className]}>
 	{
 		sidebarItems.map((section: ISidebarItem) => (
 			<div class:list={['cosy:mb-6', debugClass]}>
@@ -50,6 +53,8 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
 						return (
 							<li class:list={[debugClass]}>
 								<a
+									data-sidebar-item
+									data-current-path={currentPath}
 									href={item.href}
 									class:list={[
 										'cosy:hover:bg-base-300',
@@ -65,10 +70,12 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
 											return (
 												<li class:list={[debugClass]}>
 													<a
+														data-sidebar-item
+														data-current-path={currentPath}
 														href={subitem.href}
 														class:list={[
 															'cosy:hover:bg-base-300',
-															{ 'cosy:active': isSubActive },
+															{ 'cosy:menu-active': isSubActive },
 															debugClass,
 														]}>
 														{subitem.text}
@@ -80,6 +87,8 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
 																return (
 																	<li class:list={[debugClass]}>
 																		<a
+																			data-sidebar-item
+																			data-current-path={currentPath}
 																			href={subsubitem.href}
 																			class:list={[
 																				'cosy:hover:bg-base-300',

package/dist/database/BaseDB.ts

@@ -1,9 +1,9 @@
-import { getCollection, getEntry, type CollectionEntry, type DataEntryMap } from "astro:content";
-import { logger } from "../utils/logger";
+import { getCollection, getEntry, type CollectionEntry, type DataEntryMap } from 'astro:content';
+import { logger } from '../utils/logger';
 
 /**
  * BaseDB 是所有数据库类的基类，提供了通用的文档操作功能。
- * 
+ *
  * 使用方法：
  * ```typescript
  * class MyDB extends BaseDB<'collection', MyEntry, MyDoc> {
@@ -12,153 +12,184 @@ import { logger } from "../utils/logger";
  *         return new MyDoc(entry);
  *     }
  * }
- * 
+ *
  * // 使用单例模式获取实例
  * const db = MyDB.getInstance();
  * const docs = await db.allTopLevelDocs();
  * ```
- * 
+ *
  * 类型参数说明：
  * @template Collection - Astro content collection 的名称，必须是 DataEntryMap 的键
  * @template Entry - Collection 对应的条目类型
  * @template Doc - 文档类型，通常是自定义的文档类
  */
 export abstract class BaseDB<
-    Collection extends keyof DataEntryMap,
-    Entry extends CollectionEntry<Collection>,
-    Doc
+	Collection extends keyof DataEntryMap,
+	Entry extends CollectionEntry<Collection>,
+	Doc,
 > {
-    /** 集合名称，必须在子类中指定 */
-    protected abstract collectionName: Collection;
-
-    /** 
-     * 创建文档实例的方法，必须在子类中实现
-     * @param entry - 集合条目
-     * @returns 文档实例
-     */
-    protected abstract createDoc(entry: Entry): Doc;
-
-    /**
-     * 获取集合中的所有条目
-     * @returns 返回所有条目的数组
-     */
-    async getEntries(): Promise<Entry[]> {
-        const entries = await getCollection(this.collectionName);
-        return entries.map(entry => entry as Entry);
-    }
-
-    /**
-     * 获取指定深度的文档
-     * 深度是指文档 ID 中斜杠的数量加1
-     * 例如：
-     * - "blog.md" 深度为1
-     * - "zh-cn/blog.md" 深度为2
-     * - "zh-cn/tech/blog.md" 深度为3
-     * 
-     * @param depth - 文档深度
-     * @returns 返回指定深度的文档数组
-     */
-    async getDocsByDepth(depth: number): Promise<Doc[]> {
-        const entries = await getCollection(this.collectionName, ({ id }) => id.split('/').length === depth);
-        return entries.map(entry => this.createDoc(entry as Entry));
-    }
-
-    /**
-     * 根据ID查找单个文档
-     * @param id - 文档ID
-     * @returns 返回找到的文档，如果不存在则返回null
-     */
-    async find(id: string): Promise<Doc | null> {
-        const entry = await getEntry(this.collectionName, id);
-        return entry ? this.createDoc(entry as Entry) : null;
-    }
-
-    /**
-     * 获取指定文档的直接子文档（不包括更深层级的文档）
-     * 例如对于文档 "zh-cn/blog"：
-     * - "zh-cn/blog/post1.md" 会被包含
-     * - "zh-cn/blog/2024/post2.md" 不会被包含
-     * 
-     * @param parentId - 父文档ID
-     * @returns 返回子文档数组
-     */
-    async getChildren(parentId: string): Promise<Doc[]> {
-        const parentLevel = parentId.split('/').length;
-        const childrenLevel = parentLevel + 1;
-
-        const entries = await getCollection(this.collectionName,
-            ({ id }) => id.startsWith(parentId) && id.split('/').length === childrenLevel);
-        return entries.map(entry => this.createDoc(entry as Entry));
-    }
-
-    /**
-     * 获取指定文档的所有后代文档（包括所有层级）
-     * 例如对于文档 "zh-cn/blog"，以下都会被包含：
-     * - "zh-cn/blog/post1.md"
-     * - "zh-cn/blog/2024/post2.md"
-     * - "zh-cn/blog/2024/tech/post3.md"
-     * 
-     * @param parentId - 父文档ID
-     * @returns 返回所有后代文档数组
-     */
-    async getDescendantDocs(parentId: string): Promise<Doc[]> {
-        const entries = await getCollection(this.collectionName, ({ id }) => id.startsWith(parentId));
-        return entries.map(entry => this.createDoc(entry as Entry));
-    }
-
-    /**
-     * 获取指定语言的顶级文档
-     * 通过检查文档ID是否以指定语言代码开头来筛选
-     * 
-     * @param lang - 语言代码（如 'zh-cn', 'en'）
-     * @returns 返回指定语言的顶级文档数组
-     */
-    async allDocsByLang(lang: string): Promise<Doc[]> {
-        const debug = false;
-        const docs = await this.getDocsByDepth(2);
-
-        if (debug) {
-            logger.array('所有顶级文档', docs);
-        }
-
-        return docs.filter(doc => {
-            const id = (doc as any).getId();
-            return id && typeof id === 'string' && id.startsWith(lang);
-        });
-    }
-
-    /**
-     * 获取用于 Astro 静态路由生成的路径参数
-     * 为每个文档生成包含语言和slug的路径参数
-     * 
-     * @returns 返回路径参数数组，每个元素包含 lang 和 slug
-     * @example
-     * ```typescript
-     * const paths = await db.getStaticPaths();
-     * // 返回格式：
-     * // [
-     * //   { params: { lang: 'zh-cn', slug: 'post1' } },
-     * //   { params: { lang: 'en', slug: 'post1' } }
-     * // ]
-     * ```
-     */
-    async getStaticPaths() {
-        const debug = false;
-        const docs = await this.getDescendantDocs('');
-        const paths = docs.map((doc) => {
-            const docWithMethods = doc as any;
-            return {
-                params: {
-                    lang: docWithMethods.getLang?.() || '',
-                    slug: docWithMethods.getSlug?.() || '',
-                },
-            };
-        });
-
-        if (debug) {
-            logger.array('所有文档的路径', paths);
-        }
-
-        return paths;
-    }
-} 
+	/** 集合名称，必须在子类中指定 */
+	protected abstract collectionName: Collection;
+
+	/**
+	 * 创建文档实例的方法，必须在子类中实现
+	 * @param entry - 集合条目
+	 * @returns 文档实例
+	 */
+	protected abstract createDoc(entry: Entry): Doc;
+
+	/**
+	 * 获取所有文档的ID
+	 * @returns 返回所有文档的ID数组
+	 */
+	async getAllIds(): Promise<string[]> {
+		const entries = await getCollection(this.collectionName);
+		return entries.map((entry) => entry.id);
+	}
+
+	/**
+	 * 获取集合中的所有条目
+	 * @returns 返回所有条目的数组
+	 */
+	async getEntries(): Promise<Entry[]> {
+		const entries = await getCollection(this.collectionName);
+		return entries.map((entry) => entry as Entry);
+	}
+
+	/**
+	 * 获取指定深度的文档
+	 * 深度是指文档 ID 中斜杠的数量加1
+	 * 例如：
+	 * - "blog.md" 深度为1
+	 * - "zh-cn/blog.md" 深度为2
+	 * - "zh-cn/tech/blog.md" 深度为3
+	 *
+	 * @param depth - 文档深度
+	 * @returns 返回指定深度的文档数组
+	 */
+	async getDocsByDepth(depth: number): Promise<Doc[]> {
+		const entries = await getCollection(
+			this.collectionName,
+			({ id }) => id.split('/').length === depth
+		);
+		return entries.map((entry) => this.createDoc(entry as Entry));
+	}
+
+	/**
+	 * 根据ID查找单个文档
+	 * @param id - 文档ID
+	 * @returns 返回找到的文档，如果不存在则返回null
+	 */
+	async find(id: string): Promise<Doc | null> {
+		const debug = false;
+		if (debug) {
+			logger.info(`查找文档，ID: ${id}`);
+		}
+
+		if (typeof id !== 'string') {
+			throw new Error('ID must be a string, but got ' + typeof id);
+		}
+
+		// 获取所有文档的ID并排好顺序
+		if (debug) {
+			const allIds = (await this.getAllIds()).sort();
+			logger.array('所有文档的ID', allIds);
+		}
+
+		// 根据ID查找文档
+		const entry = await getEntry(this.collectionName, id);
+		return entry ? this.createDoc(entry as Entry) : null;
+	}
+
+	/**
+	 * 获取指定文档的直接子文档（不包括更深层级的文档）
+	 * 例如对于文档 "zh-cn/blog"：
+	 * - "zh-cn/blog/post1.md" 会被包含
+	 * - "zh-cn/blog/2024/post2.md" 不会被包含
+	 *
+	 * @param parentId - 父文档ID
+	 * @returns 返回子文档数组
+	 */
+	async getChildren(parentId: string): Promise<Doc[]> {
+		const parentLevel = parentId.split('/').length;
+		const childrenLevel = parentLevel + 1;
+
+		const entries = await getCollection(
+			this.collectionName,
+			({ id }) => id.startsWith(parentId) && id.split('/').length === childrenLevel
+		);
+
+		return entries.map((entry) => this.createDoc(entry as Entry));
+	}
+
+	/**
+	 * 获取指定文档的所有后代文档（包括所有层级）
+	 * 例如对于文档 "zh-cn/blog"，以下都会被包含：
+	 * - "zh-cn/blog/post1.md"
+	 * - "zh-cn/blog/2024/post2.md"
+	 * - "zh-cn/blog/2024/tech/post3.md"
+	 *
+	 * @param parentId - 父文档ID
+	 * @returns 返回所有后代文档数组
+	 */
+	async getDescendantDocs(parentId: string): Promise<Doc[]> {
+		const entries = await getCollection(this.collectionName, ({ id }) => id.startsWith(parentId));
+		return entries.map((entry) => this.createDoc(entry as Entry));
+	}
+
+	/**
+	 * 获取指定语言的顶级文档
+	 * 通过检查文档ID是否以指定语言代码开头来筛选
+	 *
+	 * @param lang - 语言代码（如 'zh-cn', 'en'）
+	 * @returns 返回指定语言的顶级文档数组
+	 */
+	async allDocsByLang(lang: string): Promise<Doc[]> {
+		const debug = false;
+		const docs = await this.getDocsByDepth(2);
+
+		if (debug) {
+			logger.array('所有顶级文档', docs);
+		}
+
+		return docs.filter((doc) => {
+			const id = (doc as any).getId();
+			return id && typeof id === 'string' && id.startsWith(lang);
+		});
+	}
+
+	/**
+	 * 获取用于 Astro 静态路由生成的路径参数
+	 * 为每个文档生成包含语言和slug的路径参数
+	 *
+	 * @returns 返回路径参数数组，每个元素包含 lang 和 slug
+	 * @example
+	 * ```typescript
+	 * const paths = await db.getStaticPaths();
+	 * // 返回格式：
+	 * // [
+	 * //   { params: { lang: 'zh-cn', slug: 'post1' } },
+	 * //   { params: { lang: 'en', slug: 'post1' } }
+	 * // ]
+	 * ```
+	 */
+	async getStaticPaths() {
+		const debug = false;
+		const docs = await this.getDescendantDocs('');
+		const paths = docs.map((doc) => {
+			const docWithMethods = doc as any;
+			return {
+				params: {
+					lang: docWithMethods.getLang?.() || '',
+					slug: docWithMethods.getSlug?.() || '',
+				},
+			};
+		});
+
+		if (debug) {
+			logger.array('所有文档的路径', paths);
+		}
+
+		return paths;
+	}
+}