clarity-theme 0.1.0 → 0.1.2

package/{app → src}/components/util/HydrateSafe.vue

@@ -1,10 +1,10 @@
-<!-- SSG 下让客户端抛弃预渲染结果重新 CSR -->
-<template>
-<ClientOnly>
-	<slot />
-
-	<template #fallback>
-		<slot />
-	</template>
-</ClientOnly>
-</template>
+<!-- SSG 下让客户端抛弃预渲染结果重新 CSR -->
+<template>
+<ClientOnly>
+	<slot />
+
+	<template #fallback>
+		<slot />
+	</template>
+</ClientOnly>
+</template>

package/{app → src}/components/util/Img.vue

@@ -1,38 +1,38 @@
-<script setup lang="ts">
-import { joinURL, withLeadingSlash, withTrailingSlash } from 'ufo'
-import ImageComponent from '#build/mdc-image-component.mjs'
-
-export interface UtilImgProps {
-	src: string
-	width?: string | number
-	height?: string | number
-	alt?: string
-	densities?: string
-	mirror?: ImgService
-	filter?: string
-}
-
-const props = withDefaults(defineProps<UtilImgProps>(), {
-	alt: '',
-})
-
-const src = computed(() => {
-	if (props.src.startsWith('/') && !props.src.startsWith('//')) {
-		const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
-		if (_base !== '/' && !props.src.startsWith(_base))
-			return joinURL(_base, props.src)
-	}
-	if (props.mirror)
-		return getImgUrl(props.src, props.mirror)
-	return props.src
-})
-</script>
-
-<template>
-<component
-	:is="ImageComponent"
-	:src :alt :width :height :densities
-	:style="{ filter }"
-	:referrerpolicy="mirror ? 'no-referrer' : undefined"
-/>
-</template>
+<script setup lang="ts">
+import { joinURL, withLeadingSlash, withTrailingSlash } from 'ufo'
+import ImageComponent from '#build/mdc-image-component.mjs'
+
+export interface UtilImgProps {
+	src: string
+	width?: string | number
+	height?: string | number
+	alt?: string
+	densities?: string
+	mirror?: ImgService
+	filter?: string
+}
+
+const props = withDefaults(defineProps<UtilImgProps>(), {
+	alt: '',
+})
+
+const src = computed(() => {
+	if (props.src.startsWith('/') && !props.src.startsWith('//')) {
+		const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+		if (_base !== '/' && !props.src.startsWith(_base))
+			return joinURL(_base, props.src)
+	}
+	if (props.mirror)
+		return getImgUrl(props.src, props.mirror)
+	return props.src
+})
+</script>
+
+<template>
+<component
+	:is="ImageComponent"
+	:src :alt :width :height :densities
+	:style="{ filter }"
+	:referrerpolicy="mirror ? 'no-referrer' : undefined"
+/>
+</template>

package/{app → src}/components/util/Link.vue

@@ -1,11 +1,11 @@
-<script setup lang="ts">
-defineProps<{ to?: string }>()
-</script>
-
-<template>
-<a v-if="to?.startsWith('#')" :href="to"><slot /></a>
-<span v-else-if="typeof to === 'undefined'"><slot /></span>
-<NuxtLink v-else :to :target="isExtLink(to) ? '_blank' : undefined">
-	<slot />
-</NuxtLink>
-</template>
+<script setup lang="ts">
+defineProps<{ to?: string }>()
+</script>
+
+<template>
+<a v-if="to?.startsWith('#')" :href="to"><slot /></a>
+<span v-else-if="typeof to === 'undefined'"><slot /></span>
+<NuxtLink v-else :to :target="isExtLink(to) ? '_blank' : undefined">
+	<slot />
+</NuxtLink>
+</template>

package/{app → src}/components/widget/BlogLog.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-const clarity = useClarityConfig()
-
-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
-})
-</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>
-</BlogWidget>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const clarity = useClarityConfig()
+
+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
+})
+</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>
+</BlogWidget>
+</template>
+
+<style lang="scss" scoped>
 .no-log {
 	padding: 1em;
 	color: var(--c-text-3);
 }
-</style>
+</style>

package/{app → src}/components/widget/BlogStats.vue

