clarity-theme 0.1.0 → 0.1.2

package/{app → src}/composables/useArticle.ts

@@ -1,118 +1,118 @@
-import type { MetaSlotsTree } from '../../remark-plugins/rehype-meta-slots'
-import type { ClarityContentRow } from '../../shared/types/content'
+import type { MetaSlotsTree } from '../remark-plugins/rehype-meta-slots'
+import type { ClarityContentRow } from '../shared/types/content'
 import type { ArticleOrderType, ArticleProps } from '../types/article'
-import { orderBy } from 'es-toolkit/array'
-
-/** 获取已加载的文章内容/元信息 */
-export function useArticle(path?: MaybeRefOrGetter<string | undefined>) {
-	const route = useRoute()
-	const dataKey = computed(() => `content:${toValue(path) ?? route.path}`)
+import { orderBy } from 'es-toolkit/array'
+
+/** 获取已加载的文章内容/元信息 */
+export function useArticle(path?: MaybeRefOrGetter<string | undefined>) {
+	const route = useRoute()
+	const dataKey = computed(() => `content:${toValue(path) ?? route.path}`)
 	const post = computed(() => useNuxtData<ClarityContentRow | null | undefined>(dataKey.value).data.value)
-
-	return {
-		dataKey,
-		post,
-		toc: computed(() => post.value?.body.toc),
-		metaSlots: computed(() => post.value?.meta.slots as Record<string, MetaSlotsTree>),
-	}
-}
-
-/**
- * 生成文章查询参数，完全包装 useAsyncData 会使 SSR 行为异常，缓存 key 需要暴露
- * @see https://nuxt.com/docs/4.x/api/composables/use-async-data#usage
- * @see https://github.com/nuxt/nuxt/issues/14736
- * @todo 支持分页/分类筛选
- */
-export function getArticleIndexOptions(path = 'posts/%') {
-	return queryCollection('content')
-		.where('stem', 'LIKE', path)
-		.select('categories', 'date', 'description', 'image', 'path', 'readingTime', 'recommend', 'tags', 'title', 'type', 'updated')
-		.all()
-}
-
-interface UseCategoryOptions {
-	bindQuery?: string
-}
-
-export function useCategory(list: MaybeRefOrGetter<ArticleProps[]>, options?: UseCategoryOptions) {
-	const { bindQuery } = options || {}
-
-	const category = bindQuery
-		? useRouteQuery(bindQuery, undefined)
-		: ref<string | undefined>()
-
-	const categories = computed(() => [...new Set(toValue(list).map(item => item.categories?.[0]))])
-
-	const listCategorized = computed(
-		() => toValue(list).filter(
-			item => !category.value || item.categories?.[0] === category.value,
-		),
-	)
-
-	return {
-		category,
-		categories,
-		listCategorized,
-	}
-}
-
-interface UseArticleSortOptions {
-	bindDirectionQuery?: string
-	bindOrderQuery?: string
-	initialAscend?: boolean
-	initialOrder?: ArticleOrderType
-}
-
-export function useArticleSort(list: MaybeRefOrGetter<ArticleProps[]>, options?: UseArticleSortOptions) {
-	const clarity = useClarityConfig()
-	const {
-		bindDirectionQuery,
-		bindOrderQuery,
-		initialAscend = false,
-		initialOrder = (clarity.pagination.sortOrder as ArticleOrderType) || 'date',
-	} = options || {}
-
-	const sortOrder = bindOrderQuery
-		? useRouteQuery(bindOrderQuery, initialOrder)
-		: ref<ArticleOrderType>(initialOrder)
-
-	const booleanQueryTransformer = {
-		get: (val: string) => val === 'true',
-		set: (val: boolean) => val.toString(),
-	}
-
-	const isAscending = bindDirectionQuery
-		? useRouteQuery(bindDirectionQuery, initialAscend.toString(), { transform: booleanQueryTransformer })
-		: ref<boolean>(initialAscend)
-
-	const listSorted = computed(() => orderBy(
-		toValue(list),
+
+	return {
+		dataKey,
+		post,
+		toc: computed(() => post.value?.body.toc),
+		metaSlots: computed(() => post.value?.meta.slots as Record<string, MetaSlotsTree>),
+	}
+}
+
+/**
+ * 生成文章查询参数，完全包装 useAsyncData 会使 SSR 行为异常，缓存 key 需要暴露
+ * @see https://nuxt.com/docs/4.x/api/composables/use-async-data#usage
+ * @see https://github.com/nuxt/nuxt/issues/14736
+ * @todo 支持分页/分类筛选
+ */
+export function getArticleIndexOptions(path = 'posts/%') {
+	return queryCollection('content')
+		.where('stem', 'LIKE', path)
+		.select('categories', 'date', 'description', 'image', 'path', 'readingTime', 'recommend', 'tags', 'title', 'type', 'updated')
+		.all()
+}
+
+interface UseCategoryOptions {
+	bindQuery?: string
+}
+
+export function useCategory(list: MaybeRefOrGetter<ArticleProps[]>, options?: UseCategoryOptions) {
+	const { bindQuery } = options || {}
+
+	const category = bindQuery
+		? useRouteQuery(bindQuery, undefined)
+		: ref<string | undefined>()
+
+	const categories = computed(() => [...new Set(toValue(list).map(item => item.categories?.[0]))])
+
+	const listCategorized = computed(
+		() => toValue(list).filter(
+			item => !category.value || item.categories?.[0] === category.value,
+		),
+	)
+
+	return {
+		category,
+		categories,
+		listCategorized,
+	}
+}
+
+interface UseArticleSortOptions {
+	bindDirectionQuery?: string
+	bindOrderQuery?: string
+	initialAscend?: boolean
+	initialOrder?: ArticleOrderType
+}
+
+export function useArticleSort(list: MaybeRefOrGetter<ArticleProps[]>, options?: UseArticleSortOptions) {
+	const clarity = useClarityConfig()
+	const {
+		bindDirectionQuery,
+		bindOrderQuery,
+		initialAscend = false,
+		initialOrder = (clarity.pagination.sortOrder as ArticleOrderType) || 'date',
+	} = options || {}
+
+	const sortOrder = bindOrderQuery
+		? useRouteQuery(bindOrderQuery, initialOrder)
+		: ref<ArticleOrderType>(initialOrder)
+
+	const booleanQueryTransformer = {
+		get: (val: string) => val === 'true',
+		set: (val: boolean) => val.toString(),
+	}
+
+	const isAscending = bindDirectionQuery
+		? useRouteQuery(bindDirectionQuery, initialAscend.toString(), { transform: booleanQueryTransformer })
+		: ref<boolean>(initialAscend)
+
+	const listSorted = computed(() => orderBy(
+		toValue(list),
 		[sortOrder.value, 'date'] as any,
-		[isAscending.value ? 'asc' : 'desc'],
-	))
-
-	return {
-		sortOrder,
-		isAscending,
-		listSorted,
-	}
-}
-
-export function getCategoryIcon(category?: string) {
-	const clarity = useClarityConfig()
-	return clarity.article.categories[category!]?.icon ?? 'tabler:folder'
-}
-
-export function getCategoryColor(category?: string) {
-	const clarity = useClarityConfig()
-	return clarity.article.categories[category!]?.color
-}
-
-interface GetPostTypeClassNameOptions {
-	prefix?: string
-}
-
-export function getPostTypeClassName(type = 'tech', options?: GetPostTypeClassNameOptions) {
-	const { prefix = 'text' } = options || {}
-	return `${prefix}-${type}`
-}
+		[isAscending.value ? 'asc' : 'desc'],
+	))
+
+	return {
+		sortOrder,
+		isAscending,
+		listSorted,
+	}
+}
+
+export function getCategoryIcon(category?: string) {
+	const clarity = useClarityConfig()
+	return clarity.article.categories[category!]?.icon ?? 'tabler:folder'
+}
+
+export function getCategoryColor(category?: string) {
+	const clarity = useClarityConfig()
+	return clarity.article.categories[category!]?.color
+}
+
+interface GetPostTypeClassNameOptions {
+	prefix?: string
+}
+
+export function getPostTypeClassName(type = 'tech', options?: GetPostTypeClassNameOptions) {
+	const { prefix = 'text' } = options || {}
+	return `${prefix}-${type}`
+}

