clarity-theme 0.1.0 → 0.1.2

package/{app → src}/components/blog/BlogWidget.vue

@@ -1,44 +1,44 @@
-<script setup lang="ts">
-defineProps<{
-	title?: string
-	card?: boolean
-	shrink?: boolean
-	grayscale?: boolean
-	dim?: boolean
-	bgImg?: string
-	bgAside?: boolean
-}>()
-
-const body = useTemplateRef('widget-body')
-
-defineExpose({ body })
-</script>
-
-<template>
-<section
-	class="blog-widget"
-	:class="{ shrink, grayscale, dim }"
->
-	<hgroup class="widget-header text-creative">
-		<slot name="title">
-			{{ title }}
-		</slot>
-		<span v-if="$slots.action" class="seperator" />
-		<slot name="action" />
-	</hgroup>
-
-	<div
-		ref="widget-body"
-		class="widget-body"
-		:class="{ 'widget-card': card, 'with-bg': bgImg, 'scrollcheck-y scrollbar-hidden': shrink }"
-	>
-		<NuxtImg v-if="bgImg" class="bg-img" :class="{ 'bg-right': bgAside }" :src="bgImg" alt="" />
-		<slot />
-	</div>
-</section>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	title?: string
+	card?: boolean
+	shrink?: boolean
+	grayscale?: boolean
+	dim?: boolean
+	bgImg?: string
+	bgAside?: boolean
+}>()
+
+const body = useTemplateRef('widget-body')
+
+defineExpose({ body })
+</script>
+
+<template>
+<section
+	class="blog-widget"
+	:class="{ shrink, grayscale, dim }"
+>
+	<hgroup class="widget-header text-creative">
+		<slot name="title">
+			{{ title }}
+		</slot>
+		<span v-if="$slots.action" class="seperator" />
+		<slot name="action" />
+	</hgroup>
+
+	<div
+		ref="widget-body"
+		class="widget-body"
+		:class="{ 'widget-card': card, 'with-bg': bgImg, 'scrollcheck-y scrollbar-hidden': shrink }"
+	>
+		<NuxtImg v-if="bgImg" class="bg-img" :class="{ 'bg-right': bgAside }" :src="bgImg" alt="" />
+		<slot />
+	</div>
+</section>
+</template>
+
+<style lang="scss" scoped>
 .blog-widget {
 	flex-shrink: 1;
 	font-size: 0.9em;
@@ -131,4 +131,4 @@ defineExpose({ body })
 		}
 	}
 }
-</style>
+</style>