@@ -1,39 +1,39 @@
-<script setup lang="ts">
-import { UtilDate } from '#components'
-
-const clarity = useClarityConfig()
-const runtimeConfig = useRuntimeConfig()
-
-// 响应头不正确时，stats.value 可能会是字符串，首次属性访问可能为 undefined
-const { data: stats } = useFetch('/api/stats')
-
-const yearlyTip = computed(() => Object
-	.entries(stats.value?.annual || {})
-	.reverse()
-	.map(([year, item]) => `${year}年：${item.posts}篇，${formatNumber(item.words)}字`)
-	.join('\n') || '数据获取失败',
-)
-
-const blogStats = [{
-	label: '运营时长',
-	value: clarity.site.established ? timeElapse(clarity.site.established) : '--',
-	tip: clarity.site.established ? `博客于${clarity.site.established}上线` : '未配置建站日期',
-}, {
-	label: '上次更新',
-	value: () => h(UtilDate, {
-		date: runtimeConfig.public.buildTime,
-		relative: true,
-		tipPrefix: '构建于',
-	}),
-}, {
+<script setup lang="ts">
+import { UtilDate } from '#components'
+
+const clarity = useClarityConfig()
+const runtimeConfig = useRuntimeConfig()
+
+// 响应头不正确时，stats.value 可能会是字符串，首次属性访问可能为 undefined
+const { data: stats } = useFetch('/api/stats')
+
+const yearlyTip = computed(() => Object
+	.entries(stats.value?.annual || {})
+	.reverse()
+	.map(([year, item]) => `${year}年：${item.posts}篇，${formatNumber(item.words)}字`)
+	.join('\n') || '数据获取失败',
+)
+
+const blogStats = [{
+	label: '运营时长',
+	value: clarity.site.established ? timeElapse(clarity.site.established) : '--',
+	tip: clarity.site.established ? `博客于${clarity.site.established}上线` : '未配置建站日期',
+}, {
+	label: '上次更新',
+	value: () => h(UtilDate, {
+		date: runtimeConfig.public.buildTime,
+		relative: true,
+		tipPrefix: '构建于',
+	}),
+}, {
 	label: clarity.stats.postsOnly ? '文章字数' : '总字数',
-	value: computed(() => formatNumber(stats.value?.total?.words) || '--'),
-	tip: yearlyTip,
-}]
-</script>
-
-<template>
-<BlogWidget card title="博客统计">
-	<ZDlGroup :items="blogStats" size="small" />
-</BlogWidget>
-</template>
+	value: computed(() => formatNumber(stats.value?.total?.words) || '--'),
+	tip: yearlyTip,
+}]
+</script>
+
+<template>
+<BlogWidget card title="博客统计">
+	<ZDlGroup :items="blogStats" size="small" />
+</BlogWidget>
+</template>

package/{app → src}/components/widget/BlogTech.vue

