clarity-theme 0.1.0

package/public/assets/atom.css

@@ -0,0 +1,274 @@
+:root {
+	--xsl-bg-1: #F3F7F9;
+	--xsl-bg-alt: #FFF;
+	--xsl-text-1: #333;
+	--xsl-text-2: #666;
+	--xsl-text-3: #999;
+	--xsl-shadow-1: 0 0.1em 0.2em rgb(0 0 0 / 10%);
+	--xsl-shadow-2: 0 0.4em 0.5em rgb(0 0 0 / 15%);
+
+	background-color: var(--xsl-bg-1);
+	font-family: Inter, sans-serif;
+	line-height: 1.6;
+	text-autospace: normal;
+	color: var(--xsl-text-1);
+	color-scheme: light dark;
+	transition: background-color 0.3s, color 0.1s;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--xsl-bg-1: #1E1E1E;
+		--xsl-bg-alt: #333;
+		--xsl-text-1: #EEE;
+		--xsl-text-2: #AAA;
+		--xsl-text-3: #666;
+		--xsl-shadow-1: 0 0.1em 0.2em rgb(255 255 255 / 10%);
+		--xsl-shadow-2: 0 0.4em 0.5em rgb(255 255 255 / 15%);
+
+		color-scheme: dark;
+	}
+}
+
+body {
+	max-width: 800px;
+	margin: 0 auto;
+	padding: 20px;
+}
+
+@font-face {
+	font-family: AlimamaFangYuanTi;
+	src: url("/fonts/AlimamaFangYuanTi.woff2");
+}
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+p {
+	margin: 0.5em 0;
+}
+
+blockquote {
+	margin: 1em 0;
+	padding: 0 0.8em;
+	border-inline-start: 0.2em solid var(--xsl-text-3);
+}
+
+code, pre {
+	text-autospace: none;
+}
+
+.logo-header {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+	margin: 0.5em 0;
+	font-size: clamp(1em, 5vw, 1.5em);
+	line-height: 1.4;
+}
+
+.logo {
+	height: 2.4em;
+	border-radius: 50%;
+	corner-shape: superellipse(1.2);
+	box-shadow: var(--xsl-shadow-1);
+}
+
+.title {
+	font-family: AlimamaFangYuanTi, sans-serif;
+	font-variation-settings: "wght" 600, "BEVL" 100;
+	font-size: 1.2em;
+}
+
+.subtitle {
+	font-size: 0.8em;
+	color: var(--xsl-text-2);
+}
+
+.entry {
+	contain: paint;
+	display: block;
+	margin: 1em 0;
+	border-radius: 0.8em;
+	box-shadow: var(--xsl-shadow-1);
+	background-color: var(--xsl-bg-alt);
+	transition: all 0.2s;
+}
+
+.entry > article {
+	display: grid;
+	gap: 0.5em;
+	padding: 1em;
+}
+
+.entry:hover {
+	box-shadow: var(--xsl-shadow-2);
+	transform: translateY(-0.1em);
+}
+
+.entry:hover > .entry-image {
+	opacity: 1;
+}
+
+.entry-title {
+	font-size: 1.2em;
+	color: var(--xsl-text-1);
+}
+
+.entry-meta {
+	font-size: 0.9em;
+	color: var(--xsl-text-2);
+}
+
+.entry-summary {
+	font-size: 0.9em;
+	color: var(--xsl-text-2);
+}
+
+.entry-summary:empty {
+	display: none;
+}
+
+.entry-image {
+	position: absolute;
+	opacity: 0.8;
+	top: 0;
+	right: 0;
+	width: min(320px, 50%);
+	height: 100%;
+	margin: 0;
+	mask-image: linear-gradient(to right, transparent, #FFF 50%);
+	transition: opacity 0.2s;
+	object-fit: cover;
+}
+
+img {
+	contain: layout;
+	display: inline-block;
+
+	&::before {
+		position: absolute;
+		inset: 0;
+	}
+
+	&::before {
+		content: attr(alt);
+		display: grid;
+		place-content: center;
+		overflow: visible;
+		padding: 0.5em;
+		background-color: var(--xsl-bg-alt);
+		font-size: 1.5em;
+		font-weight: bold;
+		line-height: 1.2;
+		word-break: normal;
+		text-align: center;
+		text-shadow: none;
+		color: var(--xsl-text-3);
+	}
+}
+
+.entry-image + article {
+	position: relative;
+	width: 60%;
+}
+
+@media (max-width: 600px) {
+	.entry-image {
+		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);
+	}
+
+	.entry-image + article {
+		width: auto;
+	}
+}
+
+.entry-content-container {
+	display: none;
+}
+
+.entry-content-container:target {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: fixed;
+	inset: 0;
+	z-index: 1;
+}
+
+.entry-content {
+	position: relative;
+	overflow: auto;
+	max-width: min(80%, 50rem);
+	max-height: 80%;
+	padding: 1.5em 2em;
+	border-radius: 0.8em;
+	box-shadow: var(--xsl-shadow-2);
+	background-color: var(--xsl-bg-1);
+}
+
+.entry-content > figcaption {
+	margin-bottom: 1em;
+	font-size: 1.2em;
+	font-weight: bold;
+	text-align: center;
+}
+
+.entry-content img {
+	height: auto;
+	max-width: 100%;
+	border-radius: 0.2em;
+}
+
+.entry-content-close {
+	position: absolute;
+	top: 1em;
+	right: 1em;
+	font-size: 2em;
+	line-height: 1;
+	color: white;
+}
+
+.entry-content-close::before {
+	content: "";
+	position: fixed;
+	inset: 0;
+	background-color: rgb(0 0 0 / 70%);
+	cursor: default;
+	z-index: -2;
+}
+
+.view-full {
+	position: fixed;
+	bottom: 1em;
+	left: 50%;
+	padding: 0.5em 1em;
+	border-radius: 0.8em;
+	background-color: var(--xsl-bg-alt);
+	font-size: 1.2em;
+	font-weight: bold;
+	text-align: center;
+	color: var(--xsl-text-1);
+	transform: translateX(-50%);
+}
+
+footer {
+	margin-top: 2em;
+	font-size: 0.8em;
+	text-align: center;
+	color: var(--xsl-text-2);
+}

