clarity-theme 0.1.0 → 0.1.2

package/{app → src}/components/content/Key.vue

@@ -1,145 +1,145 @@
-<script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-const props = withDefaults(defineProps<{
-	text?: string
-	/** https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key */
-	code?: string
-	/** 仅 macOS 默认显示图标 */
-	icon?: boolean
-	ctrl?: boolean
-	shift?: boolean
-	alt?: boolean
-	meta?: boolean
-	win?: boolean
-	/** 智能适配：Windows用Ctrl，macOS用Cmd */
-	cmd?: boolean
-	prevent?: boolean
-}>(), {
-	icon: undefined,
-})
-
-const emit = defineEmits<{
-	press: []
-}>()
-
-const mounted = useMounted()
-const isMac = computed(() => mounted.value && /mac ?os/i.test(navigator?.userAgent))
-const useSymbol = computed(() => isMac.value ? props.icon !== false : props.icon)
-const keyJoiner = computed(() => useSymbol.value ? '' : '+')
-
-// @keep-sorted
-const displayMap = {
-	' ': 'Space',
-	'ArrowDown': '↓',
-	'ArrowLeft': '←',
-	'ArrowRight': '→',
-	'ArrowUp': '↑',
-	'Control': 'Ctrl',
-	'Delete': 'Del',
-	'Escape': 'Esc',
-	get 'Meta'() { return isMac.value ? 'Cmd' : 'Win' },
-}
-
-// @keep-sorted
-const symbolMap = {
-	' ': '␣',
-	'Alt': '⌥',
-	'Backspace': '⌫',
-	'Control': '⌃',
-	'Delete': '⌦',
-	'Enter': '↵',
-	'Escape': '⎋',
-	get 'Meta'() { return isMac.value ? '⌘' : '⊞' },
-	'Shift': '⇧',
-	'Tab': '⇥',
-	'Win': '⊞',
-}
-
-function normalizeCodeDisplay(code?: string) {
-	if (!code)
-		return ''
-	if (useSymbol.value && code in symbolMap)
-		return symbolMap[code as keyof typeof symbolMap]
-	if (code in displayMap)
-		return displayMap[code as keyof typeof displayMap]
-	return code
-}
-
-const codeDisplay = computed(() => {
-	if (props.text)
-		return props.text
-
-	const keyConfigs = [
-		{ condition: props.cmd, code: isMac.value ? 'Meta' : 'Control' },
-		{ condition: props.ctrl && !props.cmd, code: 'Control' },
-		{ condition: props.shift, code: 'Shift' },
-		{ condition: props.alt, code: 'Alt' },
-		{ condition: props.meta && !props.cmd, code: 'Meta' },
-		{ condition: props.win && !props.meta, code: 'Win' },
-		{ condition: props.code, code: props.code },
-	]
-
-	return keyConfigs
-		.filter(config => config.condition)
-		.map(config => normalizeCodeDisplay(config.code))
-		.join(keyJoiner.value)
-})
-
-const active = ref(false)
-
-const ctrlState = useKeyModifier('Control')
-const shiftState = useKeyModifier('Shift')
-const altState = useKeyModifier('Alt')
-const metaState = useKeyModifier('Meta')
-
-/** 检查当前修饰键状态是否匹配 props */
-function modifiersMatch() {
-	const cmdMatch = props.cmd
-		? (isMac.value ? metaState.value : ctrlState.value)
-		: true
-
-	return cmdMatch
-		&& (!props.ctrl || (!props.cmd && ctrlState.value))
-		&& (!props.shift || shiftState.value)
-		&& (!props.alt || altState.value)
-		&& (!props.meta || (!props.cmd && metaState.value))
-}
-
-function matchKeyEvent(e: KeyboardEvent, expectedCode?: string) {
-	if (expectedCode && e.key?.toLowerCase() !== expectedCode.toLowerCase())
-		return false
-	return modifiersMatch()
-}
-
-useEventListener('keydown', (e) => {
-	if (matchKeyEvent(e, props.code)) {
-		emit('press')
-		active.value = true
-		props.prevent && e.preventDefault()
-	}
-})
-
-useEventListener('keyup', (e) => {
-	if (matchKeyEvent(e, props.code) || !modifiersMatch())
-		active.value = false
-})
-
-useEventListener('blur', () => {
-	active.value = false
-})
-</script>
-
-<template>
-<UtilHydrateSafe>
-	<kbd :class="{ active }" @click.stop="emit('press')">
-		<slot>{{ codeDisplay }}</slot>
-	</kbd>
-</UtilHydrateSafe>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+	text?: string
+	/** https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key */
+	code?: string
+	/** 仅 macOS 默认显示图标 */
+	icon?: boolean
+	ctrl?: boolean
+	shift?: boolean
+	alt?: boolean
+	meta?: boolean
+	win?: boolean
+	/** 智能适配：Windows用Ctrl，macOS用Cmd */
+	cmd?: boolean
+	prevent?: boolean
+}>(), {
+	icon: undefined,
+})
+
+const emit = defineEmits<{
+	press: []
+}>()
+
+const mounted = useMounted()
+const isMac = computed(() => mounted.value && /mac ?os/i.test(navigator?.userAgent))
+const useSymbol = computed(() => isMac.value ? props.icon !== false : props.icon)
+const keyJoiner = computed(() => useSymbol.value ? '' : '+')
+
+// @keep-sorted
+const displayMap = {
+	' ': 'Space',
+	'ArrowDown': '↓',
+	'ArrowLeft': '←',
+	'ArrowRight': '→',
+	'ArrowUp': '↑',
+	'Control': 'Ctrl',
+	'Delete': 'Del',
+	'Escape': 'Esc',
+	get 'Meta'() { return isMac.value ? 'Cmd' : 'Win' },
+}
+
+// @keep-sorted
+const symbolMap = {
+	' ': '␣',
+	'Alt': '⌥',
+	'Backspace': '⌫',
+	'Control': '⌃',
+	'Delete': '⌦',
+	'Enter': '↵',
+	'Escape': '⎋',
+	get 'Meta'() { return isMac.value ? '⌘' : '⊞' },
+	'Shift': '⇧',
+	'Tab': '⇥',
+	'Win': '⊞',
+}
+
+function normalizeCodeDisplay(code?: string) {
+	if (!code)
+		return ''
+	if (useSymbol.value && code in symbolMap)
+		return symbolMap[code as keyof typeof symbolMap]
+	if (code in displayMap)
+		return displayMap[code as keyof typeof displayMap]
+	return code
+}
+
+const codeDisplay = computed(() => {
+	if (props.text)
+		return props.text
+
+	const keyConfigs = [
+		{ condition: props.cmd, code: isMac.value ? 'Meta' : 'Control' },
+		{ condition: props.ctrl && !props.cmd, code: 'Control' },
+		{ condition: props.shift, code: 'Shift' },
+		{ condition: props.alt, code: 'Alt' },
+		{ condition: props.meta && !props.cmd, code: 'Meta' },
+		{ condition: props.win && !props.meta, code: 'Win' },
+		{ condition: props.code, code: props.code },
+	]
+
+	return keyConfigs
+		.filter(config => config.condition)
+		.map(config => normalizeCodeDisplay(config.code))
+		.join(keyJoiner.value)
+})
+
+const active = ref(false)
+
+const ctrlState = useKeyModifier('Control')
+const shiftState = useKeyModifier('Shift')
+const altState = useKeyModifier('Alt')
+const metaState = useKeyModifier('Meta')
+
+/** 检查当前修饰键状态是否匹配 props */
+function modifiersMatch() {
+	const cmdMatch = props.cmd
+		? (isMac.value ? metaState.value : ctrlState.value)
+		: true
+
+	return cmdMatch
+		&& (!props.ctrl || (!props.cmd && ctrlState.value))
+		&& (!props.shift || shiftState.value)
+		&& (!props.alt || altState.value)
+		&& (!props.meta || (!props.cmd && metaState.value))
+}
+
+function matchKeyEvent(e: KeyboardEvent, expectedCode?: string) {
+	if (expectedCode && e.key?.toLowerCase() !== expectedCode.toLowerCase())
+		return false
+	return modifiersMatch()
+}
+
+useEventListener('keydown', (e) => {
+	if (matchKeyEvent(e, props.code)) {
+		emit('press')
+		active.value = true
+		props.prevent && e.preventDefault()
+	}
+})
+
+useEventListener('keyup', (e) => {
+	if (matchKeyEvent(e, props.code) || !modifiersMatch())
+		active.value = false
+})
+
+useEventListener('blur', () => {
+	active.value = false
+})
+</script>
+
+<template>
+<UtilHydrateSafe>
+	<kbd :class="{ active }" @click.stop="emit('press')">
+		<slot>{{ codeDisplay }}</slot>
+	</kbd>
+</UtilHydrateSafe>
+</template>
+
+<style lang="scss" scoped>
 kbd {
 	display: inline-block;
 	margin: 0.1em;
@@ -161,4 +161,4 @@ kbd {
 		transform: translateY(0.05em);
 	}
 }
