clarity-theme 0.1.0

package/app/components/content/EmojiClock.vue

@@ -0,0 +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>
+.emoji-clock.rotate {
+	display: inline-block;
+	transform: rotate(var(--deg, 0deg));
+}
+</style>

package/app/components/content/FeedCard.vue

@@ -0,0 +1,212 @@
+<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;
+	gap: 0.2em;
+	width: 14em;
+	margin: 1em auto;
+	padding: 0.5em;
+	line-height: 1.4;
+	transition: transform 0.2s;
+	animation: float-in 0.2s var(--delay) backwards;
+
+	&:hover {
+		transform: translateY(-2px);
+	}
+
+	&[data-error] {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.avatar {
+		position: relative;
+		margin: 0 0.5em 0 0;
+
+		img {
+			display: block;
+			width: 2.5rem;
+			height: 2.5rem;
+			border-radius: 50%;
+			box-shadow: var(--box-shadow-2);
+			background-color: var(--ld-bg-card);
+			object-fit: cover;
+		}
+
+		.no-feed {
+			position: absolute;
+			inset-inline-end: -0.5em;
+			bottom: 0;
+		}
+	}
+
+	.author {
+		overflow: hidden; // 长词折行
+	}
+
+	.sitenick {
+		opacity: 0.4;
+		font-size: 0.8em;
+	}
+
+	.no-feed {
+		opacity: 0.6;
+		font-size: 0.8em;
+	}
+}
+
+// https://vue-tippy.netlify.app/props#appendto
+// Tooltip 位于组件根部时，interactive tippy 会插入到父组件
+:deep() ~ [data-tippy-root] > .tippy-box {
+	overflow: hidden;
+	overflow: clip; // 需保留气泡箭头
+	padding: 0;
+
+	&[data-placement="top"] > .tippy-svg-arrow {
+		fill: var(--c-bg-1);
+	}
+}
+
+.site-content {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+	padding: 0.5em 1em;
+
+	.site-icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 4px;
+		object-fit: contain;
+	}
+
+	.site-info {
+		flex: 1;
+		margin-inline-end: 0.5em;
+
+		.domain {
+			font-size: 0.9em;
+		}
+
+		.domain-mark {
+			font-size: 0.8em;
+			vertical-align: super;
+		}
+	}
+}
+
+.desc-content {
+	position: relative;
+	padding: 0.5em 1em;
+	background-color: var(--c-bg-1);
+
+	p + p {
+		margin-top: 0.5em;
+	}
+
+	.date {
+		position: absolute;
+		opacity: 0.1;
+		inset-inline-end: -0.1em;
+		bottom: -0.3em;
+		font-size: 3em;
+		font-weight: bold;
+		white-space: nowrap;
+		pointer-events: none;
+	}
+}
+</style>

package/app/components/content/FeedGroup.vue

@@ -0,0 +1,130 @@
+<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;
+}
+
+.feed-title {
+	contain: layout; // 极窄宽度阻止滚动条
+	position: sticky;
+	opacity: 0.5;
+	top: 0;
+	margin-bottom: -0.3em;
+	mask-image: linear-gradient(#FFF 50%, transparent);
+	font-family: var(--font-stroke-free);
+	font-size: 5em;
+	font-weight: 800;
+	line-height: 1;
+	text-align: center;
+	color: transparent;
+	transition: color 0.2s;
+	-webkit-text-stroke: 1px var(--c-text-3);
+
+	&::selection, :hover > & {
+		color: var(--c-text-3);
+	}
+}
+
+.feed-desc {
+	text-align: center;
+	color: var(--c-text-2);
+}
+
+.feed-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
+	gap: 0.2em 0.5em;
+	margin: 1em auto;
+
+	@mixin feed-narrow {
+		grid-template-columns: repeat(auto-fill, minmax(5em, 1fr));
+		font-size: 0.9em;
+
+		:deep(.feed-card) {
+			flex-direction: column;
+			text-align: center;
+
+			.avatar.avatar {
+				margin: 0 0 0.2em;
+			}
+		}
+	}
+
+	@media (max-width: $breakpoint-phone) {
+		@include feed-narrow;
+	}
+
+	@container (max-width: #{$breakpoint-phone}) {
+		@include feed-narrow;
+	}
+}
+
+:deep(.feed-card.feed-card) {
+	width: auto;
+	margin: 0;
+}
+
+.float-in-move {
+	contain: paint; // 防止移动时出现滚动条
+	pointer-events: none; // 阻止触发错误定位的气泡
+}
+</style>