package/{app → src}/composables/useAvoid.ts

@@ -1,87 +1,87 @@
-import type { UseElementBoundingReturn } from '@vueuse/core'
-
-export type AvoidTarget = Ref<HTMLElement | null | undefined>
-
-export function useAvoidTransform(
-	originRef: AvoidTarget,
-	targets: Ref<AvoidTarget[]>,
-) {
-	const { height: windowHeight, width: windowWidth } = useWindowSize()
-	const targetBounds = shallowRef(new Map<AvoidTarget, UseElementBoundingReturn>())
-	const originRect = shallowRef({ top: 0, bottom: 0, left: 0, right: 0 })
-
-	function updateOriginPosition() {
-		const origin = originRef.value
-		if (!origin)
-			return
-		const style = getComputedStyle(origin)
-		const bottom = Number.parseFloat(style.bottom) || 0
-		const right = Number.parseFloat(style.insetInlineEnd || style.right) || 0
-		originRect.value = {
-			top: windowHeight.value - bottom - origin.offsetHeight,
-			bottom: windowHeight.value - bottom,
-			left: windowWidth.value - right - origin.offsetWidth,
-			right: windowWidth.value - right,
-		}
-	}
-
-	watch([windowHeight, windowWidth], updateOriginPosition)
-	onMounted(updateOriginPosition)
-
-	watchImmediate(targets, (list) => {
-		const newMap = new Map<AvoidTarget, UseElementBoundingReturn>()
-		for (const target of list) {
-			if (target.value)
-				newMap.set(target, targetBounds.value.get(target) ?? useElementBounding(target))
-		}
-		targetBounds.value = newMap
-	}, { deep: true })
-
-	const transform = computed(() => {
-		if (!originRef.value)
-			return ''
-		const { bottom: originBottom, left: originLeft, right: originRight, top: originTop } = originRect.value
-
-		const shifts = Array.from(targetBounds.value.values())
-			.filter(({ top, bottom, left, right }) => {
-				const hasHOverlap = originLeft < right.value && originRight > left.value
-				const hasVOverlap = top.value < originBottom && bottom.value > originTop
-				return hasHOverlap && hasVOverlap
-			})
-			.map(({ top }) => originBottom - top.value)
-
-		const maxShift = Math.max(...shifts)
-		return maxShift > 0 ? `translateY(-${maxShift + 16}px)` : ''
-	})
-
-	return {
-		transform,
-	}
-}
-
-export function useAvoidTarget(
-	targetRef: AvoidTarget,
-	active?: MaybeRefOrGetter<boolean>,
-) {
-	const layoutStore = useLayoutStore()
-
-	function add() {
-		if (!layoutStore.avoidTargets.includes(targetRef))
-			layoutStore.avoidTargets.push(targetRef)
-	}
-
-	function remove() {
-		const idx = layoutStore.avoidTargets.indexOf(targetRef)
-		if (idx > -1)
-			layoutStore.avoidTargets.splice(idx, 1)
-	}
-
-	watchImmediate([toRef(active), targetRef], ([isActive]) => {
-		if (isActive ?? true)
-			add()
-		else
-			remove()
-	})
-
-	onUnmounted(remove)
-}
+import type { UseElementBoundingReturn } from '@vueuse/core'
+
+export type AvoidTarget = Ref<HTMLElement | null | undefined>
+
+export function useAvoidTransform(
+	originRef: AvoidTarget,
+	targets: Ref<AvoidTarget[]>,
+) {
+	const { height: windowHeight, width: windowWidth } = useWindowSize()
+	const targetBounds = shallowRef(new Map<AvoidTarget, UseElementBoundingReturn>())
+	const originRect = shallowRef({ top: 0, bottom: 0, left: 0, right: 0 })
+
+	function updateOriginPosition() {
+		const origin = originRef.value
+		if (!origin)
+			return
+		const style = getComputedStyle(origin)
+		const bottom = Number.parseFloat(style.bottom) || 0
+		const right = Number.parseFloat(style.insetInlineEnd || style.right) || 0
+		originRect.value = {
+			top: windowHeight.value - bottom - origin.offsetHeight,
+			bottom: windowHeight.value - bottom,
+			left: windowWidth.value - right - origin.offsetWidth,
+			right: windowWidth.value - right,
+		}
+	}
+
+	watch([windowHeight, windowWidth], updateOriginPosition)
+	onMounted(updateOriginPosition)
+
+	watchImmediate(targets, (list) => {
+		const newMap = new Map<AvoidTarget, UseElementBoundingReturn>()
+		for (const target of list) {
+			if (target.value)
+				newMap.set(target, targetBounds.value.get(target) ?? useElementBounding(target))
+		}
+		targetBounds.value = newMap
+	}, { deep: true })
+
+	const transform = computed(() => {
+		if (!originRef.value)
+			return ''
+		const { bottom: originBottom, left: originLeft, right: originRight, top: originTop } = originRect.value
+
+		const shifts = Array.from(targetBounds.value.values())
+			.filter(({ top, bottom, left, right }) => {
+				const hasHOverlap = originLeft < right.value && originRight > left.value
+				const hasVOverlap = top.value < originBottom && bottom.value > originTop
+				return hasHOverlap && hasVOverlap
+			})
+			.map(({ top }) => originBottom - top.value)
+
+		const maxShift = Math.max(...shifts)
+		return maxShift > 0 ? `translateY(-${maxShift + 16}px)` : ''
+	})
+
+	return {
+		transform,
+	}
+}
+
+export function useAvoidTarget(
+	targetRef: AvoidTarget,
+	active?: MaybeRefOrGetter<boolean>,
+) {
+	const layoutStore = useLayoutStore()
+
+	function add() {
+		if (!layoutStore.avoidTargets.includes(targetRef))
+			layoutStore.avoidTargets.push(targetRef)
+	}
+
+	function remove() {
+		const idx = layoutStore.avoidTargets.indexOf(targetRef)
+		if (idx > -1)
+			layoutStore.avoidTargets.splice(idx, 1)
+	}
+
+	watchImmediate([toRef(active), targetRef], ([isActive]) => {
+		if (isActive ?? true)
+			add()
+		else
+			remove()
+	})
+
+	onUnmounted(remove)
+}