-</style>
+</style>

package/{app → src}/components/content/LinkBanner.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-defineProps<{
-	banner?: string
-	mirror?: ImgService
-	title: string
-	description?: string
-	link: string
-}>()
-</script>
-
-<template>
-<UtilLink :to="link" class="link-banner card" :title="joinWith([title, description, link])">
-	<UtilImg v-if="banner" class="link-banner-bg" :src="banner" :mirror />
-	<div class="link-banner-header" />
-	<div class="link-banner-info">
-		<div class="link-banner-title">
-			{{ title }}
-		</div>
-		<div class="link-banner-desc">
-			{{ description ?? getDomain(link) }}
-		</div>
-	</div>
-</UtilLink>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	banner?: string
+	mirror?: ImgService
+	title: string
+	description?: string
+	link: string
+}>()
+</script>
+
+<template>
+<UtilLink :to="link" class="link-banner card" :title="joinWith([title, description, link])">
+	<UtilImg v-if="banner" class="link-banner-bg" :src="banner" :mirror />
+	<div class="link-banner-header" />
+	<div class="link-banner-info">
+		<div class="link-banner-title">
+			{{ title }}
+		</div>
+		<div class="link-banner-desc">
+			{{ description ?? getDomain(link) }}
+		</div>
+	</div>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
 .link-banner {
 	line-height: 1.4;
 
@@ -56,4 +56,4 @@ defineProps<{
 		color: var(--c-text-2);
 	}
 }