package/app/components/content/Folding.vue

@@ -0,0 +1,69 @@
+<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;
+	border: 1px solid var(--c-border);
+	border-radius: 0.5em;
+	background-color: var(--c-bg-2);
+	font-size: 0.9em;
+
+	&[open] {
+		> summary {
+			margin-bottom: 0.5em;
+			font-weight: bold;
+			color: currentcolor;
+
+			&::before {
+				content: "收起";
+			}
+		}
+	}
+
+	> summary {
+		margin: -0.5em -0.8em;
+		padding: 0.5em 0.8em;
+		color: var(--c-text-2);
+		transition: all 0.2s;
+		cursor: pointer;
+
+		> :deep(p) {
+			display: inline;
+		}
+
+		&::before {
+			content: "展开";
+			float: right;
+			float: inline-end;
+			opacity: 0.5;
+			margin-inline-start: 0.5em;
+			font-weight: normal;
+			transition: color 0.2s;
+		}
+
+		&:hover {
+			color: var(--c-text);
+		}
+	}
+
+	> :deep(.z-codeblock) {
+		margin: 0 -0.8em -0.5em;
+	}
+}
+</style>

package/app/components/content/Key.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+	text?: string
+	/** https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key */
+	code?: string
+	/** 仅 macOS 默认显示图标 */
+	icon?: boolean
+	ctrl?: boolean
+	shift?: boolean
+	alt?: boolean
+	meta?: boolean
+	win?: boolean
+	/** 智能适配：Windows用Ctrl，macOS用Cmd */
+	cmd?: boolean
+	prevent?: boolean
+}>(), {
+	icon: undefined,
+})
+
+const emit = defineEmits<{
+	press: []
+}>()
+
+const mounted = useMounted()
+const isMac = computed(() => mounted.value && /mac ?os/i.test(navigator?.userAgent))
+const useSymbol = computed(() => isMac.value ? props.icon !== false : props.icon)
+const keyJoiner = computed(() => useSymbol.value ? '' : '+')
+
+// @keep-sorted
+const displayMap = {
+	' ': 'Space',
+	'ArrowDown': '↓',
+	'ArrowLeft': '←',
+	'ArrowRight': '→',
+	'ArrowUp': '↑',
+	'Control': 'Ctrl',
+	'Delete': 'Del',
+	'Escape': 'Esc',
+	get 'Meta'() { return isMac.value ? 'Cmd' : 'Win' },
+}
+
+// @keep-sorted
+const symbolMap = {
+	' ': '␣',
+	'Alt': '⌥',
+	'Backspace': '⌫',
+	'Control': '⌃',
+	'Delete': '⌦',
+	'Enter': '↵',
+	'Escape': '⎋',
+	get 'Meta'() { return isMac.value ? '⌘' : '⊞' },
+	'Shift': '⇧',
+	'Tab': '⇥',
+	'Win': '⊞',
+}
+
+function normalizeCodeDisplay(code?: string) {
+	if (!code)
+		return ''
+	if (useSymbol.value && code in symbolMap)
+		return symbolMap[code as keyof typeof symbolMap]
+	if (code in displayMap)
+		return displayMap[code as keyof typeof displayMap]
+	return code
+}
+
+const codeDisplay = computed(() => {
+	if (props.text)
+		return props.text
+
+	const keyConfigs = [
+		{ condition: props.cmd, code: isMac.value ? 'Meta' : 'Control' },
+		{ condition: props.ctrl && !props.cmd, code: 'Control' },
+		{ condition: props.shift, code: 'Shift' },
+		{ condition: props.alt, code: 'Alt' },
+		{ condition: props.meta && !props.cmd, code: 'Meta' },
+		{ condition: props.win && !props.meta, code: 'Win' },
+		{ condition: props.code, code: props.code },
+	]
+
+	return keyConfigs
+		.filter(config => config.condition)
+		.map(config => normalizeCodeDisplay(config.code))
+		.join(keyJoiner.value)
+})
+
+const active = ref(false)
+
+const ctrlState = useKeyModifier('Control')
+const shiftState = useKeyModifier('Shift')
+const altState = useKeyModifier('Alt')
+const metaState = useKeyModifier('Meta')
+
+/** 检查当前修饰键状态是否匹配 props */
+function modifiersMatch() {
+	const cmdMatch = props.cmd
+		? (isMac.value ? metaState.value : ctrlState.value)
+		: true
+
+	return cmdMatch
+		&& (!props.ctrl || (!props.cmd && ctrlState.value))
+		&& (!props.shift || shiftState.value)
+		&& (!props.alt || altState.value)
+		&& (!props.meta || (!props.cmd && metaState.value))
+}
+
+function matchKeyEvent(e: KeyboardEvent, expectedCode?: string) {
+	if (expectedCode && e.key?.toLowerCase() !== expectedCode.toLowerCase())
+		return false
+	return modifiersMatch()
+}
+
+useEventListener('keydown', (e) => {
+	if (matchKeyEvent(e, props.code)) {
+		emit('press')
+		active.value = true
+		props.prevent && e.preventDefault()
+	}
+})
+
+useEventListener('keyup', (e) => {
+	if (matchKeyEvent(e, props.code) || !modifiersMatch())
+		active.value = false
+})
+
+useEventListener('blur', () => {
+	active.value = false
+})
+</script>
+
+<template>
+<UtilHydrateSafe>
+	<kbd :class="{ active }" @click.stop="emit('press')">
+		<slot>{{ codeDisplay }}</slot>
+	</kbd>
+</UtilHydrateSafe>
+</template>
+
+<style lang="scss" scoped>
+kbd {
+	display: inline-block;
+	margin: 0.1em;
+	padding: 0 0.2em 0.1em;
+	border-radius: 0.2em;
+	box-shadow: inset 0 -0.15em 0 var(--c-bg-soft);
+	background-color: var(--c-bg-soft);
+	font-family: var(--font-basic);
+	font-size: 0.9em;
+	line-height: 1.4;
+	color: var(--c-text-2);
+	transition: all 0.1s;
+	user-select: none;
+
+	&:active, &.active {
+		box-shadow: inset 0 -0.1em 0 var(--c-primary);
+		background-color: var(--c-primary-soft);
+		color: var(--c-primary);
+		transform: translateY(0.05em);
+	}
+}
+</style>

