clarity-theme 0.1.0 → 0.1.2

package/{app → src}/app.config.ts

@@ -1,110 +1,110 @@
-/**
- * Clarity Theme UI 默认配置。
- *
- * 站点数据（标题、作者、文章分类等）来自根目录 clarity.config.ts，
- * 由 modules/clarity-config 注入到 appConfig.clarity 中。
- *
- * 消费项目可在自己的 app/app.config.ts 中按需覆盖任意键。
- */
-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: '深色模式',
-			},
-		},
-	},
-})
+/**
+ * Clarity Theme UI 默认配置。
+ *
+ * 站点数据（标题、作者、文章分类等）来自根目录 clarity.config.ts，
+ * 由 src/modules/clarity-config 注入到 appConfig.clarity 中。
+ *
+ * 消费项目可在自己的 app/app.config.ts 中按需覆盖任意键。
+ */
+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: '深色模式',
+			},
+		},
+	},
+})

package/{app → src}/app.vue

@@ -1,5 +1,5 @@
-<template>
-<NuxtLayout>
-	<NuxtPage />
-</NuxtLayout>
-</template>
+<template>
+<NuxtLayout>
+	<NuxtPage />
+</NuxtLayout>
+</template>

package/{app → src}/components/blog/BlogAside.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-const layoutStore = useLayoutStore()
-
-// 页面完成异步 setup 后才注册具名插槽；水合前等待，避免重复插入 SSR 侧栏。
-const layoutSlots = inject<{ ready: Promise<void> }>(Symbol.for('dxup:layout-slots'))
-if (layoutSlots)
-	await layoutSlots.ready
-</script>
-
-<template>
-<BlogMask
-	:show="layoutStore.state === 'aside'"
-	class="widescreen-only"
-	@click="layoutStore.close()"
-/>
-
-<!-- 不能用 Transition 实现弹出收起动画，因为宽屏状态始终显示 -->
-<!-- 如果为空数组则隐藏 -->
-<aside id="blog-aside" :class="{ show: layoutStore.state === 'aside' }">
-	<slot />
-</aside>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const layoutStore = useLayoutStore()
+
+// 页面完成异步 setup 后才注册具名插槽；水合前等待，避免重复插入 SSR 侧栏。
+const layoutSlots = inject<{ ready: Promise<void> }>(Symbol.for('dxup:layout-slots'))
+if (layoutSlots)
+	await layoutSlots.ready
+</script>
+
+<template>
+<BlogMask
+	:show="layoutStore.state === 'aside'"
+	class="widescreen-only"
+	@click="layoutStore.close()"
+/>
+
+<!-- 不能用 Transition 实现弹出收起动画，因为宽屏状态始终显示 -->
+<!-- 如果为空数组则隐藏 -->
+<aside id="blog-aside" :class="{ show: layoutStore.state === 'aside' }">
+	<slot />
+</aside>
+</template>
+
+<style lang="scss" scoped>
 #blog-aside {
 	display: flex;
 	flex-direction: column;
@@ -60,4 +60,4 @@ if (layoutSlots)
 		display: none;
 	}
 }
-</style>
+</style>

package/{app → src}/components/blog/BlogFooter.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-const clarity = useClarityConfig()
-</script>
-
-<template>
-<footer class="blog-footer">
-	<nav class="footer-nav">
-		<div v-for="(group, groupIndex) in clarity.footer.nav" :key="groupIndex">
-			<hgroup class="text-creative" v-text="group.title" />
-			<menu>
-				<li v-for="(item, itemIndex) in group.items" :key="itemIndex">
-					<UtilLink :to="item.url">
-						<Icon :name="item.icon" />
-						<span class="nav-text">{{ item.text }}</span>
-					</UtilLink>
-				</li>
-			</menu>
-		</div>
-	</nav>
-	<p v-html="clarity.footer.copyright" />
-</footer>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const clarity = useClarityConfig()
+</script>
+
+<template>
+<footer class="blog-footer">
+	<nav class="footer-nav">
+		<div v-for="(group, groupIndex) in clarity.footer.nav" :key="groupIndex">
+			<hgroup class="text-creative" v-text="group.title" />
+			<menu>
+				<li v-for="(item, itemIndex) in group.items" :key="itemIndex">
+					<UtilLink :to="item.url">
+						<Icon :name="item.icon" />
+						<span class="nav-text">{{ item.text }}</span>
+					</UtilLink>
+				</li>
+			</menu>
+		</div>
+	</nav>
+	<p v-html="clarity.footer.copyright" />
+</footer>
+</template>
+
+<style lang="scss" scoped>
 .blog-footer {
 	margin: 3rem 1rem;
 	font-size: 0.9em;
@@ -58,4 +58,4 @@ const clarity = useClarityConfig()
 		margin: 0.5em;
 	}
 }
-</style>
+</style>

package/{app → src}/components/blog/BlogHeader.global.vue