-</style>
+</style>

package/{app → src}/components/content/LinkCard.vue

@@ -1,30 +1,30 @@
-<script setup lang="ts">
-defineProps<{
-	link: string
-	title: string
-	description?: string
-	icon?: string
-	mirror?: ImgService
-}>()
-</script>
-
-<template>
-<UtilLink :to="link" class="link-card card" :title="joinWith([title, description, link])">
-	<div class="link-card-info">
-		<div class="link-card-title">
-			{{ title }}
-		</div>
-		<div class="link-card-description">
-			{{ description ?? getDomain(link) }}
-		</div>
-	</div>
-	<slot name="icon" class="link-card-icon-slot">
-		<UtilImg v-if="icon" class="link-card-icon" :src="icon" :mirror />
-	</slot>
-</UtilLink>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	link: string
+	title: string
+	description?: string
+	icon?: string
+	mirror?: ImgService
+}>()
+</script>
+
+<template>
+<UtilLink :to="link" class="link-card card" :title="joinWith([title, description, link])">
+	<div class="link-card-info">
+		<div class="link-card-title">
+			{{ title }}
+		</div>
+		<div class="link-card-description">
+			{{ description ?? getDomain(link) }}
+		</div>
+	</div>
+	<slot name="icon" class="link-card-icon-slot">
+		<UtilImg v-if="icon" class="link-card-icon" :src="icon" :mirror />
+	</slot>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
 .link-card {
 	display: flex;
 	align-items: center;
@@ -71,4 +71,4 @@ defineProps<{
 		object-fit: cover;
 	}
 }
-</style>
+</style>

package/{app → src}/components/content/MdTitle.vue

@@ -1,10 +1,10 @@
-<template>
-<div class="md-title">
-	<slot />
-</div>
-</template>
-
-<style lang="scss" scoped>
+<template>
+<div class="md-title">
+	<slot />
+</div>
+</template>
+
+<style lang="scss" scoped>
 .md-title {
 	margin: 0.5em 0;
 	font-size: 1.1em;
@@ -23,4 +23,4 @@
 		opacity: 0.5;
 	}
 }
-</style>
+</style>

package/{app → src}/components/content/Mermaid.vue

