clarity-theme 0.1.0

package/app/components/content/LinkCard.vue

@@ -0,0 +1,74 @@
+<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;
+	gap: 0.5rem;
+	padding: 0.5em 0.8em;
+	font-size: 0.9em;
+	line-height: 1.4;
+
+	article & {
+		width: 20rem;
+		max-width: 90%;
+		margin: 2rem auto;
+	}
+
+	// 溢出显示省略号
+	.link-card-info {
+		flex-grow: 1;
+		overflow: hidden;
+	}
+
+	.link-card-title {
+		display: -webkit-box;
+		overflow: hidden;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+	}
+
+	// 内部需要是块元素
+	.link-card-description {
+		overflow: hidden;
+		opacity: 0.5;
+		margin-top: 0.2em;
+		font-size: 0.9em;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.link-card-icon {
+		flex-shrink: 0;
+		height: 3rem;
+		max-width: 5rem;
+		border-radius: 0.5rem;
+		object-fit: cover;
+	}
+}
+</style>

package/app/components/content/MdTitle.vue

@@ -0,0 +1,26 @@
+<template>
+<div class="md-title">
+	<slot />
+</div>
+</template>
+
+<style lang="scss" scoped>
+.md-title {
+	margin: 0.5em 0;
+	font-size: 1.1em;
+	font-weight: bold;
+
+	&::before {
+		content: "#";
+		position: absolute;
+		opacity: 0;
+		font-size: 0.8em;
+		transform: translate(-0.9em, 0.3em);
+		transition: opacity 0.2s;
+	}
+
+	&:hover::before {
+		opacity: 0.5;
+	}
+}
+</style>

package/app/components/content/Mermaid.vue

@@ -0,0 +1,133 @@
+<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;
+
+	// mermaid 在 <body> 下量取文本，此处需与根元素排版一致，否则图形错位
+	line-height: 1.4;
+
+	:deep(svg) {
+		display: block;
+		height: auto;
+		max-width: 100%;
+		margin-inline: auto;
+	}
+
+	// 文本标签由 foreignObject 承载，会继承文章的段落样式
+	:deep(p) {
+		margin: 0;
+	}
+}
+
+.mermaid-error {
+	font-size: 0.85em;
+	color: var(--c-text-2);
+
+	summary {
+		color: var(--c-error);
+		cursor: pointer;
+	}
+
+	pre {
+		overflow-wrap: anywhere;
+		white-space: pre-wrap;
+	}
+}
+</style>

