clarity-theme 0.1.0 → 0.1.2

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

@@ -1,129 +1,129 @@
-import type { BundledLanguage, CodeToHastOptions, HighlighterCore, ShikiTransformer } from 'shiki'
-import { transformerColorizedBrackets } from '@shikijs/colorized-brackets'
-import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, transformerRenderIndentGuides, transformerRenderWhitespace } from '@shikijs/transformers'
-
-type TransformerOptions = Array<
-	| 'ignoreColorizedBrackets'
-	| 'ignoreRenderWhitespace'
-	| 'ignoreRenderIndentGuides'
->
-type ShikiOptions = CodeToHastOptions<BundledLanguage, string>
-
-const plainTextLanguages = new Set(['ansi', 'log', 'text'])
-
-interface ShikiCodeOptions {
-	language: string
-	transformerOptions?: TransformerOptions
-	shikiOptions?: Omit<ShikiOptions, 'lang'>
-}
-
-type ShikiHtmlOptions = ShikiCodeOptions & {
-	embeddedLanguages?: boolean
-}
-
-function getEmbeddedMarkdownLanguages(code: string, language: string) {
-	if (language !== 'markdown' && !language.startsWith('md'))
-		return []
-
-	// 处理 Markdown 高亮内代码块中的语言
-	// 加载 TeX 语言有概率导致 LaTeX 语言高亮炸掉
-	const mdLangRegex = /^\s*`{3,}(\S+)/gm
-	return [...new Set(
-		Array
-			.from(code.matchAll(mdLangRegex), match => match[1])
-			.filter(lang => lang !== undefined),
-	)]
-}
-
-function transformerUnwrap(): ShikiTransformer {
-	return {
-		root: (hast) => {
-			const lines = (hast.children[0] as any).children[0].children
-
-			return {
-				type: 'root',
-				children: lines,
-			}
-		},
-		line(node, line) {
-			node.properties['data-line'] = line
-		},
-	}
-}
-
-function getTransformers(options: ShikiCodeOptions): ShikiTransformer[] {
-	const ignored = new Set(options.transformerOptions)
-	const inline = options.shikiOptions?.structure === 'inline'
-	const ignoreInvisibleChars = inline || plainTextLanguages.has(options.language)
-
-	return [
-		transformerNotationDiff(),
-		transformerNotationHighlight(),
-		transformerNotationWordHighlight(),
-		transformerNotationFocus(),
-		transformerNotationErrorLevel(),
-		ignored.has('ignoreRenderIndentGuides') || ignoreInvisibleChars ? {} : transformerRenderIndentGuides(),
-		ignored.has('ignoreRenderWhitespace') || ignoreInvisibleChars ? {} : transformerRenderWhitespace(),
-		ignored.has('ignoreColorizedBrackets') ? {} : transformerColorizedBrackets(),
-		inline ? {} : transformerUnwrap(),
-	]
-}
-
-export default function useShiki() {
-	const shikiStore = useShikiStore()
-	let shiki: HighlighterCore
-
-	function getOptions(options: ShikiCodeOptions): ShikiOptions {
-		// Shiki 未收录的语言会在高亮时抛错，回退为纯文本
-		// ansi 是内置特殊语言，不在已加载语法列表中
-		const language = options.language === 'ansi' || shiki.getLoadedLanguages().includes(options.language) ? options.language : 'text'
-
-		return {
-			...shikiStore.options,
-			lang: language,
-			transformers: getTransformers({ ...options, language }),
-			...options.shikiOptions,
-		}
-	}
-
-	async function codeToHtml(code: string, language: string): Promise<string>
-	async function codeToHtml(code: string, options: ShikiHtmlOptions): Promise<string>
-	async function codeToHtml(code: string, languageOrOptions: string | ShikiHtmlOptions): Promise<string> {
-		const options = typeof languageOrOptions === 'string' ? { language: languageOrOptions } : languageOrOptions
-		shiki = await shikiStore.load()
-		await shikiStore.loadLang(options.language)
-
-		if (typeof languageOrOptions !== 'string' && languageOrOptions.embeddedLanguages)
-			await shikiStore.loadLang(...getEmbeddedMarkdownLanguages(code, options.language))
-
-		return shiki.codeToHtml(code, getOptions(options))
-	}
-
-	async function mountPlain(target: HTMLElement, language: string): Promise<void>
-	async function mountPlain(target: HTMLElement, options: ShikiCodeOptions): Promise<void>
-	async function mountPlain(target: HTMLElement, languageOrOptions: string | ShikiCodeOptions): Promise<void> {
-		const options = typeof languageOrOptions === 'string' ? { language: languageOrOptions } : languageOrOptions
-		shiki = await shikiStore.load()
-		const { createPlainShiki } = await import('plain-shiki')
-
-		await shikiStore.loadLang(options.language)
-		createPlainShiki(shiki).mount(target, getOptions(options))
-	}
-
-	async function mountInline(target: HTMLElement, code: string, options: ShikiCodeOptions): Promise<void> {
-		target.classList.add('shiki')
-		target.insertAdjacentHTML('afterbegin', await codeToHtml(code, {
-			...options,
-			shikiOptions: {
-				...options.shikiOptions,
-				structure: 'inline',
-			},
-		}))
-	}
-
-	return {
-		codeToHtml,
-		mountInline,
-		mountPlain,
-	}
-}
+import type { BundledLanguage, CodeToHastOptions, HighlighterCore, ShikiTransformer } from 'shiki'
+import { transformerColorizedBrackets } from '@shikijs/colorized-brackets'
+import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, transformerRenderIndentGuides, transformerRenderWhitespace } from '@shikijs/transformers'
+
+type TransformerOptions = Array<
+	| 'ignoreColorizedBrackets'
+	| 'ignoreRenderWhitespace'
+	| 'ignoreRenderIndentGuides'
+>
+type ShikiOptions = CodeToHastOptions<BundledLanguage, string>
+
+const plainTextLanguages = new Set(['ansi', 'log', 'text'])
+
+interface ShikiCodeOptions {
+	language: string
+	transformerOptions?: TransformerOptions
+	shikiOptions?: Omit<ShikiOptions, 'lang'>
+}
+
+type ShikiHtmlOptions = ShikiCodeOptions & {
+	embeddedLanguages?: boolean
+}
+
+function getEmbeddedMarkdownLanguages(code: string, language: string) {
+	if (language !== 'markdown' && !language.startsWith('md'))
+		return []
+
+	// 处理 Markdown 高亮内代码块中的语言
+	// 加载 TeX 语言有概率导致 LaTeX 语言高亮炸掉
+	const mdLangRegex = /^\s*`{3,}(\S+)/gm
+	return [...new Set(
+		Array
+			.from(code.matchAll(mdLangRegex), match => match[1])
+			.filter(lang => lang !== undefined),
+	)]
+}
+
+function transformerUnwrap(): ShikiTransformer {
+	return {
+		root: (hast) => {
+			const lines = (hast.children[0] as any).children[0].children
+
+			return {
+				type: 'root',
+				children: lines,
+			}
+		},
+		line(node, line) {
+			node.properties['data-line'] = line
+		},
+	}
+}
+
+function getTransformers(options: ShikiCodeOptions): ShikiTransformer[] {
+	const ignored = new Set(options.transformerOptions)
+	const inline = options.shikiOptions?.structure === 'inline'
+	const ignoreInvisibleChars = inline || plainTextLanguages.has(options.language)
+
+	return [
+		transformerNotationDiff(),
+		transformerNotationHighlight(),
+		transformerNotationWordHighlight(),
+		transformerNotationFocus(),
+		transformerNotationErrorLevel(),
+		ignored.has('ignoreRenderIndentGuides') || ignoreInvisibleChars ? {} : transformerRenderIndentGuides(),
+		ignored.has('ignoreRenderWhitespace') || ignoreInvisibleChars ? {} : transformerRenderWhitespace(),
+		ignored.has('ignoreColorizedBrackets') ? {} : transformerColorizedBrackets(),
+		inline ? {} : transformerUnwrap(),
+	]
+}
+
+export default function useShiki() {
+	const shikiStore = useShikiStore()
+	let shiki: HighlighterCore
+
+	function getOptions(options: ShikiCodeOptions): ShikiOptions {
+		// Shiki 未收录的语言会在高亮时抛错，回退为纯文本
+		// ansi 是内置特殊语言，不在已加载语法列表中
+		const language = options.language === 'ansi' || shiki.getLoadedLanguages().includes(options.language) ? options.language : 'text'
+
+		return {
+			...shikiStore.options,
+			lang: language,
+			transformers: getTransformers({ ...options, language }),
+			...options.shikiOptions,
+		}
+	}
+
+	async function codeToHtml(code: string, language: string): Promise<string>
+	async function codeToHtml(code: string, options: ShikiHtmlOptions): Promise<string>
+	async function codeToHtml(code: string, languageOrOptions: string | ShikiHtmlOptions): Promise<string> {
+		const options = typeof languageOrOptions === 'string' ? { language: languageOrOptions } : languageOrOptions
+		shiki = await shikiStore.load()
+		await shikiStore.loadLang(options.language)
+
+		if (typeof languageOrOptions !== 'string' && languageOrOptions.embeddedLanguages)
+			await shikiStore.loadLang(...getEmbeddedMarkdownLanguages(code, options.language))
+
+		return shiki.codeToHtml(code, getOptions(options))
+	}
+
+	async function mountPlain(target: HTMLElement, language: string): Promise<void>
+	async function mountPlain(target: HTMLElement, options: ShikiCodeOptions): Promise<void>
+	async function mountPlain(target: HTMLElement, languageOrOptions: string | ShikiCodeOptions): Promise<void> {
+		const options = typeof languageOrOptions === 'string' ? { language: languageOrOptions } : languageOrOptions
+		shiki = await shikiStore.load()
+		const { createPlainShiki } = await import('plain-shiki')
+
+		await shikiStore.loadLang(options.language)
+		createPlainShiki(shiki).mount(target, getOptions(options))
+	}
+
+	async function mountInline(target: HTMLElement, code: string, options: ShikiCodeOptions): Promise<void> {
+		target.classList.add('shiki')
+		target.insertAdjacentHTML('afterbegin', await codeToHtml(code, {
+			...options,
+			shikiOptions: {
+				...options.shikiOptions,
+				structure: 'inline',
+			},
+		}))
+	}
+
+	return {
+		codeToHtml,
+		mountInline,
+		mountPlain,
+	}
+}

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

