clarity-theme 0.1.0

package/app/components/partial/Secret.vue

@@ -0,0 +1,23 @@
+<template>
+<!-- 外层元素用于占位 -->
+<div class="secret-container">
+	<div class="secret">
+		<slot />
+	</div>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.secret {
+	position: relative;
+	opacity: 0;
+	transition: all 0.2s var(--secret-delay, 0.5s), color 0.2s;
+	z-index: -1;
+
+	:hover > &,
+	:focus-within > & {
+		opacity: 1;
+		z-index: 0;
+	}
+}
+</style>

package/app/components/partial/Slider.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+const props = defineProps<{
+	label?: string
+	springMin?: number
+	springMax?: number
+	list?: (string | { value: string, label?: string })[]
+}>()
+
+const modelValue = defineModel<number>({ required: true })
+const initialValue = modelValue.value
+const id = useId()
+const list = computed(() => props.list?.map(v => typeof v === 'string' ? { value: v } : v))
+
+function spring() {
+	if (props.springMin !== undefined && modelValue.value < props.springMin) {
+		modelValue.value = props.springMin
+	}
+	if (props.springMax !== undefined && modelValue.value > props.springMax) {
+		modelValue.value = props.springMax
+	}
+}
+const debounceSpring = useDebounceFn(spring, 500)
+</script>
+
+<template>
+<label class="z-slider">
+	<slot><span v-if="label" v-text="label" /></slot>
+
+	<input
+		v-bind="$attrs"
+		v-model.number="modelValue"
+		class="input-slider"
+		type="range"
+		:list="id"
+		@change="debounceSpring"
+		@dblclick="modelValue = initialValue"
+	>
+
+	<data class="data-value" :value="modelValue" v-text="modelValue" />
+
+	<datalist v-if="list" :id="id">
+		<option v-for="{ value, label: text } in list" :key="value" :value :label="text" />
+	</datalist>
+</label>
+</template>
+
+<style lang="scss" scoped>
+.z-slider {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+	user-select: none;
+}
+
+.input-slider[type="range"] {
+	flex-grow: 1;
+	overflow: hidden;
+	height: 1.2em;
+	border-radius: 1em;
+	background-color: var(--c-bg-soft);
+	appearance: none;
+
+	@supports (-moz-appearance: auto) {
+		accent-color: var(--c-primary);
+		appearance: auto;
+	}
+
+	&::-webkit-slider-container {
+		min-block-size: auto;
+	}
+
+	&::-webkit-slider-runnable-track {
+		height: 100%;
+	}
+
+	&::-webkit-slider-thumb {
+		height: 100%;
+		aspect-ratio: 1;
+		border: 0.2em solid var(--c-primary);
+		border-radius: 50%;
+		box-shadow: -100vw 0 0 calc(100vw - 0.6em) var(--c-primary);
+		background-color: var(--c-bg-1);
+		transition: all 0.2s;
+		appearance: none;
+
+		:hover > & {
+			background-color: var(--c-bg-3);
+		}
+	}
+}
+
+.data-value {
+	min-width: var(--slider-value, 3ch);
+	text-align: right;
+}
+</style>

package/app/components/partial/Toggle.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+defineProps<{
+	label?: string
+}>()
+
+const modelValue = defineModel<boolean>()
+</script>
+
+<template>
+<label class="z-toggle">
+	<input v-model="modelValue" class="input-toggle" name="toggle" type="checkbox" @keypress.enter="modelValue = !modelValue">
+	<slot><span v-if="label" v-text="label" /></slot>
+</label>
+</template>
+
+<style lang="scss" scoped>
+.z-toggle {
+	user-select: none;
+}
+
+.input-toggle {
+	position: relative;
+	appearance: none;
+
+	&::before {
+		content: "";
+		display: inline-block;
+		position: relative;
+		width: 2em;
+		height: 1.2em;
+		border-radius: 1em;
+		outline: 1px solid var(--c-text-1);
+		outline-offset: -1px;
+		vertical-align: text-bottom;
+		transition: background-color 0.2s, outline-color 0.2s;
+	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset-inline-start: 0.2em;
+		top: calc(50% - 0.4em);
+		height: 0.8em;
+		aspect-ratio: 1;
+		border-radius: 50%;
+		background-color: var(--c-text-1);
+		transition: all 0.2s;
+
+		:hover > & {
+			filter: contrast(0.6);
+		}
+	}
+
+	&:not(:last-child) {
+		margin-inline-end: 0.5em;
+	}
+
+	&:checked {
+		&::before {
+			outline-color: transparent;
+			background-color: var(--c-primary);
+		}
+
+		&::after {
+			background-color: var(--c-bg-1);
+			transform: var(--transform-end-far);
+		}
+	}
+}
+</style>

