clarity-theme 0.1.0 → 0.1.2

package/{app → src}/components/post/PostFooter.vue

@@ -1,54 +1,54 @@
-<script setup lang="ts">
-import type { ArticleProps } from '../../types/article'
-
-defineOptions({ inheritAttrs: false })
-defineProps<ArticleProps>()
-
-const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
-	title: string
-}>({ inheritAttrs: false })
-
-const clarity = useClarityConfig()
-</script>
-
-<template>
-<div class="post-footer">
-	<DefineTemplate v-slot="{ $slots, title }">
-		<section>
-			<div class="title text-creative">
-				{{ title }}
-			</div>
-
-			<div class="content">
-				<component :is="$slots.default" />
-			</div>
-		</section>
-	</DefineTemplate>
-
-	<ReuseTemplate v-if="references" title="参考链接">
-		<ul>
-			<li v-for="{ title, link }, i in references" :key="i">
-				<ProseA :href="link || ''">
-					{{ title ?? link }}
-				</ProseA>
-			</li>
-		</ul>
-	</ReuseTemplate>
-
-	<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>
-			<span v-else-if="clarity.site.copyright?.name">{{ clarity.site.copyright.name }}</span>
-			许可协议，转载请注明出处。
-		</p>
-	</ReuseTemplate>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { ArticleProps } from '../../types/article'
+
+defineOptions({ inheritAttrs: false })
+defineProps<ArticleProps>()
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
+	title: string
+}>({ inheritAttrs: false })
+
+const clarity = useClarityConfig()
+</script>
+
+<template>
+<div class="post-footer">
+	<DefineTemplate v-slot="{ $slots, title }">
+		<section>
+			<div class="title text-creative">
+				{{ title }}
+			</div>
+
+			<div class="content">
+				<component :is="$slots.default" />
+			</div>
+		</section>
+	</DefineTemplate>
+
+	<ReuseTemplate v-if="references" title="参考链接">
+		<ul>
+			<li v-for="{ title, link }, i in references" :key="i">
+				<ProseA :href="link || ''">
+					{{ title ?? link }}
+				</ProseA>
+			</li>
+		</ul>
+	</ReuseTemplate>
+
+	<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>
+			<span v-else-if="clarity.site.copyright?.name">{{ clarity.site.copyright.name }}</span>
+			许可协议，转载请注明出处。
+		</p>
+	</ReuseTemplate>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .post-footer {
 	margin: 2rem 0.5rem;
 	border: 1px solid var(--c-border);
@@ -77,4 +77,4 @@ section {
 		margin: 0.5em 0;
 	}
 }
-</style>
+</style>

package/{app → src}/components/post/PostHeader.vue