package/app/components/content/MusicScore.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import type { AbcVisualParams, SynthObjectController, SynthVisualOptions, TuneObject } from 'abcjs'
+
+const props = defineProps<{
+	abc: string
+}>()
+
+const container = useTemplateRef('abcjs-container')
+const synthController = useTemplateRef('synth-controller')
+
+const tuneObj = ref<TuneObject>()
+const synthObjController = ref<SynthObjectController>()
+
+const abcVisualParams: AbcVisualParams = {
+	responsive: 'resize',
+}
+
+const synthVisualOptions: SynthVisualOptions = {
+	displayLoop: true,
+	displayRestart: true,
+	displayPlay: true,
+	displayProgress: true,
+	displayWarp: true,
+}
+
+async function checkSoundFonts() {
+	try {
+		const res = await fetch('https://paulrosen.github.io/midi-js-soundfonts/', { method: 'HEAD' })
+		return res.ok
+	}
+	catch (e) {
+		console.error('[music-abc] 无法连接 SoundFonts，不启用播放能力\n', e)
+		return false
+	}
+}
+
+onMounted(async () => {
+	const { renderAbc, synth } = await import('abcjs')
+
+	tuneObj.value = renderAbc(container.value!, props.abc, abcVisualParams)[0]
+
+	if (!synth.supportsAudio() || !(await checkSoundFonts()))
+		return
+
+	synthObjController.value = new synth.SynthController()
+	synthObjController.value.load(synthController.value!, null, synthVisualOptions)
+	synthObjController.value.setTune(tuneObj.value, false)
+})
+
+onUnmounted(() => {
+	synthObjController.value?.pause()
+})
+</script>
+
+<template>
+<div class="music-score">
+	<div ref="abcjs-container" />
+	<div ref="synth-controller" />
+</div>
+</template>
+
+<style lang="scss" scoped>
+.music-score {
+	line-height: 1.4;
+
+	:deep(.abcjs-inline-audio) {
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+		padding: 0.2em 0.5em;
+		border-radius: 4px;
+		background-color: var(--c-bg-2);
+		font-size: 0.8em;
+		font-variant-numeric: tabular-nums;
+
+		&.abcjs-disabled {
+			opacity: 0.5;
+		}
+
+		> .abcjs-btn {
+			width: 1em;
+			padding: 0.2em;
+			box-sizing: content-box;
+			background: none;
+			line-height: 1;
+
+			> svg {
+				display: block;
+			}
+
+			&:hover, &.abcjs-pushed {
+				color: var(--c-primary);
+			}
+
+			g {
+				fill: currentcolor;
+				stroke: currentcolor;
+			}
+		}
+
+		> .abcjs-midi-start {
+			> .abcjs-pause-svg, > .abcjs-loading-svg {
+				display: none;
+			}
+
+			&.abcjs-pushed, &.abcjs-loading {
+				> .abcjs-play-svg {
+					display: none;
+				}
+			}
+
+			&.abcjs-pushed .abcjs-pause-svg {
+				display: block;
+			}
+		}
+
+		> .abcjs-midi-progress-background, .abcjs-midi-progress-indicator {
+			border: 8px solid transparent;
+			border-radius: 12px;
+			box-sizing: content-box;
+			background-clip: padding-box;
+		}
+
+		> .abcjs-midi-progress-background {
+			flex-grow: 1;
+			position: relative;
+			height: 4px;
+			background-color: var(--c-bg-soft);
+		}
+
+		.abcjs-midi-progress-indicator {
+			position: absolute;
+			top: -10px;
+			width: 8px;
+			height: 8px;
+			margin-left: -10px;
+			background-color: var(--c-text-1);
+		}
+
+		.abcjs-midi-clock {
+			display: inline-block;
+		}
+
+		.abcjs-tempo-wrapper {
+			display: flex;
+			align-items: center;
+		}
+
+		input.abcjs-midi-tempo {
+			position: relative;
+			width: 3em;
+			text-align: end;
+		}
+
+		.abcjs-loading .abcjs-loading-svg {
+			display: inherit;
+		}
+
+		.abcjs-loading {
+			@keyframes abcjs-spin {
+				from { transform: rotate(0deg); }
+				to { transform: rotate(360deg); }
+			}
+
+			outline: none;
+			animation: abcjs-spin 1s linear infinite;
+		}
+
+		.abcjs-loading-svg circle {
+			stroke: var(--c-text-1);
+		}
+
+		.abcjs-css-warning {
+			display: none;
+		}
+	}
+}
+</style>

package/app/components/content/Pic.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { UtilImgProps } from '../util/Img.vue'
+import { LazyPopoverLightbox } from '#components'
+
+const props = withDefaults(defineProps<UtilImgProps & {
+	caption?: string
+	zoom?: boolean
+}>(), {
+	caption: '',
+	zoom: true,
+})
+
+const slots = defineSlots<{
+	caption: () => any
+}>()
+
+const pic = useTemplateRef<HTMLImageElement>('pic')
+const modalStore = useModalStore()
+
+const { open } = modalStore.use(
+	() => h(LazyPopoverLightbox, {
+		el: unrefElement(pic)!,
+		caption: props.alt || props.caption || slots.caption,
+	}),
+	{ unique: true },
+)
+</script>
+
+<template>
+<!-- <ProseImg> 被 <p> 包裹，服务端渲染时若内含块级元素会自动关闭，导致水合不匹配 -->
+<figure class="image">
+	<UtilImg
+		ref="pic"
+		class="image"
+		:style="{ cursor: zoom && 'zoom-in' }"
+		:alt="caption || alt"
+		:src :width :height :mirror :filter :densities
+		@click="zoom && open()"
+	/>
+	<figcaption v-if="caption || $slots.caption" aria-hidden>
+		<slot name="caption">
+			{{ caption }}
+		</slot>
+	</figcaption>
+</figure>
+</template>
+
+<style lang="scss" scoped>
+figcaption {
+	margin-top: -0.5em;
+	font-size: 0.8em;
+	text-align: center;
+	color: var(--c-text-2);
+}
+</style>

package/app/components/content/Poetry.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+	title?: string
+	author?: string
+	footer?: string
+}>()
+</script>
+
+<template>
+<section class="poetry">
+	<h2 class="poetry-title text-center">
+		{{ title }}
+	</h2>
+	<div class="text-center">
+		{{ author }}
+	</div>
+	<div class="poetry-content">
+		<slot />
+	</div>
+	<div class="text-center">
+		{{ footer }}
+	</div>
+</section>
+</template>
+
+<style lang="scss" scoped>
+.poetry {
+	width: fit-content;
+	margin: 2em auto;
+	white-space: pre-wrap;
+
+	.poetry-title {
+		font-size: 1.2em;
+	}
+
+	:deep(p) {
+		width: fit-content;
+		margin: 0.5em auto;
+	}
+}
+</style>

