clarity-theme 0.1.0 → 0.1.2

package/{app → src}/pages/archive.vue

@@ -1,132 +1,132 @@
-<script setup lang="ts">
-import type { ArticleProps } from '../types/article'
-import { groupBy } from 'es-toolkit/array'
-import { sumBy } from 'es-toolkit/math'
-import { mapValues } from 'es-toolkit/object'
-
-const clarity = useClarityConfig()
-useSeoMeta({
-	title: '归档',
-	description: `${clarity.site.title}的所有文章归档。`,
-})
-const birthYear = computed(() => clarity.component.stats.birthYear)
-const showTuning = ref(false)
-const spacing = ref(0)
-const column = ref(1)
-
-const tuningRef = useTemplateRef('tuning-panel')
-useAvoidTarget(tuningRef, showTuning)
-
-const { data: listRaw } = await useAsyncData('posts:index', () => getArticleIndexOptions(), { default: () => [] })
-const { listSorted, isAscending, sortOrder } = useArticleSort(listRaw)
-const { category, categories, listCategorized } = useCategory(listSorted)
-
-const listGrouped = computed(() => {
-	const groupList = Object.entries(groupBy(listCategorized.value, getArticleYear))
-	return isAscending.value ? groupList : groupList.reverse()
-})
-
-// 不能使用 /api/stats，因为可能切换分组方式
-const yearlyWordCount = computed(() =>
-	mapValues(Object.fromEntries(listGrouped.value), (articles) => {
-		const total = sumBy(articles, a => a.readingTime?.words ?? 0)
-		return formatNumber(total)
-	}),
-)
-
-function getArticleYear(article: ArticleProps) {
-	try {
+<script setup lang="ts">
+import type { ArticleProps } from '../types/article'
+import { groupBy } from 'es-toolkit/array'
+import { sumBy } from 'es-toolkit/math'
+import { mapValues } from 'es-toolkit/object'
+
+const clarity = useClarityConfig()
+useSeoMeta({
+	title: '归档',
+	description: `${clarity.site.title}的所有文章归档。`,
+})
+const birthYear = computed(() => clarity.component.stats.birthYear)
+const showTuning = ref(false)
+const spacing = ref(0)
+const column = ref(1)
+
+const tuningRef = useTemplateRef('tuning-panel')
+useAvoidTarget(tuningRef, showTuning)
+
+const { data: listRaw } = await useAsyncData('posts:index', () => getArticleIndexOptions(), { default: () => [] })
+const { listSorted, isAscending, sortOrder } = useArticleSort(listRaw)
+const { category, categories, listCategorized } = useCategory(listSorted)
+
+const listGrouped = computed(() => {
+	const groupList = Object.entries(groupBy(listCategorized.value, getArticleYear))
+	return isAscending.value ? groupList : groupList.reverse()
+})
+
+// 不能使用 /api/stats，因为可能切换分组方式
+const yearlyWordCount = computed(() =>
+	mapValues(Object.fromEntries(listGrouped.value), (articles) => {
+		const total = sumBy(articles, a => a.readingTime?.words ?? 0)
+		return formatNumber(total)
+	}),
+)
+
+function getArticleYear(article: ArticleProps) {
+	try {
 		return toZonedTemporal((article as any)[sortOrder.value] as string, clarity.site.timezone).year.toString()
-	}
-	catch {
-		return ''
-	}
-}
-</script>
-
-<template>
-<template #aside>
-	<WidgetBlogStats />
-	<WidgetBlogLog />
-</template>
-
-<div class="archive proper-height">
-	<PostOrderToggle
-		v-model:is-ascending="isAscending"
-		v-model:sort-order="sortOrder"
-		v-model:category="category"
-		:categories
-	>
-		<ZSecret>
-			<ZToggle
-				v-model="showTuning"
-				label="密度调节"
-			/>
-		</ZSecret>
-	</PostOrderToggle>
-
-	<section
-		v-for="[year, yearGroup] in listGrouped"
-		:key="year"
-		class="archive-group"
-		:class="{ 'hide-info': column > 1 }"
-		:style="{
-			'--archive-item-gap': `${spacing}em`,
-			'--archive-item-column': column,
-		}"
-	>
-		<div class="archive-title">
-			<h2 class="archive-year">
-				{{ year }}
-			</h2>
-
-			<div v-if="birthYear" class="archive-age">
-				<span>{{ Number(year) - birthYear }}</span>
-				<span class="age-label">岁</span>
-			</div>
-
-			<div class="archive-info">
-				<span>{{ yearlyWordCount[year] }}字</span>
-				<span>{{ yearGroup?.length }}篇</span>
-			</div>
-		</div>
-
-		<TransitionGroup tag="menu" class="archive-list" name="float-in">
-			<PostArchive
-				v-for="article, index in yearGroup"
-				:key="article.path"
-				v-bind="article"
-				:to="article.path"
-				:show-category="column < 3"
-				:use-updated="sortOrder === 'updated'"
-				:style="getFixedDelay(index * 0.03)"
-			/>
-		</TransitionGroup>
-	</section>
-
-	<div v-if="showTuning" ref="tuning-panel" class="archive-tuning card">
-		<ZSlider
-			v-model="spacing"
-			label="间距"
-			:spring-min="-0.4"
-			:spring-max="0.1"
-			:list="['-0.3', '0']"
-			min="-1"
-			max=".2"
-			step=".1"
-		/>
-
-		<ZSlider
-			v-model="column"
-			label="列数"
-			min="1"
-			max="8"
-		/>
-	</div>
-</div>
-</template>
-
-<style lang="scss" scoped>
+	}
+	catch {
+		return ''
+	}
+}
+</script>
+
+<template>
+<template #aside>
+	<WidgetBlogStats />
+	<WidgetBlogLog />
+</template>
+
+<div class="archive proper-height">
+	<PostOrderToggle
+		v-model:is-ascending="isAscending"
+		v-model:sort-order="sortOrder"
+		v-model:category="category"
+		:categories
+	>
+		<ZSecret>
+			<ZToggle
+				v-model="showTuning"
+				label="密度调节"
+			/>
+		</ZSecret>
+	</PostOrderToggle>
+
+	<section
+		v-for="[year, yearGroup] in listGrouped"
+		:key="year"
+		class="archive-group"
+		:class="{ 'hide-info': column > 1 }"
+		:style="{
+			'--archive-item-gap': `${spacing}em`,
+			'--archive-item-column': column,
+		}"
+	>
+		<div class="archive-title">
+			<h2 class="archive-year">
+				{{ year }}
+			</h2>
+
+			<div v-if="birthYear" class="archive-age">
+				<span>{{ Number(year) - birthYear }}</span>
+				<span class="age-label">岁</span>
+			</div>
+
+			<div class="archive-info">
+				<span>{{ yearlyWordCount[year] }}字</span>
+				<span>{{ yearGroup?.length }}篇</span>
+			</div>
+		</div>
+
+		<TransitionGroup tag="menu" class="archive-list" name="float-in">
+			<PostArchive
+				v-for="article, index in yearGroup"
+				:key="article.path"
+				v-bind="article"
+				:to="article.path"
+				:show-category="column < 3"
+				:use-updated="sortOrder === 'updated'"
+				:style="getFixedDelay(index * 0.03)"
+			/>
+		</TransitionGroup>
+	</section>
+
+	<div v-if="showTuning" ref="tuning-panel" class="archive-tuning card">
+		<ZSlider
+			v-model="spacing"
+			label="间距"
+			:spring-min="-0.4"
+			:spring-max="0.1"
+			:list="['-0.3', '0']"
+			min="-1"
+			max=".2"
+			step=".1"
+		/>
+
+		<ZSlider
+			v-model="column"
+			label="列数"
+			min="1"
+			max="8"
+		/>
+	</div>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .archive {
 	padding: 1rem; // 防止内部 outline 被 mask
 	mask-image: linear-gradient(#FFF 50%, #FFF7);
@@ -204,4 +204,4 @@ function getArticleYear(article: ArticleProps) {
 		column-gap: 0.5em;
 	}
 }
-</style>
+</style>

package/{app → src}/pages/index.vue

@@ -1,78 +1,78 @@
-<script setup lang="ts">
-import { orderBy } from 'es-toolkit/array'
-
-const clarity = useClarityConfig()
-useSeoMeta({
-	description: clarity.site.description,
-	ogImage: clarity.site.author.avatar,
-})
-
-const { data: listRaw } = await useAsyncData('posts:index', () => getArticleIndexOptions(), { default: () => [] })
-const { listSorted, isAscending, sortOrder } = useArticleSort(listRaw, { bindDirectionQuery: 'asc', bindOrderQuery: 'sort' })
-const { category, categories, listCategorized } = useCategory(listSorted, { bindQuery: 'category' })
-const { page, totalPages, listPaged } = usePagination(listCategorized, { bindQuery: 'page' })
-
-watch(category, () => {
-	page.value = 1
-})
-
-useSeoMeta({ title: () => (page.value > 1 ? `第${page.value}页` : '') })
-
-const listRecommended = computed(() => orderBy(
-	listRaw.value.filter(item => item.recommend !== null),
-	['recommend', 'date'],
-	['desc'],
-))
-
-const { data: previewCount } = useAsyncData(
-	'previews:count',
-	() => queryCollection('content').where('stem', 'LIKE', 'previews/%').count(),
-)
-</script>
-
-<template>
-<template #aside>
-	<WidgetBlogStats />
-	<WidgetBlogTech />
-</template>
-
-<BlogHeader class="mobile-only" to="/" tag="h1" />
-
-<UtilHydrateSafe>
-	<PostSlide v-if="listRecommended.length && page === 1 && !category" :list="listRecommended" />
-
-	<div class="post-list">
-		<PostOrderToggle
-			v-model:is-ascending="isAscending"
-			v-model:sort-order="sortOrder"
-			v-model:category="category"
-			:categories
-		>
-			<ZSecret>
-				<UtilLink v-if="previewCount" to="/preview" class="preview-entrance">
-					<Icon name="tabler:shield-lock" />
-					查看预览文章
-				</UtilLink>
-			</ZSecret>
-		</PostOrderToggle>
-
-		<TransitionGroup tag="menu" class="proper-height" name="float-in">
-			<PostArticle
-				v-for="article, index in listPaged"
-				:key="article.path"
-				v-bind="article"
-				:to="article.path"
-				:use-updated="sortOrder === 'updated'"
-				:style="getFixedDelay(index * 0.05)"
-			/>
-		</TransitionGroup>
-
-		<ZPagination v-model="page" sticky avoid :total-pages="totalPages" />
-	</div>
-</UtilHydrateSafe>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import { orderBy } from 'es-toolkit/array'
+
+const clarity = useClarityConfig()
+useSeoMeta({
+	description: clarity.site.description,
+	ogImage: clarity.site.author.avatar,
+})
+
+const { data: listRaw } = await useAsyncData('posts:index', () => getArticleIndexOptions(), { default: () => [] })
+const { listSorted, isAscending, sortOrder } = useArticleSort(listRaw, { bindDirectionQuery: 'asc', bindOrderQuery: 'sort' })
+const { category, categories, listCategorized } = useCategory(listSorted, { bindQuery: 'category' })
+const { page, totalPages, listPaged } = usePagination(listCategorized, { bindQuery: 'page' })
+
+watch(category, () => {
+	page.value = 1
+})
+
+useSeoMeta({ title: () => (page.value > 1 ? `第${page.value}页` : '') })
+
+const listRecommended = computed(() => orderBy(
+	listRaw.value.filter(item => item.recommend !== null),
+	['recommend', 'date'],
+	['desc'],
+))
+
+const { data: previewCount } = useAsyncData(
+	'previews:count',
+	() => queryCollection('content').where('stem', 'LIKE', 'previews/%').count(),
+)
+</script>
+
+<template>
+<template #aside>
+	<WidgetBlogStats />
+	<WidgetBlogTech />
+</template>
+
+<BlogHeader class="mobile-only" to="/" tag="h1" />
+
+<UtilHydrateSafe>
+	<PostSlide v-if="listRecommended.length && page === 1 && !category" :list="listRecommended" />
+
+	<div class="post-list">
+		<PostOrderToggle
+			v-model:is-ascending="isAscending"
+			v-model:sort-order="sortOrder"
+			v-model:category="category"
+			:categories
+		>
+			<ZSecret>
+				<UtilLink v-if="previewCount" to="/preview" class="preview-entrance">
+					<Icon name="tabler:shield-lock" />
+					查看预览文章
+				</UtilLink>
+			</ZSecret>
+		</PostOrderToggle>
+
+		<TransitionGroup tag="menu" class="proper-height" name="float-in">
+			<PostArticle
+				v-for="article, index in listPaged"
+				:key="article.path"
+				v-bind="article"
+				:to="article.path"
+				:use-updated="sortOrder === 'updated'"
+				:style="getFixedDelay(index * 0.05)"
+			/>
+		</TransitionGroup>
+
+		<ZPagination v-model="page" sticky avoid :total-pages="totalPages" />
+	</div>
+</UtilHydrateSafe>
+</template>
+
+<style lang="scss" scoped>
 .post-list {
 	margin: 1rem;
 }
@@ -80,4 +80,4 @@ const { data: previewCount } = useAsyncData(
 .float-in-leave-to {
 	position: absolute;
 }
-</style>
+</style>

package/{app → src}/pages/link.vue

@@ -1,65 +1,65 @@
-<script setup lang="ts">
-import feeds from '#clarity/feeds'
-
-const clarity = useClarityConfig()
-const myFeed = useClaritySiteFeedEntry()
-
-const { data: postLink } = await useAsyncData(
-	'content:/link',
-	() => queryCollection('content').path('/link').first(),
-)
-
-useSeoMeta({
-	title: '友链',
-	ogType: 'profile',
-	description: `${clarity.site.title}的友链页面，收集了添加他为友链的网站和他订阅的网站列表。`,
-})
-
-const copyFields = {
-	博主: myFeed.author,
-	标题: myFeed.title,
-	介绍: myFeed.desc,
-	网址: myFeed.link,
-	头像: myFeed.avatar,
-}
-</script>
-
-<template>
-<div class="mobile-only">
-	<BlogHeader to="/" suffix="友链" tag="h1" />
-</div>
-
-<FeedGroup
-	v-for="group in feeds"
-	:key="group.name"
-	v-bind="group"
-	:shuffle="clarity.link.randomInGroup"
-/>
-
-<Tab :tabs="['我的博客信息', '申请友链']" center>
-	<template #tab1>
-		<div class="link-tab">
-			<FeedCard v-bind="myFeed" />
-			<Copy v-for="(code, prompt) in copyFields" :key="prompt" :prompt :code />
-		</div>
-	</template>
-	<template #tab2>
-		<ContentRenderer
-			v-if="postLink"
-			:value="postLink"
-			class="article"
-		/>
-		<p v-else class="text-center">
-			可于 link.md 配置友链补充说明。
-		</p>
-	</template>
-</Tab>
-
-<PostComment />
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import feeds from '#clarity/feeds'
+
+const clarity = useClarityConfig()
+const myFeed = useClaritySiteFeedEntry()
+
+const { data: postLink } = await useAsyncData(
+	'content:/link',
+	() => queryCollection('content').path('/link').first(),
+)
+
+useSeoMeta({
+	title: '友链',
+	ogType: 'profile',
+	description: `${clarity.site.title}的友链页面，收集了添加他为友链的网站和他订阅的网站列表。`,
+})
+
+const copyFields = {
+	博主: myFeed.author,
+	标题: myFeed.title,
+	介绍: myFeed.desc,
+	网址: myFeed.link,
+	头像: myFeed.avatar,
+}
+</script>
+
+<template>
+<div class="mobile-only">
+	<BlogHeader to="/" suffix="友链" tag="h1" />
+</div>
+
+<FeedGroup
+	v-for="group in feeds"
+	:key="group.name"
+	v-bind="group"
+	:shuffle="clarity.link.randomInGroup"
+/>
+
+<Tab :tabs="['我的博客信息', '申请友链']" center>
+	<template #tab1>
+		<div class="link-tab">
+			<FeedCard v-bind="myFeed" />
+			<Copy v-for="(code, prompt) in copyFields" :key="prompt" :prompt :code />
+		</div>
+	</template>
+	<template #tab2>
+		<ContentRenderer
+			v-if="postLink"
+			:value="postLink"
+			class="article"
+		/>
+		<p v-else class="text-center">
+			可于 link.md 配置友链补充说明。
+		</p>
+	</template>
+</Tab>
+
+<PostComment />
+</template>
+
+<style lang="scss" scoped>
 .link-tab {
 	margin: 1rem;
 }
-</style>
+</style>

package/{app → src}/pages/preview.vue

@@ -1,48 +1,48 @@
-<script setup lang="ts">
-const clarity = useClarityConfig()
-useSeoMeta({
-	title: '预览',
-	description: `${clarity.site.title}的文章预览。`,
-})
-const { data: listRaw } = await useAsyncData('previews:index', () => getArticleIndexOptions('previews/%'), { default: () => [] })
-const { listSorted, isAscending, sortOrder } = useArticleSort(listRaw)
-const { category, categories, listCategorized } = useCategory(listSorted)
-</script>
-
-<template>
-<template #aside>
-	<WidgetBlogLog />
-</template>
-
-<div class="preview">
-	<div class="preview-header">
-		<h1>
-			<UtilLink class="mobile-only" to="/" title="返回首页">
-				<Icon name="tabler:chevron-left" />
-			</UtilLink>预览
-		</h1>
-		<PostOrderToggle
-			v-model:is-ascending="isAscending"
-			v-model:sort-order="sortOrder"
-			v-model:category="category"
-			:categories
-		/>
-	</div>
-	<p>勇敢的人探索世界。这里是一些还未发布的文章。</p>
-
-	<menu class="proper-height">
-		<PostArticle
-			v-for="article in listCategorized"
-			:key="article.path"
-			v-bind="article"
-			:to="article.path"
-			:use-updated="sortOrder === 'updated'"
-		/>
-	</menu>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const clarity = useClarityConfig()
+useSeoMeta({
+	title: '预览',
+	description: `${clarity.site.title}的文章预览。`,
+})
+const { data: listRaw } = await useAsyncData('previews:index', () => getArticleIndexOptions('previews/%'), { default: () => [] })
+const { listSorted, isAscending, sortOrder } = useArticleSort(listRaw)
+const { category, categories, listCategorized } = useCategory(listSorted)
+</script>
+
+<template>
+<template #aside>
+	<WidgetBlogLog />
+</template>
+
+<div class="preview">
+	<div class="preview-header">
+		<h1>
+			<UtilLink class="mobile-only" to="/" title="返回首页">
+				<Icon name="tabler:chevron-left" />
+			</UtilLink>预览
+		</h1>
+		<PostOrderToggle
+			v-model:is-ascending="isAscending"
+			v-model:sort-order="sortOrder"
+			v-model:category="category"
+			:categories
+		/>
+	</div>
+	<p>勇敢的人探索世界。这里是一些还未发布的文章。</p>
+
+	<menu class="proper-height">
+		<PostArticle
+			v-for="article in listCategorized"
+			:key="article.path"
+			v-bind="article"
+			:to="article.path"
+			:use-updated="sortOrder === 'updated'"
+		/>
+	</menu>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .preview {
 	margin: 1rem;
 }
@@ -56,4 +56,4 @@ const { category, categories, listCategorized } = useCategory(listSorted)
 		mask-image: linear-gradient(#FFF, transparent);
 	}
 }
-</style>
+</style>