package/{app → src}/components/blog/Mask.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-defineProps<{
-	blur?: boolean | string
-	zIndex?: number
-}>()
-
-const show = defineModel<boolean>('show')
-</script>
-
-<template>
-<Transition>
-	<div
-		v-if="show"
-		class="bg-mask"
-		:style="{
-			'--z-index-popover': zIndex,
-			'--bdfilter': blur ? `blur(${blur === true ? '4px' : blur})` : 'none',
-		}"
-		@click="show = false"
-	/>
-</Transition>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	blur?: boolean | string
+	zIndex?: number
+}>()
+
+const show = defineModel<boolean>('show')
+</script>
+
+<template>
+<Transition>
+	<div
+		v-if="show"
+		class="bg-mask"
+		:style="{
+			'--z-index-popover': zIndex,
+			'--bdfilter': blur ? `blur(${blur === true ? '4px' : blur})` : 'none',
+		}"
+		@click="show = false"
+	/>
+</Transition>
+</template>
+
+<style lang="scss" scoped>
 .bg-mask {
 	position: fixed;
 	inset: 0;
@@ -39,4 +39,4 @@ const show = defineModel<boolean>('show')
 .v-leave-active {
 	transition: all var(--delay);
 }
-</style>
+</style>

package/{app → src}/components/blog/SkipToContent.vue

@@ -1,11 +1,11 @@
-<template>
-<!-- 若使用 NuxtLink 则键盘焦点不会切换 -->
-<a href="#main-content" class="skip-link gradient-card active">
-	跳转到主要内容 / Skip to content
-</a>
-</template>
-
-<style lang="scss" scoped>
+<template>
+<!-- 若使用 NuxtLink 则键盘焦点不会切换 -->
+<a href="#main-content" class="skip-link gradient-card active">
+	跳转到主要内容 / Skip to content
+</a>
+</template>
+
+<style lang="scss" scoped>
 .skip-link {
 	position: fixed;
 	top: -100%;
@@ -19,4 +19,4 @@
 .skip-link:focus {
 	top: auto;
 }
-</style>
+</style>

package/{app → src}/components/blog/ThemeToggle.vue

@@ -1,24 +1,24 @@
-<script setup lang="ts">
-const clarity = useClarityConfig()
-const colorMode = useColorMode()
-</script>
-
-<template>
-<div class="theme-toggle">
-	<button
-		v-for="(themeData, themeName) in clarity.themes"
-		:key="themeName"
-		v-tip="themeData.tip"
-		:aria-label="themeData.tip"
-		:class="{ active: colorMode.preference === themeName }"
-		@click="colorMode.preference = themeName"
-	>
-		<Icon :name="themeData.icon" />
-	</button>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const clarity = useClarityConfig()
+const colorMode = useColorMode()
+</script>
+
+<template>
+<div class="theme-toggle">
+	<button
+		v-for="(themeData, themeName) in clarity.themes"
+		:key="themeName"
+		v-tip="themeData.tip"
+		:aria-label="themeData.tip"
+		:class="{ active: colorMode.preference === themeName }"
+		@click="colorMode.preference = themeName"
+	>
+		<Icon :name="themeData.icon" />
+	</button>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .theme-toggle {
 	display: flex;
 	gap: 3px;
@@ -47,4 +47,4 @@ const colorMode = useColorMode()
 		}
 	}
 }
-</style>
+</style>

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

@@ -1,47 +1,47 @@
-<script setup lang="ts">
-// 即使 boolean 可选，其值也不会是 undefined
-const props = defineProps<{
-	img?: string
-	text?: string
-	link?: string
-	round?: boolean
-	square?: boolean
-}>()
-
-const img = computed(() => {
-	if (props.img)
-		return props.img
-	const ghUsername = getGithubUsername(props.link)
-	if (ghUsername)
-		return getGithubAvatar(ghUsername)
-	if (props.link && isExtLink(props.link))
-		return getFavicon(getDomain(props.link))
-	return ''
-})
-
-// 有图时默认为圆形样式，除非指定为方形
-// 无图时默认为方形样式，除非指定为圆形
-const round = computed(() => img.value ? !props.square : props.round)
-
-const tip = computed(() => {
-	if (!props.link)
-		return ''
-	if (isExtLink(props.link))
-		return getDomain(props.link)
-	return safelyDecodeUriComponent(props.link)
-})
-</script>
-
-<template>
-<UtilLink v-tip="tip" class="badge" :class="{ round }" :to="link">
-	<NuxtImg v-if="img" class="badge-icon" :src="img" alt="" densities="1x" />
-	<span class="badge-text">
-		<slot>{{ text }}</slot>
-	</span>
-</UtilLink>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+// 即使 boolean 可选，其值也不会是 undefined
+const props = defineProps<{
+	img?: string
+	text?: string
+	link?: string
+	round?: boolean
+	square?: boolean
+}>()
+
+const img = computed(() => {
+	if (props.img)
+		return props.img
+	const ghUsername = getGithubUsername(props.link)
+	if (ghUsername)
+		return getGithubAvatar(ghUsername)
+	if (props.link && isExtLink(props.link))
+		return getFavicon(getDomain(props.link))
+	return ''
+})
+
+// 有图时默认为圆形样式，除非指定为方形
+// 无图时默认为方形样式，除非指定为圆形
+const round = computed(() => img.value ? !props.square : props.round)
+
+const tip = computed(() => {
+	if (!props.link)
+		return ''
+	if (isExtLink(props.link))
+		return getDomain(props.link)
+	return safelyDecodeUriComponent(props.link)
+})
+</script>
+
+<template>
+<UtilLink v-tip="tip" class="badge" :class="{ round }" :to="link">
+	<NuxtImg v-if="img" class="badge-icon" :src="img" alt="" densities="1x" />
+	<span class="badge-text">
+		<slot>{{ text }}</slot>
+	</span>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
 // 对齐到基线，同时保持图片垂直居中
 .badge {
 	display: inline-flex;
@@ -87,4 +87,4 @@ const tip = computed(() => {
 		display: none;
 	}
 }
-</style>
+</style>

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

@@ -1,16 +1,16 @@
-<script setup lang="ts">
-defineProps<{
-	text?: string
-}>()
-</script>
-
-<template>
-<span class="blur">
-	<slot>{{ text }}</slot>
-</span>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	text?: string
+}>()
+</script>
+
+<template>
+<span class="blur">
+	<slot>{{ text }}</slot>
+</span>
+</template>
+
+<style lang="scss" scoped>
 .blur {
 	transition: filter 0.2s;
 	filter: blur(4px);
@@ -19,4 +19,4 @@ defineProps<{
 		filter: blur(0);
 	}
 }