@@ -1,57 +1,57 @@
-import type { Toc, TocLink } from '@nuxt/content'
-import type { MaybeComputedElementRef } from '@vueuse/core'
-
-interface TocList {
-	id: string
-	offsetTop: number | undefined
-}
-
-export function useToc(toc: MaybeRefOrGetter<Toc | undefined>, scrollableEl?: MaybeComputedElementRef) {
-	const { height: bodyHeight } = useElementSize(document?.body)
-	const { y: scrollY } = useWindowScroll()
-
-	function flattenToc(tocTree: TocLink[], tocList: TocList[] = []) {
-		tocTree.forEach(({ id, children }) => {
-			const headingOffset = document?.getElementById(id)?.offsetTop
-			tocList.push({ id, offsetTop: headingOffset })
-			children && flattenToc(children, tocList)
-		})
-		return tocList
-	}
-
-	const tocOffsets = computedWithControl(
-		refDebounced(bodyHeight),
-		() => flattenToc(toValue(toc)?.links || []).reverse(),
-	)
-
-	function getActiveHeading() {
-		const scrollMargin = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('scroll-margin-top'))
-		const scrollOffset = scrollY.value + (scrollMargin || 64)
-		// 为兼容性不使用 findLast，而是使用倒序的 tocOffsets
-		return tocOffsets.value.find(item => item.offsetTop && item.offsetTop <= scrollOffset)?.id
-	}
-
-	const activeHeadingId = computedWithControl(
-		refThrottled(scrollY, undefined, true),
-		() => document && getActiveHeading(),
-	)
-
-	function scrollToActiveTocItem() {
-		const el = unrefElement(scrollableEl)
-		const active = el?.querySelector<HTMLLinkElement>(`a[href="#${activeHeadingId.value}"]`)
-
-		if (el && active) {
-			el.scrollTo({
-				top: active.offsetTop - el.clientHeight / 4,
-				behavior: 'smooth',
-			})
-		}
-	}
-
-	watch(activeHeadingId, scrollToActiveTocItem)
-
-	return {
-		tocOffsets,
-		activeHeadingId,
-	}
-}
+import type { Toc, TocLink } from '@nuxt/content'
+import type { MaybeComputedElementRef } from '@vueuse/core'
+
+interface TocList {
+	id: string
+	offsetTop: number | undefined
+}
+
+export function useToc(toc: MaybeRefOrGetter<Toc | undefined>, scrollableEl?: MaybeComputedElementRef) {
+	const { height: bodyHeight } = useElementSize(document?.body)
+	const { y: scrollY } = useWindowScroll()
+
+	function flattenToc(tocTree: TocLink[], tocList: TocList[] = []) {
+		tocTree.forEach(({ id, children }) => {
+			const headingOffset = document?.getElementById(id)?.offsetTop
+			tocList.push({ id, offsetTop: headingOffset })
+			children && flattenToc(children, tocList)
+		})
+		return tocList
+	}
+
+	const tocOffsets = computedWithControl(
+		refDebounced(bodyHeight),
+		() => flattenToc(toValue(toc)?.links || []).reverse(),
+	)
+
+	function getActiveHeading() {
+		const scrollMargin = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('scroll-margin-top'))
+		const scrollOffset = scrollY.value + (scrollMargin || 64)
+		// 为兼容性不使用 findLast，而是使用倒序的 tocOffsets
+		return tocOffsets.value.find(item => item.offsetTop && item.offsetTop <= scrollOffset)?.id
+	}
+
+	const activeHeadingId = computedWithControl(
+		refThrottled(scrollY, undefined, true),
+		() => document && getActiveHeading(),
+	)
+
+	function scrollToActiveTocItem() {
+		const el = unrefElement(scrollableEl)
+		const active = el?.querySelector<HTMLLinkElement>(`a[href="#${activeHeadingId.value}"]`)
+
+		if (el && active) {
+			el.scrollTo({
+				top: active.offsetTop - el.clientHeight / 4,
+				behavior: 'smooth',
+			})
+		}
+	}
+
+	watch(activeHeadingId, scrollToActiveTocItem)
+
+	return {
+		tocOffsets,
+		activeHeadingId,
+	}
+}

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

