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

package/src/plugins/scripts/diagram-panzoom.js

@@ -0,0 +1,388 @@
+/*
+ * 图表 pan-zoom / 全屏交互脚本（共享，构建期由 rehype 插件以纯文本注入）
+ *
+ * 为 .diagram-container 提供：
+ *   - 拖拽平移（触摸设备主区域禁用拖拽，避免干扰滚动）
+ *   - 缩放控制栏（+、−、重置、全屏）
+ *   - 双击放大/重置、全屏滚轮缩放、双指捏合
+ *   - 全屏 overlay（独立缩放、Escape/背景点击关闭）
+ *   - 响应 astro:page-load 页面切换
+ *
+ * identical inline 脚本 VT 换页不重跑，故以 window._diagramPanZoomInit
+ * 防重入 + astro:page-load 监听实现跨页初始化。
+ */
+(() => {
+	if (window._diagramPanZoomInit) return;
+	window._diagramPanZoomInit = true;
+
+	var MIN_SCALE = 0.5;
+	var MAX_SCALE = 5;
+	var SCALE_STEP = 1.2;
+	var overlays = new Set();
+
+	/** 深浅模式各有一套 SVG（Mermaid）时选当前可见目标 */
+	function selectTarget(container) {
+		var isDark = document.documentElement.classList.contains("dark");
+		var lightEl = container.querySelector(".mermaid-svg-light svg");
+		var darkEl = container.querySelector(".mermaid-svg-dark svg");
+		if (lightEl && darkEl) return isDark ? darkEl : lightEl;
+		return container.querySelector("svg, img, .diagram-panzoom-target");
+	}
+
+	function initInteraction(container) {
+		if (container.dataset.pzInit === "true") return;
+		container.dataset.pzInit = "true";
+
+		var targets = Array.from(
+			container.querySelectorAll(
+				".mermaid-svg-light svg, .mermaid-svg-dark svg",
+			),
+		);
+		if (targets.length === 0) {
+			var single = container.querySelector("svg, img, .diagram-panzoom-target");
+			if (single) targets = [single];
+		}
+		if (targets.length === 0) return;
+
+		var getActiveTarget = () => selectTarget(container) || targets[0];
+
+		var state = { scale: 1, tx: 0, ty: 0 };
+		var apply = () => {
+			targets.forEach((t) => {
+				t.style.transformOrigin = "center center";
+				t.style.transform =
+					"translate(" +
+					state.tx +
+					"px," +
+					state.ty +
+					"px) scale(" +
+					state.scale +
+					")";
+			});
+		};
+		var clamp = (s) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, s));
+		var reset = () => {
+			state.scale = 1;
+			state.tx = 0;
+			state.ty = 0;
+			apply();
+		};
+		var zoomBy = (f, ox, oy) => {
+			var prev = state.scale;
+			var next = clamp(prev * f);
+			if (next === prev) return;
+			if (typeof ox === "number" && typeof oy === "number") {
+				var r = getActiveTarget().getBoundingClientRect();
+				var dx = ox - (r.left + r.width / 2);
+				var dy = oy - (r.top + r.height / 2);
+				var ratio = next / prev;
+				state.tx -= dx * (ratio - 1);
+				state.ty -= dy * (ratio - 1);
+			}
+			state.scale = next;
+			apply();
+		};
+
+		// 控制栏：放大 / 缩小 / 重置 / 全屏
+		var controls = document.createElement("div");
+		controls.className = "diagram-controls";
+		[
+			[
+				"+",
+				"放大",
+				() => {
+					zoomBy(SCALE_STEP);
+				},
+			],
+			[
+				"−",
+				"缩小",
+				() => {
+					zoomBy(1 / SCALE_STEP);
+				},
+			],
+			["↺", "重置", reset],
+			[
+				"⛶",
+				"全屏",
+				() => {
+					openFullscreen(container);
+				},
+			],
+		].forEach((b) => {
+			var el = document.createElement("button");
+			el.type = "button";
+			el.className = "diagram-ctrl-btn";
+			el.textContent = b[0];
+			el.title = b[1];
+			el.addEventListener("click", (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				b[2]();
+			});
+			controls.appendChild(el);
+		});
+		container.appendChild(controls);
+
+		// 拖拽平移（鼠标；触摸交给原生滚动/捏合）
+		var dragging = false;
+		var sx = 0;
+		var sy = 0;
+		var stx = 0;
+		var sty = 0;
+		container.addEventListener("pointerdown", (e) => {
+			if (e.pointerType === "touch") return;
+			if (e.button !== 0) return;
+			if (e.target.closest(".diagram-controls")) return;
+			dragging = true;
+			sx = e.clientX;
+			sy = e.clientY;
+			stx = state.tx;
+			sty = state.ty;
+			if (container.setPointerCapture) container.setPointerCapture(e.pointerId);
+			container.style.cursor = "grabbing";
+		});
+		container.addEventListener("pointermove", (e) => {
+			if (!dragging) return;
+			state.tx = stx + (e.clientX - sx);
+			state.ty = sty + (e.clientY - sy);
+			apply();
+		});
+		var endDrag = (e) => {
+			if (!dragging) return;
+			dragging = false;
+			if (container.releasePointerCapture)
+				container.releasePointerCapture(e.pointerId);
+			container.style.cursor = "";
+		};
+		container.addEventListener("pointerup", endDrag);
+		container.addEventListener("pointercancel", endDrag);
+
+		// 双击：已放大则复位，否则以点击处为中心放大
+		container.addEventListener("dblclick", (e) => {
+			if (e.target.closest(".diagram-controls")) return;
+			if (state.scale !== 1) reset();
+			else zoomBy(SCALE_STEP * SCALE_STEP, e.clientX, e.clientY);
+		});
+
+		apply();
+	}
+
+	function openFullscreen(container) {
+		var currentTarget = selectTarget(container);
+		if (!currentTarget) return;
+
+		var overlay = document.createElement("div");
+		overlay.className = "diagram-fullscreen-overlay";
+		var content = document.createElement("div");
+		content.className = "diagram-fs-content";
+		var clone = currentTarget.cloneNode(true);
+		clone.style.transform = "";
+		content.appendChild(clone);
+
+		var fsControls = document.createElement("div");
+		fsControls.className = "diagram-fs-controls";
+		var st = { scale: 1, tx: 0, ty: 0 };
+		var apply = () => {
+			clone.style.transformOrigin = "center center";
+			clone.style.transform =
+				"translate(" + st.tx + "px," + st.ty + "px) scale(" + st.scale + ")";
+		};
+		var zoom = (f, ox, oy) => {
+			var prev = st.scale;
+			var next = Math.min(MAX_SCALE, Math.max(MIN_SCALE, prev * f));
+			if (next === prev) return;
+			if (typeof ox === "number" && typeof oy === "number") {
+				var r = clone.getBoundingClientRect();
+				var dx = ox - (r.left + r.width / 2);
+				var dy = oy - (r.top + r.height / 2);
+				var ratio = next / prev;
+				st.tx -= dx * (ratio - 1);
+				st.ty -= dy * (ratio - 1);
+			}
+			st.scale = next;
+			apply();
+		};
+		var rst = () => {
+			st.scale = 1;
+			st.tx = 0;
+			st.ty = 0;
+			apply();
+		};
+		var close = () => {
+			document.removeEventListener("keydown", onKey);
+			overlay.remove();
+			overlays.delete(overlay);
+		};
+		var onKey = (e) => {
+			if (e.key === "Escape") close();
+		};
+
+		[
+			[
+				"+",
+				"放大",
+				() => {
+					zoom(SCALE_STEP);
+				},
+			],
+			[
+				"−",
+				"缩小",
+				() => {
+					zoom(1 / SCALE_STEP);
+				},
+			],
+			["↺", "重置", rst],
+			["✕", "关闭", close],
+		].forEach((b) => {
+			var el = document.createElement("button");
+			el.type = "button";
+			el.className = "diagram-ctrl-btn";
+			el.textContent = b[0];
+			el.title = b[1];
+			el.addEventListener("click", (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				b[2]();
+			});
+			fsControls.appendChild(el);
+		});
+
+		// 全屏滚轮缩放
+		content.addEventListener(
+			"wheel",
+			(e) => {
+				e.preventDefault();
+				zoom(e.deltaY < 0 ? SCALE_STEP : 1 / SCALE_STEP, e.clientX, e.clientY);
+			},
+			{ passive: false },
+		);
+
+		// 全屏拖拽平移
+		var fdrag = false;
+		var fsx = 0;
+		var fsy = 0;
+		var fstx = 0;
+		var fsty = 0;
+		content.addEventListener("pointerdown", (e) => {
+			if (e.target.closest(".diagram-fs-controls")) return;
+			if (e.pointerType === "touch" && e.isPrimary === false) return;
+			fdrag = true;
+			fsx = e.clientX;
+			fsy = e.clientY;
+			fstx = st.tx;
+			fsty = st.ty;
+			if (content.setPointerCapture) content.setPointerCapture(e.pointerId);
+		});
+		content.addEventListener("pointermove", (e) => {
+			if (!fdrag) return;
+			st.tx = fstx + (e.clientX - fsx);
+			st.ty = fsty + (e.clientY - fsy);
+			apply();
+		});
+		var fEnd = (e) => {
+			if (!fdrag) return;
+			fdrag = false;
+			if (content.releasePointerCapture)
+				content.releasePointerCapture(e.pointerId);
+		};
+		content.addEventListener("pointerup", fEnd);
+		content.addEventListener("pointercancel", fEnd);
+
+		// 双指捏合缩放（以手势初始状态为基准，避免闪烁）
+		var pinchDist = 0;
+		var pinchScale = 1;
+		var pinchTx = 0;
+		var pinchTy = 0;
+		var pinchCx = 0;
+		var pinchCy = 0;
+		content.addEventListener(
+			"touchstart",
+			(e) => {
+				if (e.touches.length === 2) {
+					e.preventDefault();
+					var t0 = e.touches[0];
+					var t1 = e.touches[1];
+					pinchDist = Math.hypot(
+						t1.clientX - t0.clientX,
+						t1.clientY - t0.clientY,
+					);
+					pinchScale = st.scale;
+					pinchTx = st.tx;
+					pinchTy = st.ty;
+					pinchCx = (t0.clientX + t1.clientX) / 2;
+					pinchCy = (t0.clientY + t1.clientY) / 2;
+				}
+			},
+			{ passive: false },
+		);
+		content.addEventListener(
+			"touchmove",
+			(e) => {
+				if (e.touches.length === 2) {
+					e.preventDefault();
+					var t0 = e.touches[0];
+					var t1 = e.touches[1];
+					var newDist = Math.hypot(
+						t1.clientX - t0.clientX,
+						t1.clientY - t0.clientY,
+					);
+					var newScale = Math.min(
+						MAX_SCALE,
+						Math.max(MIN_SCALE, pinchScale * (newDist / pinchDist)),
+					);
+					var ratio = newScale / pinchScale;
+					st.scale = newScale;
+					st.tx = pinchCx - ratio * (pinchCx - pinchTx);
+					st.ty = pinchCy - ratio * (pinchCy - pinchTy);
+					apply();
+				}
+			},
+			{ passive: false },
+		);
+
+		// 背景点击关闭
+		overlay.addEventListener("click", (e) => {
+			if (e.target === overlay) close();
+		});
+
+		overlay.appendChild(content);
+		overlay.appendChild(fsControls);
+		document.body.appendChild(overlay);
+		overlays.add(overlay);
+		document.addEventListener("keydown", onKey);
+	}
+
+	function closeAll() {
+		overlays.forEach((o) => {
+			o.remove();
+		});
+		overlays.clear();
+	}
+
+	function initAll() {
+		document.querySelectorAll(".diagram-container").forEach((c) => {
+			initInteraction(c);
+		});
+	}
+
+	// 暴露重建入口，供 PlantUML 图片加载完成后清理旧控制栏再初始化
+	window._diagramPanZoomReinit = (container) => {
+		var oldControls = container.querySelector(".diagram-controls");
+		if (oldControls) oldControls.remove();
+		container.dataset.pzInit = "false";
+		initInteraction(container);
+	};
+
+	document.addEventListener("astro:before-preparation", closeAll);
+	document.addEventListener("astro:page-load", () => {
+		closeAll();
+		initAll();
+	});
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", initAll, { once: true });
+	} else {
+		initAll();
+	}
+})();

