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

package/src/plugins/remark-diagram.ts

@@ -0,0 +1,78 @@
+/**
+ * remark 图表标记插件（M3b-b4，移植自 orchid-blog）
+ *
+ * - remarkMermaid：```mermaid 代码块 → 自定义节点 type='mermaid'，
+ *   data.hName/hProperties 落为 <div class="mermaid-container" data-mermaid-code="…">，
+ *   hChildren 保留源码文本（构建期渲染失败时可降级展示），value 置空避免重复输出
+ * - remarkPlantuml：```plantuml 代码块 → <div class="plantuml-wrapper">，
+ *   双主题 URL（injectTheme → pako deflate → PlantUML base64url）预编码进 data 属性，
+ *   构建期零请求，主题切换由客户端换 src 完成
+ */
+
+import { buildUrl, encodePlantUML, injectTheme } from "./plantuml-encoder.js";
+
+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 function remarkMermaid(): Transformer {
+	return (tree) => {
+		visit(tree, (node) => {
+			if (node.type !== "code") return;
+			if (String(node.lang ?? "").toLowerCase() !== "mermaid") return;
+			const code = String(node.value ?? "");
+			node.type = "mermaid";
+			node.data = { ...node.data };
+			node.data.hName = "div";
+			node.data.hProperties = {
+				className: ["mermaid-container"],
+				"data-mermaid-code": code,
+			};
+			node.data.hChildren = [{ type: "text", value: code }];
+			node.value = undefined;
+		});
+	};
+}
+
+export interface PlantumlOptions {
+	/** PlantUML 渲染服务地址，如 https://www.plantuml.com/plantuml */
+	server: string;
+	/** 浅色主题名（空 = 不注入 !theme，尊重图内已有声明） */
+	lightTheme?: string;
+	/** 深色主题名（空 = 复用浅色 URL） */
+	darkTheme?: string;
+}
+
+export function remarkPlantuml(options: PlantumlOptions): Transformer {
+	return (tree) => {
+		visit(tree, (node) => {
+			if (node.type !== "code") return;
+			if (String(node.lang ?? "").toLowerCase() !== "plantuml") return;
+			const code = String(node.value ?? "");
+			const lightSource = injectTheme(code, options.lightTheme ?? "");
+			const darkSource = injectTheme(code, options.darkTheme ?? "");
+			const lightUrl = buildUrl(options.server, encodePlantUML(lightSource));
+			const darkUrl =
+				darkSource === lightSource
+					? lightUrl
+					: buildUrl(options.server, encodePlantUML(darkSource));
+			node.type = "plantuml";
+			node.data = { ...node.data };
+			node.data.hName = "div";
+			node.data.hProperties = {
+				className: ["plantuml-wrapper"],
+				"data-light-src": lightUrl,
+				"data-dark-src": darkUrl,
+				"data-plantuml-alt": code.slice(0, 200),
+			};
+			node.value = undefined;
+		});
+	};
+}

package/src/plugins/remark-directives.ts

