clarity-theme 0.1.0

package/app/components/blog/BlogWidget.vue

@@ -0,0 +1,134 @@
+<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;
+
+	&.shrink {
+		display: flex;
+		flex-direction: column;
+		overflow: auto;
+	}
+
+	&.grayscale :where(.iconify, img) {
+		transition: filter 0.2s;
+		filter: grayscale(0.8);
+
+		#blog-aside:hover &,
+		&:focus-within,
+		#blog-aside.show & {
+			filter: grayscale(0);
+		}
+	}
+
+	&.dim {
+		opacity: 0.3;
+		transition: opacity 0.2s;
+
+		#blog-aside:hover &,
+		&:focus-within,
+		#blog-aside.show & {
+			opacity: 1;
+		}
+	}
+}
+
+.widget-header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.5rem;
+	color: var(--c-text-2);
+
+	&:empty {
+		display: none;
+	}
+
+	> .seperator {
+		flex-grow: 1;
+	}
+
+	> :deep(a) {
+		transition: color 0.2s;
+
+		&[href]:hover {
+			color: var(--c-primary);
+		}
+	}
+}
+
+.widget-body {
+	overscroll-behavior: contain;
+
+	&.with-bg {
+		contain: paint; // overflow hidden + position relative
+		z-index: 0;
+
+		> .bg-img {
+			position: absolute;
+			opacity: 0.2;
+			inset: 0;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			pointer-events: none;
+			z-index: -1;
+
+			&.bg-right {
+				inset-inline-start: 50%;
+				width: 50%;
+				mask-image: linear-gradient(to var(--end), transparent, #FFF 50%);
+			}
+		}
+	}
+
+	&.widget-card {
+		padding: 0.5rem 0.8rem;
+		border-radius: 0.8rem;
+		background-color: var(--c-bg-2);
+
+		:deep(p) {
+			padding: 0.2em 0;
+		}
+	}
+}
+</style>

package/app/components/blog/Mask.vue

@@ -0,0 +1,42 @@
+<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;
+	background-color: #0003;
+	backdrop-filter: var(--bdfilter);
+	z-index: var(--z-index-popover);
+}
+
+.v-enter-from,
+.v-leave-to {
+	opacity: 0;
+}
+
+.v-enter-active,
+.v-leave-active {
+	transition: all var(--delay);
+}
+</style>

package/app/components/blog/SkipToContent.vue

@@ -0,0 +1,22 @@
+<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%;
+	width: 80%;
+	margin: 1rem;
+	padding: 0.5rem;
+	text-align: center;
+	z-index: calc(infinity);
+}
+
+.skip-link:focus {
+	top: auto;
+}
+</style>

package/app/components/blog/ThemeToggle.vue

@@ -0,0 +1,50 @@
+<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;
+	width: fit-content;
+	margin: 0 auto;
+	padding: 2px;
+	border: 1px solid var(--c-border);
+	border-radius: 1rem;
+	background-color: var(--c-bg-2);
+
+	> button {
+		padding: 4px 1rem;
+		border-radius: 1rem;
+		transition: all 0.1s;
+
+		&:hover {
+			background-color: var(--c-bg-soft);
+			color: var(--c-text-1);
+		}
+
+		&.active {
+			box-shadow: var(--box-shadow-2);
+			background-color: var(--ld-bg-card);
+			color: var(--c-text-1);
+			cursor: auto;
+		}
+	}
+}
+</style>

package/app/components/content/Alert.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+	type?: keyof typeof typeMap
+	card?: boolean
+	flat?: boolean
+	icon?: string
+	color?: string
+	title?: string
+	text?: string
+}>(), {
+	type: 'tip',
+})
+
+const clarity = useClarityConfig()
+const card = computed(() => clarity.component.alert.defaultStyle === 'flat' ? props.card : !props.flat)
+
+const typeMap = {
+	tip: {
+		icon: 'tabler:note',
+		color: '#3A7',
+		title: '提醒',
+	},
+	info: {
+		icon: 'tabler:info-circle',
+		// 使用 currentColor 会导致 --c-primary-soft 颜色混合错误
+		color: 'var(--c-text-1)',
+		title: '信息',
+	},
+	question: {
+		icon: 'tabler:help-circle',
+		color: '#3AF',
+		title: '问题',
+	},
+	warning: {
+		icon: 'tabler:alert-triangle',
+		color: '#F80',
+		title: '警告',
+	},
+	error: {
+		icon: 'tabler:circle-x',
+		color: '#F33',
+		title: '错误',
+	},
+}
+
+const icon = computed(() => props.icon || typeMap[props.type].icon)
+const color = computed(() => props.color || typeMap[props.type].color)
+const title = computed(() => props.title || typeMap[props.type].title)
+</script>
+
+<template>
+<div class="alert" :class="{ card }" :style="{ '--c-primary': color }">
+	<div class="alert-title">
+		<Icon :name="icon" />
+		<slot name="title">
+			{{ title }}
+		</slot>
+	</div>
+	<slot><p>{{ text }}</p></slot>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.alert {
+	margin: 1em 0;
+	padding: 0.2em 0.8em;
+	border-radius: 0.5em;
+	background-color: var(--c-bg-2);
+	font-size: 0.9em;
+
+	@supports (color: color-mix(in srgb, transparent, transparent)) {
+		--c-primary-soft: color-mix(in srgb, var(--c-primary) 15%, transparent);
+		--c-bg-2: color-mix(in srgb, var(--c-primary) 8%, var(--ld-bg-card));
+	}
+
+	&.card {
+		background-color: var(--ld-bg-card);
+		background-image:
+			radial-gradient(circle at 4em -25em, var(--c-primary), transparent 30em),
+			linear-gradient(var(--c-primary) -2000%, transparent);
+	}
+
+	.alert-title {
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+		margin: 0.5em 0;
+		font-weight: bold;
+		color: var(--c-primary);
+
+		:deep(p) {
+			margin: 0;
+		}
+	}
+}
+</style>