-</style>
+</style>

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

@@ -1,10 +1,10 @@
-<template>
-<div class="card-list">
-	<slot />
-</div>
-</template>
-
-<style lang="scss" scoped>
+<template>
+<div class="card-list">
+	<slot />
+</div>
+</template>
+
+<style lang="scss" scoped>
 :deep() {
 	:where(ol, ul):not([class]) {
 		margin: 0;
@@ -29,4 +29,4 @@
 		}
 	}
 }
-</style>
+</style>

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

@@ -1,43 +1,43 @@
-<script lang="tsx" setup>
-const slots = defineSlots<{
-	default: () => VNode[]
-}>()
-
-const chatRegex = /^\{(?<control>\.|:)?(?<caption>.*)\}$/
-
-function getControlClass(control?: string) {
-	if (control === '.')
-		return 'chat-myself'
-	if (control === ':')
-		return 'chat-system'
-	return ''
-}
-
-function render() {
-	const slotContent = slots.default()
-	if (!slotContent)
-		return <span>无会话内容</span>
-
-	return slotContent.map((node: VNode) => {
-		// WARN: 此处使用了非标准的 v-slot:default
-		const textContent = (node.children as any)?.default?.()[0].children
-		const matchGroups = typeof textContent === 'string'
-			? textContent.match(chatRegex)?.groups
-			: undefined
-		return matchGroups
-			? <dt class={`chat-caption ${getControlClass(matchGroups.control)}`}>{matchGroups.caption}</dt>
-			: <dd class="chat-body">{node}</dd>
-	})
-}
-</script>
-
-<template>
-<dl class="chat">
-	<render />
-</dl>
-</template>
-
-<style lang="scss" scoped>
+<script lang="tsx" setup>
+const slots = defineSlots<{
+	default: () => VNode[]
+}>()
+
+const chatRegex = /^\{(?<control>\.|:)?(?<caption>.*)\}$/
+
+function getControlClass(control?: string) {
+	if (control === '.')
+		return 'chat-myself'
+	if (control === ':')
+		return 'chat-system'
+	return ''
+}
+
+function render() {
+	const slotContent = slots.default()
+	if (!slotContent)
+		return <span>无会话内容</span>
+
+	return slotContent.map((node: VNode) => {
+		// WARN: 此处使用了非标准的 v-slot:default
+		const textContent = (node.children as any)?.default?.()[0].children
+		const matchGroups = typeof textContent === 'string'
+			? textContent.match(chatRegex)?.groups
+			: undefined
+		return matchGroups
+			? <dt class={`chat-caption ${getControlClass(matchGroups.control)}`}>{matchGroups.caption}</dt>
+			: <dd class="chat-body">{node}</dd>
+	})
+}
+</script>
+
+<template>
+<dl class="chat">
+	<render />
+</dl>
+</template>
+
+<style lang="scss" scoped>
 .chat {
 	margin-inline: 2vw;
 	font-size: 0.9em;
@@ -76,4 +76,4 @@ function render() {
 		}
 	}
 }
-</style>
+</style>

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