package/public/assets/atom.xsl

@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom">
+	<xsl:output method="html" indent="yes" />
+
+	<xsl:template match="/">
+		<html lang="{atom:feed/atom:language}">
+
+		<head>
+			<meta charset="UTF-8" />
+			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+			<title><xsl:value-of select="atom:feed/atom:title" /></title>
+			<link rel="stylesheet" href="/assets/atom.css" />
+			<link rel="icon" href="{atom:feed/atom:icon}" />
+			<script>
+				document.addEventListener('DOMContentLoaded', () => {
+					document.querySelectorAll('time').forEach((time) => {
+						const dateTime = new Date(time.dateTime);
+						if (!Number.isNaN(dateTime.getTime())) {
+							time.textContent = dateTime.toLocaleDateString();
+							time.title = dateTime.toLocaleString(undefined, { timeZoneName: 'long' });
+						}
+					});
+				});
+			</script>
+		</head>
+
+		<body>
+			<header class="logo-header">
+				<img class="logo" src="{atom:feed/atom:logo}" alt="" />
+				<div>
+					<h1 class="title"><xsl:value-of select="atom:feed/atom:title" /></h1>
+					<div class="subtitle"><xsl:value-of select="atom:feed/atom:subtitle" /></div>
+				</div>
+			</header>
+
+			<blockquote>
+				<p>本页面是 Atom 订阅源，可直接被订阅。</p>
+				<p class="description"><xsl:value-of select="atom:feed/atom:description" /></p>
+			</blockquote>
+
+			<main>
+				<xsl:apply-templates select="atom:feed/atom:entry" />
+			</main>
+
+			<footer>
+				<xsl:value-of select="atom:feed/atom:rights" />
+				<br />
+				由 <xsl:value-of select="atom:feed/atom:generator" /> 生成
+			</footer>
+		</body>
+
+		</html>
+	</xsl:template>
+
+	<xsl:template match="atom:entry">
+		<a href="#{atom:id}" class="entry">
+			<xsl:variable name="img-src"
+				select="substring-before(substring-after(substring-after(atom:content, '&lt;img'), 'src=&quot;'), '&quot;')" />
+			<xsl:if test="$img-src">
+				<img class="entry-image" src="{$img-src}" alt="{atom:title}" loading="lazy" />
+			</xsl:if>
+
+			<article>
+				<h2 class="entry-title">
+					<xsl:value-of select="atom:title" />
+				</h2>
+
+				<xsl:if test="atom:summary">
+					<div class="entry-summary">
+						<xsl:value-of select="atom:summary" />
+					</div>
+				</xsl:if>
+
+				<div class="entry-meta">
+					发布于
+					<time datetime="{atom:published}">
+						<xsl:value-of select="atom:published" />
+					</time>
+
+					<xsl:if test="atom:updated and atom:updated != atom:published">
+						· 更新于
+						<time datetime="{atom:updated}">
+							<xsl:value-of select="atom:updated" />
+						</time>
+					</xsl:if>
+
+					<xsl:if test="atom:category">
+						·
+						<xsl:for-each select="atom:category">
+							<xsl:value-of select="@term" />
+						</xsl:for-each>
+					</xsl:if>
+				</div>
+			</article>
+		</a>
+
+		<xsl:if test="atom:content">
+			<section class="entry-content-container" id="{atom:id}">
+				<a class="entry-content-close" href="#">×</a>
+				<figure class="entry-content">
+					<figcaption>
+						<xsl:value-of select="atom:title" />
+					</figcaption>
+					<xsl:value-of select="atom:content" disable-output-escaping="yes" />
+				</figure>
+			</section>
+		</xsl:if>
+	</xsl:template>
+
+</xsl:stylesheet>