package/{app → src}/composables/useCopy.ts

@@ -1,21 +1,21 @@
-import type { MaybeComputedElementRef } from '@vueuse/core'
-
-/**
- * 点击触发元素时，将文本复制到剪贴板，并在触发元素上显示提示信息。
- * @param target - 提供复制文本、目标元素或组件实例。可为字符串、输入框（复制其 `value`）或其他 HTMLElement（复制其文本内容）。
- */
-export default function useCopy(
-	target: MaybeComputedElementRef | string,
-) {
-	function getText() {
-		if (typeof target === 'string')
-			return target
-
-		const el = unrefElement(target)
-		if (el instanceof HTMLInputElement)
-			return el.value
-		return el?.textContent || ''
-	}
-
-	return useClipboard({ source: getText, legacy: true })
-}
+import type { MaybeComputedElementRef } from '@vueuse/core'
+
+/**
+ * 点击触发元素时，将文本复制到剪贴板，并在触发元素上显示提示信息。
+ * @param target - 提供复制文本、目标元素或组件实例。可为字符串、输入框（复制其 `value`）或其他 HTMLElement（复制其文本内容）。
+ */
+export default function useCopy(
+	target: MaybeComputedElementRef | string,
+) {
+	function getText() {
+		if (typeof target === 'string')
+			return target
+
+		const el = unrefElement(target)
+		if (el instanceof HTMLInputElement)
+			return el.value
+		return el?.textContent || ''
+	}
+
+	return useClipboard({ source: getText, legacy: true })
+}