package/app/components/popover/Lightbox.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+
+defineProps<{
+	el: HTMLImageElement
+	caption?: string | Component
+	open?: boolean
+	style?: CSSProperties
+}>()
+
+defineEmits<{
+	close: []
+}>()
+</script>
+
+<template>
+<BikariyaImageViewer
+	v-bind="$attrs"
+	:target="el"
+	:open
+	:style
+	clamp
+	:rate=".8"
+	@close="$emit('close')"
+/>
+
+<Transition>
+	<div v-if="open" class="tooltip" :style="{ zIndex: style?.zIndex }">
+		<span v-if="caption" class="caption">
+			<component :is="() => toValue(caption)" />
+		</span>
+		<button
+			class="close"
+			aria-label="关闭灯箱"
+			@click="$emit('close')"
+		>
+			<Icon name="tabler:x" />
+		</button>
+	</div>
+</Transition>
+</template>
+
+<style lang="scss" scoped>
+.tooltip {
+	display: flex;
+	align-items: center;
+	position: fixed;
+	inset-inline: 0;
+	bottom: clamp(2rem, 10vh, 5rem);
+	width: fit-content;
+	max-width: min(40rem, 80%);
+	margin-inline: auto;
+	border: 1px solid var(--c-border);
+	border-radius: 0.5em;
+	box-shadow: var(--box-shadow-2), var(--box-shadow-3);
+	background-color: var(--c-bg-a80);
+	backdrop-filter: blur(1rem) saturate(2);
+	transition: all var(--delay);
+
+	&.v-enter-from,
+	&.v-leave-to {
+		opacity: 0;
+		bottom: 0;
+	}
+
+	.caption {
+		margin-inline-end: -0.5em;
+		padding: 0.5em 1em;
+	}
+
+	.close {
+		align-self: stretch;
+		padding: 0.5em;
+		cursor: pointer;
+	}
+}
+</style>

