clarity-theme 0.1.0

package/app/components/post/PostHeader.vue

@@ -0,0 +1,147 @@
+<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>
+.post-header {
+	contain: paint; // overflow hidden + position relative
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: 1rem;
+	margin: 0.5rem;
+	border-radius: 1rem;
+	background-color: var(--c-bg-2);
+	color: var(--c-text);
+
+	@media (max-width: $breakpoint-mobile) {
+		margin: 0;
+		border-radius: 0;
+	}
+
+	&:hover .operations,
+	&:focus-within .operations {
+		opacity: 1;
+	}
+
+	&.has-cover {
+		min-height: 16rem;
+		max-height: 20rem;
+		color: white;
+		transition: font-size 0.2s;
+
+		.post-info {
+			filter: drop-shadow(0 1px 2px #000);
+		}
+
+		.post-title {
+			background-image: linear-gradient(transparent, #0003, #0005);
+			text-shadow: var(--text-shadow-black);
+
+			&.text-story {
+				text-align: center;
+			}
+		}
+	}
+}
+
+.operations {
+	position: absolute;
+	opacity: 0;
+	inset-inline-end: 1em;
+	color: var(--c-text-1);
+	transition: opacity 0.2s;
+	z-index: 1;
+}
+
+.post-cover {
+	position: absolute;
+	inset: 0;
+
+	> :deep(img) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+}
+
+.post-title {
+	padding: 0.8em 1rem;
+	font-size: 1.6em;
+	line-height: 1.2;
+	z-index: 1;
+}
+
+.post-nav {
+	padding: 0.8em 1rem;
+	font-size: 0.8em;
+
+	.post-info {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5em 1.2em;
+		column-gap: clamp(1em, 3%, 1.5em);
+	}
+}
+</style>

package/app/components/post/PostSurround.vue

@@ -0,0 +1,111 @@
+<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;
+	flex-wrap: wrap;
+	gap: 1rem;
+	margin: 3rem 1rem;
+}
+
+.surround-link {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+	transition: color 0.2s;
+
+	&:not([href]) {
+		opacity: 0.4;
+		user-select: none;
+	}
+
+	&[align-end] {
+		// direction: rtl 会导致末尾标点居左
+		flex-direction: row-reverse;
+		margin-inline-start: auto;
+		text-align: end;
+	}
+
+	> .surround-text {
+		text-wrap: balance;
+		transition: transform 0.2s;
+
+		> .date {
+			display: block;
+			opacity: 0.6;
+			font-size: 0.8rem;
+		}
+	}
+
+	> .iconify {
+		opacity: 0.5;
+		font-size: 2rem;
+		transition: transform 0.2s;
+	}
+
+	&[href]:hover {
+		color: var(--c-primary);
+
+		> .surround-text {
+			transform: translateX(-1em);
+		}
+
+		&[align-end] > .surround-text {
+			transform: translateX(1em);
+		}
+
+		> .iconify {
+			opacity: 0.2;
+			transform: scale(2);
+		}
+	}
+}
+</style>

package/app/components/post/Slide.vue

@@ -0,0 +1,215 @@
+<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;
+
+	.at-slide-hover {
+		opacity: 0;
+		transition: opacity 0.2s;
+	}
+
+	&:hover .at-slide-hover,
+	&:focus-within .at-slide-hover {
+		opacity: 1;
+	}
+}
+
+.z-slide-header {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 2rem;
+	height: 3rem;
+	margin-bottom: -0.2rem;
+	mask-image: linear-gradient(#FFF, transparent);
+	color: var(--c-text-3);
+
+	>.title {
+		font-size: 3rem;
+		font-weight: bold;
+		line-height: 1;
+	}
+}
+
+.z-slide-body {
+	--fadeout-width: 1.5rem;
+
+	position: relative;
+	overflow: hidden;
+	padding: 2px 0;
+	mask-image: linear-gradient(to var(--end), transparent, #FFF var(--fadeout-width), #FFF calc(100% - var(--fadeout-width)), transparent);
+	cursor: grab;
+	user-select: none;
+
+	.slide-list {
+		display: flex;
+		scroll-snap-type: x mandatory;
+	}
+}
+
+.carousel-action {
+	position: absolute;
+	top: 50%;
+	padding: 0.5em 0.2em;
+	font-size: 1.5em;
+	transform: translateY(-50%);
+	transition: all 0.2s;
+
+	&.prev { inset-inline-start: 1rem; }
+	&.next { inset-inline-end: 1rem; }
+}
+
+.slide-item {
+	contain: paint;
+	flex-shrink: 0;
+	position: relative;
+	width: max(12rem, 28%);
+	max-width: 80%;
+	aspect-ratio: 1.77;
+	margin: 0 min(0.5em, 1%);
+	border-radius: 0.5rem;
+	scroll-snap-align: center;
+	scroll-snap-stop: always;
+
+	// Firefox 图片 alt 为空时 fallback 失效
+	@supports (-moz-force-broken-image-icon: 1) {
+		background-color: var(--c-border);
+	}
+
+	> .cover {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	>.stable-info, > .hover-info {
+		position: absolute;
+		text-align: center;
+		text-shadow: var(--text-shadow-black);
+		color: white;
+		transition: opacity 0.2s;
+	}
+
+	> .stable-info {
+		overflow: hidden;
+		bottom: 0;
+		width: 100%;
+		padding: 0.5em;
+		background-image: linear-gradient(transparent, #0003, #0005);
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	> .hover-info {
+		display: grid;
+		place-items: center;
+		opacity: 0;
+		inset: 0;
+		padding: 1em;
+		backdrop-filter: brightness(0.8) saturate(10) contrast(0.8) blur(2em);
+
+		> .title {
+			text-wrap: balance;
+		}
+
+		> .desc {
+			opacity: 0.5;
+			font-size: 0.8em;
+		}
+	}
+
+	&:hover, &:focus-within {
+		>.stable-info {
+			opacity: 0;
+		}
+
+		> .hover-info {
+			opacity: 1;
+		}
+	}
+}
+</style>

package/app/components/util/Date.vue

@@ -0,0 +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>

package/app/components/util/HydrateSafe.vue

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

package/app/components/util/Img.vue

@@ -0,0 +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>

package/app/components/util/Link.vue

@@ -0,0 +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>

package/app/components/widget/BlogLog.vue

@@ -0,0 +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>
+.no-log {
+	padding: 1em;
+	color: var(--c-text-3);
+}
+</style>

package/app/components/widget/BlogStats.vue

@@ -0,0 +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: '构建于',
+	}),
+}, {
+	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>