package/src/plugins/scripts/plantuml-theme-switch.js

@@ -0,0 +1,90 @@
+/*
+ * PlantUML 客户端脚本（构建期由 rehype 插件以纯文本注入 <script>）
+ *
+ * 职责：
+ *   - 跟随 html.dark 切换 img 的 light/dark 源（构建期已编码双主题 URL）
+ *   - 图片加载失败降级为错误提示 + 重试按钮
+ *   - 响应 astro:page-load（ClientRouter 换页）重新应用主题
+ *
+ * identical inline 脚本在 VT 换页时按内容去重不重跑，故以
+ * window.plantumlThemeInit 防重入 + 事件监听实现跨页生效。
+ */
+(() => {
+	if (window.plantumlThemeInit) return;
+	window.plantumlThemeInit = true;
+
+	function isDark() {
+		return document.documentElement.classList.contains("dark");
+	}
+
+	function applyTheme() {
+		var dark = isDark();
+		document
+			.querySelectorAll(".plantuml-wrapper img.plantuml-image")
+			.forEach((img) => {
+				var next = dark
+					? img.getAttribute("data-dark-src")
+					: img.getAttribute("data-light-src");
+				if (next && img.src !== next) img.src = next;
+			});
+	}
+
+	function showFallback(img, message) {
+		var wrapper = img.closest(".plantuml-wrapper");
+		var container = img.closest(".plantuml-diagram-container");
+		if (!wrapper || !container || wrapper.querySelector(".plantuml-error"))
+			return;
+		var box = document.createElement("div");
+		box.className = "plantuml-error";
+		var p = document.createElement("p");
+		p.textContent =
+			message || "PlantUML 图表加载失败，请检查网络或 PlantUML 服务可用性";
+		var retry = document.createElement("button");
+		retry.type = "button";
+		retry.textContent = "重试";
+		retry.addEventListener("click", () => {
+			box.remove();
+			img.style.display = "";
+			var light = img.getAttribute("data-light-src");
+			img.src =
+				light + (light.indexOf("?") > -1 ? "&" : "?") + "retry=" + Date.now();
+		});
+		box.appendChild(p);
+		box.appendChild(retry);
+		img.style.display = "none";
+		wrapper.appendChild(box);
+	}
+
+	function initAll() {
+		document
+			.querySelectorAll(".plantuml-wrapper img.plantuml-image")
+			.forEach((img) => {
+				if (img.dataset.plantumlInit === "true") return;
+				img.dataset.plantumlInit = "true";
+				img.addEventListener("error", () => {
+					showFallback(img);
+				});
+				// 加载完成后通知 pan-zoom 重建控制栏（若有共享脚本）
+				img.addEventListener("load", () => {
+					var container = img.closest(".diagram-container");
+					if (container && typeof window._diagramPanZoomReinit === "function") {
+						window._diagramPanZoomReinit(container);
+					}
+				});
+			});
+		applyTheme();
+	}
+
+	// 深浅切换（侧栏按钮直接改 html.dark，无自定义事件可听，用 Observer 兜底）
+	new MutationObserver(applyTheme).observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class"],
+	});
+
+	document.addEventListener("astro:page-load", initAll);
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", initAll, { once: true });
+	} else {
+		initAll();
+	}
+})();