package/app/components/popover/Search.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import type { ModalEmits, ModalProps } from '../../types/modal'
+import MiniSearch from 'minisearch'
+
+const props = defineProps<ModalProps>()
+
+defineEmits<ModalEmits>()
+
+const clarity = useClarityConfig()
+const segmenter = Intl.Segmenter && new Intl.Segmenter(clarity.site.language, { granularity: 'word' })
+
+// await useAsyncData() 会阻塞渲染
+const { data, status } = await useLazyAsyncData(
+	'search',
+	() => queryCollectionSearchSections('content', {
+		ignoredTags: ['pre'],
+	}),
+)
+
+const miniSearch = new MiniSearch({
+	fields: ['title', 'content'],
+	storeFields: ['title', 'titles', 'content', 'level'],
+	searchOptions: {
+		prefix: true,
+		fuzzy: 0.2,
+		combineWith: 'AND',
+		boost: { title: 3, titles: 2 },
+	},
+	processTerm: segmenter
+		? term => Array.from(segmenter.segment(term), seg => seg.segment.toLowerCase())
+		: undefined,
+})
+
+const searchStore = useSearchStore()
+const searchInput = ref<HTMLInputElement>()
+
+const { word, debouncedWord } = storeToRefs(searchStore)
+const result = computed(() => {
+	void data.value
+	return miniSearch.search(debouncedWord.value)
+})
+
+const isKeyboardMode = ref(false)
+const listResult = useTemplateRef('list-result')
+
+const activeIndex = ref(0)
+const activeItem = computed(() => listResult.value?.children[activeIndex.value] as HTMLLinkElement | undefined)
+
+whenever(() => props.open, focusInput)
+
+watch(status, (newStatus) => {
+	if (newStatus === 'success' && data.value) {
+		miniSearch.addAll(data.value)
+	}
+})
+
+watch(debouncedWord, () => {
+	activeIndex.value = 0
+})
+
+useEventListener('mousemove', () => isKeyboardMode.value = false)
+useEventListener('keydown', () => isKeyboardMode.value = true)
+
+async function focusInput(allSelect = false) {
+	await nextTick()
+	searchInput.value?.focus()
+	if (allSelect)
+		searchInput.value?.select()
+}
+
+function updateActiveIndex(index: number, isKeyboard = false) {
+	focusInput()
+	if (index < 0 || index >= result.value?.length)
+		return
+	activeIndex.value = index
+	if (isKeyboard)
+		isKeyboardMode.value = true
+	if (activeItem.value && isKeyboardMode.value) {
+		activeItem.value.scrollIntoView({ block: 'nearest' })
+	}
+}
+
+function openActiveItem() {
+	// 触发 vue-router 点击事件
+	activeItem.value?.click()
+}
+</script>
+
+<template>
+<Transition name="float-in">
+	<div v-if="open" class="blog-search">
+		<form class="input" @submit.prevent>
+			<Icon v-show="false" name="line-md:loading-alt-loop" />
+			<Icon :name="status === 'pending' ? 'line-md:loading-alt-loop' : 'tabler:search'" />
+
+			<!-- 方向键切换搜索结果不应只在搜索框内触发 -->
+			<input
+				ref="searchInput"
+				v-model="word"
+				type="search"
+				incremental
+				class="search-input"
+				placeholder="键入开始搜索"
+				@keydown.up.prevent
+				@keydown.down.prevent
+			>
+		</form>
+
+		<TransitionGroup name="expand">
+			<div v-if="debouncedWord && status === 'success' && !result.length" class="no-result">
+				无结果
+			</div>
+
+			<menu
+				v-if="result.length"
+				ref="list-result"
+				:key="result.length < 5 ? result.length : result[0]?.id"
+				class="scrollcheck-y search-result"
+			>
+				<PopoverSearchItem
+					v-for="(item, itemIndex) in result"
+					:key="item.id"
+					v-bind="item"
+					:class="{ active: activeIndex === itemIndex }"
+					@mousemove="updateActiveIndex(itemIndex)"
+				/>
+			</menu>
+
+			<div v-if="result.length" class="tip" @click="searchInput?.focus()">
+				<Key code="ArrowUp" prevent @press="updateActiveIndex(activeIndex - 1, true)" />
+				<Key code="ArrowDown" prevent @press="updateActiveIndex(activeIndex + 1, true)" />
+				切换&emsp;
+				<Key code="Enter" icon @press="openActiveItem" />
+				选择&emsp;
+				<Key code="Escape" :icon="false" @press="$emit('close')" />
+				关闭
+			</div>
+		</TransitionGroup>
+	</div>
+</Transition>
+</template>
+
+<style lang="scss" scoped>
+.blog-search {
+	--float-distance: 20vh;
+
+	contain: paint;
+	position: fixed;
+	inset: 0;
+	width: 90%;
+	height: fit-content;
+	max-width: $breakpoint-mobile;
+	margin: auto;
+	border: 1px solid var(--c-primary);
+	border-radius: 1em;
+	box-shadow: var(--box-shadow-2), var(--box-shadow-3);
+	outline: 0.2em solid var(--c-primary-soft);
+	background-color: var(--ld-bg-card);
+}
+
+.input {
+	display: flex;
+	align-items: center;
+	gap: 1em;
+	position: relative;
+	padding: 0 1em;
+
+	> .search-input {
+		width: 100%;
+		padding: 1em 0;
+		outline: none;
+	}
+}
+
+.no-result {
+	// expand 时不要设置 padding
+	max-height: 5em;
+	line-height: 5em;
+	text-align: center;
+	color: var(--c-text-3);
+	transition: all 0.5s;
+}
+
+.search-result {
+	max-height: 75vh;
+	max-height: 75dvh;
+	transition: all 0.5s;
+	scroll-padding: var(--fadeout-height);
+}
+
+.search-item {
+	transition: background-color 0.1s, opacity 0.2s;
+}
+
+.tip {
+	max-height: 1rem;
+	margin: 0 1em 0.5rem;
+	font-size: 0.8em;
+	text-align: center;
+	color: var(--c-text-3);
+	transition: all 0.5s;
+}
+
+.expand-enter-active,
+.expand-leave-active {
+	transition: all 0.5s;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+	opacity: 0;
+	max-height: 0;
+}
+</style>