package/remark-plugins/rehype-meta-slots.d.mts

@@ -0,0 +1 @@
+export * from './rehype-meta-slots.ts'

package/remark-plugins/rehype-meta-slots.mjs

@@ -0,0 +1,49 @@
+/**
+ * rehype-meta-slots 运行时实现（JS）。
+ * 类型真源在同目录 .ts；@nuxt/content 以 Node 原生方式加载插件，
+ * 不允许 node_modules 内的 TS 文件（TS 剥离限制），因此运行时必须是 .mjs。
+ */
+export function fromHast(node) {
+	return {
+		props: node.properties,
+		type: 'minimark',
+		value: node.children.map(hastToMinimarkNode).filter(v => v !== undefined),
+	}
+}
+
+function hastToMinimarkNode(input) {
+	if (input.type === 'comment' || input.type === 'doctype') {
+		return undefined
+	}
+	if (input.type === 'text' || input.type === 'raw') {
+		return input.value
+	}
+
+	if (input.tagName === 'code' && input.properties?.className && input.properties.className.length === 0) {
+		delete input.properties.className
+	}
+
+	return [
+		input.tagName,
+		input.properties || {},
+		...(input.children || []).map(hastToMinimarkNode).filter(v => v !== undefined),
+	]
+}
+
+export default function rehypeMetaSlots() {
+	return (tree, file) => {
+		file.data.slots ??= {}
+
+		for (let i = 0; i < tree.children.length; i++) {
+			const node = tree.children[i]
+
+			if (node.type === 'element' && node.tagName.startsWith('meta-')) {
+				const metaName = node.tagName.slice('meta-'.length)
+				file.data.slots[metaName] = fromHast(node)
+
+				tree.children.splice(i, 1)
+				i--
+			}
+		}
+	}
+}

package/remark-plugins/rehype-meta-slots.ts

@@ -0,0 +1,58 @@
+import type { Element, Properties, Root, RootContent } from 'hast'
+import type { MinimarkNode, MinimarkTree } from 'minimark'
+import type { VFile } from 'vfile'
+
+export interface MetaSlotsTree extends MinimarkTree {
+	props?: Properties
+}
+
+declare module 'vfile' {
+	interface DataMap {
+		slots?: Record<string, MetaSlotsTree>
+	}
+}
+
+export function fromHast(node: Element): MetaSlotsTree {
+	return {
+		props: node.properties,
+		type: 'minimark',
+		value: node.children.map(hastToMinimarkNode).filter(v => v !== undefined),
+	}
+}
+
+function hastToMinimarkNode(input: RootContent): MinimarkNode | undefined {
+	if (input.type === 'comment' || input.type === 'doctype') {
+		return undefined
+	}
+	if (input.type === 'text' || input.type === 'raw') {
+		return input.value
+	}
+
+	if (input.tagName === 'code' && input.properties?.className && (input.properties.className as string[]).length === 0) {
+		delete input.properties.className
+	}
+
+	return [
+		input.tagName,
+		input.properties || {},
+		...(input.children || []).map(hastToMinimarkNode).filter(v => v !== undefined),
+	]
+}
+
+export default function rehypeMetaSlots() {
+	return (tree: Root, file: VFile) => {
+		file.data.slots ??= {}
+
+		for (let i = 0; i < tree.children.length; i++) {
+			const node = tree.children[i]!
+
+			if (node.type === 'element' && node.tagName.startsWith('meta-')) {
+				const metaName = node.tagName.slice('meta-'.length)
+				file.data.slots[metaName] = fromHast(node)
+
+				tree.children.splice(i, 1)
+				i--
+			}
+		}
+	}
+}

package/remark-plugins/remark-code-component.d.mts

@@ -0,0 +1 @@
+export * from './remark-code-component.ts'

package/remark-plugins/remark-code-component.mjs

@@ -0,0 +1,25 @@
+import { visit } from 'unist-util-visit'
+
+/**
+ * remark-code-component 运行时实现（JS）。
+ * 类型真源在同目录 .ts；@nuxt/content 以 Node 原生方式加载插件，
+ * 不允许 node_modules 内的 TS 文件（TS 剥离限制），因此运行时必须是 .mjs。
+ */
+export default function remarkCodeComponent(components = {}) {
+	return (tree) => {
+		visit(tree, 'code', (node, index, parent) => {
+			const options = components[node.lang ?? '']
+			if (!options || !parent || index === undefined)
+				return
+
+			parent.children.splice(index, 1, {
+				type: 'codeComponent',
+				children: [],
+				data: {
+					hName: options.component,
+					hProperties: { [options.prop]: node.value },
+				},
+			})
+		})
+	}
+}

