clarity-theme 0.1.0 → 0.1.2

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

@@ -1,65 +1,65 @@
-<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>
+<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;
 
@@ -175,4 +175,4 @@ onUnmounted(() => {
 		}
 	}
 }
-</style>
+</style>

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

@@ -1,55 +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>
+<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>
+</style>

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

@@ -1,29 +1,29 @@
-<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>
+<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;
@@ -38,4 +38,4 @@ defineProps<{
 		margin: 0.5em auto;
 	}
 }
-</style>
+</style>

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

@@ -1,26 +1,26 @@
-<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>
+<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;
@@ -37,4 +37,4 @@ const tip = computed(() => ({
 		margin-inline-end: 0.1em;
 	}
 }
-</style>
+</style>

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

@@ -35,31 +35,31 @@ const { copy: copyCode, copied } = useCopy(rawCode.value)
 const shiki = useShiki()
 const codeElement = useTemplateRef('code')
 const highlighted = ref(false)
-
-onMounted(async () => {
+
+onMounted(async () => {
 	if (!props.language)
 		return
 	await shiki.mountInline(codeElement.value!, rawCode.value, {
 		language: props.language,
 		transformerOptions: ['ignoreColorizedBrackets'],
-	})
-	highlighted.value = true
-})
-</script>
-
+	})
+	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>
+	<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;
@@ -92,4 +92,4 @@ code {
 		color: var(--c-primary);
 	}
 }
-</style>
+</style>

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