@@ -0,0 +1,100 @@
+/**
+ * remark-directive 指令分发（A2/A3，移植自参考模板 remark-directive-rehype）
+ *
+ * 官方 remark-directive 将 :::container / ::leaf / :text 指令解析为三类
+ * directive 节点，本插件统一改写：
+ * - containerDirective + 26 种 admonition 类型 → blockquote，并在首段注入
+ *   "[!TYPE] " 标记，复用既有 rehypeCallouts 渲染（自定义 label 融入标题）
+ * - 其余指令 → hastscript 转成同名自定义标签（如 ::github{repo=…} →
+ *   <github repo="…">），交由对应 rehype 插件替换（rehypeGithubCard）
+ */
+import { h } from "hastscript";
+
+/** 参考模板的 26 种 admonition 类型（GitHub 6 种 + Obsidian 扩充别名） */
+const ADMONITION_TYPES = new Set([
+	"note",
+	"tip",
+	"important",
+	"warning",
+	"caution",
+	"abstract",
+	"summary",
+	"tldr",
+	"info",
+	"todo",
+	"success",
+	"check",
+	"done",
+	"question",
+	"help",
+	"faq",
+	"attention",
+	"failure",
+	"missing",
+	"fail",
+	"danger",
+	"error",
+	"bug",
+	"example",
+	"quote",
+	"cite",
+]);
+
+export function remarkDirectives(): any {
+	const transform = (node: any) => {
+		if (
+			node.type !== "containerDirective" &&
+			node.type !== "leafDirective" &&
+			node.type !== "textDirective"
+		)
+			return;
+		const name = String(node.name ?? "").toLowerCase();
+
+		if (node.type === "containerDirective" && ADMONITION_TYPES.has(name)) {
+			const type = name.toUpperCase();
+			const firstChild = node.children[0];
+			if (firstChild?.data?.directiveLabel) {
+				// 自定义标题：标记注入 label 首文本，由 rehypeCallouts 提为标题
+				if (
+					firstChild.children.length > 0 &&
+					firstChild.children[0].type === "text"
+				) {
+					firstChild.children[0].value = `[!${type}] ${firstChild.children[0].value}`;
+				} else {
+					firstChild.children.unshift({
+						type: "text",
+						value: `[!${type}] `,
+					});
+				}
+			} else {
+				// 无标题：插入仅含标记的新段落
+				node.children.unshift({
+					type: "paragraph",
+					children: [{ type: "text", value: `[!${type}]` }],
+				});
+			}
+			// 关键：转 blockquote 且清除 hProperties，防止变成自定义标签
+			node.type = "blockquote";
+			node.data = node.data ?? {};
+			node.data.hName = "blockquote";
+			delete node.data.hProperties;
+		} else {
+			// 其他指令：转同名自定义标签（attributes 原样带入），样式缺省不可见，
+			// 由对应 rehype 插件负责替换
+			node.data = node.data ?? {};
+			const hast = h(name, node.attributes ?? {});
+			node.data.hName = hast.tagName;
+			node.data.hProperties = hast.properties;
+		}
+	};
+
+	const walk = (node: any) => {
+		if (!Array.isArray(node.children)) return;
+		for (const child of node.children) {
+			transform(child);
+			walk(child);
+		}
+	};
+
+	return (tree: any) => walk(tree);
+}

package/src/plugins/remark-excerpt.ts

@@ -0,0 +1,29 @@
+/**
+ * remark 插件：自动摘要（写入 frontmatter.excerpt）
+ *
+ * 取正文第一个 paragraph 的纯文本（与 orchid-blog 的 remark-excerpt 行为一致）。
+ * description 字段仍是手动维护的展示摘要；excerpt 仅作列表兜底。
+ */
+export function remarkExcerpt() {
+	return (tree: any, { data }: any) => {
+		let excerpt = "";
+		for (const node of tree.children || []) {
+			if (node.type !== "paragraph") continue;
+			excerpt = mdastToString(node).trim();
+			break;
+		}
+		data.astro.frontmatter.excerpt = excerpt;
+	};
+}
+
+/** 近似 mdast-util-to-string：递归取 text / inlineCode 的 value，忽略 html 与 image */
+function mdastToString(node: any): string {
+	if (!node) return "";
+	if (node.type === "text" || node.type === "inlineCode")
+		return node.value || "";
+	if (node.type === "html" || node.type === "image" || node.type === "code")
+		return "";
+	let out = "";
+	for (const child of node.children || []) out += mdastToString(child);
+	return out;
+}

package/src/plugins/remark-image-grid.ts

