clarity-theme 0.1.3 → 0.1.4

package/README.md

@@ -21,6 +21,13 @@ Clarity replaces the traditional sync-fork workflow. Instead of merging thousand
 - **Integrations stay yours**: Twikoo, head scripts, and anti-mirror are driven by consumer configuration.
 - **Override without forking**: UI app-config overrides, same-path component overrides, custom Shiki themes, and consumer CSS.
 
+## Core principles
+
+- **Clarity is a Layer extraction of blog-v3**, not a reimplemented theme. Upstream UI, layout, and interaction are the source of truth by default and stay byte-identical except for explicit mechanical path rewrites recorded in `tests/upstream-parity.manifest.json`.
+- **Upstream hard-coded behavior is preserved first.** Generalization, configuration coverage, and cleanup are future work, not this parity line.
+- **Personal site data stays with the consumer**, following the boundary that upstream `init-project` resets.
+- **Drift is a bug.** `pnpm test:upstream-parity` fails on any undeclared difference inside the sync surface.
+
 ## Choose your path
 
 | Starting point | Documentation |
@@ -34,12 +41,15 @@ For an Agent-assisted migration, ask your agent to use the `migrate-blog-v3-to-c
 ## Quick start
 
 ```bash
-pnpm create clarity-theme@beta my-blog
+pnpm create clarity-theme my-blog
 cd my-blog
 pnpm dev
 ```
 
-The creator package is published separately as `create-clarity-theme`; the `@beta` dist-tag is used while its initial prerelease is the published channel. See [`create-clarity-theme/README.md`](./create-clarity-theme/README.md) for all options. The manual path is four files:
+The creator shows editable defaults for site identity and detects your system
+timezone; generated projects include the `pnpm new-blog` authoring command.
+
+The creator package is published separately as `create-clarity-theme` on the npm `latest` dist-tag. See [`create-clarity-theme/README.md`](./create-clarity-theme/README.md) for all options. The manual path is four files:
 
 ```ts
 // nuxt.config.ts

package/README.zh-CN.md

@@ -21,6 +21,13 @@ Clarity 取代传统的 sync fork 工作流。你不需要把上游数千行代
 - **集成仍归你所有**：Twikoo、head 脚本与反镜像均由消费方配置驱动
 - **覆盖而无需 fork**：UI app config 覆盖、同路径组件覆盖、自定义 Shiki 主题与消费方 CSS
 
+## 核心原则
+
+- **Clarity 是 blog-v3 的 Layer 化提取**，不是重新实现的独立主题。上游 UI、布局与交互默认是 source of truth，除 `tests/upstream-parity.manifest.json` 中显式记录的机械路径改写外保持 byte-identical。
+- **上游硬编码行为优先保留**：泛化、配置化与清理属于后续路线，不属于本次 parity。
+- **个人站点数据归消费方管理**，边界以上游 `init-project` 重置范围为准。
+- **漂移即缺陷**：同步面内任何未登记差异都会让 `pnpm test:upstream-parity` 失败。
+
 ## 选择你的路径
 
 | 起点 | 文档 |
@@ -34,12 +41,15 @@ Clarity 取代传统的 sync fork 工作流。你不需要把上游数千行代
 ## 快速开始
 
 ```bash
-pnpm create clarity-theme@beta my-blog
+pnpm create clarity-theme my-blog
 cd my-blog
 pnpm dev
 ```
 
