@windcoder/astro-theme-orchid 0.0.0-stage → 0.2.0

package/src/plugins/rehype-diagram.ts

@@ -0,0 +1,218 @@
+/**
+ * rehype 图表插件（M3b-b4，移植自 orchid-blog）
+ *
+ * - rehypeMermaid：div.mermaid-container → 构建期 beautiful-mermaid 渲染
+ *   light/dark 双静态 SVG（div.mermaid-svg-light/-dark 包裹，CSS 按主题显隐），
+ *   失败降级 .mermaid-error + pre.mermaid-fallback-code 源码展示，零客户端运行时
+ * - rehypePlantuml：div.plantuml-wrapper → img.plantuml-image（data-light-src/-dark-src），
+ *   客户端 plantuml-theme-switch.js 按主题切换 src、加载失败展示重试
+ * - rehypeDiagramPanZoom：为含图表的文章注入 diagram-panzoom.js（控制栏/拖拽/全屏）
+ *
+ * 偏差（相对 orchid）：
+ * - 客户端脚本改 readFileSync 模块顶层读入，不依赖 Vite ?raw 管线
+ * - panzoom 脚本仅对实际含图表的 tree 注入（orchid 无条件注入）
+ * - plantuml wrapper 不再生成随机 id（保证构建产物可复现）
+ */
+
+import { readFileSync } from "node:fs";
+import { renderMermaidSVG, THEMES } from "beautiful-mermaid";
+
+type Transformer = (tree: any, file: any) => void;
+
+/** 深度遍历辅助（与 rehype.ts 内 visit 同风格），fn 返回 'skip' 跳过子树 */
+function visit(node: any, fn: (n: any) => void | "skip") {
+	const children = node.children;
+	if (!Array.isArray(children)) return;
+	for (const child of children) {
+		if (fn(child) !== "skip") visit(child, fn);
+	}
+}
+
+const panzoomScript = readFileSync(
+	new URL("./scripts/diagram-panzoom.js", import.meta.url),
+	"utf8",
+);
+
+const plantumlSwitchScript = readFileSync(
+	new URL("./scripts/plantuml-theme-switch.js", import.meta.url),
+	"utf8",
+);
+
+/** 本 rehype tree 已注入过 panzoom 脚本（每篇文档最多一次） */
+const panzoomInjected = new WeakSet<object>();
+
+function hasClass(node: any, name: string): boolean {
+	const cls = node.properties?.className;
+	return Array.isArray(cls) && cls.includes(name);
+}
+
+function injectScript(tree: any, code: string) {
+	tree.children.push({
+		type: "element",
+		tagName: "script",
+		properties: {},
+		children: [{ type: "text", value: code }],
+	});
+}
+
+function injectPanzoom(tree: any) {
+	if (panzoomInjected.has(tree)) return;
+	panzoomInjected.add(tree);
+	injectScript(tree, panzoomScript);
+}
+
+export interface MermaidOptions {
+	lightTheme: string;
+	darkTheme: string;
+}
+
+export function rehypeMermaid(options: MermaidOptions): Transformer {
+	return (tree) => {
+		let found = false;
+		visit(tree, (node) => {
+			if (node.type !== "element" || node.tagName !== "div") return;
+			if (!hasClass(node, "mermaid-container")) return;
+			const code = String(node.properties?.["data-mermaid-code"] ?? "");
+			const wrapper: any = {
+				type: "element",
+				tagName: "div",
+				properties: { className: ["diagram-wrapper", "mermaid-wrapper"] },
+				children: [],
+			};
+			try {
+				const lightSvg = renderMermaidSVG(code, {
+					...THEMES[options.lightTheme],
+					padding: 20,
+				});
+				const darkSvg = renderMermaidSVG(code, {
+					...THEMES[options.darkTheme],
+					padding: 20,
+				});
+				wrapper.children.push(
+					{
+						type: "element",
+						tagName: "div",
+						properties: { className: ["mermaid-svg-light"] },
+						children: [{ type: "raw", value: lightSvg }],
+					},
+					{
+						type: "element",
+						tagName: "div",
+						properties: { className: ["mermaid-svg-dark"] },
+						children: [{ type: "raw", value: darkSvg }],
+					},
+				);
+				node.tagName = "div";
+				node.properties = {
+					className: ["diagram-container", "mermaid-diagram-container"],
+				};
+				node.children = [wrapper];
+			} catch (err) {
+				const message = err instanceof Error ? err.message : String(err);
+				const preview = code.length > 200 ? `${code.slice(0, 200)}…` : code;
+				console.error(`[theme] Mermaid 渲染失败（${message}）：\n${preview}`);
+				node.properties = {
+					className: [
+						"diagram-container",
+						"mermaid-diagram-container",
+						"mermaid-error",
+					],
+				};
+				node.children = [
+					{
+						type: "element",
+						tagName: "p",
+						properties: {},
+						children: [
+							{ type: "text", value: "Mermaid 图表渲染失败，已展示源码：" },
+						],
+					},
+					{
+						type: "element",
+						tagName: "pre",
+						properties: { className: ["mermaid-fallback-code"] },
+						children: [
+							{
+								type: "element",
+								tagName: "code",
+								properties: {},
+								children: [{ type: "text", value: code }],
+							},
+						],
+					},
+				];
+			}
+			found = true;
+			return "skip";
+		});
+		if (found) injectPanzoom(tree);
+	};
+}
+
+export function rehypePlantuml(): Transformer {
+	return (tree) => {
+		let found = false;
+		visit(tree, (node) => {
+			if (node.type !== "element" || node.tagName !== "div") return;
+			if (!hasClass(node, "plantuml-wrapper")) return;
+			const lightSrc = String(node.properties?.["data-light-src"] ?? "");
+			const darkSrc = String(node.properties?.["data-dark-src"] ?? lightSrc);
+			const alt = String(
+				node.properties?.["data-plantuml-alt"] || "PlantUML diagram",
+			);
+			const img = {
+				type: "element",
+				tagName: "img",
+				properties: {
+					className: ["plantuml-image"],
+					src: lightSrc,
+					alt,
+					"data-light-src": lightSrc,
+					"data-dark-src": darkSrc,
+					loading: "lazy",
+					decoding: "async",
+				},
+				children: [],
+			};
+			node.tagName = "div";
+			node.properties = {
+				className: ["diagram-container", "plantuml-diagram-container"],
+			};
+			node.children = [
+				{
+					type: "element",
+					tagName: "div",
+					properties: { className: ["plantuml-wrapper"] },
+					children: [img],
+				},
+			];
+			found = true;
+			return "skip";
+		});
+		if (found) {
+			injectPanzoom(tree);
+			// PlantUML 主题切换/失败重试脚本（与 panzoom 互相独立，各自防重入）
+			injectScript(tree, plantumlSwitchScript);
+		}
+	};
+}
+
+/** 单独挂载时的兜底：扫描 tree 中任意图表容器并注入 panzoom 脚本 */
+export function rehypeDiagramPanZoom(): Transformer {
+	return (tree) => {
+		if (panzoomInjected.has(tree)) return;
+		let found = false;
+		visit(tree, (node) => {
+			if (found) return "skip";
+			if (
+				node.type === "element" &&
+				node.tagName === "div" &&
+				hasClass(node, "diagram-container")
+			) {
+				found = true;
+				return "skip";
+			}
+		});
+		if (found) injectPanzoom(tree);
+	};
+}

