clarity-theme 0.1.0 → 0.1.1

package/app/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/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>

package/app/components/content/EmojiClock.vue

@@ -1,53 +1,53 @@
-<script setup lang="ts">
-import { Temporal } from 'temporal-polyfill'
-
-const props = defineProps<{
-	datetime?: string
-	rotate?: boolean
-}>()
-
-const emojiStatic = ['🕛', '🕧', '🕐', '🕜', '🕑', '🕝', '🕒', '🕞', '🕓', '🕟', '🕔', '🕠', '🕕', '🕡', '🕖', '🕢', '🕗', '🕣', '🕘', '🕤', '🕙', '🕥', '🕚', '🕦']
-const emojiRotate = ['🕛', '🕐', '🕑', '🕒', '🕓', '🕔', '🕕', '🕖', '🕗', '🕘', '🕙', '🕚']
-
-const now = ref(Temporal.Now.zonedDateTimeISO())
-
-const datetime = computed(() => props.datetime
-	? toZonedTemporal(props.datetime)
-	: now.value)
-
-const status = computed(() => {
-	const { hour, minute } = datetime.value
-
-	if (!props.rotate) {
-		const emojiIndex = (hour * 2 + Math.round(minute / 30)) % emojiStatic.length
-		return { emoji: emojiStatic[emojiIndex] }
-	}
-
-	const minuteAt = Math.round(minute / 5)
-	const emojiIndex = (hour % 12 - minuteAt + emojiRotate.length) % emojiRotate.length
-	return { rotate: minuteAt * 30, emoji: emojiRotate[emojiIndex] }
-})
-
-// 定时器只能在客户端运行，否则 nuxt generate 不能自动退出
-const { resume } = useIntervalFn(() => {
-	now.value = Temporal.Now.zonedDateTimeISO()
-}, 30000, { immediate: false })
-
-whenever(() => !props.datetime, resume)
-</script>
-
-<template>
-<span
-	class="emoji-clock"
-	:class="{ rotate }"
-	:style="{ '--deg': rotate ? `${status.rotate}deg` : undefined }"
-	v-text="status.emoji"
-/>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import { Temporal } from 'temporal-polyfill'
+
+const props = defineProps<{
+	datetime?: string
+	rotate?: boolean
+}>()
+
+const emojiStatic = ['🕛', '🕧', '🕐', '🕜', '🕑', '🕝', '🕒', '🕞', '🕓', '🕟', '🕔', '🕠', '🕕', '🕡', '🕖', '🕢', '🕗', '🕣', '🕘', '🕤', '🕙', '🕥', '🕚', '🕦']
+const emojiRotate = ['🕛', '🕐', '🕑', '🕒', '🕓', '🕔', '🕕', '🕖', '🕗', '🕘', '🕙', '🕚']
+
+const now = ref(Temporal.Now.zonedDateTimeISO())
+
+const datetime = computed(() => props.datetime
+	? toZonedTemporal(props.datetime)
+	: now.value)
+
+const status = computed(() => {
+	const { hour, minute } = datetime.value
+
+	if (!props.rotate) {
+		const emojiIndex = (hour * 2 + Math.round(minute / 30)) % emojiStatic.length
+		return { emoji: emojiStatic[emojiIndex] }
+	}
+
+	const minuteAt = Math.round(minute / 5)
+	const emojiIndex = (hour % 12 - minuteAt + emojiRotate.length) % emojiRotate.length
+	return { rotate: minuteAt * 30, emoji: emojiRotate[emojiIndex] }
+})
+
+// 定时器只能在客户端运行，否则 nuxt generate 不能自动退出
+const { resume } = useIntervalFn(() => {
+	now.value = Temporal.Now.zonedDateTimeISO()
+}, 30000, { immediate: false })
+
+whenever(() => !props.datetime, resume)
+</script>
+
+<template>
+<span
+	class="emoji-clock"
+	:class="{ rotate }"
+	:style="{ '--deg': rotate ? `${status.rotate}deg` : undefined }"
+	v-text="status.emoji"
+/>
+</template>
+
+<style lang="scss" scoped>
 .emoji-clock.rotate {
 	display: inline-block;
 	transform: rotate(var(--deg, 0deg));
 }
-</style>
+</style>

package/app/components/content/FeedCard.vue