@@ -1,59 +1,59 @@
-<script setup lang="ts">
-import { Icon } from '#components'
-
-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 ciPlatform = computed(() => {
-	const iconName = ciIcons[ci]
-	if (!iconName)
-		return ''
-
-	const iconNode = iconName.startsWith('http')
-		? h('img', { src: iconName, alt: '' })
-		: h(Icon, { name: iconName })
-
-	return h('span', {}, [iconNode, ` ${ci.split(' ')[0]}`])
-})
-
-const service = computed(() => ([
-	...ci ? [{ label: '构建平台', value: ciPlatform }] : [],
-	{ label: '文章许可', value: clarity.site.copyright?.abbr || '未配置' },
-	{ label: '规范域名', value: getDomain(clarity.site.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: 'Node', value: nodeVersion },
-	{ label: 'OS', value: platform },
-	{ label: 'Arch', value: arch },
-]))
-
-const expand = ref(false)
-</script>
-
-<template>
-<BlogWidget card grayscale title="技术信息">
-	<ZDlGroup :items="service" />
-	<ZExpand v-model="expand" in-place name="构建信息">
-		<ZDlGroup size="small" :items="techstack" />
-	</ZExpand>
-</BlogWidget>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import { Icon } from '#components'
+
+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 ciPlatform = computed(() => {
+	const iconName = ciIcons[ci]
+	if (!iconName)
+		return ''
+
+	const iconNode = iconName.startsWith('http')
+		? h('img', { src: iconName, alt: '' })
+		: h(Icon, { name: iconName })
+
+	return h('span', {}, [iconNode, ` ${ci.split(' ')[0]}`])
+})
+
+const service = computed(() => ([
+	...ci ? [{ label: '构建平台', value: ciPlatform }] : [],
+	{ label: '文章许可', value: clarity.site.copyright?.abbr || '未配置' },
+	{ label: '规范域名', value: getDomain(clarity.site.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: 'Node', value: nodeVersion },
+	{ label: 'OS', value: platform },
+	{ label: 'Arch', value: arch },
+]))
+
+const expand = ref(false)
+</script>
+
+<template>
+<BlogWidget card grayscale title="技术信息">
+	<ZDlGroup :items="service" />
+	<ZExpand v-model="expand" in-place name="构建信息">
+		<ZDlGroup size="small" :items="techstack" />
+	</ZExpand>
+</BlogWidget>
+</template>
+
+<style lang="scss" scoped>
 .z-expand {
 	margin-top: 0.2em;
 }
@@ -62,4 +62,4 @@ const expand = ref(false)
 	height: 1.2em;
 	vertical-align: sub;
 }
-</style>
+</style>

package/{app → src}/components/widget/Empty.vue

@@ -1,3 +1,3 @@
-<template>
-<div />
-</template>
+<template>
+<div />
+</template>

package/{app → src}/components/widget/Toc.vue

@@ -1,69 +1,69 @@
-<script setup lang="ts">
-import type { TocLink } from '@nuxt/content'
-
-const [DefineTemplate, ReuseTemplate] = createReusableTemplate({
-	props: {
-		tocTree: { type: Array as PropType<TocLink[]> },
-	},
-})
-
-const { toc } = useArticle()
-const scrollableEl = useTemplateRef('toc')
-const { tocOffsets, activeHeadingId } = useToc(toc, computed(() => scrollableEl.value?.body))
-
-function hasHeading(tocTree: TocLink, heading?: string): boolean {
-	return tocTree.id === heading || !!tocTree.children?.some(child => hasHeading(child, heading))
-}
-</script>
-
-<template>
-<BlogWidget
-	ref="toc"
-	title="文章目录"
-	shrink
-	:style="{ minHeight: `clamp(4rem, ${tocOffsets.length}rem, 20rem)` }"
->
-	<template #action>
-		<!-- use <a> for anchor -->
-		<a href="#main-content" aria-label="返回开头">
-			<Icon name="tabler:arrow-bar-to-up" />
-		</a>
-
-		<a href="#twikoo" aria-label="评论区">
-			<Icon name="tabler:message-dots" />
-		</a>
-	</template>
-
-	<!-- 放在顶层会导致 Transition 失效 -->
-	<DefineTemplate v-slot="{ tocTree }">
-		<ol>
-			<li
-				v-for="(entry, index) in tocTree"
-				:key="index"
-				:class="{
-					'has-active': hasHeading(entry, activeHeadingId),
-					'active': entry.id === activeHeadingId,
-				}"
-			>
-				<!-- 使用 <a> 确保键盘焦点切换 -->
-				<a :href="`#${entry?.id}`" :title="entry.text">{{ entry.text }}</a>
-				<ReuseTemplate v-if="entry.children" :toc-tree="entry.children" />
-			</li>
-		</ol>
-	</DefineTemplate>
-
-	<ReuseTemplate
-		v-if="toc?.links.length"
-		class="toc"
-		:toc-tree="toc.links"
-	/>
-	<p v-else class="no-toc">
-		暂无目录信息
-	</p>
-</BlogWidget>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { TocLink } from '@nuxt/content'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate({
+	props: {
+		tocTree: { type: Array as PropType<TocLink[]> },
+	},
+})
+
+const { toc } = useArticle()
+const scrollableEl = useTemplateRef('toc')
+const { tocOffsets, activeHeadingId } = useToc(toc, computed(() => scrollableEl.value?.body))
+
+function hasHeading(tocTree: TocLink, heading?: string): boolean {
+	return tocTree.id === heading || !!tocTree.children?.some(child => hasHeading(child, heading))
+}
+</script>
+
+<template>
+<BlogWidget
+	ref="toc"
+	title="文章目录"
+	shrink
+	:style="{ minHeight: `clamp(4rem, ${tocOffsets.length}rem, 20rem)` }"
+>
+	<template #action>
+		<!-- use <a> for anchor -->
+		<a href="#main-content" aria-label="返回开头">
+			<Icon name="tabler:arrow-bar-to-up" />
+		</a>
+
+		<a href="#twikoo" aria-label="评论区">
+			<Icon name="tabler:message-dots" />
+		</a>
+	</template>
+
+	<!-- 放在顶层会导致 Transition 失效 -->
+	<DefineTemplate v-slot="{ tocTree }">
+		<ol>
+			<li
+				v-for="(entry, index) in tocTree"
+				:key="index"
+				:class="{
+					'has-active': hasHeading(entry, activeHeadingId),
+					'active': entry.id === activeHeadingId,
+				}"
+			>
+				<!-- 使用 <a> 确保键盘焦点切换 -->
+				<a :href="`#${entry?.id}`" :title="entry.text">{{ entry.text }}</a>
+				<ReuseTemplate v-if="entry.children" :toc-tree="entry.children" />
+			</li>
+		</ol>
+	</DefineTemplate>
+
+	<ReuseTemplate
+		v-if="toc?.links.length"
+		class="toc"
+		:toc-tree="toc.links"
+	/>
+	<p v-else class="no-toc">
+		暂无目录信息
+	</p>
+</BlogWidget>
+</template>
+
+<style lang="scss" scoped>
 .toc {
 	position: relative;
 
@@ -126,4 +126,4 @@ li {
 	text-align: center;
 	color: var(--c-text-3);
 }
-</style>
+</style>