package/src/plugins/rehype-ec-vt-rerun.ts

@@ -0,0 +1,80 @@
+/**
+ * §4.74：Astro ClientRouter（View Transitions）下 EC 社区折叠插件的换页失效修复。
+ * §4.76：二次根因修正——data-astro-rerun 确实会重执行脚本，但被脚本自身的
+ * window 级幂等守卫拦截（早退），新页按钮依然无监听；首版修复曾试图把守卫
+ * 标志位改名规避，实测仍有同会话跨页残留（写作指南页无折叠块但注入脚本并
+ * 置标志，再 VT 进快速开始时读标志早退），最终改为整段删除守卫与赋值。
+ *
+ * 现象：经系列导航等 VT 换页进入新文章后，折叠代码块的展开按钮点击无效。
+ *
+ * 根因（两层）：
+ * 1. expressive-code-collapsible@0.1.0 的交互脚本只在 DOMContentLoaded
+ *    绑定一次，且 MutationObserver 闭包引用换页前的旧 body——ClientRouter
+ *    swap 整体替换 body 后：内联脚本不重新执行、observer 观察的旧 body 已
+ *    脱离文档，新页面的 .ec-collapse__toggle 无 click 监听。
+ *    （EC core 官方脚本已用 astro:page-load 自适配 VT，copy 按钮等不受影响。）
+ *    → 修复：标记 data-astro-rerun 让 ClientRouter swap 时重执行该脚本。
+ * 2. §4.76 两轮实测发现重执行仍无效：脚本首两行是 window 级早退守卫
+ *    （if (window.ecCollapsibleInit) return; window.ecCollapsibleInit = true;），
+ *    ClientRouter 换页只换 body 不换 window——标志位在同一浏览器会话内跨页
+ *    存活：任何注入过该脚本的页面（含无折叠代码块的文章，脚本照注入置位）
+ *    之后 VT 进入有折叠块的文章时，重执行被早退拦截，绑定整体短路。
+ *    → 修复：脚本文本中整段删除该守卫与标志赋值，每次执行都完整初始化。
+ *      安全性：按钮级 dataset.init 守卫防重复绑定；MutationObserver 每次重
+ *      建并观察当前 body，旧 observer 附着已脱离文档的旧 body，随其 GC；
+ *      data-astro-rerun 每次 swap 恰执行一次、full load 一次，无同 DOM 重入；
+ *      离开含折叠块的页面后脚本不存在、不执行，无额外开销。
+ *
+ * 仅含折叠代码块的页面才有该脚本；若上游插件改守卫名或改结构，删除正则
+ * 不命中即退化为 §4.74 行为（仅重执行，不删守卫），不会更糟。
+ */
+
+/** 内联脚本特征：社区折叠插件按钮选择器，官方 EC 脚本不含此串 */
+const COLLAPSIBLE_SCRIPT_MARKER = "ec-collapse__toggle";
+
+/** window 级早退守卫：if (window.ecCollapsibleInit) return; （含前导空白） */
+const GUARD_RE = /\s*if\s*\(\s*window\.ecCollapsibleInit\s*\)\s*return\s*;?/;
+/** 守卫标志赋值：window.ecCollapsibleInit = true; （含前导空白） */
+const FLAG_SET_RE = /\s*window\.ecCollapsibleInit\s*=\s*true\s*;?/;
+
+interface HastNode {
+	type: string;
+	tagName?: string;
+	properties?: Record<string, unknown>;
+	children?: HastNode[];
+	value?: unknown;
+}
+
+function scriptText(node: HastNode): string {
+	return (node.children ?? [])
+		.map((child) => (typeof child.value === "string" ? child.value : ""))
+		.join("");
+}
+
+function walk(node: HastNode): void {
+	for (const child of node.children ?? []) {
+		if (child.type !== "element") continue;
+		if (
+			child.tagName === "script" &&
+			!child.properties?.src &&
+			scriptText(child).includes(COLLAPSIBLE_SCRIPT_MARKER)
+		) {
+			child.properties["data-astro-rerun"] = true;
+			// 删除 window 级早退守卫（§4.76 根因 2）：守卫标志在 ClientRouter
+			// 换页间随 window 存活，任何先访问过含该脚本页面的会话都会让后续
+			// 重执行早退短路；删除后每次执行都完整绑定新页按钮
+			for (const text of child.children ?? []) {
+				if (typeof text.value === "string") {
+					text.value = text.value
+						.replace(GUARD_RE, "")
+						.replace(FLAG_SET_RE, "");
+				}
+			}
+		}
+		walk(child);
+	}
+}
+
+export function rehypeEcVtRerun() {
+	return (tree: HastNode) => walk(tree);
+}