@@ -1,56 +1,56 @@
-import { pascalCase } from 'es-toolkit/string'
-import {
-	ContentRenderer,
-	LazyBlogWidget,
-	LazyWidgetBlogLog,
-	LazyWidgetBlogStats,
-	LazyWidgetBlogTech,
-	LazyWidgetEmpty,
-	LazyWidgetToc,
-} from '#components'
-
-// @keep-sorted
-const rawWidgets = {
-	LazyWidgetBlogLog,
-	LazyWidgetBlogStats,
-	LazyWidgetBlogTech,
-	LazyWidgetEmpty,
-	LazyWidgetToc,
-}
-
-type RawWidgetName = keyof typeof rawWidgets
-
-/** 若首字母大写还需移除`-`前缀 */
-type KebabCase<S extends string> = S extends `${infer First}${infer Rest}`
-	? `${First extends Capitalize<First> ? '-' : ''}${Lowercase<First>}${KebabCase<Rest>}`
-	: ''
-
-type RemovePrefix<S extends string, Prefix extends string> = S extends `${Prefix}${infer Rest}` ? Rest : S
-
-export type WidgetName = RemovePrefix<KebabCase<RawWidgetName>, '-lazy-widget-'> | `meta-aside-${string}`
-
-export default function useWidgets(widgetList: MaybeRefOrGetter<WidgetName[]>) {
-	const { metaSlots } = useArticle()
-
-	function renderMetaSlots(widgetName: WidgetName) {
-		const slotsTree = metaSlots.value?.[widgetName.slice('meta-'.length)]
-		return h(
-			LazyBlogWidget,
-			{ card: !slotsTree, ...slotsTree?.props },
-			() => slotsTree
-				? h(ContentRenderer, { value: slotsTree })
-				: `${widgetName} 不存在`,
-		)
-	}
-
-	const widgets = computed(() => toValue(widgetList).map(widgetName => ({
-		name: widgetName,
-		comp: widgetName.startsWith('meta-aside-')
-			? renderMetaSlots(widgetName)
-			: rawWidgets[`LazyWidget${pascalCase(widgetName)}` as RawWidgetName],
-	})))
-
-	return {
-		widgets,
-	}
-}
+import { pascalCase } from 'es-toolkit/string'
+import {
+	ContentRenderer,
+	LazyBlogWidget,
+	LazyWidgetBlogLog,
+	LazyWidgetBlogStats,
+	LazyWidgetBlogTech,
+	LazyWidgetEmpty,
+	LazyWidgetToc,
+} from '#components'
+
+// @keep-sorted
+const rawWidgets = {
+	LazyWidgetBlogLog,
+	LazyWidgetBlogStats,
+	LazyWidgetBlogTech,
+	LazyWidgetEmpty,
+	LazyWidgetToc,
+}
+
+type RawWidgetName = keyof typeof rawWidgets
+
+/** 若首字母大写还需移除`-`前缀 */
+type KebabCase<S extends string> = S extends `${infer First}${infer Rest}`
+	? `${First extends Capitalize<First> ? '-' : ''}${Lowercase<First>}${KebabCase<Rest>}`
+	: ''
+
+type RemovePrefix<S extends string, Prefix extends string> = S extends `${Prefix}${infer Rest}` ? Rest : S
+
+export type WidgetName = RemovePrefix<KebabCase<RawWidgetName>, '-lazy-widget-'> | `meta-aside-${string}`
+
+export default function useWidgets(widgetList: MaybeRefOrGetter<WidgetName[]>) {
+	const { metaSlots } = useArticle()
+
+	function renderMetaSlots(widgetName: WidgetName) {
+		const slotsTree = metaSlots.value?.[widgetName.slice('meta-'.length)]
+		return h(
+			LazyBlogWidget,
+			{ card: !slotsTree, ...slotsTree?.props },
+			() => slotsTree
+				? h(ContentRenderer, { value: slotsTree })
+				: `${widgetName} 不存在`,
+		)
+	}
+
+	const widgets = computed(() => toValue(widgetList).map(widgetName => ({
+		name: widgetName,
+		comp: widgetName.startsWith('meta-aside-')
+			? renderMetaSlots(widgetName)
+			: rawWidgets[`LazyWidget${pascalCase(widgetName)}` as RawWidgetName],
+	})))
+
+	return {
+		widgets,
+	}
+}