@@ -1,101 +1,101 @@
-<script setup lang="ts">
-const props = defineProps<{
-	code: string
-}>()
-
-const colorMode = useColorMode()
-const container = useTemplateRef('mermaid')
-const [scroll, toggleScroll] = useToggle(true)
-
-const id = useId()
-// mermaid 会移除 DOM 中同 id 的旧图，故每次渲染另起 id，避免切换主题时高度塌陷
-let renderCount = 0
-
-// mermaid 体积较大，接近视口时才动态引入；隐藏容器（如 Tab）内不渲染，避免量取到错误的尺寸
-const isVisible = useElementVisibility(container, { rootMargin: '50%' })
-// 可见后即锁定，避免滚出视口时图表被清空
-const shouldRender = ref(false)
-whenever(isVisible, () => shouldRender.value = true, { once: true })
-
-const diagram = computedAsync<{ svg?: string, width?: number, error?: string }>(async () => {
-	// 异步依赖需在 await 之前读取
-	const { code } = props
-	const darkMode = colorMode.value === 'dark'
-	if (!shouldRender.value)
-		return {}
-
-	try {
-		const { default: mermaid } = await import('mermaid')
-		// 等待 color-mode 换好根元素类名，以及字体就绪——否则取到旧配色、量出偏窄的文本
-		await Promise.all([nextTick(), document.fonts.ready])
-
-		const style = getComputedStyle(document.documentElement)
-		const cssVar = (name: string) => style.getPropertyValue(name)
-
-		mermaid.initialize({
-			fontFamily: 'inherit',
-			// 须在 load 事件前关闭，否则 mermaid 会自行扫描并接管页面元素
-			startOnLoad: false,
-			suppressErrorRendering: true,
-			// themeVariables 仅对 base 主题生效，其余主题会重算这些颜色
-			theme: 'base',
-			themeVariables: {
-				darkMode,
-				// 不指定则深色下连线被推导为近黑色、边标签被推导为绿色
-				background: cssVar('--c-bg'),
-				edgeLabelBackground: cssVar('--c-bg-2'),
-				// 仅把自带主题的紫色换成博客主题色，其余配色仍由 mermaid 推导
-				primaryBorderColor: cssVar('--c-primary'),
-				primaryColor: cssVar('--c-primary-soft'),
-				primaryTextColor: cssVar('--c-text-1'),
-				textColor: cssVar('--c-text-1'),
-			},
-		})
-		const { svg } = await mermaid.render(`${id}-${renderCount++}`, code)
-		// 用原始画布宽度保留字号，超宽图表在容器内滚动
-		const width = new DOMParser().parseFromString(svg, 'image/svg+xml').querySelector('svg')?.viewBox.baseVal.width
-		return { svg, width }
-	}
-	catch (error) {
-		return { error: error instanceof Error ? error.message : String(error) }
-	}
-}, {})
-</script>
-
-<template>
-<div ref="mermaid" class="mermaid-diagram">
-	<Tooltip
-		v-if="diagram.svg"
-		tag="div"
-		interactive
-		trigger="mouseenter focusin"
-		:hide-on-click="false"
-		:delay="500"
-	>
-		<template #content>
-			<Icon v-show="false" :name="scroll ? 'tabler:arrows-horizontal' : 'tabler:arrows-minimize'" />
-			<ZButton
-				variant="text"
-				:icon="scroll ? 'tabler:arrows-minimize' : 'tabler:arrows-horizontal'"
-				:text="scroll ? '适应宽度' : '横向滚动'"
-				@click="toggleScroll()"
-			/>
-		</template>
-		<div class="scrollcheck-x" tabindex="0" role="region" aria-label="Mermaid 图表">
-			<div :style="{ minWidth: scroll && diagram.width ? `${diagram.width}px` : undefined }" v-html="diagram.svg" />
-		</div>
-	</Tooltip>
-	<template v-else-if="diagram.error">
-		<details class="mermaid-error">
-			<summary>图表渲染失败，查看错误详情</summary>
-			<pre>{{ diagram.error }}</pre>
-		</details>
-		<ProsePre :code language="mermaid" meta="wrap" />
-	</template>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const props = defineProps<{
+	code: string
+}>()
+
+const colorMode = useColorMode()
+const container = useTemplateRef('mermaid')
+const [scroll, toggleScroll] = useToggle(true)
+
+const id = useId()
+// mermaid 会移除 DOM 中同 id 的旧图，故每次渲染另起 id，避免切换主题时高度塌陷
+let renderCount = 0
+
+// mermaid 体积较大，接近视口时才动态引入；隐藏容器（如 Tab）内不渲染，避免量取到错误的尺寸
+const isVisible = useElementVisibility(container, { rootMargin: '50%' })
+// 可见后即锁定，避免滚出视口时图表被清空
+const shouldRender = ref(false)
+whenever(isVisible, () => shouldRender.value = true, { once: true })
+
+const diagram = computedAsync<{ svg?: string, width?: number, error?: string }>(async () => {
+	// 异步依赖需在 await 之前读取
+	const { code } = props
+	const darkMode = colorMode.value === 'dark'
+	if (!shouldRender.value)
+		return {}
+
+	try {
+		const { default: mermaid } = await import('mermaid')
+		// 等待 color-mode 换好根元素类名，以及字体就绪——否则取到旧配色、量出偏窄的文本
+		await Promise.all([nextTick(), document.fonts.ready])
+
+		const style = getComputedStyle(document.documentElement)
+		const cssVar = (name: string) => style.getPropertyValue(name)
+
+		mermaid.initialize({
+			fontFamily: 'inherit',
+			// 须在 load 事件前关闭，否则 mermaid 会自行扫描并接管页面元素
+			startOnLoad: false,
+			suppressErrorRendering: true,
+			// themeVariables 仅对 base 主题生效，其余主题会重算这些颜色
+			theme: 'base',
+			themeVariables: {
+				darkMode,
+				// 不指定则深色下连线被推导为近黑色、边标签被推导为绿色
+				background: cssVar('--c-bg'),
+				edgeLabelBackground: cssVar('--c-bg-2'),
+				// 仅把自带主题的紫色换成博客主题色，其余配色仍由 mermaid 推导
+				primaryBorderColor: cssVar('--c-primary'),
+				primaryColor: cssVar('--c-primary-soft'),
+				primaryTextColor: cssVar('--c-text-1'),
+				textColor: cssVar('--c-text-1'),
+			},
+		})
+		const { svg } = await mermaid.render(`${id}-${renderCount++}`, code)
+		// 用原始画布宽度保留字号，超宽图表在容器内滚动
+		const width = new DOMParser().parseFromString(svg, 'image/svg+xml').querySelector('svg')?.viewBox.baseVal.width
+		return { svg, width }
+	}
+	catch (error) {
+		return { error: error instanceof Error ? error.message : String(error) }
+	}
+}, {})
+</script>
+
+<template>
+<div ref="mermaid" class="mermaid-diagram">
+	<Tooltip
+		v-if="diagram.svg"
+		tag="div"
+		interactive
+		trigger="mouseenter focusin"
+		:hide-on-click="false"
+		:delay="500"
+	>
+		<template #content>
+			<Icon v-show="false" :name="scroll ? 'tabler:arrows-horizontal' : 'tabler:arrows-minimize'" />
+			<ZButton
+				variant="text"
+				:icon="scroll ? 'tabler:arrows-minimize' : 'tabler:arrows-horizontal'"
+				:text="scroll ? '适应宽度' : '横向滚动'"
+				@click="toggleScroll()"
+			/>
+		</template>
+		<div class="scrollcheck-x" tabindex="0" role="region" aria-label="Mermaid 图表">
+			<div :style="{ minWidth: scroll && diagram.width ? `${diagram.width}px` : undefined }" v-html="diagram.svg" />
+		</div>
+	</Tooltip>
+	<template v-else-if="diagram.error">
+		<details class="mermaid-error">
+			<summary>图表渲染失败，查看错误详情</summary>
+			<pre>{{ diagram.error }}</pre>
+		</details>
+		<ProsePre :code language="mermaid" meta="wrap" />
+	</template>
+</div>
+</template>
+
+<style lang="scss" scoped>
 // 不可命名为 .mermaid：mermaid 会按此类名自动扫描并接管元素
 .mermaid-diagram {
 	margin: 0.5em 0;
@@ -130,4 +130,4 @@ const diagram = computedAsync<{ svg?: string, width?: number, error?: string }>(
 		white-space: pre-wrap;
 	}
 }
-</style>
+</style>