package/src/routes/404.astro

@@ -0,0 +1,14 @@
+---
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import { t } from "../i18n/index.js";
+---
+
+<BaseLayout title={t('notFound')}>
+  <header class="archive-head reveal" style="text-align: center; max-width: none;">
+    <h1 class="page-title">404</h1>
+    <p class="page-sub">{t('notFoundDesc')}</p>
+    <p style="margin-top: 28px;">
+      <a class="btn" href="/">{t('backHome')}</a>
+    </p>
+  </header>
+</BaseLayout>

package/src/routes/_hydrate.ts

@@ -0,0 +1,34 @@
+import { render } from "astro:content";
+import type { PostLike } from "../utils.js";
+
+/**
+ * 批量「补水」：remark/rehype 插件（阅读时长/自动摘要/首图）把结果写入
+ * file.data.astro.frontmatter，组件侧必须经 render(post).remarkPluginFrontmatter 读取。
+ * 本函数批量渲染并把这些字段 merge 回 post.data，供 PostCard 等组件直接消费。
+ *
+ * render() 是完整 Markdown 编译，代价高——只对当前页面用到的文章调用，
+ * 不要对全站列表无差别调用。
+ */
+export async function hydratePosts<T extends PostLike>(
+	posts: T[],
+): Promise<T[]> {
+	return Promise.all(
+		posts.map(async (post) => {
+			const { remarkPluginFrontmatter } = await render(
+				post as unknown as Parameters<typeof render>[0],
+			);
+			const fm = remarkPluginFrontmatter as Record<string, unknown>;
+			return {
+				...post,
+				data: {
+					...post.data,
+					excerpt: (fm.excerpt as string | undefined) ?? post.data.excerpt,
+					firstImage:
+						(fm.firstImage as string | undefined) ?? post.data.firstImage,
+					words: (fm.words as number | undefined) ?? post.data.words,
+					minutes: (fm.minutes as number | undefined) ?? post.data.minutes,
+				},
+			};
+		}),
+	);
+}