@@ -1,69 +1,69 @@
-<script setup lang="ts">
-import type { ArticleProps } from '../../types/article'
-
-defineOptions({ inheritAttrs: false })
-const props = defineProps<ArticleProps>()
-
-const clarity = useClarityConfig()
-
-const coverFilter = computed(() => props.meta?.coverFilter || (props.meta?.coverDim && 'brightness(0.75)') || undefined)
-
-const shareText = `【${clarity.site.title}】${props.title}\n\n${
-	props.description ? `${props.description}\n\n` : ''}${
-	new URL(props.path!, clarity.site.url).href}`
-
-const { copy, copied } = useCopy(shareText)
-</script>
-
-<template>
-<div class="post-header" :class="{ 'has-cover': image }">
-	<Pic v-if="image" class="post-cover" :src="image" :alt="title" :filter="coverFilter" />
-	<div class="post-nav">
-		<div class="operations">
-			<Icon v-show="false" name="tabler:check" />
-			<ZButton
-				:icon="copied ? 'tabler:check' : 'tabler:share'"
-				text="文字分享"
-				@click="copy()"
-			/>
-		</div>
-
-		<div v-if="!meta?.hideInfo" class="post-info">
-			<UtilDate
-				v-if="date"
-				v-tip
-				:tip-transform="d => `创建于${d}`"
-				:date
-				icon="tabler:pencil-minus"
-			/>
-
-			<UtilDate
+<script setup lang="ts">
+import type { ArticleProps } from '../../types/article'
+
+defineOptions({ inheritAttrs: false })
+const props = defineProps<ArticleProps>()
+
+const clarity = useClarityConfig()
+
+const coverFilter = computed(() => props.meta?.coverFilter || (props.meta?.coverDim && 'brightness(0.75)') || undefined)
+
+const shareText = `【${clarity.site.title}】${props.title}\n\n${
+	props.description ? `${props.description}\n\n` : ''}${
+	new URL(props.path!, clarity.site.url).href}`
+
+const { copy, copied } = useCopy(shareText)
+</script>
+
+<template>
+<div class="post-header" :class="{ 'has-cover': image }">
+	<Pic v-if="image" class="post-cover" :src="image" :alt="title" :filter="coverFilter" />
+	<div class="post-nav">
+		<div class="operations">
+			<Icon v-show="false" name="tabler:check" />
+			<ZButton
+				:icon="copied ? 'tabler:check' : 'tabler:share'"
+				text="文字分享"
+				@click="copy()"
+			/>
+		</div>
+
+		<div v-if="!meta?.hideInfo" class="post-info">
+			<UtilDate
+				v-if="date"
+				v-tip
+				:tip-transform="d => `创建于${d}`"
+				:date
+				icon="tabler:pencil-minus"
+			/>
+
+			<UtilDate
 				v-if="updated && isTimeDiffSignificant(date, updated, undefined, 1)"
-				v-tip
-				:tip-transform="d => `修改于${d}`"
-				:date="updated"
-				icon="tabler:clock-edit"
-			/>
-
-			<span v-if="categories">
-				<Icon :name="getCategoryIcon(categories[0])" />
-				{{ categories[0] }}
-			</span>
-
-			<span>
-				<Icon name="tabler:pilcrow" />
-				{{ formatNumber(readingTime?.words) }} 字
-			</span>
-		</div>
-	</div>
-
-	<h1 class="post-title" :class="getPostTypeClassName(type)">
-		{{ title }}
-	</h1>
-</div>
-</template>
-
-<style lang="scss" scoped>
+				v-tip
+				:tip-transform="d => `修改于${d}`"
+				:date="updated"
+				icon="tabler:clock-edit"
+			/>
+
+			<span v-if="categories">
+				<Icon :name="getCategoryIcon(categories[0])" />
+				{{ categories[0] }}
+			</span>
+
+			<span>
+				<Icon name="tabler:pilcrow" />
+				{{ formatNumber(readingTime?.words) }} 字
+			</span>
+		</div>
+	</div>
+
+	<h1 class="post-title" :class="getPostTypeClassName(type)">
+		{{ title }}
+	</h1>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .post-header {
 	contain: paint; // overflow hidden + position relative
 	display: flex;
@@ -144,4 +144,4 @@ const { copy, copied } = useCopy(shareText)
 		column-gap: clamp(1em, 3%, 1.5em);
 	}
 }
-</style>
+</style>

package/{app → src}/components/post/PostSurround.vue

