clarity-theme 0.1.3 → 0.2.0

package/src/components/popover/Search.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { ModalEmits, ModalProps } from '../../types/modal'
+import type { ModalEmits, ModalProps } from '#modals'
 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' })
+const appConfig = useAppConfig()
+const segmenter = Intl.Segmenter && new Intl.Segmenter(appConfig.language, { granularity: 'word' })
 
 // await useAsyncData() 会阻塞渲染
 const { data, status } = await useLazyAsyncData(

package/src/components/post/Comment.vue

@@ -1,8 +1,7 @@
 <script setup lang="tsx">
 import type { TippyComponent } from 'vue-tippy'
 
-const clarity = useClarityConfig()
-const enabled = computed(() => !!clarity.integrations.twikoo?.envId)
+const appConfig = useAppConfig()
 
 const commentEl = useTemplateRef('comment')
 const popoverEl = useTemplateRef<TippyComponent>('popover')
@@ -53,11 +52,8 @@ function confirmOpen() {
 }
 
 onMounted(() => {
-	if (!enabled.value)
-		return
-
 	window.twikoo?.init?.({
-		envId: clarity.integrations.twikoo?.envId ?? '',
+		envId: appConfig.twikoo?.envId,
 		// twikoo 会把挂载后的元素变为 #twikoo
 		el: '#twikoo',
 	})
@@ -108,12 +104,9 @@ onMounted(() => {
 		</template>
 	</Tooltip>
 
-	<div v-if="enabled" id="twikoo">
+	<div id="twikoo">
 		<p>评论加载中...</p>
 	</div>
-	<p v-else class="no-comment">
-		本文暂未开启评论
-	</p>
 </section>
 </template>
 
@@ -215,11 +208,6 @@ onMounted(() => {
 	}
 }
 
-.no-comment {
-	margin: 2em 0;
-	color: var(--c-text-3);
-}
-
 :deep(:where(.tk-preview-container,.tk-content)) {
 	pre {
 		overflow: auto;

package/src/components/post/Excerpt.vue

@@ -5,15 +5,15 @@ const props = defineProps<{
 	excerpt: string
 }>()
 
-const clarity = useClarityConfig()
+const appConfig = useAppConfig()
 
 const excerpt = ref(props.excerpt)
 const caret = ref('')
 
-if (clarity.component.excerpt?.animation !== false) {
+if (appConfig.component.excerpt?.animation !== false) {
 	excerpt.value = ''
 	onMounted(async () => {
-		caret.value = clarity.component.excerpt?.caret ?? '_'
+		caret.value = appConfig.component.excerpt?.caret ?? '_'
 		for (const char of props.excerpt) {
 			excerpt.value += char
 			await delay(50)

package/src/components/post/OrderToggle.vue

@@ -9,10 +9,10 @@ const props = defineProps<{
 	secretDelay?: string
 }>()
 
-const clarity = useClarityConfig()
-const orderMap = computed(() => clarity.article.order)
+const appConfig = useAppConfig()
+const orderMap = computed(() => appConfig.article.order)
 // 配置文件中允许升序时，且未明确禁用升序时，允许升序
-const allowAscending = computed(() => clarity.pagination.allowAscending ? !props.disableAscending : props.enableAscending)
+const allowAscending = computed(() => appConfig.pagination.allowAscending ? !props.disableAscending : props.enableAscending)
 
 const category = defineModel<string>('category')
 const sortOrder = defineModel<ArticleOrderType>('sortOrder', { default: 'date' })

package/src/components/post/PostFooter.vue

@@ -8,7 +8,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
 	title: string
 }>({ inheritAttrs: false })
 
-const clarity = useClarityConfig()
+const appConfig = useAppConfig()
 </script>
 
 <template>
@@ -38,10 +38,9 @@ const clarity = useClarityConfig()
 	<ReuseTemplate :title="meta?.slots?.copyright?.props?.title as string || '许可协议'">
 		<ContentRenderer v-if="meta?.slots?.copyright" :value="meta?.slots?.copyright" />
 		<p v-else>
-			本文采用 <ProseA v-if="clarity.site.copyright?.url" :href="clarity.site.copyright.url">
-				{{ clarity.site.copyright.name }}
+			本文采用 <ProseA :href="appConfig.copyright.url">
+				{{ appConfig.copyright.name }}
 			</ProseA>
-			<span v-else-if="clarity.site.copyright?.name">{{ clarity.site.copyright.name }}</span>
 			许可协议，转载请注明出处。
 		</p>
 	</ReuseTemplate>

package/src/components/post/PostHeader.vue

@@ -4,13 +4,13 @@ import type { ArticleProps } from '../../types/article'
 defineOptions({ inheritAttrs: false })
 const props = defineProps<ArticleProps>()
 
-const clarity = useClarityConfig()
+const appConfig = useAppConfig()
 
 const coverFilter = computed(() => props.meta?.coverFilter || (props.meta?.coverDim && 'brightness(0.75)') || undefined)
 
-const shareText = `【${clarity.site.title}】${props.title}\n\n${
+const shareText = `【${appConfig.title}】${props.title}\n\n${
 	props.description ? `${props.description}\n\n` : ''}${
-	new URL(props.path!, clarity.site.url).href}`
+	new URL(props.path!, appConfig.url).href}`
 
 const { copy, copied } = useCopy(shareText)
 </script>
@@ -38,7 +38,7 @@ const { copy, copied } = useCopy(shareText)
 			/>
 
 			<UtilDate
-				v-if="updated && isTimeDiffSignificant(date, updated, undefined, 1)"
+				v-if="updated && isTimeDiffSignificant(date, updated, 1)"
 				v-tip
 				:tip-transform="d => `修改于${d}`"
 				:date="updated"

package/src/components/post/PostSurround.vue

@@ -36,11 +36,11 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
 
 <div v-if="prev || next" class="surround-post" dir="ltr">
 	<ReuseTemplate
-		:post="next" icon="clarity:solar-rewind-back-bold-duotone"
+		:post="next" icon="zi:solar-rewind-back-bold-duotone"
 		fallback-icon="line-md:coffee-twotone-loop" fallback-text="新故事即将发生"
 	/>
 	<ReuseTemplate
-		:post="prev" icon="clarity:solar-rewind-forward-bold-duotone"
+		:post="prev" icon="zi:solar-rewind-forward-bold-duotone"
 		fallback-icon="line-md:construction-twotone" fallback-text="已抵达博客尽头"
 		align-end
 	/>

package/src/components/post/Slide.vue

@@ -6,8 +6,8 @@ import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
 
 defineProps<{ list: ArticleProps[] }>()
 
-const clarity = useClarityConfig()
-const compConf = computed(() => clarity.component.slide)
+const appConfig = useAppConfig()
+const compConf = computed(() => appConfig.component.slide)
 
 // @keep-sorted
 const [carouselEl, carouselApi] = emblaCarouselVue({

package/src/components/util/Img.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { joinURL, withLeadingSlash, withTrailingSlash } from 'ufo'
 import ImageComponent from '#build/mdc-image-component.mjs'
+import { joinURL, withLeadingSlash, withTrailingSlash } from 'ufo'
 
 export interface UtilImgProps {
 	src: string

package/src/components/widget/BlogLog.vue

@@ -1,27 +1,17 @@
 <script setup lang="ts">
-const clarity = useClarityConfig()
+const { timeEstablished } = useAppConfig()
 
-const blogLog = computed(() => {
-	const entries = clarity.changelog.map(({ date, text }) => ({ label: date, value: text }))
-	if (clarity.site.established) {
-		entries.push({ label: clarity.site.established, value: '发布第一篇文章' })
-	}
-	return entries
-})
+const blogLog = [
+	{ label: '2025-07-26', value: '重构到 Nuxt 4 + Nuxt Content v3，启用 zhilu.site 域名' },
+	{ label: '2024-08-11', value: '重构到 Nuxt 3 + Nuxt Content v2' },
+	{ label: '2023-05-24', value: '更换框架为 Hexo，升级博客' },
+	{ label: '2020-08-24', value: '使用 zhilu.cyou 域名' },
+	{ label: timeEstablished, value: '发布第一篇文章' },
+]
 </script>
 
 <template>
 <BlogWidget card title="更新日志">
-	<ZDlGroup v-if="blogLog.length" size="large" :items="blogLog" />
-	<p v-else class="no-log">
-		暂无更新日志，可在 clarity.config.ts 的 changelog 中配置。
-	</p>
+	<ZDlGroup size="large" :items="blogLog" />
 </BlogWidget>
 </template>
-
-<style lang="scss" scoped>
-.no-log {
-	padding: 1em;
-	color: var(--c-text-3);
-}
-</style>

package/src/components/widget/BlogStats.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { UtilDate } from '#components'
 
-const clarity = useClarityConfig()
+const appConfig = useAppConfig()
 const runtimeConfig = useRuntimeConfig()
 
 // 响应头不正确时，stats.value 可能会是字符串，首次属性访问可能为 undefined
@@ -16,8 +16,8 @@ const yearlyTip = computed(() => Object
 
 const blogStats = [{
 	label: '运营时长',
-	value: clarity.site.established ? timeElapse(clarity.site.established) : '--',
-	tip: clarity.site.established ? `博客于${clarity.site.established}上线` : '未配置建站日期',
+	value: timeElapse(appConfig.timeEstablished),
+	tip: `博客于${appConfig.timeEstablished}上线`,
 }, {
 	label: '上次更新',
 	value: () => h(UtilDate, {
@@ -26,7 +26,7 @@ const blogStats = [{
 		tipPrefix: '构建于',
 	}),
 }, {
-	label: clarity.stats.postsOnly ? '文章字数' : '总字数',
+	label: appConfig.stats.includePaths.length ? '文章字数' : '总字数',
 	value: computed(() => formatNumber(stats.value?.total?.words) || '--'),
 	tip: yearlyTip,
 }]

package/src/components/widget/BlogTech.vue

@@ -1,17 +1,11 @@
 <script setup lang="ts">
 import { Icon } from '#components'
+import { merge } from 'es-toolkit/object'
+import { packageManager, version } from '~~/package.json'
+import pnpmWorkspace from '~~/pnpm-workspace.yaml'
 
-const clarity = useClarityConfig()
-const runtimeConfig = useRuntimeConfig()
-const buildInfo = runtimeConfig.public.clarity as {
-	theme: string
-	themeVersion: string
-	siteVersion: string
-	sitePackageManager: string
-	nuxtVersion: string
-	vueVersion: string
-}
-const { public: { arch, ci, nodeVersion, platform } } = runtimeConfig
+const appConfig = useAppConfig()
+const { public: { arch, ci, nodeVersion, platform } } = useRuntimeConfig()
 
 const ciPlatform = computed(() => {
 	const iconName = ciIcons[ci]
@@ -25,20 +19,25 @@ const ciPlatform = computed(() => {
 	return h('span', {}, [iconNode, ` ${ci.split(' ')[0]}`])
 })
 
+// @ts-expect-error pnpm-workspace.yaml 无类型定义
+const packages = merge(...Object.values(pnpmWorkspace.catalogs))
+const [pm, pmVersion] = packageManager.split('@') as [string, string]
+
 const service = computed(() => ([
 	...ci ? [{ label: '构建平台', value: ciPlatform }] : [],
 	{ label: '图片存储', value: () => [h(Icon, { name: 'devicon:cloudflare' }), ' R2'] },
 	{ label: '软件协议', value: 'MIT' },
-	{ label: '文章许可', value: clarity.site.copyright?.abbr || '未配置' },
-	{ label: '规范域名', value: getDomain(clarity.site.url) },
+	{ label: '文章许可', value: appConfig.copyright.abbr },
+	{ label: '规范域名', value: getDomain(appConfig.url) },
 ]))
 
 const techstack = computed(() => ([
-	{ label: 'Blog', value: buildInfo.siteVersion || '--' },
-	{ label: 'Theme', value: `${buildInfo.theme} ${buildInfo.themeVersion}` },
-	{ label: 'Vue', value: buildInfo.vueVersion },
-	{ label: 'Nuxt', value: buildInfo.nuxtVersion },
+	{ label: 'Blog', value: version },
+	{ label: 'Vue', value: packages.vue },
+	{ label: 'Nuxt', value: packages.nuxt },
+	{ label: 'Content', value: packages['@nuxt/content'] },
 	{ label: 'Node', value: nodeVersion },
+	{ label: pm, value: pmVersion },
 	{ label: 'OS', value: platform },
 	{ label: 'Arch', value: arch },
 ]))

package/src/components/widget/CommGroup.vue

@@ -0,0 +1,43 @@
+<template>
+<BlogWidget
+	card
+	dim
+	title="博客/技术社区"
+	bg-img="https://p.qlogo.cn/gh/169994096/169994096/100/"
+	bg-aside
+>
+	<div class="title text-creative">
+		纸网接入点
+	</div>
+
+	<Tip copy icon :tip-options="{ placement: 'left' }">
+		<Icon name="ri:qq-fill" />
+		<span>169994096</span>
+	</Tip>
+</BlogWidget>
+</template>
+
+<style lang="scss" scoped>
+.title {
+	background-clip: text;
+	background-image: linear-gradient(60deg, var(--c-accent) -30%, var(--c-primary), var(--c-text-1));
+	background-position: 100% 0;
+	background-size: 200%;
+	font-size: 1.8em;
+	color: transparent;
+	transition: background-position 0.2s;
+
+	.blog-widget:hover & {
+		background-position: 0 0;
+	}
+}
+
+.tip {
+	font-size: 0.9em;
+	line-height: 2;
+}
+
+:deep(.bg-img).bg-img.bg-img {
+	opacity: 0.5;
+}
+</style>

package/src/composables/useArticle.ts

@@ -1,5 +1,5 @@
+import type { ContentCollectionItem } from '@nuxt/content'
 import type { MetaSlotsTree } from '../remark-plugins/rehype-meta-slots'
-import type { ClarityContentRow } from '../shared/types/content'
 import type { ArticleOrderType, ArticleProps } from '../types/article'
 import { orderBy } from 'es-toolkit/array'
 
@@ -7,7 +7,7 @@ import { orderBy } from 'es-toolkit/array'
 export function useArticle(path?: MaybeRefOrGetter<string | undefined>) {
 	const route = useRoute()
 	const dataKey = computed(() => `content:${toValue(path) ?? route.path}`)
-	const post = computed(() => useNuxtData<ClarityContentRow | null | undefined>(dataKey.value).data.value)
+	const post = computed(() => useNuxtData<ContentCollectionItem | null | undefined>(dataKey.value).data.value)
 
 	return {
 		dataKey,
@@ -64,12 +64,12 @@ interface UseArticleSortOptions {
 }
 
 export function useArticleSort(list: MaybeRefOrGetter<ArticleProps[]>, options?: UseArticleSortOptions) {
-	const clarity = useClarityConfig()
+	const appConfig = useAppConfig()
 	const {
 		bindDirectionQuery,
 		bindOrderQuery,
 		initialAscend = false,
-		initialOrder = (clarity.pagination.sortOrder as ArticleOrderType) || 'date',
+		initialOrder = appConfig.pagination.sortOrder || 'date',
 	} = options || {}
 
 	const sortOrder = bindOrderQuery
@@ -87,7 +87,7 @@ export function useArticleSort(list: MaybeRefOrGetter<ArticleProps[]>, options?:
 
 	const listSorted = computed(() => orderBy(
 		toValue(list),
-		[sortOrder.value, 'date'] as any,
+		[sortOrder.value, 'date'],
 		[isAscending.value ? 'asc' : 'desc'],
 	))
 
@@ -99,13 +99,13 @@ export function useArticleSort(list: MaybeRefOrGetter<ArticleProps[]>, options?:
 }
 
 export function getCategoryIcon(category?: string) {
-	const clarity = useClarityConfig()
-	return clarity.article.categories[category!]?.icon ?? 'tabler:folder'
+	const appConfig = useAppConfig()
+	return appConfig.article.categories[category!]?.icon ?? 'tabler:folder'
 }
 
 export function getCategoryColor(category?: string) {
-	const clarity = useClarityConfig()
-	return clarity.article.categories[category!]?.color
+	const appConfig = useAppConfig()
+	return appConfig.article.categories[category!]?.color
 }
 
 interface GetPostTypeClassNameOptions {

package/src/composables/usePagination.ts

@@ -5,10 +5,10 @@ interface UsePaginationOptions {
 }
 
 export default function usePagination<T>(list: MaybeRefOrGetter<T[]>, options?: UsePaginationOptions) {
-	const clarity = useClarityConfig()
+	const appConfig = useAppConfig()
 	const {
 		initialPage = 1,
-		perPage = clarity.pagination.perPage || 10,
+		perPage = appConfig.pagination.perPage || 10,
 		bindQuery,
 	} = options || {}
 

package/src/composables/useWidgets.ts

@@ -5,6 +5,7 @@ import {
 	LazyWidgetBlogLog,
 	LazyWidgetBlogStats,
 	LazyWidgetBlogTech,
+	LazyWidgetCommGroup,
 	LazyWidgetEmpty,
 	LazyWidgetToc,
 } from '#components'
@@ -14,6 +15,7 @@ const rawWidgets = {
 	LazyWidgetBlogLog,
 	LazyWidgetBlogStats,
 	LazyWidgetBlogTech,
+	LazyWidgetCommGroup,
 	LazyWidgetEmpty,
 	LazyWidgetToc,
 }

package/src/config/app.ts

@@ -1,5 +1,6 @@
 import type { NavItem } from '../types/nav'
-import type { ClarityPublicConfig } from './public'
+import type { ClarityPublicIntegrationsConfig } from './public'
+import type { ClarityArticleConfig, ClarityAuthor, ClarityFeedConfig, ClarityHeadScript, ClarityStatsConfig } from './schema'
 
 export interface NavGroup {
 	title: string
@@ -27,8 +28,10 @@ export interface ClarityUiConfig {
 			showTitle: boolean
 		}
 		stats: {
-			/** 归档页面每年标题对应的年龄 */
-			birthYear?: number
+			/** 归档页面每年标题对应的年龄，0 表示不展示 */
+			birthYear: number
+			/** blog-stats widget 的预置文本 */
+			wordCount: string
 		}
 	}
 	footer: {
@@ -70,19 +73,45 @@ export interface ClarityUiConfig {
 	}>
 }
 
-export type ClarityAppConfig = ClarityPublicConfig & ClarityUiConfig
-
 /**
- * app/app.config.ts 中 `clarity` 键的覆盖输入类型：
- * UI 配置深度可选（数组整体替换，与 defu 行为一致）。
+ * CustomAppConfig 中 article 的声明形状。
  *
- * 站点级字段（site / article / feed / stats / integrations / features / changelog）
- * 不属于 app.config.ts，请写入 clarity.config.ts。
+ * 必须是 interface（而非 type 别名）：MergedAppConfig 对 extends Record 的
+ * 类型会进入递归合并，Record<string, string> 的索引签名会把 order 键类型
+ * 碾碎成 keyof any；interface 不带隐式索引签名，直接整体采用本类型。
+ */
+export interface ClarityAppConfigArticle extends ClarityArticleConfig {
+	categories: Record<string, { icon?: string, color?: string }>
+}
+
+/**
+ * 上游 blog-v3 的扁平 AppConfig 形状（blog.config.ts 展开进 app.config.ts）。
+ * Clarity 由 clarity-config 模块注入同一形状，上游同步组件保持 byte-identical。
  */
-export type ClarityUiConfigInput<T = ClarityUiConfig> = {
+export interface ClarityFlatAppConfig extends ClarityUiConfig {
+	title: string
+	subtitle: string
+	description: string
+	author: ClarityAuthor
+	copyright: { abbr: string, name: string, url: string }
+	favicon: string
+	language: string
+	timeEstablished: string
+	timeZone: string
+	url: string
+	defaultCategory: string
+	article: ClarityArticleConfig
+	feed: ClarityFeedConfig
+	scripts: ClarityHeadScript[]
+	stats: ClarityStatsConfig
+	twikoo?: ClarityPublicIntegrationsConfig['twikoo']
+}
+
+/** 消费项目 app/app.config.ts 顶层扁平键的覆盖输入类型（深层可选，数组整体替换） */
+export type ClarityFlatAppConfigInput<T = ClarityFlatAppConfig> = {
 	[K in keyof T]?: T[K] extends readonly unknown[]
 		? T[K]
 		: T[K] extends object
-			? ClarityUiConfigInput<T[K]>
+			? ClarityFlatAppConfigInput<T[K]>
 			: T[K]
 }

package/src/config/content.ts

@@ -22,6 +22,12 @@ export interface ArticleSchema {
 	permalink?: string
 
 	readingTime?: ReadTimeResults
+
+	/**
+	 * 开放索引签名：clarity.config.ts 的 article.order 允许自定义排序键，
+	 * 上游归档页通过 article[sortOrder] 索引（上游依赖其配置字面量类型）。
+	 */
+	[key: string]: unknown
 }
 
 function createArticleSchema(config: ClarityConfig) {

package/src/config/feed.ts

@@ -1,42 +1,2 @@
-import type { Arch } from '../shared/utils/icon'
-
-/**
- * 友链数据类型：数据由消费项目提供，结构由 Theme 定义。
- */
-export type { Arch }
-
-export interface FeedEntry {
-	/** 博客作者，使用作者明确的自称 */
-	author: string
-	/** 友链卡片的作者名后缀；作者自称明确且较短时，可填简短站名，避免重复作者名 */
-	sitenick?: string
-	/** 悬浮卡片与订阅源使用的完整站点标题；与作者名相同时省略，默认使用 sitenick 或 author */
-	title?: string
-	/** 个人简介/博客描述 */
-	desc?: string
-	/** 博客地址 */
-	link: string
-	/** 订阅源 */
-	feed?: string
-	/** 站点小图标 */
-	icon: string
-	/** 个人头像 */
-	avatar: string
-	/** 博客技术架构 */
-	archs?: Arch[]
-	/** 申请/评论日期；主动收录时使用收录日期 */
-	date: string
-	/** 博主备注 */
-	comment?: string
-	/** 错误信息 */
-	error?: string
-}
-
-export interface FeedGroup {
-	/** 分组名 */
-	name: string
-	/** 描述 */
-	desc?: string
-	/** 友链列表 */
-	entries: FeedEntry[]
-}
+export type { Arch } from '../shared/utils/icon'
+export type { FeedEntry, FeedGroup } from '../types/feed'

package/src/config/index.ts

@@ -1,6 +1,6 @@
 export type { Nav, NavItem } from '../types/nav'
-export type { ClarityAppConfig, ClarityUiConfig, ClarityUiConfigInput, NavGroup } from './app'
+export type { ClarityUiConfig, NavGroup } from './app'
 export { defineClarityConfig } from './define'
 export type { Arch, FeedEntry, FeedGroup } from './feed'
-export type { ClarityPublicConfig, ClarityPublicIntegrationsConfig } from './public'
+export type { ClarityPublicIntegrationsConfig } from './public'
 export * from './schema'

package/src/config/pnpm-workspace.ts

@@ -0,0 +1,19 @@
+/**
+ * Theme 内置的技术栈版本数据（上游 BlogTech 通过 ~~/pnpm-workspace.yaml
+ * 的 catalogs 展示 Vue / Nuxt / Nuxt Content 版本）。
+ *
+ * 分组结构与上游 blog-v3 的 pnpm-workspace.yaml 保持一致：上游 BlogTech
+ * 使用 es-toolkit 的 merge(...Object.values(catalogs))（二元签名），
+ * 至少需要两个分组才能正常展开。
+ */
+export const fallbackPnpmWorkspace = {
+	catalogs: {
+		content: {
+			'@nuxt/content': '^3.16.0',
+		},
+		framework: {
+			nuxt: '^4.5.2',
+			vue: '^3.5.42',
+		},
+	},
+} as const