@@ -1,50 +1,50 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-	tag?: string
-}>(), {
-	tag: 'div',
-})
-const clarity = useClarityConfig()
-</script>
-
-<template>
-<UtilLink class="blog-header">
-	<div v-if="clarity.header.emojiTail" class="emoji-tail">
-		<span
-			v-for="(emoji, emojiIndex) in clarity.header.emojiTail"
-			:key="emojiIndex"
-			class="split-char"
-			:style="getFixedDelay(emojiIndex * .6 - 3)"
-			v-text="emoji"
-		/>
-	</div>
-
-	<NuxtImg
-		:src="clarity.header.logo"
-		class="blog-logo round-cobblestone"
-		:class="{ circle: clarity.header.showTitle }"
-		:alt="clarity.site.title"
-	/>
-
-	<div v-if="clarity.header.showTitle" class="blog-text">
-		<component :is="tag" class="header-title">
-			<span
-				v-for="(char, charIndex) in clarity.site.title"
-				:key="charIndex"
-				class="split-char"
-				:style="getFixedDelay((charIndex + 1) * .1)"
-				v-text="char"
-			/>
-		</component>
-
-		<div class="header-subtitle">
-			{{ clarity.header.subtitle }}
-		</div>
-	</div>
-</UtilLink>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+withDefaults(defineProps<{
+	tag?: string
+}>(), {
+	tag: 'div',
+})
+const clarity = useClarityConfig()
+</script>
+
+<template>
+<UtilLink class="blog-header">
+	<div v-if="clarity.header.emojiTail" class="emoji-tail">
+		<span
+			v-for="(emoji, emojiIndex) in clarity.header.emojiTail"
+			:key="emojiIndex"
+			class="split-char"
+			:style="getFixedDelay(emojiIndex * .6 - 3)"
+			v-text="emoji"
+		/>
+	</div>
+
+	<NuxtImg
+		:src="clarity.header.logo"
+		class="blog-logo round-cobblestone"
+		:class="{ circle: clarity.header.showTitle }"
+		:alt="clarity.site.title"
+	/>
+
+	<div v-if="clarity.header.showTitle" class="blog-text">
+		<component :is="tag" class="header-title">
+			<span
+				v-for="(char, charIndex) in clarity.site.title"
+				:key="charIndex"
+				class="split-char"
+				:style="getFixedDelay((charIndex + 1) * .1)"
+				v-text="char"
+			/>
+		</component>
+
+		<div class="header-subtitle">
+			{{ clarity.header.subtitle }}
+		</div>
+	</div>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
 .blog-header {
 	contain: layout;
 	display: flex;
@@ -143,4 +143,4 @@ const clarity = useClarityConfig()
 		filter: blur(1px);
 	}
 }
-</style>
+</style>

package/{app → src}/components/blog/BlogPanel.vue

@@ -1,45 +1,45 @@
-<script setup lang="ts">
-defineProps<{
-	hasAside?: boolean
-}>()
-
-const layoutStore = useLayoutStore()
-const { avoidTargets } = storeToRefs(layoutStore)
-
-const panelRef = useTemplateRef('blog-panel')
-const { transform } = useAvoidTransform(panelRef, avoidTargets)
-</script>
-
-<template>
-<div
-	id="blog-panel"
-	ref="blog-panel"
-	:class="{ 'has-active': layoutStore.state !== 'none' }"
-	:style="{ transform }"
->
-	<button
-		v-if="hasAside"
-		class="toggle-aside widescreen-only"
-		:class="{ active: layoutStore.state === 'aside' }"
-		aria-label="切换侧边栏"
-		@click="layoutStore.toggle('aside')"
-	>
-		<Icon class="rtl-flip" name="tabler:align-right" />
-	</button>
-
-	<Icon v-show="false" name="tabler:layout-sidebar-filled" />
-	<button
-		class="toggle-sidebar mobile-only"
-		:class="{ active: layoutStore.state === 'sidebar' }"
-		aria-label="切换菜单"
-		@click="layoutStore.toggle('sidebar')"
-	>
-		<Icon class="rtl-flip" :name="layoutStore.state === 'sidebar' ? 'tabler:layout-sidebar-filled' : 'tabler:layout-sidebar'" />
-	</button>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	hasAside?: boolean
+}>()
+
+const layoutStore = useLayoutStore()
+const { avoidTargets } = storeToRefs(layoutStore)
+
+const panelRef = useTemplateRef('blog-panel')
+const { transform } = useAvoidTransform(panelRef, avoidTargets)
+</script>
+
+<template>
+<div
+	id="blog-panel"
+	ref="blog-panel"
+	:class="{ 'has-active': layoutStore.state !== 'none' }"
+	:style="{ transform }"
+>
+	<button
+		v-if="hasAside"
+		class="toggle-aside widescreen-only"
+		:class="{ active: layoutStore.state === 'aside' }"
+		aria-label="切换侧边栏"
+		@click="layoutStore.toggle('aside')"
+	>
+		<Icon class="rtl-flip" name="tabler:align-right" />
+	</button>
+
+	<Icon v-show="false" name="tabler:layout-sidebar-filled" />
+	<button
+		class="toggle-sidebar mobile-only"
+		:class="{ active: layoutStore.state === 'sidebar' }"
+		aria-label="切换菜单"
+		@click="layoutStore.toggle('sidebar')"
+	>
+		<Icon class="rtl-flip" :name="layoutStore.state === 'sidebar' ? 'tabler:layout-sidebar-filled' : 'tabler:layout-sidebar'" />
+	</button>
+</div>
+</template>
+
+<style lang="scss" scoped>
 #blog-panel {
 	contain: paint;
 	position: fixed;