package/{config → src/config}/app.ts

@@ -1,75 +1,75 @@
-import type { NavItem } from '../app/types/nav'
+import type { NavItem } from '../types/nav'
 import type { ClarityPublicConfig } from './public'
 
 export interface NavGroup {
 	title: string
 	items: NavItem[]
 }
-
-/** Theme 提供的 UI 默认值，全部可由消费项目在 app/app.config.ts 中覆盖 */
-export interface ClarityUiConfig {
-	component: {
-		alert: {
-			defaultStyle: 'card' | 'flat'
-		}
-		codeblock: {
-			triggerRows: number
-			collapsedRows: number
-			enableIndentGuide: boolean
-			indent: number
-			tabSize: number
-		}
-		excerpt: {
-			animation: boolean
-			caret: string
-		}
-		slide: {
-			showTitle: boolean
-		}
-		stats: {
-			/** 归档页面每年标题对应的年龄 */
-			birthYear?: number
-		}
-	}
-	footer: {
-		/** 页脚版权信息，支持 <br> 等内联 HTML */
-		copyright: string
-		/** 侧边栏底部图标导航 */
-		iconNav: NavItem[]
+
+/** Theme 提供的 UI 默认值，全部可由消费项目在 app/app.config.ts 中覆盖 */
+export interface ClarityUiConfig {
+	component: {
+		alert: {
+			defaultStyle: 'card' | 'flat'
+		}
+		codeblock: {
+			triggerRows: number
+			collapsedRows: number
+			enableIndentGuide: boolean
+			indent: number
+			tabSize: number
+		}
+		excerpt: {
+			animation: boolean
+			caret: string
+		}
+		slide: {
+			showTitle: boolean
+		}
+		stats: {
+			/** 归档页面每年标题对应的年龄 */
+			birthYear?: number
+		}
+	}
+	footer: {
+		/** 页脚版权信息，支持 <br> 等内联 HTML */
+		copyright: string
+		/** 侧边栏底部图标导航 */
+		iconNav: NavItem[]
 		/** 页脚站点地图 */
 		nav: NavGroup[]
-	}
-	header: {
-		/** 左侧栏顶部 Logo，默认使用 site.author.avatar */
-		logo: string
-		/** 展示标题文本，否则仅展示 Logo */
-		showTitle: boolean
-		/** 标题下的副标题，默认使用 site.subtitle */
-		subtitle: string
-		/** 标题后的随机表情 */
-		emojiTail: string[]
-	}
-	link: {
-		/** 无订阅源展示静音图标 */
-		remindNoFeed: boolean
-		/** 友链分组内随机排序 */
-		randomInGroup: boolean
-	}
+	}
+	header: {
+		/** 左侧栏顶部 Logo，默认使用 site.author.avatar */
+		logo: string
+		/** 展示标题文本，否则仅展示 Logo */
+		showTitle: boolean
+		/** 标题下的副标题，默认使用 site.subtitle */
+		subtitle: string
+		/** 标题后的随机表情 */
+		emojiTail: string[]
+	}
+	link: {
+		/** 无订阅源展示静音图标 */
+		remindNoFeed: boolean
+		/** 友链分组内随机排序 */
+		randomInGroup: boolean
+	}
 	/** 左侧栏导航 */
 	nav: NavGroup[]
-	pagination: {
-		perPage: number
-		/** 默认排序方式，需为 article.order 中的键名 */
-		sortOrder: string
-		/** 允许文章列表正序，开启后排序方式左侧图标可切换顺序 */
-		allowAscending: boolean
-	}
-	themes: Record<'light' | 'system' | 'dark', {
-		icon: string
-		tip: string
-	}>
-}
-
+	pagination: {
+		perPage: number
+		/** 默认排序方式，需为 article.order 中的键名 */
+		sortOrder: string
+		/** 允许文章列表正序，开启后排序方式左侧图标可切换顺序 */
+		allowAscending: boolean
+	}
+	themes: Record<'light' | 'system' | 'dark', {
+		icon: string
+		tip: string
+	}>
+}
+
 export type ClarityAppConfig = ClarityPublicConfig & ClarityUiConfig
 
 /**