package/{app → src}/composables/usePagination.ts

@@ -1,70 +1,70 @@
-interface UsePaginationOptions {
-	initialPage?: number
-	perPage?: number
-	bindQuery?: string
-}
-
-export default function usePagination<T>(list: MaybeRefOrGetter<T[]>, options?: UsePaginationOptions) {
-	const clarity = useClarityConfig()
-	const {
-		initialPage = 1,
-		perPage = clarity.pagination.perPage || 10,
-		bindQuery,
-	} = options || {}
-
-	const totalPages = computed(() => Math.ceil(toValue(list).length / perPage) || initialPage)
-
-	function transformPage(val: string) {
-		const page = Number(val)
-		return page >= 1 && page <= totalPages.value ? page : initialPage
-	}
-
-	// 仅从无查询参数增加 query 时 push 一次
-	const mode = computed({
-		get: () => bindQuery && useRoute().query[bindQuery] ? 'replace' : 'push',
-		set() { },
-	})
-
-	const page = bindQuery
-		? useRouteQuery(bindQuery, initialPage.toString(), { transform: transformPage, mode })
-		: ref(initialPage)
-
-	const listPaged = computed(() => {
-		const start = (page.value - 1) * perPage
-		return toValue(list).slice(start, start + perPage)
-	})
-
-	// 不应在此处 watch list
-
-	return {
-		totalPages,
-		page,
-		listPaged,
-	}
-}
-
-/**
- * 生成分页数组
- *
- * 根据当前页码、扩展范围和总页数，生成一个用于显示的分页数组，包含起始页、结束页和省略符号位置。
- *
- * @param current 当前页码
- * @param total 总页数
- * @param expand 当前页码的扩展范围，默认值为1
- * @returns  返回一个包含可显示页码的数组。
- * 数组中的 `Number.NEGATIVE_INFINITY` 表示向前省略页码符号（...）的位置；
- * 数组中的 `Number.POSITIVE_INFINITY` 表示向后省略页码符号（...）的位置。
- *
- */
-export function getPaginationIndicator(current: number, total: number, expand: number = 1) {
-	const start = Math.max(2, Math.min(current - expand, total - 2 * expand))
-	const end = Math.min(total, start + 2 * expand)
-	const pageArr = Array.from({ length: end - start + 1 }, (_, i) => start + i)
-	start > 3 && pageArr.unshift(Number.NEGATIVE_INFINITY)
-	start === 3 && pageArr.unshift(2)
-	start > 1 && pageArr.unshift(1)
-	end < total - 2 && pageArr.push(Number.POSITIVE_INFINITY)
-	end === total - 2 && pageArr.push(total - 1)
-	end < total && pageArr.push(total)
-	return pageArr
-}
+interface UsePaginationOptions {
+	initialPage?: number
+	perPage?: number
+	bindQuery?: string
+}
+
+export default function usePagination<T>(list: MaybeRefOrGetter<T[]>, options?: UsePaginationOptions) {
+	const clarity = useClarityConfig()
+	const {
+		initialPage = 1,
+		perPage = clarity.pagination.perPage || 10,
+		bindQuery,
+	} = options || {}
+
+	const totalPages = computed(() => Math.ceil(toValue(list).length / perPage) || initialPage)
+
+	function transformPage(val: string) {
+		const page = Number(val)
+		return page >= 1 && page <= totalPages.value ? page : initialPage
+	}
+
+	// 仅从无查询参数增加 query 时 push 一次
+	const mode = computed({
+		get: () => bindQuery && useRoute().query[bindQuery] ? 'replace' : 'push',
+		set() { },
+	})
+
+	const page = bindQuery
+		? useRouteQuery(bindQuery, initialPage.toString(), { transform: transformPage, mode })
+		: ref(initialPage)
+
+	const listPaged = computed(() => {
+		const start = (page.value - 1) * perPage
+		return toValue(list).slice(start, start + perPage)
+	})
+
+	// 不应在此处 watch list
+
+	return {
+		totalPages,
+		page,
+		listPaged,
+	}
+}
+
+/**
+ * 生成分页数组
+ *
+ * 根据当前页码、扩展范围和总页数，生成一个用于显示的分页数组，包含起始页、结束页和省略符号位置。
+ *
+ * @param current 当前页码
+ * @param total 总页数
+ * @param expand 当前页码的扩展范围，默认值为1
+ * @returns  返回一个包含可显示页码的数组。
+ * 数组中的 `Number.NEGATIVE_INFINITY` 表示向前省略页码符号（...）的位置；
+ * 数组中的 `Number.POSITIVE_INFINITY` 表示向后省略页码符号（...）的位置。
+ *
+ */
+export function getPaginationIndicator(current: number, total: number, expand: number = 1) {
+	const start = Math.max(2, Math.min(current - expand, total - 2 * expand))
+	const end = Math.min(total, start + 2 * expand)
+	const pageArr = Array.from({ length: end - start + 1 }, (_, i) => start + i)
+	start > 3 && pageArr.unshift(Number.NEGATIVE_INFINITY)
+	start === 3 && pageArr.unshift(2)
+	start > 1 && pageArr.unshift(1)
+	end < total - 2 && pageArr.push(Number.POSITIVE_INFINITY)
+	end === total - 2 && pageArr.push(total - 1)
+	end < total && pageArr.push(total)
+	return pageArr
+}