package/app/components/content/Badge.vue

@@ -0,0 +1,90 @@
+<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;
+	align-items: baseline;
+	margin: 0.1em;
+	border: 1px solid var(--c-border);
+	border-radius: 4px;
+	box-sizing: content-box;
+	background-color: var(--c-bg-2);
+	font-size: 0.875em;
+	transition: color 0.2s;
+
+	@supports (color: color-mix(in srgb, transparent, transparent)) {
+		border-color: color-mix(in srgb, currentcolor 10%, transparent);
+		background-color: color-mix(in srgb, currentcolor 5%, transparent);
+		color: color-mix(in srgb, currentcolor 80%, transparent);
+	}
+
+	&[href]:hover {
+		color: var(--c-text);
+	}
+
+	&.round, &.round > .badge-icon {
+		border-radius: 0.8em;
+	}
+}
+
+.badge-icon {
+	align-self: normal;
+	height: 1.6em;
+	border-radius: 3.5px;
+
+	+ .badge-text {
+		margin-inline-start: -0.1em;
+	}
+}
+
+.badge-text {
+	padding: 0.2em 0.4em;
+	line-height: 1.2;
+
+	&:empty {
+		display: none;
+	}
+}
+</style>

package/app/components/content/Blur.vue

@@ -0,0 +1,22 @@
+<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);
+
+	&:hover {
+		filter: blur(0);
+	}
+}
+</style>

package/app/components/content/CardList.vue

@@ -0,0 +1,32 @@
+<template>
+<div class="card-list">
+	<slot />
+</div>
+</template>
+
+<style lang="scss" scoped>
+:deep() {
+	:where(ol, ul):not([class]) {
+		margin: 0;
+		padding-inline-start: 0;
+		list-style: none;
+
+		> li {
+			margin: 0;
+		}
+	}
+
+	> ol, > ul {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+		gap: 0.5em;
+
+		> li {
+			padding: 0.5em 0.8em;
+			border-radius: 0.5em;
+			box-shadow: var(--box-shadow-2);
+			background-color: var(--ld-bg-card);
+		}
+	}
+}
+</style>

package/app/components/content/Chat.vue

@@ -0,0 +1,79 @@
+<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;
+}
+
+:deep() {
+	> .chat-caption {
+		opacity: 0.8;
+		font-size: 0.9em;
+	}
+
+	> .chat-body {
+		overflow: hidden; // BFC
+		width: fit-content;
+		max-width: 90%;
+		margin-bottom: 1em;
+		padding: 0 1em;
+		border-radius: 1em;
+		border-start-start-radius: 0.2em;
+		background-color: var(--c-bg-2);
+	}
+
+	> .chat-system {
+		margin-bottom: 1em;
+		text-align: center;
+	}
+
+	> .chat-myself {
+		text-align: end;
+
+		& + .chat-body {
+			margin-inline-start: auto;
+			border-radius: 1em;
+			border-start-end-radius: 0.2em;
+			background-color: var(--c-primary-soft);
+		}
+	}
+}
+</style>

package/app/components/content/Copy.vue

@@ -0,0 +1,134 @@
+<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;
+	overflow: auto; // prompt 溢出时滚动
+	margin: 0.5rem 0;
+	border: 1px solid var(--c-border);
+	border-radius: 4px;
+	background-color: var(--ld-bg-card);
+	font-size: 0.8rem;
+	line-height: 2.5;
+	transition: border-color 0.2s;
+
+	&:focus-within {
+		border-color: var(--c-primary);
+		outline: 0.2em solid var(--c-primary-soft);
+
+		.prompt {
+			border-inline-end-color: var(--c-primary);
+			background-color: var(--c-primary-soft);
+			color: var(--c-primary);
+		}
+	}
+
+	.prompt {
+		flex-shrink: 0;
+		padding: 0 1em;
+		border-inline-end: 1px solid var(--c-border);
+		background-color: var(--c-bg-2);
+		color: var(--c-text-2);
+		transition: all 0.2s;
+	}
+
+	.code {
+		--fadeout-width: 3ch;
+		--scrollbar-height: 4px;
+
+		flex-grow: 1;
+		overflow: auto;
+		padding: 0 1em;
+		outline: none;
+		white-space: nowrap;
+		scrollbar-color: auto;
+		scrollbar-width: auto;
+
+		&::-webkit-scrollbar {
+			height: 4px;
+			background-color: transparent;
+		}
+	}
+
+	.operation {
+		flex-shrink: 0;
+		height: 2.5em;
+		margin-inline-start: -0.5em;
+		padding: 0.5em;
+		color: var(--c-text-2);
+		transition: color, 0.2s;
+
+		&:hover {
+			color: var(--c-primary);
+		}
+	}
+}
+</style>