@@ -1,98 +1,98 @@
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import type { FeedEntry } from '../../types/feed'
-// eslint-disable-next-line unused-imports/no-unused-imports
-import { Temporal } from 'temporal-polyfill'
-
-const props = defineProps<FeedEntry>()
-
-const clarity = useClarityConfig()
-const route = useRoute()
-const isInspect = computed(() => import.meta.dev && route.query.inspect !== undefined)
-
-const title = computed(() => props.title ?? props.sitenick ?? props.author)
-const domainTip = computed(() => getDomainType(getMainDomain(props.link, true)))
-const domainIcon = computed(() => getDomainIcon(props.link))
-
-function getInspectStyle(src: string): CSSProperties {
-	src = getMainDomain(src)
-	let color = 'red'
-
-	if (src === getMainDomain(props.link))
-		color = 'transparent' // 来自源站
-	else if (src === 'gstatic.cn' || src === 'webp.se')
-		color = 'yellow' // 来自API获取
-	else if (src === 'qlogo.cn')
-		color = 'lightblue' // 来自QQ头像
-	else if (src === ('wsrv.nl'))
-		color = 'lightgreen' // 来自GitHub头像
-
-	return {
-		border: `2px solid ${color}`,
-		boxSizing: 'content-box',
-	}
-}
-</script>
-
-<template>
-<Tooltip :delay="200" interactive ^role="link" hide-on-click="toggle">
-	<UtilLink
-		class="feed-card gradient-card"
-		:to="error ? undefined : link"
-		rel="noopener"
-		:data-error="error"
-	>
-		<div class="avatar" :title="feed ? undefined : '无订阅源'">
-			<ClientOnly v-if="isInspect">
-				<span style="position: absolute; left: 100%; white-space: nowrap;" v-text="title" />
-				<NuxtImg :src="icon" :title="icon" :style="getInspectStyle(icon)" />
-				<NuxtImg :src="avatar" :title="avatar" :style="getInspectStyle(avatar)" />
-			</ClientOnly>
-
-			<NuxtImg v-else class="round-cobblestone" :src="avatar" :alt="author" loading="lazy" />
-			<Icon v-if="clarity.link.remindNoFeed && !feed" class="no-feed" name="tabler:bell-off" />
-		</div>
-
-		<span class="author">{{ author }}</span>
-		<span class="sitenick">{{ sitenick }}</span>
-	</UtilLink>
-
-	<template #content>
-		<div class="site-content">
-			<NuxtImg class="site-icon" :src="icon" :alt="title" loading="lazy" />
-
-			<div class="site-info">
-				<h3 class="text-creative">
-					{{ title }}
-				</h3>
-
-				<code class="domain" :title="domainTip">
-					<span>{{ getDomain(link) }}</span>
-					<Icon v-if="domainIcon" class="domain-mark" :name="domainIcon" />
-				</code>
-			</div>
-
-			<Icon
-				v-for="arch in archs" :key="arch"
-				class="arch" :name="getArchIcon(arch)" :title="arch"
-			/>
-		</div>
-		<div class="desc-content">
-			<div class="date">
-				{{ Temporal.PlainDate.from(date).toLocaleString() }}
-			</div>
-
-			<p>{{ error ?? desc }}</p>
-
-			<p v-if="comment">
-				<Icon name="tabler:message-dots" /> {{ comment }}
-			</p>
-		</div>
-	</template>
-</Tooltip>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { FeedEntry } from '../../types/feed'
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { Temporal } from 'temporal-polyfill'
+
+const props = defineProps<FeedEntry>()
+
+const clarity = useClarityConfig()
+const route = useRoute()
+const isInspect = computed(() => import.meta.dev && route.query.inspect !== undefined)
+
+const title = computed(() => props.title ?? props.sitenick ?? props.author)
+const domainTip = computed(() => getDomainType(getMainDomain(props.link, true)))
+const domainIcon = computed(() => getDomainIcon(props.link))
+
+function getInspectStyle(src: string): CSSProperties {
+	src = getMainDomain(src)
+	let color = 'red'
+
+	if (src === getMainDomain(props.link))
+		color = 'transparent' // 来自源站
+	else if (src === 'gstatic.cn' || src === 'webp.se')
+		color = 'yellow' // 来自API获取
+	else if (src === 'qlogo.cn')
+		color = 'lightblue' // 来自QQ头像
+	else if (src === ('wsrv.nl'))
+		color = 'lightgreen' // 来自GitHub头像
+
+	return {
+		border: `2px solid ${color}`,
+		boxSizing: 'content-box',
+	}
+}
+</script>
+
+<template>
+<Tooltip :delay="200" interactive ^role="link" hide-on-click="toggle">
+	<UtilLink
+		class="feed-card gradient-card"
+		:to="error ? undefined : link"
+		rel="noopener"
+		:data-error="error"
+	>
+		<div class="avatar" :title="feed ? undefined : '无订阅源'">
+			<ClientOnly v-if="isInspect">
+				<span style="position: absolute; left: 100%; white-space: nowrap;" v-text="title" />
+				<NuxtImg :src="icon" :title="icon" :style="getInspectStyle(icon)" />
+				<NuxtImg :src="avatar" :title="avatar" :style="getInspectStyle(avatar)" />
+			</ClientOnly>
+
+			<NuxtImg v-else class="round-cobblestone" :src="avatar" :alt="author" loading="lazy" />
+			<Icon v-if="clarity.link.remindNoFeed && !feed" class="no-feed" name="tabler:bell-off" />
+		</div>
+
+		<span class="author">{{ author }}</span>
+		<span class="sitenick">{{ sitenick }}</span>
+	</UtilLink>
+
+	<template #content>
+		<div class="site-content">
+			<NuxtImg class="site-icon" :src="icon" :alt="title" loading="lazy" />
+
+			<div class="site-info">
+				<h3 class="text-creative">
+					{{ title }}
+				</h3>
+
+				<code class="domain" :title="domainTip">
+					<span>{{ getDomain(link) }}</span>
+					<Icon v-if="domainIcon" class="domain-mark" :name="domainIcon" />
+				</code>
+			</div>
+
+			<Icon
+				v-for="arch in archs" :key="arch"
+				class="arch" :name="getArchIcon(arch)" :title="arch"
+			/>
+		</div>
+		<div class="desc-content">
+			<div class="date">
+				{{ Temporal.PlainDate.from(date).toLocaleString() }}
+			</div>
+
+			<p>{{ error ?? desc }}</p>
+
+			<p v-if="comment">
+				<Icon name="tabler:message-dots" /> {{ comment }}
+			</p>
+		</div>
+	</template>
+</Tooltip>
+</template>
+
+<style lang="scss" scoped>
 .feed-card {
 	display: flex;
 	align-items: center;
@@ -209,4 +209,4 @@ function getInspectStyle(src: string): CSSProperties {
 		pointer-events: none;
 	}
 }
