clarity-theme 0.1.0 → 0.1.1

package/app/components/popover/Search.vue

@@ -1,146 +1,146 @@
-<script setup lang="ts">
+<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>
+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;
 
@@ -211,4 +211,4 @@ function openActiveItem() {
 	opacity: 0;
 	max-height: 0;
 }
-</style>
+</style>

package/app/components/popover/SearchItem.vue

@@ -1,30 +1,30 @@
-<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>
+<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;
@@ -61,4 +61,4 @@ withDefaults(defineProps<Partial<SearchItem>>(), {
 	white-space: pre-wrap;
 	color: var(--c-text-2);
 }
-</style>
+</style>

package/app/components/post/Archive.vue

@@ -1,42 +1,42 @@
-<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>
+<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;
@@ -101,4 +101,4 @@ const mainDate = computed(() => props.useUpdated ? props.updated : props.date)
 		}
 	}
 }
-</style>
+</style>

package/app/components/post/Article.vue

@@ -1,51 +1,51 @@
-<script setup lang="ts">
-import type { ArticleProps } from '../../types/article'
-
-const props = defineProps<{ useUpdated?: boolean } & ArticleProps>()
-const showAllDate = isTimeDiffSignificant(props.date, props.updated)
-</script>
-
-<template>
-<UtilLink class="article-card card upraise">
-	<NuxtImg v-if="image" class="article-cover" :src="image" :alt="title" />
-	<article>
-		<h2 class="article-title text-creative">
-			{{ title }}
-		</h2>
-
-		<p v-if="description" class="article-description">
-			{{ description }}
-		</p>
-
-		<div class="article-info">
-			<UtilDate
-				v-if="date && (showAllDate || !useUpdated)"
-				:date
-				icon="tabler:pencil-minus"
-			/>
-
-			<UtilDate
-				v-if="updated && (showAllDate || useUpdated)"
-				:class="{ 'use-updated': useUpdated }"
-				:date="updated"
-				icon="tabler:clock-edit"
-			/>
-
-			<span v-if="categories" :style="{ color: getCategoryColor(categories[0]) }">
-				<Icon :name="getCategoryIcon(categories[0])" />
-				{{ categories[0] }}
-			</span>
-
-			<span v-if="readingTime?.words" class="article-words">
-				<Icon name="tabler:pilcrow" />
-				{{ formatNumber(readingTime?.words) }}字
-			</span>
-		</div>
-	</article>
-</UtilLink>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { ArticleProps } from '../../types/article'
+
+const props = defineProps<{ useUpdated?: boolean } & ArticleProps>()
+const showAllDate = isTimeDiffSignificant(props.date, props.updated)
+</script>
+
+<template>
+<UtilLink class="article-card card upraise">
+	<NuxtImg v-if="image" class="article-cover" :src="image" :alt="title" />
+	<article>
+		<h2 class="article-title text-creative">
+			{{ title }}
+		</h2>
+
+		<p v-if="description" class="article-description">
+			{{ description }}
+		</p>
+
+		<div class="article-info">
+			<UtilDate
+				v-if="date && (showAllDate || !useUpdated)"
+				:date
+				icon="tabler:pencil-minus"
+			/>
+
+			<UtilDate
+				v-if="updated && (showAllDate || useUpdated)"
+				:class="{ 'use-updated': useUpdated }"
+				:date="updated"
+				icon="tabler:clock-edit"
+			/>
+
+			<span v-if="categories" :style="{ color: getCategoryColor(categories[0]) }">
+				<Icon :name="getCategoryIcon(categories[0])" />
+				{{ categories[0] }}
+			</span>
+
+			<span v-if="readingTime?.words" class="article-words">
+				<Icon name="tabler:pilcrow" />
+				{{ formatNumber(readingTime?.words) }}字
+			</span>
+		</div>
+	</article>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
 .article-card {
 	container-type: inline-size;
 	position: relative;
@@ -135,4 +135,4 @@ const showAllDate = isTimeDiffSignificant(props.date, props.updated)
 		@include cover-narrow;
 	}
 }
-</style>
+</style>