@@ -0,0 +1,97 @@
+/**
+ * [grid]…[/grid] 图片网格（A1，移植自参考模板 remark-image-grid）
+ *
+ * 支持两种形态：
+ * 1. 同段：[grid] ![a](…) ![b](…) [/grid]（标签与图片同段）
+ * 2. 跨段：[grid] 独行、图片段落若干、[/grid] 独行；未闭合时原样输出不转换
+ *
+ * 列数 = 网格内图片数（上限 4，无图缺省 2）。输出 div.image-grid[data-cols="N"]，
+ * 布局由主题 CSS 生成——不用参考模板的 tailwind 动态类（md:grid-cols-N 这类
+ * 拼接类名在 node_modules symlink 源码中不可靠扫描，见 §4.10）。
+ */
+
+const countImages = (node: any): number => {
+	let count = node.type === "image" ? 1 : 0;
+	if (Array.isArray(node.children)) {
+		for (const child of node.children) count += countImages(child);
+	}
+	return count;
+};
+
+const gridNode = (children: any[]) => {
+	const cols = Math.min(4, countImages({ children }) || 2);
+	return {
+		type: "paragraph",
+		data: {
+			hName: "div",
+			hProperties: {
+				className: ["image-grid"],
+				"data-cols": String(cols),
+			},
+		},
+		children,
+	};
+};
+
+export function remarkImageGrid(): any {
+	return (tree: any) => {
+		if (tree.type !== "root") return;
+		const newChildren: any[] = [];
+		let inGrid = false;
+		let gridChildren: any[] = [];
+
+		for (const node of tree.children) {
+			if (node.type === "paragraph" && node.children?.length > 0) {
+				const first = node.children[0];
+				const last = node.children[node.children.length - 1];
+				const hasStart =
+					first.type === "text" && first.value.trim().startsWith("[grid]");
+				const hasEnd =
+					last.type === "text" && last.value.trim().endsWith("[/grid]");
+
+				// 形态 1：[grid]…[/grid] 同段
+				if (hasStart && hasEnd && !inGrid) {
+					first.value = first.value.replace(/^\s*\[grid\]\s*/, "");
+					last.value = last.value.replace(/\s*\[\/grid\]\s*$/, "");
+					newChildren.push(
+						gridNode(
+							node.children.filter(
+								(n: any) => n.type !== "text" || n.value.trim() !== "",
+							),
+						),
+					);
+					continue;
+				}
+
+				// 形态 2：跨段开始（[grid] 独行则丢弃该段落）
+				if (!inGrid && hasStart) {
+					inGrid = true;
+					first.value = first.value.replace(/^\s*\[grid\]\s*/, "");
+					if (!(node.children.length === 1 && first.value.trim() === "")) {
+						gridChildren.push(node);
+					}
+					continue;
+				}
+
+				// 形态 2：跨段结束，汇总图片数定列数
+				if (inGrid && hasEnd) {
+					inGrid = false;
+					last.value = last.value.replace(/\s*\[\/grid\]\s*$/, "");
+					if (!(node.children.length === 1 && last.value.trim() === "")) {
+						gridChildren.push(node);
+					}
+					newChildren.push(gridNode(gridChildren));
+					gridChildren = [];
+					continue;
+				}
+			}
+
+			if (inGrid) gridChildren.push(node);
+			else newChildren.push(node);
+		}
+
+		// 未闭合：原样输出已收集内容
+		if (inGrid) newChildren.push(...gridChildren);
+		tree.children = newChildren;
+	};
+}

package/src/plugins/remark-reading-time.ts

@@ -0,0 +1,38 @@
+/**
+ * remark 插件：阅读时长与字数统计（写入 frontmatter.minutes / frontmatter.words）
+ *
+ * 口径（自实现，零依赖，对中文博客更准确）：
+ * - words = CJK 字符数 + 非 CJK 单词数
+ * - minutes = max(1, round(words / 275))，275 wpm 为 reading-time 默认速度
+ * 值在渲染期由 remark 链写入，不经过 content collection schema 校验，
+ * 组件通过 `const { remarkPluginFrontmatter } = await render(post)` 读取。
+ */
+export function remarkReadingTime() {
+	return (tree: any, { data }: any) => {
+		const text = mdastToString(tree);
+		const words = countWords(text);
+		data.astro.frontmatter.words = words;
+		data.astro.frontmatter.minutes = Math.max(1, Math.round(words / 275));
+	};
+}
+
+/** 近似 mdast-util-to-string：递归取 text / inlineCode 的 value，忽略 html 与 image */
+function mdastToString(node: any): string {
+	if (!node) return "";
+	if (node.type === "text" || node.type === "inlineCode")
+		return node.value || "";
+	if (node.type === "html" || node.type === "image" || node.type === "code")
+		return "";
+	let out = "";
+	for (const child of node.children || []) out += mdastToString(child);
+	return out;
+}
+
+const CJK = /[\u4e00-\u9fff\u3040-\u30ff\uac00-\ud7af]/g;
+
+function countWords(text: string): number {
+	const cjk = (text.match(CJK) || []).length;
+	const rest = text.replace(CJK, " ");
+	const latin = rest.split(/\s+/).filter(Boolean).length;
+	return cjk + latin;
+}