package/app/components/content/ProseA.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+	href: string
+	icon?: string | false
+}>(), {
+	icon: undefined,
+})
+
+const icon = computed(() => props.icon ?? getDomainIcon(props.href))
+const tip = computed(() => ({
+	content: isExtLink(props.href) ? getDomain(props.href) : safelyDecodeUriComponent(props.href),
+	inlinePositioning: true,
+}))
+</script>
+
+<template>
+<UtilLink v-tip="tip" class="z-link" :to="href">
+	<Icon v-if="icon" class="domain-icon" :name="icon" />
+	<slot />
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
+.z-link[href] {
+	margin: -0.1em -0.2em;
+	padding: 0.1em 0.2em;
+	background: linear-gradient(var(--c-primary-soft), var(--c-primary-soft)) no-repeat center bottom / 100% 0.1em;
+	color: var(--c-primary);
+	transition: all 0.2s;
+
+	&:hover {
+		border-radius: 0.3em;
+		background-size: 100% 100%;
+	}
+
+	.domain-icon {
+		margin-inline-end: 0.1em;
+	}
+}
+</style>

package/app/components/content/ProseCode.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+
+const props = defineProps<{
+	language?: string
+	/**
+	 * 代码原文。
+	 * MDC 原生行为中 inline code 通过默认插槽（text VNode）传递，
+	 * 上游 @nuxtjs/mdc patch（inline code props.code 传入原文）存在时走此 prop，
+	 * fenced code（ProsePre 内部）也始终通过此 prop 传递。
+	 */
+	code?: string
+	copy?: boolean
+}>()
+
+const slots = useSlots()
+
+/** 从插槽 VNode 中递归提取纯文本 */
+function extractText(vnode: VNode): string {
+	if (typeof vnode.children === 'string')
+		return vnode.children
+	if (Array.isArray(vnode.children))
+		return (vnode.children as VNode[]).map(extractText).join('')
+	return ''
+}
+
+/** 无 patch 时以插槽文本作为原文，有 patch 时优先使用 code prop */
+const rawCode = computed(() => {
+	if (props.code !== undefined)
+		return props.code
+	return (slots.default?.() ?? []).map(extractText).join('')
+})
+
+const { copy: copyCode, copied } = useCopy(rawCode.value)
+const shiki = useShiki()
+const codeElement = useTemplateRef('code')
+const highlighted = ref(false)
+
+onMounted(async () => {
+	if (!props.language)
+		return
+	await shiki.mountInline(codeElement.value!, rawCode.value, {
+		language: props.language,
+		transformerOptions: ['ignoreColorizedBrackets'],
+	})
+	highlighted.value = true
+})
+</script>
+
+<template>
+<code ref="code" :class="{ copyable: copy }">
+	<template v-if="!language || !highlighted">
+		<slot>{{ rawCode }}</slot>
+	</template>
+	<Icon v-if="copy" v-show="false" name="tabler:check" />
+	<button v-if="copy" type="button" class="copy-button" aria-label="复制" @click="copyCode()">
+		<Icon :name="copied ? 'tabler:check' : 'tabler:copy'" />
+	</button>
+</code>
+</template>
+
+<style lang="scss" scoped>
+code {
+	margin: 0.1em;
+	padding: 0.1rem 0.3em;
+	border: 1px solid var(--c-border);
+	border-radius: 4px;
+	background-color: var(--c-bg-2);
+	font-size: 0.85em;
+	white-space: break-spaces;
+
+	&.copyable {
+		padding-inline-end: 0.1em;
+	}
+
+	@supports (color: color-mix(in srgb, transparent, transparent)) {
+		border-color: color-mix(in srgb, currentcolor 10%, transparent);
+		background-color: color-mix(in srgb, currentcolor 5%, transparent);
+	}
+}
+
+.copy-button {
+	display: inline-flex;
+	margin-inline-start: 0.2em;
+	vertical-align: -0.2em;
+	color: var(--c-text-3);
+	transition: color 0.2s;
+
+	&:hover,
+	&:focus-visible {
+		opacity: 1;
+		color: var(--c-primary);
+	}
+}
+</style>