@@ -1,73 +1,73 @@
-<script setup lang="ts">
-const props = withDefaults(defineProps<{
-	prompt?: string | boolean
-	code?: string
-	lang?: string
-}>(), {
-	prompt: '$',
-})
-
-// prompt 传入空字符串会变成 true
-const showPrompt = computed(() => props.prompt !== true)
-const language = computed(() => props.lang ?? getPromptLanguage(props.prompt))
-
-const showUndo = ref(false)
-const codeInput = useTemplateRef('code-input')
-const shiki = useShiki()
-
-const { copy, copied } = useCopy(codeInput)
-
-function undo() {
-	if (!codeInput.value)
-		return
-	codeInput.value.textContent = props.code ?? ''
-	// 触发 shiki 高亮
-	codeInput.value.dispatchEvent(new Event('input'))
-	showUndo.value = false
-}
-
-function preventLineBreak(event: InputEvent) {
-	const { data, inputType } = event
-	if (data?.includes('\n') || inputType === 'insertLineBreak') {
-		event.preventDefault()
-	}
-}
-
-function checkUndoable(event: InputEvent) {
-	showUndo.value = props.code !== (event.target as Element).textContent
-}
-
-onMounted(async () => {
-	await shiki.mountPlain(codeInput.value!, language.value)
-})
-</script>
-
-<template>
-<code class="copy">
-	<span v-if="showPrompt" class="prompt">{{ prompt }}</span>
-
-	<div
-		ref="code-input"
-		contenteditable="plaintext-only"
-		class="code scrollcheck-x"
-		spellcheck="false"
-		@beforeinput="preventLineBreak"
-		@input="checkUndoable"
-		v-text="code"
-	/>
-
-	<button v-if="showUndo" class="operation" aria-label="恢复原始内容" @click="undo">
-		<Icon name="tabler:arrow-back-up" />
-	</button>
-
-	<Icon v-show="false" name="tabler:check" />
-	<button class="operation" aria-label="复制" @click="copy()">
-		<Icon :name="copied ? 'tabler:check' : 'tabler:copy'" />
-	</button>
-</code>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+	prompt?: string | boolean
+	code?: string
+	lang?: string
+}>(), {
+	prompt: '$',
+})
+
+// prompt 传入空字符串会变成 true
+const showPrompt = computed(() => props.prompt !== true)
+const language = computed(() => props.lang ?? getPromptLanguage(props.prompt))
+
+const showUndo = ref(false)
+const codeInput = useTemplateRef('code-input')
+const shiki = useShiki()
+
+const { copy, copied } = useCopy(codeInput)
+
+function undo() {
+	if (!codeInput.value)
+		return
+	codeInput.value.textContent = props.code ?? ''
+	// 触发 shiki 高亮
+	codeInput.value.dispatchEvent(new Event('input'))
+	showUndo.value = false
+}
+
+function preventLineBreak(event: InputEvent) {
+	const { data, inputType } = event
+	if (data?.includes('\n') || inputType === 'insertLineBreak') {
+		event.preventDefault()
+	}
+}
+
+function checkUndoable(event: InputEvent) {
+	showUndo.value = props.code !== (event.target as Element).textContent
+}
+
+onMounted(async () => {
+	await shiki.mountPlain(codeInput.value!, language.value)
+})
+</script>
+
+<template>
+<code class="copy">
+	<span v-if="showPrompt" class="prompt">{{ prompt }}</span>
+
+	<div
+		ref="code-input"
+		contenteditable="plaintext-only"
+		class="code scrollcheck-x"
+		spellcheck="false"
+		@beforeinput="preventLineBreak"
+		@input="checkUndoable"
+		v-text="code"
+	/>
+
+	<button v-if="showUndo" class="operation" aria-label="恢复原始内容" @click="undo">
+		<Icon name="tabler:arrow-back-up" />
+	</button>
+
+	<Icon v-show="false" name="tabler:check" />
+	<button class="operation" aria-label="复制" @click="copy()">
+		<Icon :name="copied ? 'tabler:check' : 'tabler:copy'" />
+	</button>
+</code>
+</template>
+
+<style lang="scss" scoped>
 .copy {
 	contain: paint;
 	display: flex;
@@ -131,4 +131,4 @@ onMounted(async () => {
 		}
 	}
 }
-</style>
+</style>