@@ -1,53 +1,53 @@
-<script setup lang="ts">
-import type { ArticleProps } from '../../types/article'
-
-const route = useRoute()
-
-const { data: surrounds } = await useAsyncData(
-	`surround:${route.path}`,
-	() => queryCollectionItemSurroundings('content', route.path, { fields: ['date', 'title', 'type'] })
-		.order('date', 'ASC')
-		.where('stem', 'LIKE', `posts/%`),
-)
-
-const [prev = null, next = null] = surrounds.value ?? []
-
-const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
-	post: ArticleProps | null
-	icon: string
-	fallbackIcon: string
-	fallbackText: string
-	alignEnd?: boolean
-}>({ inheritAttrs: false })
-</script>
-
-<template>
-<DefineTemplate v-slot="{ post, icon, fallbackIcon, fallbackText, alignEnd }">
-	<UtilLink :to="post?.path" class="surround-link" :align-end>
-		<Icon :class="{ 'rtl-flip': post }" :name="post ? icon : fallbackIcon" />
-		<div class="surround-text">
-			<strong class="title" :class="getPostTypeClassName(post?.type)">
-				{{ post?.title || fallbackText }}
-			</strong>
-			<UtilDate v-if="post?.date" class="date" :date="post.date" />
-		</div>
-	</UtilLink>
-</DefineTemplate>
-
-<div v-if="prev || next" class="surround-post" dir="ltr">
-	<ReuseTemplate
-		:post="next" icon="clarity:solar-rewind-back-bold-duotone"
-		fallback-icon="line-md:coffee-twotone-loop" fallback-text="新故事即将发生"
-	/>
-	<ReuseTemplate
-		:post="prev" icon="clarity:solar-rewind-forward-bold-duotone"
-		fallback-icon="line-md:construction-twotone" fallback-text="已抵达博客尽头"
-		align-end
-	/>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { ArticleProps } from '../../types/article'
+
+const route = useRoute()
+
+const { data: surrounds } = await useAsyncData(
+	`surround:${route.path}`,
+	() => queryCollectionItemSurroundings('content', route.path, { fields: ['date', 'title', 'type'] })
+		.order('date', 'ASC')
+		.where('stem', 'LIKE', `posts/%`),
+)
+
+const [prev = null, next = null] = surrounds.value ?? []
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
+	post: ArticleProps | null
+	icon: string
+	fallbackIcon: string
+	fallbackText: string
+	alignEnd?: boolean
+}>({ inheritAttrs: false })
+</script>
+
+<template>
+<DefineTemplate v-slot="{ post, icon, fallbackIcon, fallbackText, alignEnd }">
+	<UtilLink :to="post?.path" class="surround-link" :align-end>
+		<Icon :class="{ 'rtl-flip': post }" :name="post ? icon : fallbackIcon" />
+		<div class="surround-text">
+			<strong class="title" :class="getPostTypeClassName(post?.type)">
+				{{ post?.title || fallbackText }}
+			</strong>
+			<UtilDate v-if="post?.date" class="date" :date="post.date" />
+		</div>
+	</UtilLink>
+</DefineTemplate>
+
+<div v-if="prev || next" class="surround-post" dir="ltr">
+	<ReuseTemplate
+		:post="next" icon="clarity:solar-rewind-back-bold-duotone"
+		fallback-icon="line-md:coffee-twotone-loop" fallback-text="新故事即将发生"
+	/>
+	<ReuseTemplate
+		:post="prev" icon="clarity:solar-rewind-forward-bold-duotone"
+		fallback-icon="line-md:construction-twotone" fallback-text="已抵达博客尽头"
+		align-end
+	/>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .surround-post {
 	contain: layout;
 	display: flex;
@@ -108,4 +108,4 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
 		}
 	}
 }
-</style>
+</style>

package/{app → src}/components/post/Slide.vue