package/src/plugins/rehype-email.ts

@@ -0,0 +1,75 @@
+/**
+ * 邮箱防爬（M3b-b4，移植自 orchid-blog）
+ *
+ * 构建期把 mailto: 链接的地址编码进 data-encoded-email，href 置为 '#'，
+ * 并内联一段 onclick 解码脚本：点击时还原地址 → 回写 href → 延时补一次点击。
+ * 爬虫不执行点击，拿不到明文邮箱；解码逻辑随属性内联，无需额外客户端资源。
+ *
+ * 偏差说明：orchid 会向 head 注入占位样式，本主题统一并入 global.css
+ * （a[data-encoded-email] 光标提示），插件保持纯 DOM 变换。
+ */
+
+type Transformer = (tree: any, file: any) => void;
+
+/** 深度遍历辅助（与 rehype.ts 内 visit 同风格），fn 返回 'skip' 跳过子树 */
+function visit(node: any, fn: (n: any) => void | "skip") {
+	const children = node.children;
+	if (!Array.isArray(children)) return;
+	for (const child of children) {
+		if (fn(child) !== "skip") visit(child, fn);
+	}
+}
+
+export interface EmailProtectionOptions {
+	/** base64：兼容性最好（btoa 仅支持 Latin1，超集地址跳过保护保持原样）；rot13：零 API 依赖 */
+	method: "base64" | "rot13";
+}
+
+const encodeBase64 = (value: string): string | null => {
+	try {
+		// Buffer 在 Node 构建期可用；btoa 遇非 Latin1 会抛错，统一 try/catch 兜底
+		return typeof Buffer !== "undefined"
+			? Buffer.from(value, "utf8").toString("base64")
+			: btoa(value);
+	} catch {
+		return null;
+	}
+};
+
+const encodeRot13 = (value: string): string =>
+	value.replace(/[a-zA-Z]/g, (c) => {
+		const base = c <= "Z" ? 65 : 97;
+		return String.fromCharCode(((c.charCodeAt(0) - base + 13) % 26) + base);
+	});
+
+/** 点击时还原地址并补一次点击（压缩成单行内联，this 为链接元素自身） */
+const ONCLICK_TEMPLATE = (method: "base64" | "rot13") => {
+	const decode =
+		method === "base64"
+			? "function(e){return decodeURIComponent(escape(atob(e)))}"
+			: 'function(e){return e.replace(/[a-zA-Z]/g,function(c){var b=c.charCodeAt(0),s=c<="Z"?65:97;return String.fromCharCode((b-s+13)%26+s)})}';
+	return `(function(){var e=this.getAttribute('data-encoded-email');if(!e)return;this.removeAttribute('data-encoded-email');this.setAttribute('href','mailto:'+(${decode})(e));var a=this;setTimeout(function(){a.click()},0)}).call(this);return false`
+		.replace(/\s+/g, " ")
+		.trim();
+};
+
+export function rehypeEmailProtection(
+	options: EmailProtectionOptions,
+): Transformer {
+	const encode = options.method === "base64" ? encodeBase64 : encodeRot13;
+	const onclick = ONCLICK_TEMPLATE(options.method);
+	return (tree) => {
+		visit(tree, (node) => {
+			if (node.type !== "element" || node.tagName !== "a") return;
+			const href = String(node.properties?.href ?? "");
+			if (!href.toLowerCase().startsWith("mailto:")) return;
+			const address = href.slice("mailto:".length);
+			const encoded = encode(address);
+			// 编码失败（非 Latin1 的 base64 场景）保持原链接，不做半吊子保护
+			if (!encoded) return;
+			node.properties["data-encoded-email"] = encoded;
+			node.properties.href = "#";
+			node.properties.onclick = onclick;
+		});
+	};
+}

