clarity-theme 0.1.0 → 0.1.2

package/{app → src}/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 → src}/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 → src}/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>

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

@@ -1,21 +1,21 @@
-<script setup lang="ts">
-defineProps<{
-	title?: string
-}>()
-</script>
-
-<template>
-<details>
-	<summary>
-		<slot name="title">
-			{{ title }}
-		</slot>
-	</summary>
-	<slot />
-</details>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	title?: string
+}>()
+</script>
+
+<template>
+<details>
+	<summary>
+		<slot name="title">
+			{{ title }}
+		</slot>
+	</summary>
+	<slot />
+</details>
+</template>
+
+<style lang="scss" scoped>
 details {
 	margin: 1em 0;
 	padding: 0.5em 0.8em;
@@ -66,4 +66,4 @@ details {
 		margin: 0 -0.8em -0.5em;
 	}
 }
-</style>
+</style>