@@ -1,87 +1,87 @@
-<script setup lang="ts">
-import type { ArticleProps } from '../../types/article'
-import Autoplay from 'embla-carousel-autoplay'
-import emblaCarouselVue from 'embla-carousel-vue'
-import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
-
-defineProps<{ list: ArticleProps[] }>()
-
-const clarity = useClarityConfig()
-const compConf = computed(() => clarity.component.slide)
-
-// @keep-sorted
-const [carouselEl, carouselApi] = emblaCarouselVue({
-	containScroll: false,
-	loop: true,
-	skipSnaps: true,
-}, [
-	Autoplay({ stopOnInteraction: false, stopOnMouseEnter: true }),
-	WheelGesturesPlugin(),
-])
-
-// 鼠标横向滚动 / Shift + 纵向滚轮事件
-useEventListener(carouselEl, 'wheel', (e) => {
-	const delta = e.deltaX + (e.shiftKey ? e.deltaY : 0)
-	if (Math.abs(delta) < 80)
-		return
-	delta > 0 ? carouselApi.value?.scrollNext() : carouselApi.value?.scrollPrev()
-}, { passive: true })
-</script>
-
-<template>
-<div class="z-slide">
-	<div class="z-slide-header">
-		<span class="title text-creative">精选文章</span>
-		<div class="at-slide-hover">
-			<Icon name="tabler:mouse" />
-			按住 Shift 横向滚动
-		</div>
-	</div>
-
-	<div ref="carouselEl" class="z-slide-body" dir="ltr">
-		<div class="slide-list">
-			<UtilLink
-				v-for="(article, index) in list"
-				:key="index"
-				class="slide-item"
-				:title="article.description"
-				:to="article.path"
-			>
-				<NuxtImg class="cover" :src="article.image" :alt="compConf.showTitle ? '' : article.title" />
-
-				<div v-if="compConf.showTitle" class="stable-info text-creative">
-					{{ article.title }}
-				</div>
-
-				<div class="hover-info">
-					<div class="title text-creative">
-						{{ article.title }}
-					</div>
-					<UtilDate v-if="article.date" class="desc" :date="article.date" />
-				</div>
-			</UtilLink>
-		</div>
-
-		<ZButton
-			class="carousel-action prev at-slide-hover"
-			aria-label="上一页"
-			icon="tabler:chevron-left"
-			tabindex="-1"
-			@click="carouselApi?.scrollPrev()"
-		/>
-
-		<ZButton
-			class="carousel-action next at-slide-hover"
-			aria-label="下一页"
-			icon="tabler:chevron-right"
-			tabindex="-1"
-			@click="carouselApi?.scrollNext()"
-		/>
-	</div>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { ArticleProps } from '../../types/article'
+import Autoplay from 'embla-carousel-autoplay'
+import emblaCarouselVue from 'embla-carousel-vue'
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
+
+defineProps<{ list: ArticleProps[] }>()
+
+const clarity = useClarityConfig()
+const compConf = computed(() => clarity.component.slide)
+
+// @keep-sorted
+const [carouselEl, carouselApi] = emblaCarouselVue({
+	containScroll: false,
+	loop: true,
+	skipSnaps: true,
+}, [
+	Autoplay({ stopOnInteraction: false, stopOnMouseEnter: true }),
+	WheelGesturesPlugin(),
+])
+
+// 鼠标横向滚动 / Shift + 纵向滚轮事件
+useEventListener(carouselEl, 'wheel', (e) => {
+	const delta = e.deltaX + (e.shiftKey ? e.deltaY : 0)
+	if (Math.abs(delta) < 80)
+		return
+	delta > 0 ? carouselApi.value?.scrollNext() : carouselApi.value?.scrollPrev()
+}, { passive: true })
+</script>
+
+<template>
+<div class="z-slide">
+	<div class="z-slide-header">
+		<span class="title text-creative">精选文章</span>
+		<div class="at-slide-hover">
+			<Icon name="tabler:mouse" />
+			按住 Shift 横向滚动
+		</div>
+	</div>
+
+	<div ref="carouselEl" class="z-slide-body" dir="ltr">
+		<div class="slide-list">
+			<UtilLink
+				v-for="(article, index) in list"
+				:key="index"
+				class="slide-item"
+				:title="article.description"
+				:to="article.path"
+			>
+				<NuxtImg class="cover" :src="article.image" :alt="compConf.showTitle ? '' : article.title" />
+
+				<div v-if="compConf.showTitle" class="stable-info text-creative">
+					{{ article.title }}
+				</div>
+
+				<div class="hover-info">
+					<div class="title text-creative">
+						{{ article.title }}
+					</div>
+					<UtilDate v-if="article.date" class="desc" :date="article.date" />
+				</div>
+			</UtilLink>
+		</div>
+
+		<ZButton
+			class="carousel-action prev at-slide-hover"
+			aria-label="上一页"
+			icon="tabler:chevron-left"
+			tabindex="-1"
+			@click="carouselApi?.scrollPrev()"
+		/>
+
+		<ZButton
+			class="carousel-action next at-slide-hover"
+			aria-label="下一页"
+			icon="tabler:chevron-right"
+			tabindex="-1"
+			@click="carouselApi?.scrollNext()"
+		/>
+	</div>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .z-slide {
 	margin: 1rem;
 
@@ -212,4 +212,4 @@ useEventListener(carouselEl, 'wheel', (e) => {
 		}
 	}
 }