-创建包以独立的 `create-clarity-theme` npm 包分发；当前初始预发布位于 `@beta` dist-tag。完整参数见 [`create-clarity-theme/README.md`](./create-clarity-theme/README.md)。手动接入只需四个文件：
+创建器会显示可编辑的站点默认值并自动检测系统时区；生成的项目自带
+`pnpm new-blog` 写作命令。
+
+创建包以独立的 `create-clarity-theme` npm 包分发，稳定版位于 `latest` dist-tag。完整参数见 [`create-clarity-theme/README.md`](./create-clarity-theme/README.md)。手动接入只需四个文件：
 
 ```ts
 // nuxt.config.ts

package/nuxt.config.ts

@@ -3,6 +3,7 @@ import { arch, env, version as nodeVersion, platform } from 'node:process'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 import { name as ciName, CLOUDFLARE_PAGES, GITHUB_ACTIONS, NETLIFY } from 'ci-info'
 import { Temporal } from 'temporal-polyfill'
+import Yaml from 'unplugin-yaml/vite'
 import { homepage, name as themeName, version as themeVersion } from './package.json'
 
 /** Theme 根目录（Layer 本地路径基准，兼容 npm 包 / git 包 / 本地目录安装） */
@@ -88,6 +89,9 @@ export default defineNuxtConfig({
 		// Layer 配置中的相对 module 路径会以消费项目为基准解析，必须使用绝对路径；
 		// 且 clarity-config 必须先于 nuxt-llms 运行：后者在 setup 时读取注入的 llms 站点配置
 		toThemePath('src/modules/clarity-config'),
+		// 上游通过 Nuxt 的 modules 目录自动加载；Layer 场景下显式注册，且必须在
+		// clarity-config 之后（其导入 clarity-config 生成的 blog.config 数据模块）。
+		toThemePath('src/modules/anti-mirror'),
 		'nuxt-llms',
 	],
 
@@ -112,6 +116,13 @@ export default defineNuxtConfig({
 	},
 
 	typescript: {
+		// Theme 的 server 目录位于 src/ 内（跟随上游布局），会命中 App tsconfig
+		// 对 srcDir 的整体 include，导致 server 路由在 App 上下文被检查
+		// （queryCollection 等 Nitro 自动导入类型错误）。此处从 App tsconfig 排除；
+		// server 代码仍由 tsconfig.server.json 正常覆盖。
+		tsConfig: {
+			exclude: [toThemePath('src/server')],
+		},
 		nodeTsConfig: {
 			// @keep-sorted
 			include: [
@@ -122,6 +133,10 @@ export default defineNuxtConfig({
 	},
 
 	vite: {
+		// 上游 BlogTech 通过 `~~/pnpm-workspace.yaml` 读取技术栈版本，
+		// 需要 YAML 导入支持（上游注册 unplugin-yaml/nuxt；这里直接注册 vite 插件，
+		// 避免其向消费项目 compilerOptions.types 注入 pnpm 严格布局下无法解析的条目）
+		plugins: [Yaml()],
 		css: {
 			preprocessorOptions: {
 				scss: {
@@ -192,7 +207,8 @@ ${homepage}
 
 	icon: {
 		customCollections: [
-			{ prefix: 'clarity', dir: toThemePath('src/assets/icons') },
+			// 上游使用 `zi` 前缀（zhilu icons）与原始 PascalCase 文件名，保持一致
+			{ prefix: 'zi', dir: toThemePath('src/assets/icons') },
 		],
 		clientBundle: {
 			scan: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-theme",
   "type": "module",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Clarity Theme — 从 blog-v3 提取的可复用 Nuxt 4 Layer 博客主题",
   "license": "MIT",
   "publishConfig": {
@@ -54,6 +54,7 @@
     "@bikariya/modals": "^0.0.8",
     "@bikariya/shiki": "^0.0.8",
     "@iconify-json/catppuccin": "^1.2.17",
+    "@iconify-json/devicon": "^1.2.10",
     "@iconify-json/line-md": "^1.2.16",
     "@iconify-json/ri": "^1.2.10",
     "@iconify-json/simple-icons": "^1.2.94",
@@ -95,8 +96,10 @@
     "temporal-polyfill": "^1.0.4",
     "ufo": "^1.6.0",
     "unist-util-visit": "^5.1.0",
+    "unplugin-yaml": "^4.2.1",
     "vfile": "^6.0.3",
     "vue-tippy": "^6.7.1",
+    "yaml": "^2.9.1",
     "zod": "^4.5.4"
   },
   "devDependencies": {
@@ -145,6 +148,7 @@
     "sync:check": "node scripts/sync-upstream.mjs check",
     "sync:diff": "node scripts/sync-upstream.mjs diff",
     "sync:apply": "node scripts/sync-upstream.mjs apply",
-    "sync:verify": "node scripts/sync-upstream.mjs verify"
+    "sync:verify": "node scripts/sync-upstream.mjs verify",
+    "test:upstream-parity": "node scripts/test-upstream-parity.mjs"
   }
 }

package/src/app.config.ts

@@ -1,110 +1,14 @@
 /**
- * Clarity Theme UI 默认配置。
+ * Layer 级 app.config。
  *
- * 站点数据（标题、作者、文章分类等）来自根目录 clarity.config.ts，
- * 由 src/modules/clarity-config 注入到 appConfig.clarity 中。
- *
- * 消费项目可在自己的 app/app.config.ts 中按需覆盖任意键。
+ * UI 默认值由 src/modules/clarity-config 从 src/config/ui.ts 注入（inline 层），
+ * 此处仅提供需要字面量类型的键：pagination.sortOrder 若由模块注入，
+ * JSON 字面量会被宽化为 string，导致上游 useArticle 的
+ * ref<ArticleOrderType>(initialOrder) 类型不匹配。以 Layer cfg 提供
+ * 'date' 字面量（运行时与默认值一致，可被消费项目顶层键覆盖）。
  */
 export default defineAppConfig({
-	clarity: {
-		// @keep-sorted
-		component: {
-			alert: {
-				/** 默认使用卡片风格还是扁平风格 */
-				defaultStyle: 'card' as 'card' | 'flat',
-			},
-
-			codeblock: {
-				/** 代码块触发折叠的行数 */
-				triggerRows: 32,
-				/** 代码块折叠后的行数 */
-				collapsedRows: 16,
-				/** 启用代码块缩进导航会关闭空格渲染 */
-				enableIndentGuide: true,
-				/** 代码块缩进导航竖线匹配空格数 */
-				indent: 4,
-				/** tab 渲染宽度 */
-				tabSize: 3,
-			},
-
-			/** 文章开头摘要 */
-			excerpt: {
-				animation: true,
-				caret: '_',
-			},
-
-			/** 精选文章 Slide */
-			slide: {
-				/** 适合封面图无字时启用 */
-				showTitle: true,
-			},
-
-			stats: {
-				/** 归档页面每年标题对应的年龄，无需展示时可留空 */
-				birthYear: undefined as number | undefined,
-			},
-		},
-
-		// @keep-sorted
-		footer: {
-			/** 侧边栏底部图标导航 */
-			iconNav: [] as { icon: string, text: string, url: string }[],
-			/** 页脚站点地图 */
-			nav: [] as {
-				title: string
-				items: { icon: string, text: string, url: string }[]
-			}[],
-		},
-
-		/** 左侧栏顶部 Logo */
-		header: {
-			/** 展示标题文本，否则展示纯 Logo */
-			showTitle: true,
-			emojiTail: [] as string[],
-		},
-
-		/** 友链页面 */
-		link: {
-			/** 无订阅源展示静音图标 */
-			remindNoFeed: true,
-			/** 友链分组内随机排序 */
-			randomInGroup: true,
-		},
-
-		/** 左侧栏导航 */
-		nav: [
-			{
-				title: '',
-				items: [
-					{ icon: 'tabler:files', text: '文章', url: '/' },
-					{ icon: 'tabler:link', text: '友链', url: '/link' },
-					{ icon: 'tabler:archive', text: '归档', url: '/archive' },
-				],
-			},
-		],
-
-		pagination: {
-			perPage: 10,
-			/** 默认排序方式，需要是 article.order 中的键名 */
-			sortOrder: 'date',
-			/** 允许（普通/预览/归档）文章列表正序，开启后排序方式左侧图标可切换顺序 */
-			allowAscending: false,
-		},
-
-		themes: {
-			light: {
-				icon: 'tabler:sun',
-				tip: '浅色模式',
-			},
-			system: {
-				icon: 'tabler:device-desktop',
-				tip: '跟随系统',
-			},
-			dark: {
-				icon: 'tabler:moon',
-				tip: '深色模式',
-			},
-		},
+	pagination: {
+		sortOrder: 'date' as const,
 	},
 })

package/src/assets/icons/zhilu.svg

@@ -0,0 +1,8 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 64" stroke="currentColor" height="1em" fill="none"
+	stroke-linecap="round" stroke-linejoin="round" stroke-width="8"
+>
+	<!-- © Zhilu https://zhilu.site -->
+	<polyline points="4,4 36,4 5,45 37,45" />
+	<polyline points="43,19 12,60 44,60" />
+</svg>

package/src/blog.config.ts

@@ -0,0 +1,71 @@
+/**
+ * 上游 `blog.config.ts` 兼容适配层（Layer 边界的唯一转换点）。
+ *
+ * blog-v3 的组件与 server 路由通过 `~~/blog.config` 直接读取站点配置；
+ * Clarity 的消费项目使用 `clarity.config.ts`（嵌套 schema），
+ * 因此由 src/modules/clarity-config 注入 `~~/blog.config` 别名指向本文件，
+ * 将 clarity.config.ts 机械映射回上游的扁平配置形状（含 myFeed 导出）。
+ * 上游同步文件因此可以保持 byte-identical，不再逐文件改写。
+ */
+import type { FeedEntry } from './types/feed'
+import config from '#clarity/config'
+
+const { site, article, feed, stats, integrations } = config
+
+const blogConfig = {
+	title: site.title,
+	subtitle: site.subtitle ?? '',
+	description: site.description,
+	author: {
+		name: site.author.name,
+		avatar: site.author.avatar ?? '',
+		email: site.author.email ?? '',
+		homepage: site.author.homepage ?? '/',
+	},
+	copyright: site.copyright ?? { abbr: '', name: '', url: '' },
+	favicon: site.favicon,
+	language: site.language,
+	timeEstablished: site.established ?? '',
+	timeZone: site.timezone,
+	url: site.url,
+	defaultCategory: article.defaultCategory,
+
+	article: {
+		categories: article.categories,
+		types: article.types,
+		order: article.order,
+		/** 仅供上游 pnpm new 脚本使用，Layer 消费场景不涉及 */
+		useRandomPremalat: false,
+		hidePostPrefix: article.hidePostPrefix,
+		robotsNotIndex: article.robotsNotIndex,
+	},
+
+	/** 博客 Atom 订阅源 */
+	feed,
+
+	/** 向 <head> 中添加脚本 */
+	scripts: integrations.scripts,
+
+	/** 文章统计配置 */
+	stats,
+
+	/** 自己部署的 Twikoo 服务 */
+	twikoo: integrations.twikoo ?? { envId: '', preload: '' },
+}
+
+/** 用于生成 OPML 和友链页面配置（与上游 blog.config.ts 的导出保持一致） */
+export const myFeed: FeedEntry = {
+	author: blogConfig.author.name,
+	sitenick: blogConfig.title,
+	title: blogConfig.title,
+	desc: blogConfig.subtitle || blogConfig.description,
+	link: blogConfig.url,
+	feed: new URL('/atom.xml', blogConfig.url).toString(),
+	icon: blogConfig.favicon,
+	avatar: blogConfig.author.avatar,
+	archs: ['Nuxt'],
+	date: blogConfig.timeEstablished,
+	comment: '这是我自己',
+}
+
+export default blogConfig

package/src/components/blog/BlogFooter.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-const clarity = useClarityConfig()
+const appConfig = useAppConfig()
 </script>
 
 <template>
 <footer class="blog-footer">
 	<nav class="footer-nav">
-		<div v-for="(group, groupIndex) in clarity.footer.nav" :key="groupIndex">
+		<div v-for="(group, groupIndex) in appConfig.footer.nav" :key="groupIndex">
 			<hgroup class="text-creative" v-text="group.title" />
 			<menu>
 				<li v-for="(item, itemIndex) in group.items" :key="itemIndex">
@@ -17,7 +17,7 @@ const clarity = useClarityConfig()
 			</menu>
 		</div>
 	</nav>
-	<p v-html="clarity.footer.copyright" />
+	<p v-html="appConfig.footer.copyright" />
 </footer>
 </template>
 

package/src/components/blog/BlogHeader.global.vue

@@ -4,14 +4,14 @@ withDefaults(defineProps<{
 }>(), {
 	tag: 'div',
 })
-const clarity = useClarityConfig()
+const appConfig = useAppConfig()
 </script>
 
 <template>
 <UtilLink class="blog-header">
-	<div v-if="clarity.header.emojiTail" class="emoji-tail">
+	<div v-if="appConfig.header.emojiTail" class="emoji-tail">
 		<span
-			v-for="(emoji, emojiIndex) in clarity.header.emojiTail"
+			v-for="(emoji, emojiIndex) in appConfig.header.emojiTail"
 			:key="emojiIndex"
 			class="split-char"
 			:style="getFixedDelay(emojiIndex * .6 - 3)"
@@ -20,16 +20,16 @@ const clarity = useClarityConfig()
 	</div>
 
 	<NuxtImg
-		:src="clarity.header.logo"
+		:src="appConfig.header.logo"
 		class="blog-logo round-cobblestone"
-		:class="{ circle: clarity.header.showTitle }"
-		:alt="clarity.site.title"
+		:class="{ circle: appConfig.header.showTitle }"
+		:alt="appConfig.title"
 	/>
 
-	<div v-if="clarity.header.showTitle" class="blog-text">
+	<div v-if="appConfig.header.showTitle" class="blog-text">
 		<component :is="tag" class="header-title">
 			<span
-				v-for="(char, charIndex) in clarity.site.title"
+				v-for="(char, charIndex) in appConfig.title"
 				:key="charIndex"
 				class="split-char"
 				:style="getFixedDelay((charIndex + 1) * .1)"
@@ -38,7 +38,7 @@ const clarity = useClarityConfig()
 		</component>
 
 		<div class="header-subtitle">
-			{{ clarity.header.subtitle }}
+			{{ appConfig.header.subtitle }}
 		</div>
 	</div>
 </UtilLink>

package/src/components/blog/BlogSidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const clarity = useClarityConfig()
+const appConfig = useAppConfig()
 const layoutStore = useLayoutStore()
 const searchStore = useSearchStore()
 
@@ -25,7 +25,7 @@ const debouncedSelection = refDebounced(text)
 			<Key class="keycut" code="K" cmd prevent @press="layoutStore.toggle('search')" />
 		</div>
 
-		<template v-for="(group, groupIndex) in clarity.nav" :key="groupIndex">
+		<template v-for="(group, groupIndex) in appConfig.nav" :key="groupIndex">
 			<h3 v-if="group.title">
 				{{ group.title }}
 			</h3>
@@ -44,7 +44,7 @@ const debouncedSelection = refDebounced(text)
 
 	<footer class="sidebar-footer">
 		<BlogThemeToggle />
-		<ZIconNavList :list="clarity.footer.iconNav" />
+		<ZIconNavList :list="appConfig.footer.iconNav" />
 	</footer>
 </aside>
 </template>

package/src/components/blog/ThemeToggle.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-const clarity = useClarityConfig()
+const appConfig = useAppConfig()
 const colorMode = useColorMode()
 </script>
 
 <template>
 <div class="theme-toggle">
 	<button
-		v-for="(themeData, themeName) in clarity.themes"
+		v-for="(themeData, themeName) in appConfig.themes"
 		:key="themeName"
 		v-tip="themeData.tip"
 		:aria-label="themeData.tip"

package/src/components/content/Alert.vue

@@ -11,8 +11,8 @@ const props = withDefaults(defineProps<{
 	type: 'tip',
 })
 
-const clarity = useClarityConfig()
-const card = computed(() => clarity.component.alert.defaultStyle === 'flat' ? props.card : !props.flat)
+const appConfig = useAppConfig()
+const card = computed(() => appConfig.component.alert.defaultStyle === 'flat' ? props.card : !props.flat)
 
 const typeMap = {
 	tip: {

package/src/components/content/FeedCard.vue

@@ -6,7 +6,7 @@ import { Temporal } from 'temporal-polyfill'
 
 const props = defineProps<FeedEntry>()
 
-const clarity = useClarityConfig()
+const appConfig = useAppConfig()
 const route = useRoute()
 const isInspect = computed(() => import.meta.dev && route.query.inspect !== undefined)
 
@@ -50,7 +50,7 @@ function getInspectStyle(src: string): CSSProperties {
 			</ClientOnly>
 
 			<NuxtImg v-else class="round-cobblestone" :src="avatar" :alt="author" loading="lazy" />
-			<Icon v-if="clarity.link.remindNoFeed && !feed" class="no-feed" name="tabler:bell-off" />
+			<Icon v-if="appConfig.link.remindNoFeed && !feed" class="no-feed" name="tabler:bell-off" />
 		</div>
 
 		<span class="author">{{ author }}</span>

package/src/components/content/Mermaid.vue

@@ -126,8 +126,8 @@ const diagram = computedAsync<{ svg?: string, width?: number, error?: string }>(
 	}
 
 	pre {
-		overflow-wrap: anywhere;
 		white-space: pre-wrap;
+		overflow-wrap: anywhere;
 	}
 }
 </style>

package/src/components/content/ProseCode.vue

@@ -1,37 +1,11 @@
 <script setup lang="ts">
-import type { VNode } from 'vue'
-
 const props = defineProps<{
 	language?: string
-	/**
-	 * 代码原文。
-	 * MDC 原生行为中 inline code 通过默认插槽（text VNode）传递，
-	 * 上游 @nuxtjs/mdc patch（inline code props.code 传入原文）存在时走此 prop，
-	 * fenced code（ProsePre 内部）也始终通过此 prop 传递。
-	 */
-	code?: string
+	code: string
 	copy?: boolean
 }>()
 
-const slots = useSlots()
-
-/** 从插槽 VNode 中递归提取纯文本 */
-function extractText(vnode: VNode): string {
-	if (typeof vnode.children === 'string')
-		return vnode.children
-	if (Array.isArray(vnode.children))
-		return (vnode.children as VNode[]).map(extractText).join('')
-	return ''
-}
-
-/** 无 patch 时以插槽文本作为原文，有 patch 时优先使用 code prop */
-const rawCode = computed(() => {
-	if (props.code !== undefined)
-		return props.code
-	return (slots.default?.() ?? []).map(extractText).join('')
-})
-
-const { copy: copyCode, copied } = useCopy(rawCode.value)
+const { copy: copyCode, copied } = useCopy(props.code)
 const shiki = useShiki()
 const codeElement = useTemplateRef('code')
 const highlighted = ref(false)
@@ -39,7 +13,7 @@ const highlighted = ref(false)
 onMounted(async () => {
 	if (!props.language)
 		return
-	await shiki.mountInline(codeElement.value!, rawCode.value, {
+	await shiki.mountInline(codeElement.value!, props.code, {
 		language: props.language,
 		transformerOptions: ['ignoreColorizedBrackets'],
 	})
@@ -49,9 +23,7 @@ onMounted(async () => {
 
 <template>
 <code ref="code" :class="{ copyable: copy }">
-	<template v-if="!language || !highlighted">
-		<slot>{{ rawCode }}</slot>
-	</template>
+	<template v-if="!language || !highlighted">{{ code }}</template>
 	<Icon v-if="copy" v-show="false" name="tabler:check" />
 	<button v-if="copy" type="button" class="copy-button" aria-label="复制" @click="copyCode()">
 		<Icon :name="copied ? 'tabler:check' : 'tabler:copy'" />

package/src/components/content/ProsePre.vue

@@ -27,8 +27,8 @@ const meta = computed(() => props.meta.split(' ').reduce((acc: CodeblockMeta, it
 	return acc
 }, {}))
 
-const clarity = useClarityConfig()
-const compConf = computed(() => clarity.component.codeblock)
+const appConfig = useAppConfig()
+const compConf = computed(() => appConfig.component.codeblock)
 
 const rows = computed(() => props.code.split('\n').length - 1)
 const collapsible = computed(() => !meta.value.expand && rows.value > compConf.value.triggerRows)

package/src/components/content/ProseTable.vue

@@ -44,8 +44,8 @@ const [scroll, toggleScroll] = useToggle(true)
 
 	> thead {
 		position: sticky;
-		top: 0;
 		z-index: 1; // ProseA 图标会透到表头上方
+		top: 0;
 	}
 
 	th {

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;