clarity-theme 0.1.0

package/app/components/post/Article.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { ArticleProps } from '../../types/article'
+
+const props = defineProps<{ useUpdated?: boolean } & ArticleProps>()
+const showAllDate = isTimeDiffSignificant(props.date, props.updated)
+</script>
+
+<template>
+<UtilLink class="article-card card upraise">
+	<NuxtImg v-if="image" class="article-cover" :src="image" :alt="title" />
+	<article>
+		<h2 class="article-title text-creative">
+			{{ title }}
+		</h2>
+
+		<p v-if="description" class="article-description">
+			{{ description }}
+		</p>
+
+		<div class="article-info">
+			<UtilDate
+				v-if="date && (showAllDate || !useUpdated)"
+				:date
+				icon="tabler:pencil-minus"
+			/>
+
+			<UtilDate
+				v-if="updated && (showAllDate || useUpdated)"
+				:class="{ 'use-updated': useUpdated }"
+				:date="updated"
+				icon="tabler:clock-edit"
+			/>
+
+			<span v-if="categories" :style="{ color: getCategoryColor(categories[0]) }">
+				<Icon :name="getCategoryIcon(categories[0])" />
+				{{ categories[0] }}
+			</span>
+
+			<span v-if="readingTime?.words" class="article-words">
+				<Icon name="tabler:pilcrow" />
+				{{ formatNumber(readingTime?.words) }}字
+			</span>
+		</div>
+	</article>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
+.article-card {
+	container-type: inline-size;
+	position: relative;
+	margin: 1em 0;
+	border-radius: 0.8em;
+	color: var(--c-text);
+	animation: float-in 0.2s var(--delay) backwards;
+
+	> article {
+		display: grid;
+		gap: 0.5em;
+		padding: 1em;
+	}
+}
+
+.article-info {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5em clamp(1em, 5%, 1.5em);
+	font-size: 0.8em;
+	color: var(--c-text-2);
+
+	&:empty {
+		display: none;
+	}
+
+	.use-updated {
+		order: -1;
+	}
+}
+
+.article-title {
+	font-size: 1.2em;
+	color: var(--c-text);
+}
+
+.article-description {
+	font-size: 0.9em;
+	color: var(--c-text-2);
+}
+
+.article-cover {
+	position: absolute;
+	opacity: 0.8;
+	inset-inline-end: 0;
+	top: 0;
+	width: calc(40% + 2em);
+	height: 100%;
+	margin: 0;
+	mask-image: linear-gradient(to var(--end), transparent, #FFF 50%);
+	transition: opacity 0.2s;
+	object-fit: cover;
+
+	:hover > & {
+		opacity: 1;
+	}
+
+	& + article {
+		position: relative;
+		width: 60%;
+	}
+
+	@mixin cover-narrow {
+		position: revert;
+		width: 100%;
+		height: auto;
+		max-width: none;
+		max-height: 256px;
+		aspect-ratio: 2.4;
+		margin-bottom: -10%;
+		mask-image: linear-gradient(#FFF 50%, transparent);
+
+		& + article {
+			width: auto;
+
+			> .article-title {
+				text-shadow: 0 0 0.2em var(--ld-bg-card), 0 0 0.5em var(--ld-bg-card), 0 0 1em var(--ld-bg-card);
+			}
+		}
+	}
+
+	@media (max-width: $breakpoint-phone) {
+		@include cover-narrow;
+	}
+
+	@container (max-width: #{$breakpoint-phone}) {
+		@include cover-narrow;
+	}
+}
+</style>

package/app/components/post/Comment.vue

@@ -0,0 +1,275 @@
+<script setup lang="tsx">
+import type { TippyComponent } from 'vue-tippy'
+
+const clarity = useClarityConfig()
+const enabled = computed(() => !!clarity.integrations.twikoo?.envId)
+
+const commentEl = useTemplateRef('comment')
+const popoverEl = useTemplateRef<TippyComponent>('popover')
+const popoverJumpTo = ref('')
+const popoverInputEl = useTemplateRef('popover-input')
+const showUndo = ref(false)
+
+const popoverBind = ref<TippyComponent['$props']>({})
+
+/** 评论区链接守卫 */
+useEventListener(commentEl, 'click', (e) => {
+	if (!(e.target instanceof Element))
+		return
+
+	if (e.target.matches('.tk-avatar-img'))
+		e.stopPropagation()
+
+	const popoverTarget = e.target.closest('a[target="_blank"]')
+	if (!(popoverTarget instanceof HTMLAnchorElement))
+		return
+
+	e.preventDefault()
+	popoverEl.value?.hide()
+
+	popoverJumpTo.value = safelyDecodeUriComponent(popoverTarget.href)
+	popoverBind.value = {
+		getReferenceClientRect: () => popoverTarget.getBoundingClientRect(),
+		triggerTarget: popoverTarget,
+	}
+
+	nextTick(checkUndoable)
+	popoverEl.value?.show()
+}, { capture: true })
+
+function checkUndoable() {
+	showUndo.value = popoverInputEl.value?.textContent !== popoverJumpTo.value
+}
+
+function undo() {
+	if (!popoverInputEl.value)
+		return
+	popoverInputEl.value.textContent = popoverJumpTo.value
+	checkUndoable()
+}
+
+function confirmOpen() {
+	window.open(popoverInputEl.value?.textContent, '_blank')
+}
+
+onMounted(() => {
+	if (!enabled.value)
+		return
+
+	window.twikoo?.init?.({
+		envId: clarity.integrations.twikoo?.envId ?? '',
+		// twikoo 会把挂载后的元素变为 #twikoo
+		el: '#twikoo',
+	})
+})
+</script>
+
+<template>
+<section ref="comment" class="z-comment">
+	<h3 class="text-creative">
+		评论区
+	</h3>
+
+	<!-- interactive 默认会把气泡移动到 triggerTarget 的父元素上 -->
+	<Tooltip
+		ref="popover"
+		v-bind="popoverBind"
+		:append-to="() => commentEl!"
+		interactive
+		:aria="{ expanded: false }"
+		trigger="focusin"
+	>
+		<template #content>
+			<div class="popover-confirm">
+				<span
+					ref="popover-input"
+					class="input"
+					contenteditable="plaintext-only"
+					spellcheck="false"
+					@input="checkUndoable"
+					@keydown.enter.prevent="confirmOpen"
+					v-text="popoverJumpTo"
+				/>
+
+				<button
+					v-if="showUndo"
+					aria-label="恢复原始内容"
+					@click="undo()"
+				>
+					<Icon name="tabler:arrow-back-up" />
+				</button>
+
+				<ZButton
+					primary
+					text="访问"
+					@click="confirmOpen"
+				/>
+			</div>
+		</template>
+	</Tooltip>
+
+	<div v-if="enabled" id="twikoo">
+		<p>评论加载中...</p>
+	</div>
+	<p v-else class="no-comment">
+		本文暂未开启评论
+	</p>
+</section>
+</template>
+
+<style lang="scss" scoped>
+.z-comment {
+	margin: 3rem 1rem;
+
+	> h3 {
+		margin-top: 3rem;
+		font-size: 1.25rem;
+	}
+}
+
+:deep() > [data-tippy-root] > .tippy-box {
+	padding: 0;
+}
+
+.popover-confirm {
+	display: flex;
+	align-items: center;
+	overflow-wrap: anywhere;
+
+	> .input {
+		min-width: 0;
+		padding: 0.3em 0.6em;
+		outline: none;
+	}
+
+	> button {
+		flex-shrink: 0;
+		align-self: stretch;
+		padding: 0.3em;
+		border-radius: 0 0.5em 0.5em 0;
+	}
+}
+
+:deep(#twikoo) {
+	margin: 2em 0;
+
+	.tk-admin-container {
+		position: fixed;
+		z-index: calc(var(--z-index-popover) + 1);
+	}
+
+	.tk-input {
+		font-family: var(--font-monospace);
+	}
+
+	.tk-avatar {
+		border-radius: 50%;
+
+		@supports (corner-shape: squircle) {
+			corner-shape: superellipse(1.2);
+		}
+
+		&.tk-clickable {
+			cursor: auto;
+		}
+	}
+
+	.tk-time {
+		color: var(--c-text-3);
+	}
+
+	// 防止 a 被 overflow hidden
+	.tk-content {
+		margin: -0.2em;
+		padding: 0.2em;
+	}
+
+	.tk-comments-title, .tk-nick {
+		font-family: var(--font-creative);
+	}
+
+	.tk-owo-emotion {
+		width: auto;
+		height: 1.4em;
+		vertical-align: text-bottom;
+	}
+
+	.tk-extras, .tk-footer {
+		font-size: 0.7em;
+		color: var(--c-text-3);
+	}
+
+	.tk-replies:not(.tk-replies-expand) {
+		mask-image: linear-gradient(to top, transparent, #FFF 4em);
+	}
+
+	.tk-expand {
+		border-radius: 0.5em;
+		transition: background-color 0.1s;
+	}
+
+	.tippy-svg-arrow > svg {
+		fill: inherit;
+		width: auto;
+		height: auto;
+	}
+}
+
+.no-comment {
+	margin: 2em 0;
+	color: var(--c-text-3);
+}
+
+:deep(:where(.tk-preview-container,.tk-content)) {
+	pre {
+		overflow: auto;
+		border-radius: 0.5em;
+		font-size: 0.85em;
+	}
+
+	a {
+		margin: -0.1em -0.2em;
+		padding: 0.1em 0.2em;
+		background: linear-gradient(var(--c-primary-soft), var(--c-primary-soft)) no-repeat center bottom / 100% 0.1em;
+		color: var(--c-primary);
+		transition: all 0.2s;
+
+		&:hover {
+			border-radius: 0.3em;
+			background-size: 100% 100%;
+		}
+	}
+
+	p {
+		margin: 0.2em 0;
+	}
+
+	img {
+		border-radius: 0.5em;
+	}
+
+	menu, ol, ul {
+		margin: 0.5em 0;
+		padding-inline-start: 1.5em;
+		font-size: 0.9rem;
+		list-style: revert;
+
+		> li {
+			margin: 0.2em 0;
+
+			&::marker {
+				color: var(--c-primary);
+			}
+		}
+	}
+
+	blockquote {
+		margin: 0.5em 0;
+		padding: 0.2em 0.5em;
+		border-inline-start: 4px solid var(--c-border);
+		border-radius: 4px;
+		background-color: var(--c-bg-2);
+		font-size: 0.9em;
+	}
+}
+</style>

package/app/components/post/Excerpt.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { delay } from 'es-toolkit/promise'
+
+const props = defineProps<{
+	excerpt: string
+}>()
+
+const clarity = useClarityConfig()
+
+const excerpt = ref(props.excerpt)
+const caret = ref('')
+
+if (clarity.component.excerpt?.animation !== false) {
+	excerpt.value = ''
+	onMounted(async () => {
+		caret.value = clarity.component.excerpt?.caret ?? '_'
+		for (const char of props.excerpt) {
+			excerpt.value += char
+			await delay(50)
+		}
+		caret.value = ''
+	})
+}
+
+if (import.meta.dev) {
+	watch(() => props.excerpt, (newExcerpt) => {
+		excerpt.value = newExcerpt
+	})
+}
+</script>
+
+<template>
+<div class="md-excerpt gradient-card">
+	<span class="dynamic"><Icon name="tabler:sparkles-2" />{{ excerpt }}{{ caret }}</span>
+	<span class="static"><Icon name="tabler:sparkles-2" />{{ props.excerpt }}</span>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.md-excerpt {
+	opacity: 0.6;
+	margin: 1rem 0.5rem;
+	padding: 0.5rem;
+	font-size: 0.9em;
+	transition: opacity 0.2s;
+
+	> .static {
+		opacity: 0;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	> .dynamic {
+		position: absolute;
+		width: calc(100% - 1rem);
+	}
+
+	.iconify {
+		margin-inline-end: 0.3em;
+	}
+
+	&:hover {
+		opacity: 1;
+	}
+}
+</style>

package/app/components/post/OrderToggle.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { ArticleOrderType } from '../../types/article'
+
+const props = defineProps<{
+	// 强制允许或禁止升序
+	enableAscending?: boolean
+	disableAscending?: boolean
+	categories?: (string | undefined)[]
+	secretDelay?: string
+}>()
+
+const clarity = useClarityConfig()
+const orderMap = computed(() => clarity.article.order)
+// 配置文件中允许升序时，且未明确禁用升序时，允许升序
+const allowAscending = computed(() => clarity.pagination.allowAscending ? !props.disableAscending : props.enableAscending)
+
+const category = defineModel<string>('category')
+const sortOrder = defineModel<ArticleOrderType>('sortOrder', { default: 'date' })
+const isAscending = defineModel<boolean>('isAscending')
+
+function toggleOrder() {
+	const orderKeys = Object.keys(orderMap.value) as (ArticleOrderType)[]
+	sortOrder.value = orderKeys[(orderKeys.indexOf(sortOrder.value) + 1) % orderKeys.length] || 'date'
+}
+
+function toggleDirection() {
+	if (!allowAscending.value)
+		return
+	isAscending.value = !isAscending.value
+}
+</script>
+
+<template>
+<div class="order-toggle" :style="{ '--secret-delay': secretDelay }">
+	<slot />
+
+	<ZDropdown trigger="focusin" tabindex="0">
+		<button :disabled="!categories">
+			<Icon :name="getCategoryIcon(category)" />
+			<span class="order-text">{{ category ?? '全部分类' }}</span>
+		</button>
+
+		<template #content="{ hide }">
+			<button :class="{ active: !category }" @click="hide(), category = undefined">
+				<Icon :name="getCategoryIcon()" />
+				<span>全部分类</span>
+			</button>
+
+			<button v-for="item in categories" :key="item" :class="{ active: item === category }" @click="hide(), category = item">
+				<Icon :name="getCategoryIcon(item)" />
+				<span>{{ item }}</span>
+			</button>
+		</template>
+	</ZDropdown>
+
+	<span>
+		<button v-if="allowAscending" aria-label="切换排序方向" @click="toggleDirection">
+			<Icon name="tabler:sort-descending" class="toggle-direction" :class="{ ascending: isAscending }" />
+		</button>
+
+		<button @click="toggleOrder">
+			<Icon v-if="!allowAscending" name="tabler:sort-descending" />
+			<span class="order-text">{{ orderMap[sortOrder] || sortOrder }}</span>
+		</button>
+	</span>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.order-toggle {
+	display: flex;
+	gap: 1rem;
+	color: var(--c-text-2);
+
+	:deep(button), :deep(a) {
+		transition: color 0.2s;
+
+		&:hover {
+			color: var(--c-primary);
+		}
+	}
+
+	.toggle-direction {
+		display: inline-block;
+		margin-inline-end: 0.1em;
+		transition: transform 0.2s;
+
+		&.ascending {
+			transform: scaleY(-1);
+		}
+	}
+}
+
+:deep(.secret-container) {
+	margin-inline-end: auto;
+}
+
+.iconify + span {
+	margin-inline-start: 0.2em;
+}
+</style>

package/app/components/post/PostFooter.vue

@@ -0,0 +1,80 @@
+<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);
+	border-radius: 1rem;
+	background-color: var(--c-bg-2);
+}
+
+section {
+	padding: 1rem;
+
+	& + section {
+		border-top: 1px solid var(--c-border);
+	}
+}
+
+.title {
+	font-weight: bold;
+	color: var(--c-text);
+}
+
+.content {
+	margin-top: 0.5em;
+	font-size: 0.9rem;
+
+	li {
+		margin: 0.5em 0;
+	}
+}
+</style>