clarity-theme 0.1.0

package/app/components/content/ProsePre.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { escape } from 'es-toolkit/string'
+
+const props = withDefaults(defineProps<{
+	code?: string
+	language?: string
+	filename?: string
+	/** @deprecated Use `transformerNotationHighlight` instead */
+	highlights?: number[]
+	meta?: string
+	class?: string
+}>(), {
+	code: '',
+	meta: '',
+	language: 'text', // Nuxt Content 已经做了此处理
+})
+
+interface CodeblockMeta {
+	icon?: string
+	wrap?: boolean
+	[meta: string]: string | boolean | undefined
+}
+
+const meta = computed(() => props.meta.split(' ').reduce((acc: CodeblockMeta, item) => {
+	const [key, value] = item.split('=')
+	acc[key!] = value ?? true
+	return acc
+}, {}))
+
+const clarity = useClarityConfig()
+const compConf = computed(() => clarity.component.codeblock)
+
+const rows = computed(() => props.code.split('\n').length - 1)
+const collapsible = computed(() => !meta.value.expand && rows.value > compConf.value.triggerRows)
+const [isCollapsed, toggleCollapsed] = useToggle(collapsible.value)
+
+const icon = computed(() => meta.value.icon || getFileIcon(props.filename) || getLangIcon(props.language))
+const isWrap = ref(meta.value.wrap)
+const byteSize = computed(() => formatBytes(new TextEncoder().encode(props.code).length))
+
+const codeblock = useTemplateRef('codeblock')
+const { copy, copied } = useCopy(codeblock)
+const shiki = useShiki()
+const rawHtml = ref(escape(props.code))
+
+function getIndent() {
+	if (meta.value.indent)
+		return meta.value.indent
+
+	if (['md', 'mdc', 'json', 'jsonc', 'yaml', 'yml'].includes(props.language))
+		return 2
+
+	return compConf.value.indent
+}
+
+onMounted(async () => {
+	rawHtml.value = await shiki.codeToHtml(props.code.trimEnd(), {
+		language: props.language,
+		transformerOptions: [compConf.value.enableIndentGuide ? 'ignoreRenderWhitespace' : 'ignoreRenderIndentGuides'],
+		shikiOptions: { meta: { indent: getIndent() } },
+		embeddedLanguages: true,
+	})
+})
+</script>
+
+<template>
+<figure
+	class="z-codeblock"
+	:class="{ collapsed: collapsible && isCollapsed, collapsible }"
+	:style="{
+		'--collapsed-rows': compConf.collapsedRows,
+		'--tab-size': meta.indent as string || compConf.tabSize,
+	}"
+>
+	<figcaption>
+		<span v-if="filename" class="filename">
+			<Icon :name="icon" /> {{ filename }}
+		</span>
+		<span v-else />
+		<!-- 语言不采用绝对定位，因为和文件名占据互斥空间 -->
+		<span v-if="language" class="language">{{ language }}</span>
+		<div class="operations">
+			<button @click="isWrap = !isWrap">
+				{{ isWrap ? '横向滚动' : '自动换行' }}
+			</button>
+			<button @click="copy()">
+				{{ copied ? '已复制' : '复制' }}
+			</button>
+		</div>
+	</figcaption>
+
+	<!-- 嘿嘿，不要换行 -->
+	<pre
+		ref="codeblock"
+		class="shiki scrollcheck-x"
+		:class="[props.class, { wrap: isWrap }]"
+		v-html="rawHtml"
+	/>
+
+	<button
+		v-if="collapsible"
+		class="toggle-btn"
+		:aria-label="isCollapsed ? '展开代码块' : '折叠代码块'"
+		@click="toggleCollapsed()"
+	>
+		<Icon
+			class="toggle-icon"
+			:class="{ 'is-collapsed': isCollapsed }"
+			name="tabler:chevrons-up"
+		/>
+		<span>{{ rows }} lines, {{ props.code.length }} chars, {{ byteSize }}</span>
+	</button>
+</figure>
+</template>
+
+<style lang="scss" scoped>
+.z-codeblock {
+	--line-height: 1.4;
+
+	contain: paint;
+	margin: 0.5em 0;
+	border-radius: 0.5em;
+	background-color: var(--c-bg-2);
+	font-size: 0.85em;
+	line-height: 1.4;
+	tab-size: var(--tab-size, 4);
+
+	&.collapsible > pre {
+		padding-bottom: 0.5rem;
+	}
+
+	&.collapsed > pre {
+		overflow: hidden;
+		max-height: calc(var(--line-height) * var(--collapsed-rows) * 1em + 1rem);
+		mask-image: linear-gradient(to top, transparent -2em, #FFF 4em);
+		animation: none;
+	}
+}
+
+figcaption {
+	display: flex;
+	justify-content: space-between;
+	gap: 1em;
+	position: sticky;
+	top: 0;
+	padding: 0 1em;
+	z-index: 2;
+
+	> .filename {
+		padding: 0.2em 0.8em;
+		border-radius: 0 0 0.5em 0.5em;
+		background-color: var(--c-border);
+		word-break: break-all;
+	}
+
+	> .language {
+		opacity: 0.4;
+		height: 0;
+		transform: translateY(0.2em);
+	}
+
+	> .operations {
+		position: absolute;
+		opacity: 0;
+		inset-inline-end: 0;
+		padding: 0 0.6em;
+		border-end-start-radius: 0.5em;
+		background-color: var(--c-bg-2);
+		transition: opacity 0.2s;
+
+		:hover > &, :focus-within > & {
+			opacity: 1;
+		}
+
+		> button {
+			opacity: 0.4;
+			padding: 0.2em 0.4em;
+			transition: opacity 0.2s;
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+pre {
+	// 如果填写 0 会在 calc() 时出错
+	--start-offset: 4em;
+
+	padding: 1rem;
+	padding-inline-start: var(--start-offset);
+
+	&.wrap {
+		white-space: pre-wrap;
+	}
+}
+
+:deep(.line) {
+	&.diff {
+		background-color: var(--ld-bg-active);
+
+		&.add {
+			--line-indicator: "+ ";
+			--line-indicator-color: var(--c-success);
+			--ld-bg-active: var(--c-success-soft);
+		}
+
+		&.remove {
+			--line-indicator: "- ";
+			--line-indicator-color: var(--c-error);
+			--ld-bg-active: var(--c-error-soft);
+		}
+	}
+
+	&.highlighted {
+		--line-indicator-color: var(--c-text-1);
+
+		background-color: var(--ld-bg-active);
+
+		&.error {
+			--line-indicator-color: var(--c-error);
+			--ld-bg-active: var(--c-error-soft);
+		}
+
+		&.warning {
+			--line-indicator-color: var(--c-warning);
+			--ld-bg-active: var(--c-warning-soft);
+		}
+	}
+
+	&.focused {
+		--line-indicator: "→ ";
+		--line-indicator-color: var(--c-text-1);
+
+		display: inline-block;
+		position: relative;
+		box-shadow: 0 0 10rem 4rem var(--c-bg-2);
+		transition: box-shadow 0.2s;
+
+		@supports (color: color-mix(in srgb, transparent, transparent)) {
+			box-shadow: 0 0 0 100vmax color-mix(in srgb, transparent, var(--c-bg-2));
+		}
+
+		pre:hover > & {
+			box-shadow: none;
+		}
+	}
+
+	// 行指示器
+	&::before {
+		content: var(--line-indicator, "") attr(data-line);
+		position: fixed;
+		inset-inline-start: 0;
+		width: var(--start-offset);
+		padding-inline-end: 1em;
+		background-color: var(--c-bg-2);
+		text-align: end;
+		color: var(--line-indicator-color, var(--c-text-3));
+		z-index: 1;
+	}
+
+	> .highlighted-word {
+		border-radius: 0.2em;
+		box-shadow: inset 0 0 0 1em var(--ld-bg-active);
+	}
+}
+
+.toggle-btn {
+	display: block;
+	position: relative; // 移动到 pre 上方
+	opacity: 0.3;
+	width: 100%;
+	padding: 0.2em;
+	background-color: var(--c-bg-3);
+	transition: opacity 0.2s;
+
+	&:hover {
+		opacity: 1;
+	}
+}
+
+.toggle-icon {
+	margin-inline-end: 0.2em;
+	transition: all 0.2s;
+
+	&.is-collapsed {
+		transform: rotate(180deg);
+	}
+}
+</style>

package/app/components/content/ProseTable.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+const [scroll, toggleScroll] = useToggle(true)
+</script>
+
+<template>
+<Tooltip class="md-table" tag="figure" interactive :delay="500">
+	<template #content>
+		<Icon v-show="false" :name="scroll ? 'tabler:text-wrap-disabled' : 'tabler:text-wrap'" />
+		<ZButton
+			variant="text"
+			:icon="scroll ? 'tabler:text-wrap' : 'tabler:text-wrap-disabled'"
+			:text="scroll ? '自动换行' : '横向滚动'"
+			@click="toggleScroll()"
+		/>
+	</template>
+	<table class="scrollcheck-x" :class="{ scroll }">
+		<slot />
+	</table>
+</Tooltip>
+</template>
+
+<style lang="scss" scoped>
+.md-table {
+	position: relative;
+	margin: 1rem 0;
+	font-variant-numeric: tabular-nums;
+	font-size: 0.9em;
+	line-height: 1.4;
+	word-break: break-all;
+
+	table.scroll {
+		contain: layout; // KaTeX 撑开宽度
+		display: block;
+		white-space: nowrap;
+		word-break: normal;
+	}
+}
+
+:deep(table) {
+	max-height: 80vh;
+	max-height: 80dvh;
+	margin: auto;
+	border-collapse: collapse;
+
+	> thead {
+		position: sticky;
+		top: 0;
+		z-index: 1; // ProseA 图标会透到表头上方
+	}
+
+	th {
+		background-color: var(--c-bg-2);
+		font-weight: bold;
+		text-align: center;
+	}
+
+	tr {
+		transition: background-color 0.2s;
+
+		&:hover {
+			background-color: var(--c-bg-2);
+		}
+	}
+
+	th, td {
+		padding: 0.5em 0.8em;
+		border: 1px solid var(--c-border);
+	}
+}
+</style>

package/app/components/content/Quote.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = defineProps<{
+	icon?: string
+}>()
+
+const icon = computed(() => props.icon || 'tabler:message-2')
+</script>
+
+<template>
+<div class="quote title-like">
+	<div class="icon-line">
+		<slot name="icon">
+			<Icon :name="icon" />
+		</slot>
+	</div>
+	<slot />
+</div>
+</template>
+
+<style lang="scss" scoped>
+.quote {
+	font-size: 1.2rem;
+	line-height: 1.5;
+	color: var(--c-text-2);
+	isolation: isolate;
+
+	:deep(p) {
+		margin: 0;
+	}
+}
+
+.icon-line {
+	position: relative;
+	opacity: 0.5;
+	min-height: 0.5em;
+	margin-bottom: -0.5em;
+	mask-image: linear-gradient(#FFF, transparent);
+	font-size: 4rem;
+	transition: all 0.2s;
+	z-index: -1;
+
+	@media (max-width: $breakpoint-phone) {
+		font-size: 3rem;
+	}
+
+	:hover > & {
+		opacity: 1;
+		transform: translateY(-0.5rem);
+	}
+}
+</style>

package/app/components/content/Tab.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+const props = defineProps<{
+	/** tab 下标从 1 开始 */
+	tabs: string[]
+	center?: boolean
+	active?: string | number
+}>()
+
+const activeTab = ref(Number(props.active) || 1)
+</script>
+
+<template>
+<!-- BUG: MDC Tab插槽块内会吞代码缩进 -->
+<div :class="{ center }">
+	<div class="tabs">
+		<button
+			v-for="(tab, tabIndex) in tabs"
+			:key="tabIndex"
+			:class="{ active: activeTab === tabIndex + 1 }"
+			@click="activeTab = tabIndex + 1"
+		>
+			{{ tab }}
+		</button>
+	</div>
+	<div v-for="tabIndex in tabs.length" v-show="activeTab === tabIndex" :key="tabIndex" class="tab-content">
+		<slot :name="`tab${tabIndex}`" />
+	</div>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.float-in-leave-active {
+	/* stylelint-disable-next-line declaration-no-important */
+	position: revert !important;
+}
+
+.center {
+	width: fit-content;
+	max-width: 100%;
+	margin-inline: auto;
+}
+
+.tabs {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 0.5em;
+	position: relative;
+	width: fit-content;
+	margin: 0 auto;
+	font-size: 0.9em;
+	line-height: 1.4;
+}
+
+button {
+	position: relative;
+	margin-bottom: 0.5em;
+	padding: 0.3em 0.5em;
+	border-radius: 0.4em;
+	color: var(--c-text-2);
+	transition: all 0.2s;
+
+	&:hover {
+		background-color: var(--c-bg-soft);
+		color: var(--c-text);
+	}
+
+	&::before, &::after {
+		display: block;
+		position: absolute;
+		inset-inline: 0.8em;
+		bottom: -0.5em;
+		height: 2px;
+		border-radius: 1em;
+		pointer-events: none;
+	}
+
+	&::after {
+		content: "";
+		inset-inline: -0.8em;
+		background-color: var(--c-border);
+	}
+
+	&.active {
+		box-shadow: var(--box-shadow-1), var(--box-shadow-1);
+		background-color: var(--ld-bg-card);
+		color: var(--c-text);
+
+		&::before {
+			content: "";
+			background-color: var(--c-primary);
+			z-index: 1;
+		}
+	}
+}
+
+.tab-content {
+	margin: 1em 0;
+}
+</style>

package/app/components/content/Timeline.vue

@@ -0,0 +1,73 @@
+<script lang="tsx" setup>
+const slots = defineSlots<{
+	default: () => VNode[]
+}>()
+
+const timelineRegex = /^\{(?<caption>.*)\}$/
+
+function render() {
+	const slotContent = slots.default()
+	if (!slotContent)
+		return <span>时间线为空</span>
+
+	return slotContent.map((node: VNode) => {
+		// WARN: 此处使用了非标准的 v-slot:default
+		const textContent = (node.children as any)?.default?.()[0].children
+		const matchGroups = typeof textContent === 'string'
+			? textContent.match(timelineRegex)?.groups
+			: undefined
+		return matchGroups
+			? <dt class="timeline-caption">{matchGroups.caption}</dt>
+			: <dd class="timeline-body card">{node}</dd>
+	})
+}
+</script>
+
+<template>
+<dl class="timeline">
+	<render />
+</dl>
+</template>
+
+<style lang="scss" scoped>
+// TODO: 优化时间线样式
+.timeline {
+	position: relative;
+	padding-inline-start: 1.5em;
+	font-size: 0.9em;
+
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0.5em auto 0;
+		inset-inline-start: 0.5em;
+		width: 0.3em;
+		background-color: var(--c-bg-soft);
+	}
+}
+
+:deep() {
+	> .timeline-caption {
+		opacity: 0.8;
+		font-size: 0.9em;
+
+		&::before {
+			content: "";
+			position: absolute;
+			inset-inline-start: 0.3em;
+			width: 0.8em;
+			height: 0.8em;
+			margin-top: 0.5em;
+			border-radius: 1em;
+			background-color: var(--c-text-2);
+		}
+	}
+
+	> .timeline-body {
+		width: fit-content;
+		max-width: 100%;
+		margin-bottom: 1em;
+		padding: 0 1em;
+	}
+}
+</style>

package/app/components/content/Tip.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { TippyOptions } from 'vue-tippy'
+
+const props = withDefaults(defineProps<{
+	text?: string
+	tip?: string
+	icon?: string | boolean
+	copy?: boolean
+	tipOptions?: TippyOptions
+}>(), {
+	icon: undefined,
+})
+
+const tip = computed(() => ({
+	content: props.tip || (props.copy ? '点击复制' : ''),
+	inlinePositioning: true,
+	...props.tipOptions,
+}))
+const tipSource = useTemplateRef('tip-text')
+
+const { copy, copied } = useCopy(tipSource)
+const icon = computed(() => props.icon ?? (copied.value ? 'tabler:check' : props.copy && 'tabler:copy'))
+</script>
+
+<template>
+<span
+	ref="tip-text"
+	v-tip="tip"
+	class="tip"
+	tabindex="0"
+	@keypress.enter="props.copy && copy()"
+	@click="props.copy && copy()"
+>
+	<slot>{{ text }}</slot>
+	<Icon v-if="typeof icon === 'string'" :name="icon" class="tip-icon" />
+</span>
+</template>
+
+<style lang="scss" scoped>
+.tip {
+	position: relative;
+	text-decoration: underline dashed var(--c-text-3);
+	cursor: pointer;
+	text-underline-offset: 4px;
+}
+
+.tip-icon {
+	display: inline-block;
+	font-size: 1em;
+	vertical-align: top;
+}
+</style>