-</style>
+</style>

package/app/components/content/FeedGroup.vue

@@ -1,63 +1,63 @@
-<script setup lang="ts">
-import type { FeedEntry, FeedGroup } from '../../types/feed'
-import { shuffle } from 'es-toolkit/array'
-
-const props = defineProps<FeedGroup & { shuffle?: boolean }>()
-const route = useRoute()
-const entries = ref(props.entries)
-
-// 友链浮现随机延迟
-function getCardDelay(feed: FeedEntry) {
-	let hash = 0
-	for (const char of feed.link) {
-		hash = hash * 31 + char.charCodeAt(0)
-	}
-	return (hash % 1000) / 1000
-}
-
-const shuffleEntries = () => entries.value = shuffle(entries.value)
-const unshuffleEntries = () => entries.value = props.entries
-
-onMounted(() => {
-	if (props.shuffle && route.query.shuffle !== 'false')
-		shuffleEntries()
-})
-
-if (import.meta.dev) {
-	watch(() => props.entries, (newEntries) => {
-		entries.value = newEntries
-	})
-}
-</script>
-
-<template>
-<section class="feed-group">
-	<h3 class="feed-title">
-		<button
-			v-if="props.shuffle"
-			role="button"
-			title="点击随机排序，按住修饰键点击可取消随机排序"
-			@click="unshuffleEntries"
-			@click.exact="shuffleEntries"
-			v-text="name"
-		/>
-		<span v-else v-text="name" />
-	</h3>
-	<p class="feed-desc" v-text="desc" />
-
-	<TransitionGroup tag="menu" class="feed-list" name="float-in">
-		<li
-			v-for="entry in entries"
-			:key="entry.link"
-			:style="`--delay: ${getCardDelay(entry)}s;`"
-		>
-			<FeedCard v-bind="entry" />
-		</li>
-	</TransitionGroup>
-</section>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { FeedEntry, FeedGroup } from '../../types/feed'
+import { shuffle } from 'es-toolkit/array'
+
+const props = defineProps<FeedGroup & { shuffle?: boolean }>()
+const route = useRoute()
+const entries = ref(props.entries)
+
+// 友链浮现随机延迟
+function getCardDelay(feed: FeedEntry) {
+	let hash = 0
+	for (const char of feed.link) {
+		hash = hash * 31 + char.charCodeAt(0)
+	}
+	return (hash % 1000) / 1000
+}
+
+const shuffleEntries = () => entries.value = shuffle(entries.value)
+const unshuffleEntries = () => entries.value = props.entries
+
+onMounted(() => {
+	if (props.shuffle && route.query.shuffle !== 'false')
+		shuffleEntries()
+})
+
+if (import.meta.dev) {
+	watch(() => props.entries, (newEntries) => {
+		entries.value = newEntries
+	})
+}
+</script>
+
+<template>
+<section class="feed-group">
+	<h3 class="feed-title">
+		<button
+			v-if="props.shuffle"
+			role="button"
+			title="点击随机排序，按住修饰键点击可取消随机排序"
+			@click="unshuffleEntries"
+			@click.exact="shuffleEntries"
+			v-text="name"
+		/>
+		<span v-else v-text="name" />
+	</h3>
+	<p class="feed-desc" v-text="desc" />
+
+	<TransitionGroup tag="menu" class="feed-list" name="float-in">
+		<li
+			v-for="entry in entries"
+			:key="entry.link"
+			:style="`--delay: ${getCardDelay(entry)}s;`"
+		>
+			<FeedCard v-bind="entry" />
+		</li>
+	</TransitionGroup>
+</section>
+</template>
+
+<style lang="scss" scoped>
 .feed-group {
 	container-type: inline-size;
 	margin: 2em 1em;
@@ -127,4 +127,4 @@ if (import.meta.dev) {
 	contain: paint; // 防止移动时出现滚动条
 	pointer-events: none; // 阻止触发错误定位的气泡
 }
-</style>
+</style>