package/src/routes/about.astro

@@ -0,0 +1,25 @@
+---
+import { getEntry, render } from "astro:content";
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import { t } from "../i18n/index.js";
+
+// 正文来自站点 spec 集合（src/content/spec/about.md）；
+// 集合或条目缺失时降级为提示文案，不使整页 500
+const entry = await getEntry("spec", "about").catch(() => null);
+const { Content } = entry ? await render(entry) : { Content: null };
+---
+
+<BaseLayout title={t('about')} page="about">
+  <header class="archive-head reveal">
+    <h1 class="page-title">{t('about')}</h1>
+  </header>
+  <article class="card page-card prose reveal" data-lightbox-gallery>
+    {
+      Content ? (
+        <Content />
+      ) : (
+        <p class="tag-empty">{t('aboutEmpty')}</p>
+      )
+    }
+  </article>
+</BaseLayout>

package/src/routes/api/allPostMeta.json.ts

@@ -0,0 +1,26 @@
+import { getCollection } from "astro:content";
+import { getSortedPosts } from "../../utils.js";
+
+/**
+ * 全站文章元数据（P1-12 随机文章栏数据源）。
+ * 脱敏：加密文章不输出（客户端无需过滤，亦不暴露哪些文章加密）；
+ * draft 在 PROD 下不输出。
+ */
+export async function GET() {
+	const all = await getCollection("posts", ({ data }) =>
+		import.meta.env.PROD ? !data.draft : true,
+	);
+	const posts = getSortedPosts(all);
+	const body = posts
+		.filter((p) => !p.data.password)
+		.map((p) => ({
+			id: p.id,
+			title: p.data.title,
+			description: p.data.description,
+			published: p.data.published.getTime(),
+			category: p.data.category || "",
+		}));
+	return new Response(JSON.stringify(body), {
+		headers: { "Content-Type": "application/json; charset=utf-8" },
+	});
+}

