clarity-theme 0.1.0

package/app/composables/useWidgets.ts

@@ -0,0 +1,56 @@
+import { pascalCase } from 'es-toolkit/string'
+import {
+	ContentRenderer,
+	LazyBlogWidget,
+	LazyWidgetBlogLog,
+	LazyWidgetBlogStats,
+	LazyWidgetBlogTech,
+	LazyWidgetEmpty,
+	LazyWidgetToc,
+} from '#components'
+
+// @keep-sorted
+const rawWidgets = {
+	LazyWidgetBlogLog,
+	LazyWidgetBlogStats,
+	LazyWidgetBlogTech,
+	LazyWidgetEmpty,
+	LazyWidgetToc,
+}
+
+type RawWidgetName = keyof typeof rawWidgets
+
+/** 若首字母大写还需移除`-`前缀 */
+type KebabCase<S extends string> = S extends `${infer First}${infer Rest}`
+	? `${First extends Capitalize<First> ? '-' : ''}${Lowercase<First>}${KebabCase<Rest>}`
+	: ''
+
+type RemovePrefix<S extends string, Prefix extends string> = S extends `${Prefix}${infer Rest}` ? Rest : S
+
+export type WidgetName = RemovePrefix<KebabCase<RawWidgetName>, '-lazy-widget-'> | `meta-aside-${string}`
+
+export default function useWidgets(widgetList: MaybeRefOrGetter<WidgetName[]>) {
+	const { metaSlots } = useArticle()
+
+	function renderMetaSlots(widgetName: WidgetName) {
+		const slotsTree = metaSlots.value?.[widgetName.slice('meta-'.length)]
+		return h(
+			LazyBlogWidget,
+			{ card: !slotsTree, ...slotsTree?.props },
+			() => slotsTree
+				? h(ContentRenderer, { value: slotsTree })
+				: `${widgetName} 不存在`,
+		)
+	}
+
+	const widgets = computed(() => toValue(widgetList).map(widgetName => ({
+		name: widgetName,
+		comp: widgetName.startsWith('meta-aside-')
+			? renderMetaSlots(widgetName)
+			: rawWidgets[`LazyWidget${pascalCase(widgetName)}` as RawWidgetName],
+	})))
+
+	return {
+		widgets,
+	}
+}

package/app/error.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps<{
+	error: NuxtError & { url?: string }
+}>()
+</script>
+
+<template>
+<NuxtLayout>
+	<template #aside>
+		<WidgetBlogLog />
+	</template>
+
+	<div class="app-error">
+		<ZError
+			:code="error.stack"
+			:message="error.url"
+			:title="`[${error.status}] ${error.message}`"
+		>
+			<template #operation>
+				<ZButton text="返回主页" @click="clearError({ redirect: '/' })" />
+				<ZButton text="尝试忽略" @click="clearError()" />
+			</template>
+		</ZError>
+	</div>
+</NuxtLayout>
+</template>
+
+<style lang="scss" scoped>
+.app-error {
+	margin: 1rem;
+}
+</style>

package/app/layouts/default.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const { slots } = inject<any>(Symbol.for('dxup:layout-slots')) || {}
+</script>
+
+<template>
+<NuxtLoadingIndicator />
+<NuxtRouteAnnouncer :style="{ position: 'absolute' }" />
+<BlogSkipToContent />
+<BlogSidebar />
+<div id="content">
+	<main id="main-content">
+		<slot />
+		<BlogFooter />
+	</main>
+	<BlogAside>
+		<slot name="aside" />
+	</BlogAside>
+</div>
+<BlogPanel :has-aside="!!slots?.aside" />
+<BikariyaModals />
+</template>
+
+<!-- eslint-disable-next-line vue/enforce-style-attribute -->
+<style lang="scss">
+#blog-root {
+	display: flex;
+	justify-content: center;
+	gap: 1rem;
+	min-width: 0;
+}
+
+#blog-sidebar, #blog-aside {
+	flex: 0 0 280px; // 防止搜索框 grow
+	position: sticky;
+	top: 0;
+	height: 100vh;
+	height: 100dvh;
+	min-width: 0; // 防止搜索框撑开页面
+	scrollbar-width: thin;
+
+	@media (max-width: $breakpoint-widescreen) {
+		flex-shrink: 0.2;
+	}
+}
+
+#content {
+	display: flex;
+	gap: 1rem;
+
+	// 若设置的是 max-width，则内部 main 宽度为 fit-content，可能无法撑满
+	// 此时即使设置 flex-grow，也会影响 #sidebar 无法正确 shrink
+	width: $breakpoint-widescreen;
+	min-width: 0; // 解决父级 flexbox 设置 justify-content: center 时溢出左侧消失的问题
+
+	// 此处不建议给内容设置 padding
+	> #main-content {
+		flex-grow: 1; // 使较小宽度的内容占满
+
+		// overflow: hidden; // 会使一部分元素吸顶失效
+
+		// 使内容正确计算宽度而不横向溢出
+		// 也可设置 width: 0 或者 contain: inline-size（兼容性不佳）
+		min-width: 0;
+	}
+}
+</style>