package/app/components/popover/SearchItem.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { SearchResult } from 'minisearch'
+
+interface SearchItem extends SearchResult {
+	title: string
+	content: string
+	titles: string[]
+	level: number
+}
+
+withDefaults(defineProps<Partial<SearchItem>>(), {
+	titles: () => [],
+	title: '',
+})
+</script>
+
+<template>
+<UtilLink :to="id" class="search-item">
+	<hgroup class="text-creative">
+		<span v-for="heading in [...titles, title]" :key="heading" class="title" v-html="highlightHtml(heading, queryTerms)" />
+		<Icon v-if="level === 1" name="tabler:file-text" />
+	</hgroup>
+	<p v-if="content" class="content" v-html="highlightHtml(content, queryTerms)" />
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
+.search-item {
+	display: block;
+	margin: 0.5em;
+	padding: 0.5em 0.8em;
+	border-radius: 0.5em;
+	transition: background-color 0.2s;
+
+	&.active {
+		background-color: var(--c-bg-soft);
+	}
+}
+
+.title:not(:first-child) {
+	opacity: 0.5;
+	transition: opacity 0.2s;
+
+	.active & {
+		opacity: 1;
+	}
+
+	&::before {
+		content: " > ";
+		opacity: 0.5;
+	}
+}
+
+.title + .iconify {
+	margin-inline-start: 0.2em;
+}
+
+.content {
+	margin-top: 0.2em;
+	font-size: 0.8em;
+	white-space: pre-wrap;
+	color: var(--c-text-2);
+}
+</style>

package/app/components/post/Archive.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { ArticleProps } from '../../types/article'
+
+const props = defineProps<{
+	to?: string
+	useUpdated?: boolean
+	showCategory?: boolean
+} & ArticleProps>()
+
+const mainDate = computed(() => props.useUpdated ? props.updated : props.date)
+</script>
+
+<template>
+<li class="article-item">
+	<UtilDate class="dim-hover" :date="mainDate" format="monthDay" />
+
+	<div class="gradient-card" :style="{ '--c-accent': getCategoryColor(categories?.[0]) }">
+		<UtilLink class="article-link scrollbar-hidden scrollcheck-x" :to :title="description">
+			<span class="article-title">
+				<Icon v-if="showCategory" :name="getCategoryIcon(categories?.[0])" />
+				{{ title }}
+			</span>
+
+			<UtilDate
+				v-if="date && useUpdated && isTimeDiffSignificant(date, updated)"
+				class="dim-hover info"
+				:date="date"
+				:format="updated && isSameUnit(date, updated, 'year') ? 'monthDay' : 'date'"
+			/>
+
+			<ul v-if="tags?.length" class="dim-hover info tag-list">
+				<li v-for="tag in tags" :key="tag" v-text="tag" />
+			</ul>
+		</UtilLink>
+	</div>
+</li>
+</template>
+
+<style lang="scss" scoped>
+.article-item {
+	display: flex;
+	align-items: center;
+	column-gap: 0.5em;
+	min-width: 0;
+	margin: var(--archive-item-gap, 0.2em) 0;
+	transition: all 0.2s;
+	animation: float-in 0.2s var(--delay) backwards;
+
+	@media (max-width: $breakpoint-mobile) {
+		font-size: 0.9em;
+	}
+
+	.dim-hover {
+		opacity: 0.4;
+		transition: opacity 0.2s;
+	}
+
+	:deep(time) {
+		font-variant-numeric: tabular-nums;
+	}
+
+	.info {
+		font-size: 0.8em;
+	}
+
+	&:hover,
+	&:focus-within {
+		.article-title {
+			color: var(--c-text);
+		}
+
+		.dim-hover {
+			opacity: 1;
+		}
+	}
+}
+
+.gradient-card {
+	flex-grow: 1;
+	min-width: 0;
+}
+
+.article-link {
+	--scrollbar-height: 0px;
+
+	display: flex;
+	align-items: baseline;
+	gap: 1em;
+	padding: 0.3em 0.6em;
+	white-space: nowrap;
+
+	> .tag-list {
+		display: flex;
+		flex-wrap: nowrap;
+		gap: 0.5em;
+		margin-left: auto;
+
+		&::before {
+			content: "#";
+			opacity: 0.5;
+		}
+	}
+}
+</style>