-</style>
+</style>

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

@@ -1,62 +1,62 @@
-<script setup lang="ts">
-import { Temporal } from 'temporal-polyfill'
-
-const props = withDefaults(defineProps<{
-	icon?: string
-	date?: string | Temporal.ZonedDateTime
-	format?: dateTimeFormatOptions
-	absolute?: boolean
-	relative?: boolean
-	nospace?: boolean
-	tipFormat?: dateTimeFormatOptions
-	tipTransform?: (formattedDate: string) => string
-}>(), {
-	tipTransform: String,
-})
-
-const today = Temporal.Now.plainDateISO()
-const zdt = computed(() => {
-	try {
-		return typeof props.date === 'string' ? toZonedTemporal(props.date) : props.date
-	}
-	catch {
-		return null
-	}
-})
-
-const relative = computed(() => props.absolute || !zdt.value
-	? false
-	: props.relative || today.since(zdt.value, { largestUnit: 'week' }).weeks < 1,
-)
-
-const mounted = useMounted()
-const tooltip = computed(() => mounted.value && zdt.value
-	? props.tipTransform(toZdtLocaleString(zdt.value, props.tipFormat))
-	: props.date as string,
-)
-</script>
-
-<template>
-<span :title="tooltip">
-	<Icon v-if="icon" :name="icon" />
-	<template v-if="icon && !nospace">&nbsp;</template>
-
-	<span v-if="!zdt">Invalid Date</span>
-
-	<time
-		v-else-if="format"
-		:datetime="toInstantString(zdt)"
-		v-text="toZdtLocaleString(zdt, format)"
-	/>
-
-	<NuxtTime
-		v-else
-		:datetime="toInstantString(zdt)"
-		:relative
-		:year="zdt.year === today.year ? undefined : '2-digit'"
-		month="long"
-		day="numeric"
-		numeric="auto"
-	/>
-</span>
-</template>
+<script setup lang="ts">
+import { Temporal } from 'temporal-polyfill'
+
+const props = withDefaults(defineProps<{
+	icon?: string
+	date?: string | Temporal.ZonedDateTime
+	format?: dateTimeFormatOptions
+	absolute?: boolean
+	relative?: boolean
+	nospace?: boolean
+	tipFormat?: dateTimeFormatOptions
+	tipTransform?: (formattedDate: string) => string
+}>(), {
+	tipTransform: String,
+})
+
+const today = Temporal.Now.plainDateISO()
+const zdt = computed(() => {
+	try {
+		return typeof props.date === 'string' ? toZonedTemporal(props.date) : props.date
+	}
+	catch {
+		return null
+	}
+})
+
+const relative = computed(() => props.absolute || !zdt.value
+	? false
+	: props.relative || today.since(zdt.value, { largestUnit: 'week' }).weeks < 1,
+)
+
+const mounted = useMounted()
+const tooltip = computed(() => mounted.value && zdt.value
+	? props.tipTransform(toZdtLocaleString(zdt.value, props.tipFormat))
+	: props.date as string,
+)
+</script>
+
+<template>
+<span :title="tooltip">
+	<Icon v-if="icon" :name="icon" />
+	<template v-if="icon && !nospace">&nbsp;</template>
+
+	<span v-if="!zdt">Invalid Date</span>
+
+	<time
+		v-else-if="format"
+		:datetime="toInstantString(zdt)"
+		v-text="toZdtLocaleString(zdt, format)"
+	/>
+
+	<NuxtTime
+		v-else
+		:datetime="toInstantString(zdt)"
+		:relative
+		:year="zdt.year === today.year ? undefined : '2-digit'"
+		month="long"
+		day="numeric"
+		numeric="auto"
+	/>
+</span>
+</template>