@@ -76,4 +76,4 @@ button {
 		color: var(--c-primary);
 	}
 }
-</style>
+</style>

package/{app → src}/components/blog/BlogSidebar.vue

@@ -1,55 +1,55 @@
-<script setup lang="ts">
-const clarity = useClarityConfig()
-const layoutStore = useLayoutStore()
-const searchStore = useSearchStore()
-
-const { text } = useTextSelection()
-const debouncedSelection = refDebounced(text)
-</script>
-
-<template>
-<BlogMask
-	:show="layoutStore.state === 'sidebar'"
-	class="mobile-only"
-	@click="layoutStore.close()"
-/>
-
-<!-- 不能用 Transition 实现弹出收起动画，因为半宽屏状态始终显示 -->
-<aside id="blog-sidebar" :class="{ show: layoutStore.state === 'sidebar' }">
-	<BlogHeader class="sidebar-header" to="/" />
-
-	<nav class="sidebar-nav scrollcheck-y">
-		<div class="search-btn sidebar-nav-item gradient-card" @click="layoutStore.toggle('search')">
-			<Icon name="tabler:search" />
-			<span class="nav-text">{{ debouncedSelection || searchStore.word || '搜索' }}</span>
-			<Key class="keycut" code="K" cmd prevent @press="layoutStore.toggle('search')" />
-		</div>
-
-		<template v-for="(group, groupIndex) in clarity.nav" :key="groupIndex">
-			<h3 v-if="group.title">
-				{{ group.title }}
-			</h3>
-
-			<menu>
-				<li v-for="(item, itemIndex) in group.items" :key="itemIndex">
-					<UtilLink :to="item.url" class="sidebar-nav-item">
-						<Icon :name="item.icon" />
-						<span class="nav-text">{{ item.text }}</span>
-						<Icon v-if="isExtLink(item.url)" class="external-tip" name="tabler:arrow-up-right" />
-					</UtilLink>
-				</li>
-			</menu>
-		</template>
-	</nav>
-
-	<footer class="sidebar-footer">
-		<BlogThemeToggle />
-		<ZIconNavList :list="clarity.footer.iconNav" />
-	</footer>
-</aside>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const clarity = useClarityConfig()
+const layoutStore = useLayoutStore()
+const searchStore = useSearchStore()
+
+const { text } = useTextSelection()
+const debouncedSelection = refDebounced(text)
+</script>
+
+<template>
+<BlogMask
+	:show="layoutStore.state === 'sidebar'"
+	class="mobile-only"
+	@click="layoutStore.close()"
+/>
+
+<!-- 不能用 Transition 实现弹出收起动画，因为半宽屏状态始终显示 -->
+<aside id="blog-sidebar" :class="{ show: layoutStore.state === 'sidebar' }">
+	<BlogHeader class="sidebar-header" to="/" />
+
+	<nav class="sidebar-nav scrollcheck-y">
+		<div class="search-btn sidebar-nav-item gradient-card" @click="layoutStore.toggle('search')">
+			<Icon name="tabler:search" />
+			<span class="nav-text">{{ debouncedSelection || searchStore.word || '搜索' }}</span>
+			<Key class="keycut" code="K" cmd prevent @press="layoutStore.toggle('search')" />
+		</div>
+
+		<template v-for="(group, groupIndex) in clarity.nav" :key="groupIndex">
+			<h3 v-if="group.title">
+				{{ group.title }}
+			</h3>
+
+			<menu>
+				<li v-for="(item, itemIndex) in group.items" :key="itemIndex">
+					<UtilLink :to="item.url" class="sidebar-nav-item">
+						<Icon :name="item.icon" />
+						<span class="nav-text">{{ item.text }}</span>
+						<Icon v-if="isExtLink(item.url)" class="external-tip" name="tabler:arrow-up-right" />
+					</UtilLink>
+				</li>
+			</menu>
+		</template>
+	</nav>
+
+	<footer class="sidebar-footer">
+		<BlogThemeToggle />
+		<ZIconNavList :list="clarity.footer.iconNav" />
+	</footer>
+</aside>
+</template>
+
+<style lang="scss" scoped>
 #blog-sidebar {
 	display: flex;
 	flex-direction: column;
@@ -157,4 +157,4 @@ const debouncedSelection = refDebounced(text)
 	text-align: center;
 	color: var(--c-text-2);
 }
-</style>
+</style>