package/remark-plugins/remark-code-component.ts

@@ -0,0 +1,41 @@
+import type { Parent, Root } from 'mdast'
+import { visit } from 'unist-util-visit'
+
+interface CodeComponentNode extends Parent {
+	type: 'codeComponent'
+}
+
+declare module 'mdast' {
+	interface RootContentMap {
+		codeComponent: CodeComponentNode
+	}
+}
+
+interface CodeComponent {
+	/** 渲染该语言代码块的组件 */
+	component: string
+	/** 组件上接收代码内容的属性 */
+	prop: string
+}
+
+/** 代码块语言到组件的映射 */
+export type CodeComponents = Record<string, CodeComponent>
+
+export default function remarkCodeComponent(components: CodeComponents = {}) {
+	return (tree: Root) => {
+		visit(tree, 'code', (node, index, parent) => {
+			const options = components[node.lang ?? '']
+			if (!options || !parent || index === undefined)
+				return
+
+			parent.children.splice(index, 1, {
+				type: 'codeComponent',
+				children: [],
+				data: {
+					hName: options.component,
+					hProperties: { [options.prop]: node.value },
+				},
+			})
+		})
+	}
+}

package/server/api/stats.get.ts

@@ -0,0 +1,109 @@
+import type { ClarityContentRow } from '../../shared/types/content'
+import { queryCollection } from '@nuxt/content/server'
+import { toZonedTemporal } from '../../shared/utils/time'
+
+interface StatsEntry {
+	posts: number
+	words: number
+}
+
+interface CategoryEntry {
+	name: string
+	posts: number
+	children?: CategoryEntry[]
+}
+
+export default defineEventHandler(async (event) => {
+	const { site, stats: statsConfig, features } = useClarityServerConfig()
+	if (!features.stats) {
+		throw createError({ statusCode: 404, statusMessage: 'Stats output is disabled' })
+	}
+
+	const stats = {
+		total: { posts: 0, words: 0 },
+		annual: <Record<number, StatsEntry>>{},
+		categories: <CategoryEntry[]>[],
+		tags: <string[]>[],
+	}
+
+	const existedPaths = new Set<string>()
+
+	const query = queryCollection(event, 'content' as never)
+	if (statsConfig.includePaths.length) {
+		// @nuxt/content 3.16+ 的 orWhere 组内条件以 OR 连接：
+		// 多个 includePaths 必须取并集（posts/% + notes/% → 两类文章都计入）。
+		query.orWhere((group) => {
+			for (const path of statsConfig.includePaths) {
+				group.where('stem', 'LIKE', path)
+			}
+		})
+	}
+	const posts = await query.all() as ClarityContentRow[]
+
+	const findOrCreateCategory = (
+		name: string,
+		tree: CategoryEntry[],
+	): CategoryEntry => {
+		let category = tree.find(entry => entry.name === name)
+		if (!category) {
+			category = { name, posts: 0 }
+			tree.push(category)
+		}
+		return category
+	}
+
+	for (const post of posts) {
+		// 重复路径检测
+		if (existedPaths.has(post.path))
+			console.warn('文章存在重复路径', post.path)
+		existedPaths.add(post.path)
+
+		// 文章/总字数计数
+		stats.total.posts++
+		stats.total.words += post.readingTime.words
+
+		// 年文章/年字数计数
+		try {
+			const year = toZonedTemporal(post.date || '', site.timezone).year
+			if (!stats.annual[year]) {
+				stats.annual[year] = { posts: 0, words: 0 }
+			}
+
+			stats.annual[year].posts++
+			stats.annual[year].words += post.readingTime.words
+		}
+		catch (e) {
+			console.warn(post.date
+				? `${post.path} 文章日期 ${post.date} 格式错误: "${e}"`
+				: `${post.path} 文章日期为空`)
+		}
+
+		// 分类文章计数
+		const categories = post.categories || []
+		let currentLevel = stats.categories
+
+		for (const [index, categoryName] of categories.entries()) {
+			if (typeof categoryName !== 'string')
+				continue
+
+			const category = findOrCreateCategory(categoryName, currentLevel)
+			category.posts++
+
+			if (index < categories.length - 1) {
+				if (!category.children)
+					category.children = []
+				currentLevel = category.children
+			}
+		}
+
+		// 标签统计
+		const tags = post.tags || []
+		tags.filter((tag: any): tag is string => typeof tag === 'string')
+			.forEach((tag: string) => {
+				if (!stats.tags.includes(tag))
+					stats.tags.push(tag)
+			})
+	}
+
+	return stats
+})