clarity-theme 0.1.0

package/app/assets/css/reusable.scss

@@ -0,0 +1,186 @@
+// 一部分具有卡片样式的组件复用了此类
+.card {
+	contain: paint;
+	display: block;
+	border-radius: 0.5em;
+	box-shadow: var(--box-shadow-1);
+	background-color: var(--ld-bg-card);
+	transition: all 0.2s;
+
+	&.upraise:hover {
+		box-shadow: var(--box-shadow-3);
+		transform: translateY(-2px);
+	}
+}
+
+.gradient-card {
+	position: relative;
+	border-radius: 0.5rem;
+	z-index: 0;
+
+	&::before {
+		content: "";
+		position: absolute;
+		opacity: 0;
+		inset: 0;
+		border: 2px solid transparent;
+		border-radius: inherit;
+		background: linear-gradient(var(--c-bg-a80), var(--c-bg-a80)) padding-box, linear-gradient(45deg, var(--c-accent), var(--c-primary-soft)) border-box;
+		transition: opacity 0.2s;
+		z-index: -1;
+	}
+
+	&:hover, &:focus, &.active {
+		color: var(--c-text-1);
+
+		&::before {
+			opacity: 1;
+		}
+	}
+}
+
+.scrollbar-hidden.scrollbar-hidden {
+	--scrollbar-height: 0px;
+	--guessed-scrollbar-width: 0px;
+
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+// 横向滚动遮罩
+// PURE CSS MAGIC!
+.scrollcheck-x, .scrollcheck-y {
+	scrollbar-width: thin;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+		height: 6px;
+		background-color: var(--c-bg-2);
+		cursor: default;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		border-radius: 4px;
+		background-color: var(--c-bg-soft);
+		cursor: pointer;
+	}
+}
+
+.scrollcheck-x {
+	--start-offset: 0px; // 如果填写 0 会在 calc() 时出错
+	--scrollbar-height: 8px;
+	--fadeout-width: 2em;
+
+	overflow-x: auto;
+	animation: scrollcheck-x;
+	animation-timeline: scroll(x self);
+}
+
+@keyframes scrollcheck-x {
+	0% {
+		mask-image:
+			linear-gradient(to var(--end), #FFF calc(100% - var(--fadeout-width)), transparent),
+			linear-gradient(to top, #FFF var(--scrollbar-height), transparent var(--scrollbar-height));
+	}
+
+	0.01%, 99.99% {
+		mask-image:
+			linear-gradient(to var(--end), #FFF var(--start-offset), transparent var(--start-offset), #FFF calc(var(--start-offset) + var(--fadeout-width)), #FFF calc(100% - var(--fadeout-width)), transparent),
+			linear-gradient(to top, #FFF var(--scrollbar-height), transparent var(--scrollbar-height));
+	}
+
+	100% {
+		mask-image:
+			linear-gradient(to var(--end), #FFF var(--start-offset), transparent var(--start-offset), #FFF calc(var(--start-offset) + var(--fadeout-width))),
+			linear-gradient(to top, #FFF var(--scrollbar-height), transparent var(--scrollbar-height));
+	}
+}
+
+.scrollcheck-y {
+	// 如果填写 0 会在 calc() 时出错
+	--top-offset: 0px;
+	--guessed-scrollbar-width: 8px;
+	--fadeout-height: 2em;
+
+	overflow-y: auto;
+	animation: scrollcheck-y;
+	animation-timeline: scroll(y self);
+}
+
+@keyframes scrollcheck-y {
+	0% {
+		mask-image:
+			linear-gradient(to bottom, #FFF calc(100% - var(--fadeout-height)), transparent),
+			linear-gradient(to var(--start), #FFF var(--guessed-scrollbar-width), transparent var(--guessed-scrollbar-width));
+	}
+
+	0.01%, 99.99% {
+		mask-image:
+			linear-gradient(to bottom, #FFF var(--top-offset), transparent var(--top-offset), #FFF calc(var(--top-offset) + var(--fadeout-height)), #FFF calc(100% - var(--fadeout-height)), transparent),
+			linear-gradient(to var(--start), #FFF var(--guessed-scrollbar-width), transparent var(--guessed-scrollbar-width));
+	}
+
+	100% {
+		mask-image:
+			linear-gradient(to bottom, #FFF var(--top-offset), transparent var(--top-offset), #FFF calc(var(--top-offset) + var(--fadeout-height))),
+			linear-gradient(to var(--start), #FFF var(--guessed-scrollbar-width), transparent var(--guessed-scrollbar-width));
+	}
+}
+
+@each $name, $size in $breakpoints {
+	@media not (max-width: $size) {
+		.#{$name}-only {
+			display: none !important; /* stylelint-disable-line declaration-no-important */
+		}
+	}
+
+	@media (max-width: $size) {
+		.#{$name}-hidden {
+			display: none !important; /* stylelint-disable-line declaration-no-important */
+		}
+	}
+}
+
+.proper-height {
+	min-height: 70vh;
+}
+
+.round-cobblestone {
+	corner-shape: superellipse(1.2);
+}
+
+.text-center {
+	text-align: center;
+}
+
+.text-creative, .text-tech {
+	font-family: var(--font-creative);
+	font-weight: 550;
+	-webkit-font-smoothing: antialiased; // macOS下"DOUYINSANSBOLD-GB"过粗
+}
+
+.text-story {
+	font-family: var(--font-serif);
+}
+
+.text-repeat {
+	text-shadow: 0.1em 0 var(--c-bg-soft), 0.2em 0 var(--c-bg-soft), 0.3em 0 var(--c-bg-soft), 0.4em 0 var(--c-bg-soft), 0.5em 0 var(--c-bg-soft);
+}
+
+.text-zoom {
+	display: inline-block;
+	transform-origin: left bottom;
+
+	@supports (animation-timeline: view()) {
+		animation: zoom 1s both;
+		animation-timeline: view();
+	}
+
+	@keyframes zoom {
+		from { transform: scale(0.8); }
+		to { transform: scale(1.25); }
+	}
+}

package/app/assets/icons/solar-rewind-back-bold-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="460" height="460" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M22 6.426v11.148c0 1.847-1.6 3.015-2.903 2.118L13 15.232V8.768l6.097-4.46C20.399 3.411 22 4.58 22 6.426" clip-rule="evenodd" opacity=".5"/><path fill="currentColor" d="M13 7.123v9.754c0 1.616-1.467 2.638-2.661 1.853L2.92 13.853c-1.228-.807-1.228-2.899 0-3.706l7.42-4.877c1.193-.785 2.66.237 2.66 1.853"/></svg>

package/app/assets/icons/solar-rewind-forward-bold-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="460" height="460" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M2 6.426v11.148c0 1.847 1.6 3.015 2.903 2.118L11 15.232V8.768l-6.097-4.46C3.601 3.411 2 4.58 2 6.426" clip-rule="evenodd" opacity=".5"/><path fill="currentColor" d="M11 7.123v9.754c0 1.616 1.467 2.638 2.661 1.853l7.418-4.877c1.228-.807 1.228-2.899 0-3.706L13.66 5.27C12.467 4.485 11 5.507 11 7.123"/></svg>

package/app/components/blog/BlogAside.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const layoutStore = useLayoutStore()
+
+// 页面完成异步 setup 后才注册具名插槽；水合前等待，避免重复插入 SSR 侧栏。
+const layoutSlots = inject<{ ready: Promise<void> }>(Symbol.for('dxup:layout-slots'))
+if (layoutSlots)
+	await layoutSlots.ready
+</script>
+
+<template>
+<BlogMask
+	:show="layoutStore.state === 'aside'"
+	class="widescreen-only"
+	@click="layoutStore.close()"
+/>
+
+<!-- 不能用 Transition 实现弹出收起动画，因为宽屏状态始终显示 -->
+<!-- 如果为空数组则隐藏 -->
+<aside id="blog-aside" :class="{ show: layoutStore.state === 'aside' }">
+	<slot />
+</aside>
+</template>
+
+<style lang="scss" scoped>
+#blog-aside {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	overflow: auto;
+	padding: 0.5rem;
+	z-index: var(--z-index-popover);
+
+	@media (max-width: $breakpoint-widescreen) {
+		position: fixed;
+		inset-inline-end: 0;
+		top: 0;
+		width: 320px;
+		height: auto;
+		max-width: 100%;
+		max-height: 100%;
+		transform: var(--transform-end-far);
+		transition: transform 0.2s;
+
+		// TODO 留 padding-bottom 避让 BlogPanel
+
+		> :deep(.blog-widget) {
+			padding: 0.5rem;
+			border-radius: 1rem;
+			box-shadow: var(--box-shadow-1), var(--box-shadow-2);
+			background-color: var(--ld-bg-blur);
+			backdrop-filter: blur(0.5rem);
+		}
+
+		&.show {
+			transform: none;
+		}
+	}
+
+	&:empty {
+		display: none;
+	}
+}
+</style>

package/app/components/blog/BlogFooter.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const clarity = useClarityConfig()
+</script>
+
+<template>
+<footer class="blog-footer">
+	<nav class="footer-nav">
+		<div v-for="(group, groupIndex) in clarity.footer.nav" :key="groupIndex">
+			<hgroup class="text-creative" v-text="group.title" />
+			<menu>
+				<li v-for="(item, itemIndex) in group.items" :key="itemIndex">
+					<UtilLink :to="item.url">
+						<Icon :name="item.icon" />
+						<span class="nav-text">{{ item.text }}</span>
+					</UtilLink>
+				</li>
+			</menu>
+		</div>
+	</nav>
+	<p v-html="clarity.footer.copyright" />
+</footer>
+</template>
+
+<style lang="scss" scoped>
+.blog-footer {
+	margin: 3rem 1rem;
+	font-size: 0.9em;
+	color: var(--c-text-2);
+
+	.footer-nav {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 5vw clamp(2rem, 5%, 5vw);
+		padding-block: 3rem;
+
+		hgroup {
+			margin: 0.5em;
+		}
+
+		a {
+			display: flex;
+			align-items: center;
+			gap: 0.3em;
+			width: fit-content;
+			padding: 0.3em 0.5em;
+			border-radius: 0.5em;
+			font-size: 0.9em;
+			transition: background-color 0.2s, color 0.1s;
+
+			&:hover {
+				background-color: var(--c-bg-soft);
+				color: var(--c-text);
+			}
+		}
+	}
+
+	p {
+		margin: 0.5em;
+	}
+}
+</style>

package/app/components/blog/BlogHeader.global.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+	tag?: string
+}>(), {
+	tag: 'div',
+})
+const clarity = useClarityConfig()
+</script>
+
+<template>
+<UtilLink class="blog-header">
+	<div v-if="clarity.header.emojiTail" class="emoji-tail">
+		<span
+			v-for="(emoji, emojiIndex) in clarity.header.emojiTail"
+			:key="emojiIndex"
+			class="split-char"
+			:style="getFixedDelay(emojiIndex * .6 - 3)"
+			v-text="emoji"
+		/>
+	</div>
+
+	<NuxtImg
+		:src="clarity.header.logo"
+		class="blog-logo round-cobblestone"
+		:class="{ circle: clarity.header.showTitle }"
+		:alt="clarity.site.title"
+	/>
+
+	<div v-if="clarity.header.showTitle" class="blog-text">
+		<component :is="tag" class="header-title">
+			<span
+				v-for="(char, charIndex) in clarity.site.title"
+				:key="charIndex"
+				class="split-char"
+				:style="getFixedDelay((charIndex + 1) * .1)"
+				v-text="char"
+			/>
+		</component>
+
+		<div class="header-subtitle">
+			{{ clarity.header.subtitle }}
+		</div>
+	</div>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
+.blog-header {
+	contain: layout;
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+	position: relative;
+	margin: clamp(1rem, 2rem, 5vh) 1rem min(1rem, 5vh);
+	line-height: 1.4;
+	color: var(--c-text);
+	user-select: none;
+}
+
+.blog-logo {
+	height: 3em;
+
+	&.circle {
+		width: 3em;
+		border-radius: 50%;
+		box-shadow: var(--box-shadow-1), var(--box-shadow-3);
+	}
+}
+
+@font-face {
+	font-family: AlimamaFangYuanTi;
+	src: url("/fonts/AlimamaFangYuanTi.woff2");
+}
+
+.header-title {
+	font-family: AlimamaFangYuanTi, "Noto Sans SC", sans-serif;
+	font-size: 1.5em;
+	font-synthesis: none;
+	font-variation-settings: "wght" 600, "BEVL" 100;
+
+	> .split-char {
+		animation: 3.14s infinite alternate vf-weight, 2.72s infinite alternate vf-bevel;
+		animation-delay: var(--delay);
+		animation-play-state: paused;
+	}
+}
+
+.header-subtitle {
+	opacity: 0.5;
+	font-size: 0.8em;
+}
+
+@keyframes vf-weight {
+	0% { font-weight: 600; }
+	38.2% { font-weight: 300; }
+	100% { font-weight: 900; }
+}
+
+@keyframes vf-bevel {
+	from { font-variation-settings: "BEVL" 100; }
+	to { font-variation-settings: "BEVL" 1; }
+}
+
+.emoji-tail {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+	align-content: center;
+	justify-items: center;
+	position: absolute;
+	opacity: 0.2;
+	inset: 0;
+	font-size: 4rem;
+	transition: opacity 1s;
+	filter: blur(2px);
+	pointer-events: none;
+	z-index: -2;
+
+	> .split-char {
+		animation: 5s infinite alternate emoji-floating;
+		animation-delay: var(--delay);
+		animation-play-state: paused;
+	}
+}
+
+.blog-header:hover {
+	.emoji-tail {
+		opacity: 0.5;
+	}
+
+	.split-char {
+		animation-play-state: running;
+	}
+}
+
+@keyframes emoji-floating {
+	50% {
+		transform: translate(-12px, -4px) scale(1.2);
+		filter: blur(4px);
+	}
+
+	100% {
+		transform: translate(-4px, -12px) scale(0.9);
+		filter: blur(1px);
+	}
+}
+</style>

package/app/components/blog/BlogPanel.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+defineProps<{
+	hasAside?: boolean
+}>()
+
+const layoutStore = useLayoutStore()
+const { avoidTargets } = storeToRefs(layoutStore)
+
+const panelRef = useTemplateRef('blog-panel')
+const { transform } = useAvoidTransform(panelRef, avoidTargets)
+</script>
+
+<template>
+<div
+	id="blog-panel"
+	ref="blog-panel"
+	:class="{ 'has-active': layoutStore.state !== 'none' }"
+	:style="{ transform }"
+>
+	<button
+		v-if="hasAside"
+		class="toggle-aside widescreen-only"
+		:class="{ active: layoutStore.state === 'aside' }"
+		aria-label="切换侧边栏"
+		@click="layoutStore.toggle('aside')"
+	>
+		<Icon class="rtl-flip" name="tabler:align-right" />
+	</button>
+
+	<Icon v-show="false" name="tabler:layout-sidebar-filled" />
+	<button
+		class="toggle-sidebar mobile-only"
+		:class="{ active: layoutStore.state === 'sidebar' }"
+		aria-label="切换菜单"
+		@click="layoutStore.toggle('sidebar')"
+	>
+		<Icon class="rtl-flip" :name="layoutStore.state === 'sidebar' ? 'tabler:layout-sidebar-filled' : 'tabler:layout-sidebar'" />
+	</button>
+</div>
+</template>
+
+<style lang="scss" scoped>
+#blog-panel {
+	contain: paint;
+	position: fixed;
+	inset-inline-end: min(1rem, 5%);
+	bottom: min(2rem, 5%);
+	border-radius: 0.5rem;
+	background-color: var(--c-bg-a50);
+	backdrop-filter: blur(0.5rem);
+	font-size: 1.4rem;
+	transition: transform 0.1s;
+	z-index: var(--z-index-popover);
+
+	@media (max-height: $breakpoint-phone) {
+		display: flex;
+	}
+
+	&.has-active {
+		box-shadow: var(--box-shadow-1), var(--box-shadow-3);
+	}
+}
+
+button {
+	display: block;
+	padding: 0.5rem;
+	transition: all 0.2s;
+
+	&:hover {
+		background-color: var(--c-bg-a80);
+		color: var(--c-primary);
+	}
+
+	&.active {
+		background-color: var(--ld-bg-active);
+		color: var(--c-primary);
+	}
+}
+</style>

package/app/components/blog/BlogSidebar.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+const clarity = useClarityConfig()
+const layoutStore = useLayoutStore()
+const searchStore = useSearchStore()
+
+const { text } = useTextSelection()
+const debouncedSelection = refDebounced(text)
+</script>
+
+<template>
+<BlogMask
+	:show="layoutStore.state === 'sidebar'"
+	class="mobile-only"
+	@click="layoutStore.close()"
+/>
+
+<!-- 不能用 Transition 实现弹出收起动画，因为半宽屏状态始终显示 -->
+<aside id="blog-sidebar" :class="{ show: layoutStore.state === 'sidebar' }">
+	<BlogHeader class="sidebar-header" to="/" />
+
+	<nav class="sidebar-nav scrollcheck-y">
+		<div class="search-btn sidebar-nav-item gradient-card" @click="layoutStore.toggle('search')">
+			<Icon name="tabler:search" />
+			<span class="nav-text">{{ debouncedSelection || searchStore.word || '搜索' }}</span>
+			<Key class="keycut" code="K" cmd prevent @press="layoutStore.toggle('search')" />
+		</div>
+
+		<template v-for="(group, groupIndex) in clarity.nav" :key="groupIndex">
+			<h3 v-if="group.title">
+				{{ group.title }}
+			</h3>
+
+			<menu>
+				<li v-for="(item, itemIndex) in group.items" :key="itemIndex">
+					<UtilLink :to="item.url" class="sidebar-nav-item">
+						<Icon :name="item.icon" />
+						<span class="nav-text">{{ item.text }}</span>
+						<Icon v-if="isExtLink(item.url)" class="external-tip" name="tabler:arrow-up-right" />
+					</UtilLink>
+				</li>
+			</menu>
+		</template>
+	</nav>
+
+	<footer class="sidebar-footer">
+		<BlogThemeToggle />
+		<ZIconNavList :list="clarity.footer.iconNav" />
+	</footer>
+</aside>
+</template>
+
+<style lang="scss" scoped>
+#blog-sidebar {
+	display: flex;
+	flex-direction: column;
+	color: var(--c-text-2);
+
+	&:hover {
+		color: currentcolor;
+	}
+
+	@media (max-width: $breakpoint-mobile) {
+		position: fixed;
+		inset-inline-start: 0;
+		width: 320px;
+		max-width: 100%;
+		background-color: var(--ld-bg-blur);
+		backdrop-filter: blur(0.5rem);
+		color: currentcolor;
+		transform: var(--transform-start-far);
+		transition: transform 0.2s;
+		z-index: var(--z-index-popover);
+
+		&.show {
+			box-shadow: var(--box-shadow-1), var(--box-shadow-3);
+			transform: none;
+		}
+	}
+}
+
+.sidebar-nav {
+	flex-grow: 1;
+	padding: 0 5%;
+	font-size: 0.9em;
+
+	h3 {
+		margin: 2em 0 1em 1em;
+		font: inherit;
+		color: var(--c-text-2);
+	}
+
+	li {
+		margin: 0.5em 0;
+	}
+}
+
+.sidebar-nav-item {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+	padding: 0.5em 1em;
+	border-radius: 0.5em;
+	transition: all 0.2s;
+
+	&:hover,
+	&.router-link-active {
+		background-color: var(--c-bg-soft);
+		color: var(--c-text);
+	}
+
+	&.router-link-active::after {
+		content: "⦁";
+		width: 1em;
+		text-align: center;
+		color: var(--c-text-3);
+	}
+
+	> .iconify {
+		font-size: 1.5em;
+	}
+
+	> .nav-text {
+		flex-grow: 1;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	> .external-tip {
+		opacity: 0.5;
+		font-size: 1em;
+	}
+}
+
+.search-btn {
+	opacity: 0.5;
+	margin: 1rem 0;
+	outline: 2px solid var(--c-border);
+	outline-offset: -2px;
+	cursor: text;
+	user-select: none;
+
+	&:hover {
+		opacity: 1;
+		outline-color: transparent;
+		background-color: transparent;
+	}
+}
+
+.sidebar-footer {
+	--gap: clamp(0.5rem, 3vh, 1rem);
+
+	display: grid;
+	gap: var(--gap);
+	padding: var(--gap);
+	font-size: 0.8em;
+	text-align: center;
+	color: var(--c-text-2);
+}
+</style>