@@ -1,119 +1,119 @@
-<script setup lang="ts">
-import { escape } from 'es-toolkit/string'
-
-const props = withDefaults(defineProps<{
-	code?: string
-	language?: string
-	filename?: string
-	/** @deprecated Use `transformerNotationHighlight` instead */
-	highlights?: number[]
-	meta?: string
-	class?: string
-}>(), {
-	code: '',
-	meta: '',
-	language: 'text', // Nuxt Content 已经做了此处理
-})
-
-interface CodeblockMeta {
-	icon?: string
-	wrap?: boolean
-	[meta: string]: string | boolean | undefined
-}
-
-const meta = computed(() => props.meta.split(' ').reduce((acc: CodeblockMeta, item) => {
-	const [key, value] = item.split('=')
-	acc[key!] = value ?? true
-	return acc
-}, {}))
-
-const clarity = useClarityConfig()
-const compConf = computed(() => clarity.component.codeblock)
-
-const rows = computed(() => props.code.split('\n').length - 1)
-const collapsible = computed(() => !meta.value.expand && rows.value > compConf.value.triggerRows)
-const [isCollapsed, toggleCollapsed] = useToggle(collapsible.value)
-
-const icon = computed(() => meta.value.icon || getFileIcon(props.filename) || getLangIcon(props.language))
-const isWrap = ref(meta.value.wrap)
-const byteSize = computed(() => formatBytes(new TextEncoder().encode(props.code).length))
-
-const codeblock = useTemplateRef('codeblock')
-const { copy, copied } = useCopy(codeblock)
-const shiki = useShiki()
-const rawHtml = ref(escape(props.code))
-
-function getIndent() {
-	if (meta.value.indent)
-		return meta.value.indent
-
-	if (['md', 'mdc', 'json', 'jsonc', 'yaml', 'yml'].includes(props.language))
-		return 2
-
-	return compConf.value.indent
-}
-
-onMounted(async () => {
-	rawHtml.value = await shiki.codeToHtml(props.code.trimEnd(), {
-		language: props.language,
-		transformerOptions: [compConf.value.enableIndentGuide ? 'ignoreRenderWhitespace' : 'ignoreRenderIndentGuides'],
-		shikiOptions: { meta: { indent: getIndent() } },
-		embeddedLanguages: true,
-	})
-})
-</script>
-
-<template>
-<figure
-	class="z-codeblock"
-	:class="{ collapsed: collapsible && isCollapsed, collapsible }"
-	:style="{
-		'--collapsed-rows': compConf.collapsedRows,
-		'--tab-size': meta.indent as string || compConf.tabSize,
-	}"
->
-	<figcaption>
-		<span v-if="filename" class="filename">
-			<Icon :name="icon" /> {{ filename }}
-		</span>
-		<span v-else />
-		<!-- 语言不采用绝对定位，因为和文件名占据互斥空间 -->
-		<span v-if="language" class="language">{{ language }}</span>
-		<div class="operations">
-			<button @click="isWrap = !isWrap">
-				{{ isWrap ? '横向滚动' : '自动换行' }}
-			</button>
-			<button @click="copy()">
-				{{ copied ? '已复制' : '复制' }}
-			</button>
-		</div>
-	</figcaption>
-
-	<!-- 嘿嘿，不要换行 -->
-	<pre
-		ref="codeblock"
-		class="shiki scrollcheck-x"
-		:class="[props.class, { wrap: isWrap }]"
-		v-html="rawHtml"
-	/>
-
-	<button
-		v-if="collapsible"
-		class="toggle-btn"
-		:aria-label="isCollapsed ? '展开代码块' : '折叠代码块'"
-		@click="toggleCollapsed()"
-	>
-		<Icon
-			class="toggle-icon"
-			:class="{ 'is-collapsed': isCollapsed }"
-			name="tabler:chevrons-up"
-		/>
-		<span>{{ rows }} lines, {{ props.code.length }} chars, {{ byteSize }}</span>
-	</button>
-</figure>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import { escape } from 'es-toolkit/string'
+
+const props = withDefaults(defineProps<{
+	code?: string
+	language?: string
+	filename?: string
+	/** @deprecated Use `transformerNotationHighlight` instead */
+	highlights?: number[]
+	meta?: string
+	class?: string
+}>(), {
+	code: '',
+	meta: '',
+	language: 'text', // Nuxt Content 已经做了此处理
+})
+
+interface CodeblockMeta {
+	icon?: string
+	wrap?: boolean
+	[meta: string]: string | boolean | undefined
+}
+
+const meta = computed(() => props.meta.split(' ').reduce((acc: CodeblockMeta, item) => {
+	const [key, value] = item.split('=')
+	acc[key!] = value ?? true
+	return acc
+}, {}))
+
+const clarity = useClarityConfig()
+const compConf = computed(() => clarity.component.codeblock)
+
+const rows = computed(() => props.code.split('\n').length - 1)
+const collapsible = computed(() => !meta.value.expand && rows.value > compConf.value.triggerRows)
+const [isCollapsed, toggleCollapsed] = useToggle(collapsible.value)
+
+const icon = computed(() => meta.value.icon || getFileIcon(props.filename) || getLangIcon(props.language))
+const isWrap = ref(meta.value.wrap)
+const byteSize = computed(() => formatBytes(new TextEncoder().encode(props.code).length))
+
+const codeblock = useTemplateRef('codeblock')
+const { copy, copied } = useCopy(codeblock)
+const shiki = useShiki()
+const rawHtml = ref(escape(props.code))
+
+function getIndent() {
+	if (meta.value.indent)
+		return meta.value.indent
+
+	if (['md', 'mdc', 'json', 'jsonc', 'yaml', 'yml'].includes(props.language))
+		return 2
+
+	return compConf.value.indent
+}
+
+onMounted(async () => {
+	rawHtml.value = await shiki.codeToHtml(props.code.trimEnd(), {
+		language: props.language,
+		transformerOptions: [compConf.value.enableIndentGuide ? 'ignoreRenderWhitespace' : 'ignoreRenderIndentGuides'],
+		shikiOptions: { meta: { indent: getIndent() } },
+		embeddedLanguages: true,
+	})
+})
+</script>
+
+<template>
+<figure
+	class="z-codeblock"
+	:class="{ collapsed: collapsible && isCollapsed, collapsible }"
+	:style="{
+		'--collapsed-rows': compConf.collapsedRows,
+		'--tab-size': meta.indent as string || compConf.tabSize,
+	}"
+>
+	<figcaption>
+		<span v-if="filename" class="filename">
+			<Icon :name="icon" /> {{ filename }}
+		</span>
+		<span v-else />
+		<!-- 语言不采用绝对定位，因为和文件名占据互斥空间 -->
+		<span v-if="language" class="language">{{ language }}</span>
+		<div class="operations">
+			<button @click="isWrap = !isWrap">
+				{{ isWrap ? '横向滚动' : '自动换行' }}
+			</button>
+			<button @click="copy()">
+				{{ copied ? '已复制' : '复制' }}
+			</button>
+		</div>
+	</figcaption>
+
+	<!-- 嘿嘿，不要换行 -->
+	<pre
+		ref="codeblock"
+		class="shiki scrollcheck-x"
+		:class="[props.class, { wrap: isWrap }]"
+		v-html="rawHtml"
+	/>
+
+	<button
+		v-if="collapsible"
+		class="toggle-btn"
+		:aria-label="isCollapsed ? '展开代码块' : '折叠代码块'"
+		@click="toggleCollapsed()"
+	>
+		<Icon
+			class="toggle-icon"
+			:class="{ 'is-collapsed': isCollapsed }"
+			name="tabler:chevrons-up"
+		/>
+		<span>{{ rows }} lines, {{ props.code.length }} chars, {{ byteSize }}</span>
+	</button>
+</figure>
+</template>
+
+<style lang="scss" scoped>
 .z-codeblock {
 	--line-height: 1.4;
 
@@ -288,4 +288,4 @@ pre {
 		transform: rotate(180deg);
 	}
 }
-</style>
+</style>