package/src/routes/archive.astro

@@ -0,0 +1,81 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import config from "virtual:theme/config";
+import { t } from "../i18n/index.js";
+import { formatDate, type PostLike } from "../utils.js";
+import { hydratePosts } from "./_hydrate.js";
+
+// 归档 = 纯时间线（忽略置顶，按发布时间倒序），按年分组展示
+const all = await getCollection("posts", ({ data }) =>
+	import.meta.env.PROD ? !data.draft : true,
+);
+const sorted = all.sort(
+	(a, b) => b.data.published.getTime() - a.data.published.getTime(),
+);
+const posts = await hydratePosts(sorted);
+
+const groups = new Map<number, PostLike[]>();
+for (const post of posts) {
+	const year = post.data.published.getFullYear();
+	const list = groups.get(year);
+	if (list) list.push(post);
+	else groups.set(year, [post]);
+}
+const years = [...groups.keys()];
+const yearLabel =
+	years.length <= 1
+		? t("yearUnit", { n: years[0] ?? "" })
+		: `${Math.max(...years)} – ${Math.min(...years)}`;
+
+// 归档按年折叠（§4.30 对齐参考站 foldArticle）：开启时年份头变按钮可点，
+// 最新一年默认展开，其余折叠
+const fold = config.archive.fold;
+---
+
+<BaseLayout title={t('archive')} page="archive">
+  <header class="archive-head reveal">
+    <h1 class="page-title">{t('archive')}</h1>
+    <p class="page-sub">{t('totalPosts', { n: posts.length })} · {yearLabel}</p>
+  </header>
+  {
+    years.map((year, i) => {
+      const collapsed = fold && years.length > 1 && i > 0;
+      return (
+        <div class:list={["timeline", "reveal", { fold: collapsed }]}>
+          {fold ? (
+            <button
+              type="button"
+              class="archive-year"
+              aria-expanded={collapsed ? "false" : "true"}
+            >
+              <svg class="year-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+              <span class="y">{year}</span>
+              <span class="c">{t('postsInYear', { n: groups.get(year)!.length })}</span>
+            </button>
+          ) : (
+            <div class="archive-year">
+              <span class="y">{year}</span>
+              <span class="c">{t('postsInYear', { n: groups.get(year)!.length })}</span>
+            </div>
+          )}
+          <div class="timeline-items">
+            {groups.get(year)!.map((post) => (
+              <div class="timeline-item">
+                <a href={`/posts/${post.id}/`}>
+                  <span class="t-date">{formatDate(post.data.published).slice(5)}</span>
+                  <span class="t-title">{post.data.title}</span>
+                  <span class="t-meta">
+                    {post.data.category ?? ''}
+                    {post.data.category && post.data.words ? ' · ' : ''}
+                    {post.data.words ? t('wordsCount', { n: post.data.words }) : ''}
+                  </span>
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+    })
+  }
+</BaseLayout>

package/src/routes/categories/[category].astro

@@ -0,0 +1,37 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import { t } from "../../i18n/index.js";
+import { collectCategories, formatDate, getSortedPosts } from "../../utils.js";
+
+// 先排序再聚合，保证每个分类内文章按新→旧排列
+export async function getStaticPaths() {
+	const all = await getCollection("posts", ({ data }) =>
+		import.meta.env.PROD ? !data.draft : true,
+	);
+	const sorted = getSortedPosts(all);
+	return [...collectCategories(sorted).entries()].map(([category, posts]) => ({
+		params: { category },
+		props: { category, posts },
+	}));
+}
+
+const { category, posts } = Astro.props;
+---
+
+<BaseLayout title={t('categoryTitle', { category })} page="categories">
+  <header class="archive-head reveal">
+    <h1 class="page-title">{category}</h1>
+    <p class="page-sub">{t('totalPosts', { n: posts.length })}</p>
+  </header>
+  <div class="tag-list">
+    {
+      posts.map((post) => (
+        <a class="related-card card tag-item reveal" href={`/posts/${post.id}/`}>
+          <div class="rc-title">{post.data.title}</div>
+          <div class="rc-meta">{formatDate(post.data.published)}</div>
+        </a>
+      ))
+    }
+  </div>
+</BaseLayout>