package/app/pages/[...slug].vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const { data: post } = await useAsyncData(
+	`content:${route.path}`,
+	() => queryCollection('content').path(route.path).first(),
+)
+
+const excerpt = computed(() => post.value?.description || '')
+const asideWidgetNames = computed<WidgetName[]>(() => {
+	if (!post.value)
+		return ['blog-log']
+	return (post.value.meta?.aside as WidgetName[] | undefined) ?? ['toc']
+})
+const { widgets } = useWidgets(asideWidgetNames)
+
+if (post.value) {
+	useSeoMeta({
+		title: post.value.title,
+		ogType: 'article',
+		ogImage: post.value.image,
+		description: post.value.description,
+	})
+}
+else {
+	const event = useRequestEvent()
+	event && setResponseStatus(event, 404)
+	route.meta.title = '404'
+}
+</script>
+
+<template>
+<template #aside>
+	<!-- 更换页面时相同 key 的组件不会更新 -->
+	<component :is="widget.comp" v-for="widget in widgets" :key="widget.name" />
+</template>
+
+<template v-if="post">
+	<PostHeader v-bind="post" />
+	<PostExcerpt v-if="excerpt" :excerpt />
+	<!-- 使用 float-in 动画会导致搜索跳转不准确 -->
+	<ContentRenderer
+		class="article"
+		:class="getPostTypeClassName(post?.type, { prefix: 'md' })"
+		:value="post"
+		tag="article"
+	/>
+
+	<PostFooter v-bind="post" />
+	<PostSurround />
+	<PostComment />
+</template>
+
+<ZError
+	v-else
+	icon="line-md:document-delete-twotone"
+	title="内容为空或页面不存在"
+/>
+</template>

package/app/pages/archive.vue

@@ -0,0 +1,207 @@
+<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>
+.archive {
+	padding: 1rem; // 防止内部 outline 被 mask
+	mask-image: linear-gradient(#FFF 50%, #FFF7);
+}
+
+.archive-group {
+	margin: 1rem 0 3rem;
+
+	> .archive-list {
+		display: grid;
+		grid-template-columns: repeat(var(--archive-item-column), 1fr);
+		column-gap: calc((5 - var(--archive-item-column)) * 0.2em);
+	}
+
+	&.hide-info :deep(.dim-hover) {
+		display: none;
+	}
+}
+
+.archive-tuning {
+	position: sticky;
+	bottom: min(2em, 5%);
+
+	> .z-slider {
+		margin: 0.5em 0.8em;
+	}
+}
+
+.archive-title {
+	display: flex;
+	justify-content: space-between;
+	gap: 1em;
+	position: sticky;
+	opacity: 0.5;
+	top: 0;
+	font-size: min(1.5em, 5vw);
+	color: transparent;
+	transition: color 0.2s;
+
+	&::selection, :hover > & {
+		color: var(--c-text-3);
+	}
+
+	:hover > & .archive-age {
+		opacity: 0;
+	}
+
+	> .archive-year, .archive-age {
+		margin-bottom: -0.3em;
+		mask-image: linear-gradient(#FFF 50%, transparent);
+		font-family: var(--font-stroke-free);
+		font-size: 3em;
+		font-variant-numeric: tabular-nums;
+		font-weight: 800;
+		line-height: 1;
+		z-index: -1;
+		-webkit-text-stroke: 1px var(--c-text-3);
+	}
+
+	> .archive-age {
+		position: absolute;
+		inset-inline-end: 0;
+		transition: opacity 0.2s;
+
+		> .age-label {
+			font-size: 0.5em;
+			vertical-align: super;
+		}
+	}
+
+	> .archive-info {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		column-gap: 0.5em;
+	}
+}
+</style>

package/app/pages/index.vue

@@ -0,0 +1,83 @@
+<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;
+}
+
+.float-in-leave-to {
+	position: absolute;
+}
+</style>

package/app/pages/link.vue

@@ -0,0 +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>
+.link-tab {
+	margin: 1rem;
+}
+</style>

package/app/pages/preview.vue

@@ -0,0 +1,59 @@
+<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;
+}
+
+.preview-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	h1 {
+		mask-image: linear-gradient(#FFF, transparent);
+	}
+}
+</style>

package/app/plugins/easter-egg.ts

@@ -0,0 +1,23 @@
+export default defineNuxtPlugin(() => {
+	const dir = useTextDirection()
+	const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA']
+	let currentStep = 0
+
+	function step(step: boolean, resetForward: boolean) {
+		if (step === false) {
+			currentStep = resetForward ? 1 : 0
+			return
+		}
+
+		currentStep++
+
+		if (currentStep === konamiCode.length) {
+			dir.value = dir.value === 'ltr' ? 'rtl' : 'ltr'
+			currentStep = 0
+		}
+	}
+
+	useEventListener('keydown', ({ code }) => {
+		step(code === konamiCode[currentStep], code === konamiCode[0])
+	})
+})

package/app/plugins/init.ts

@@ -0,0 +1,6 @@
+export default defineNuxtPlugin(() => {
+	// 开发环境禁用 Umami 统计
+	if (import.meta.client && import.meta.dev) {
+		localStorage.setItem('umami.disabled', 'true')
+	}
+})

package/app/plugins/tippy.ts

@@ -0,0 +1,22 @@
+import type { directive, Tippy } from 'vue-tippy'
+import VueTippy, { roundArrow } from 'vue-tippy'
+import 'tippy.js/dist/svg-arrow.css'
+
+declare module 'vue' {
+	interface GlobalComponents {
+		Tooltip: typeof Tippy
+	}
+	interface GlobalDirectives {
+		vTip: typeof directive
+	}
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+	nuxtApp.vueApp.use(VueTippy, {
+		component: 'Tooltip',
+		directive: 'tip',
+		defaultProps: {
+			arrow: roundArrow,
+		},
+	})
+})

package/app/shiki.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from '#shiki/config'
+
+export default defineConfig({
+	themes: {
+		light: () => import('shiki/themes/catppuccin-latte.mjs'),
+		dark: () => import('shiki/themes/one-dark-pro.mjs'),
+	},
+})