package/src/plugins/rehype-github-card.ts

@@ -0,0 +1,114 @@
+/**
+ * ::github{repo="owner/repo"} → GitHub 仓库卡片（A2，移植自参考模板
+ * rehype-component-github-card）
+ *
+ * remarkDirectives 已把 leaf 指令转成 <github repo="…"> 标签；本插件将其替换为
+ * 卡片结构 + 内联脚本：客户端 fetch api.github.com 填充描述/stars/forks/
+ * license/头像；fetch-waiting（骨架 pulsate 动画）→ 完成态 / fetch-error 两态。
+ * 数据获取发生在读者浏览器端，构建期零请求。
+ */
+import { h } from "hastscript";
+
+function githubCard(properties: any, children: any[]): any {
+	if (Array.isArray(children) && children.length !== 0)
+		return h(
+			"div",
+			{ class: "hidden" },
+			`Invalid directive. ("github" directive must be leaf type '::github{repo="owner/repo"}')`,
+		);
+
+	const repo = String(properties.repo ?? "");
+	if (!repo.includes("/"))
+		return h(
+			"div",
+			{ class: "hidden" },
+			`Invalid repository. ("repo" attribute must be in the format "owner/repo")`,
+		);
+
+	// 每卡片随机 id 防同页多卡片串数据（碰撞概率可忽略）
+	const cardUuid = `GC${Math.random().toString(36).slice(-6)}`;
+
+	const nAvatar = h(`div#${cardUuid}-avatar`, { class: "gc-avatar" });
+	const nLanguage = h(
+		`span#${cardUuid}-language`,
+		{ class: "gc-language" },
+		"Waiting...",
+	);
+
+	const nTitle = h("div", { class: "gc-titlebar" }, [
+		h("div", { class: "gc-titlebar-left" }, [
+			h("div", { class: "gc-owner" }, [
+				nAvatar,
+				h("div", { class: "gc-user" }, repo.split("/")[0]),
+			]),
+			h("div", { class: "gc-divider" }, "/"),
+			h("div", { class: "gc-repo" }, repo.split("/")[1]),
+		]),
+		h("div", { class: "github-logo" }),
+	]);
+
+	const nDescription = h(
+		`div#${cardUuid}-description`,
+		{ class: "gc-description" },
+		"Waiting for api.github.com...",
+	);
+
+	const nStars = h(`div#${cardUuid}-stars`, { class: "gc-stars" }, "00K");
+	const nForks = h(`div#${cardUuid}-forks`, { class: "gc-forks" }, "0K");
+	const nLicense = h(`div#${cardUuid}-license`, { class: "gc-license" }, "0K");
+
+	const nScript = h(
+		`script#${cardUuid}-script`,
+		{ type: "text/javascript" },
+		`
+      fetch('https://api.github.com/repos/${repo}', { referrerPolicy: "no-referrer" }).then(response => response.json()).then(data => {
+        document.getElementById('${cardUuid}-description').innerText = data.description?.replace(/:[a-zA-Z0-9_]+:/g, '') || "Description not set";
+        document.getElementById('${cardUuid}-language').innerText = data.language;
+        document.getElementById('${cardUuid}-forks').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.forks).replaceAll("\\u202f", '');
+        document.getElementById('${cardUuid}-stars').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.stargazers_count).replaceAll("\\u202f", '');
+        const avatarEl = document.getElementById('${cardUuid}-avatar');
+        avatarEl.style.backgroundImage = 'url(' + data.owner.avatar_url + '&s=32' + ')';
+        avatarEl.style.backgroundColor = 'transparent';
+        document.getElementById('${cardUuid}-license').innerText = data.license?.spdx_id || "no-license";
+        document.getElementById('${cardUuid}-card').classList.remove("fetch-waiting");
+      }).catch(err => {
+        document.getElementById('${cardUuid}-card')?.classList.add("fetch-error");
+      })
+    `,
+	);
+
+	return h(
+		`a#${cardUuid}-card`,
+		{
+			class: "card-github fetch-waiting",
+			href: `https://github.com/${repo}`,
+			target: "_blank",
+		},
+		[
+			nTitle,
+			nDescription,
+			h("div", { class: "gc-infobar" }, [nStars, nForks, nLicense, nLanguage]),
+			nScript,
+		],
+	);
+}
+
+export function rehypeGithubCard(): any {
+	return (tree: any) => {
+		const walk = (node: any) => {
+			if (!Array.isArray(node.children)) return;
+			for (let i = 0; i < node.children.length; i++) {
+				const child = node.children[i];
+				if (child.type === "element" && child.tagName === "github") {
+					node.children[i] = githubCard(
+						child.properties ?? {},
+						child.children ?? [],
+					);
+				} else {
+					walk(child);
+				}
+			}
+		};
+		walk(tree);
+	};
+}