package/app/components/content/LinkBanner.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+defineProps<{
+	banner?: string
+	mirror?: ImgService
+	title: string
+	description?: string
+	link: string
+}>()
+</script>
+
+<template>
+<UtilLink :to="link" class="link-banner card" :title="joinWith([title, description, link])">
+	<UtilImg v-if="banner" class="link-banner-bg" :src="banner" :mirror />
+	<div class="link-banner-header" />
+	<div class="link-banner-info">
+		<div class="link-banner-title">
+			{{ title }}
+		</div>
+		<div class="link-banner-desc">
+			{{ description ?? getDomain(link) }}
+		</div>
+	</div>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
+.link-banner {
+	line-height: 1.4;
+
+	article & {
+		max-width: $breakpoint-phone;
+		margin: 2rem auto;
+	}
+
+	.link-banner-bg {
+		display: block;
+		width: 100%;
+		aspect-ratio: 2.4;
+		margin-bottom: -5%;
+		mask-image: linear-gradient(#FFF 50%, transparent);
+		object-fit: cover;
+	}
+
+	.link-banner-info {
+		padding: 0.5em 1em;
+	}
+
+	.link-banner-title {
+		font-size: 1.2em;
+		color: var(--c-text);
+	}
+
+	.link-banner-desc {
+		margin-top: 0.5em;
+		font-size: 0.8em;
+		color: var(--c-text-2);
+	}
+}
+</style>