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

package/src/components/Header.astro

@@ -0,0 +1,153 @@
+---
+import config from "virtual:theme/config";
+import { t } from "../i18n/index.js";
+
+const { title, nav, logo } = config;
+
+/** 外链统一属性（§4.16）：新窗口 + noopener */
+function externalAttrs(external?: boolean) {
+	return external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+}
+
+/** 内置页导航高亮 key（body[data-page] ↔ .nav-link[data-nav]） */
+function navKey(href: string): string | null {
+	if (href === "/") return "home";
+	if (href === "/archive" || href.startsWith("/archive/")) return "archive";
+	if (href === "/tags" || href.startsWith("/tags/")) return "tags";
+	if (href === "/about" || href.startsWith("/about/")) return "about";
+	if (href === "/friends" || href.startsWith("/friends/")) return "friends";
+	if (href === "/guestbook" || href.startsWith("/guestbook/"))
+		return "guestbook";
+	if (href === "/sponsor" || href.startsWith("/sponsor/")) return "sponsor";
+	return null;
+}
+
+/* hue 调色面板（M3b-b5）：预设色板为代码级常量；运行时覆写 --accent-h，s/l 保持配置值 */
+const hueEnabled = config.huePanel.enabled;
+const presetHues = [0, 30, 60, 100, 140, 170, 210, 250, 290, 330];
+---
+
+<header class="site-header">
+  <div class="shell header-inner">
+    {/* Logo（§4.20）：配置非空时标题左侧渲染，与文字同行 */}
+    <a class="site-title" href="/">
+      {logo && <img class="nav-logo" src={logo} alt={config.title} />}
+      {title}
+    </a>
+    <nav class="site-nav" id="siteNav" aria-label={t('mainNav')}>
+      {
+        nav.map((item) => {
+          const key = item.href ? navKey(item.href) : null;
+          /* 子菜单（§4.16）：父项有 href 则可点击跳转（hover 展开）；无 href 仅作下拉入口 */
+          if (item.children.length > 0) {
+            return (
+              <div class="nav-item has-sub">
+                {item.href ? (
+                  <a class="nav-link" data-nav={key ?? undefined} href={item.href} {...externalAttrs(item.external)}>
+                    {item.label}
+                    {/* 父项下拉 chevron（§4.27）：对齐 orchid-blog 标识，子菜单展开时旋转 */}
+                    <svg class="nav-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>
+                  </a>
+                ) : (
+                  <button class="nav-link nav-sub-toggle" type="button" aria-expanded="false">
+                    {item.label}
+                    <svg class="nav-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>
+                  </button>
+                )}
+                <div class="nav-sub">
+                  {item.children.map((c) => {
+                    const ck = c.href ? navKey(c.href) : null;
+                    return (
+                      <a class="nav-sub-link" data-nav={ck ?? undefined} href={c.href} {...externalAttrs(c.external)}>
+                        {c.label}
+                      </a>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          }
+          return (
+            <a class="nav-link" data-nav={key ?? undefined} href={item.href ?? '#'} {...externalAttrs(item.external)}>
+              {item.label}
+            </a>
+          );
+        })
+      }
+    </nav>
+    <div class="header-actions">
+      {
+        /* 搜索（§4.56）：置于 actions 首位，其余按钮跟在其后；对齐参考项目形态——
+           桌面为导航栏内联搜索框（输入即搜），移动端退化为 icon 按钮 + 浮层（含输入框）；
+           索引由构建期 pagefind 生成，dev 下降级提示 */
+      }
+      <div class="search-wrap">
+        <div class="nav-search" title={t('searchShortcut')}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+          <input id="searchInput" type="search" placeholder={t('search')} autocomplete="off" enterkeyhint="search" aria-label={t('search')} />
+        </div>
+        <button class="icon-btn nav-search-toggle" id="searchToggle" type="button" aria-label={t('search')} aria-expanded="false">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        </button>
+        <div class="search-pop" id="searchPop" hidden>
+          <div class="search-bar">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+            <input id="searchInputM" type="search" placeholder={t('search')} autocomplete="off" enterkeyhint="search" aria-label={t('search')} />
+          </div>
+          <div class="search-results" id="searchResults" hidden></div>
+        </div>
+      </div>
+      {
+        /* 列表形态切换（§4.34→§4.55）：allowSwitch 控制；仅首页/列表页显示（CSS data-page 显隐） */
+      }
+      {config.postList.allowSwitch && (
+        <button
+          class="icon-btn layout-switch"
+          id="layoutSwitch"
+          type="button"
+          aria-label={t('layoutSwitch')}
+          aria-pressed="false"
+          title={t('layoutSwitch')}
+        >
+          <svg class="ic-list" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
+          <svg class="ic-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        </button>
+      )}
+      {
+        hueEnabled && (
+          <div class="palette-wrap">
+            <button class="icon-btn" id="paletteToggle" type="button" aria-label={t('palette')} aria-expanded="false">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
+            </button>
+            <div class="palette-pop" id="palettePop" hidden>
+              <div class="palette-title">{t('paletteTitle')}</div>
+              <div class="palette-row">
+                {presetHues.map((h) => (
+                  <button
+                    class="swatch"
+                    type="button"
+                    style={`--sw: hsl(${h} var(--accent-s) var(--accent-l))`}
+                    data-hue={h}
+                    aria-label={t('hueValue', { n: h })}
+                  />
+                ))}
+              </div>
+              <input class="hue-slider" id="hueSlider" type="range" min="0" max="360" step="1" aria-label={t('paletteTitle')} />
+              <div class="palette-foot">
+                <span class="hue-badge" id="hueBadge" />
+                <button class="palette-reset" id="hueReset" type="button">{t('reset')}</button>
+              </div>
+            </div>
+          </div>
+        )
+      }
+      <button class="icon-btn" id="modeToggle" type="button" aria-label={t('toggleMode')}>
+        <svg class="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+        <svg class="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+      </button>
+      <button class="icon-btn nav-burger" id="navToggle" type="button" aria-label={t('menu')} aria-expanded="false">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+      </button>
+    </div>
+  </div>
+</header>

package/src/components/License.astro

@@ -0,0 +1,29 @@
+---
+import config from "virtual:theme/config";
+import { t } from "../i18n/index.js";
+
+interface Props {
+	/** 文章级覆盖；空则跟随全站配置 */
+	licenseName?: string;
+	licenseUrl?: string;
+	/** 文章级开关（frontmatter license）；false 强制隐藏 */
+	enabled?: boolean;
+}
+
+const { licenseName, licenseUrl, enabled } = Astro.props;
+const enabledFinal = config.license.enabled && (enabled ?? true);
+const name = licenseName ?? config.license.name;
+const url = licenseUrl ?? config.license.url;
+// prefix/suffix 留空时回退语言包默认文案
+const prefix = config.license.prefix || t("licensePrefix");
+const suffix = config.license.suffix || t("licenseSuffix");
+---
+
+{
+  enabledFinal && (
+    <div class="license">
+      {prefix} <a href={url} target="_blank" rel="noopener">{name}</a>{' '}
+      {suffix}
+    </div>
+  )
+}

package/src/components/Live2DWidget.astro

@@ -0,0 +1,262 @@
+---
+/**
+ * Live2D 看板娘（§4.38）：l2d-widget 悬浮模型 + 菜单 + 气泡说话。
+ * - 根节点 transition:persist：VT 换页模型 DOM 保留，不重载不闪断，脚本单次初始化
+ * - 菜单 action 映射：home / scrollToTop / sleep / switchModel / link(url)
+ * - tips 挂到 options.model.tips；库内气泡行内 nowrap 由 MutationObserver 修正
+ * - 移动端按断点隐藏：隐藏态不加载模型（省流量），跨过断点自动补拉起
+ */
+interface Props {
+	live2d: {
+		model?:
+			| { path: string; volume: number; scale: number; x: number; y: number }
+			| Array<{
+					path: string;
+					volume: number;
+					scale: number;
+					x: number;
+					y: number;
+			  }>;
+		position: "bottom-left" | "bottom-right";
+		size: number | { width: number; height: number };
+		primaryColor: string;
+		transitionDuration?: number;
+		transitionType?: "slide" | "fade";
+		menus?: {
+			items: Array<{
+				icon: string;
+				label: string;
+				action: string;
+				url?: string;
+			}>;
+			align: "left" | "right";
+		};
+		tips?: {
+			enable: boolean;
+			welcomeMessage: string[];
+			messages: string[];
+			duration: number;
+			interval: number;
+			offset: { x: number; y: number };
+		};
+		responsive: { hideOnMobile: boolean; mobileBreakpoint: number };
+		zIndex: number;
+	};
+}
+
+const { live2d } = Astro.props;
+
+import { t } from "../i18n/index.js";
+
+const modelList = Array.isArray(live2d.model)
+	? live2d.model
+	: live2d.model
+		? [live2d.model]
+		: [];
+
+// 未配置菜单时的默认三键（多模型自动追加「切换模型」）；自定义 menus 覆盖默认
+const menus = live2d.menus ?? {
+	items: [
+		{ icon: "mdi:home", label: t("l2dHome"), action: "home" },
+		{ icon: "mdi:arrow-up", label: t("l2dScrollTop"), action: "scrollToTop" },
+		{ icon: "mdi:bed", label: t("l2dSleep"), action: "sleep" },
+		...(modelList.length > 1
+			? [
+					{
+						icon: "mdi:swap-horizontal",
+						label: t("l2dSwitchModel"),
+						action: "switchModel",
+					},
+				]
+			: []),
+	],
+	align: "right" as const,
+};
+
+// x/y 转库的 offset: [x, y]；volume/scale 恒有值（schema default）
+const models = modelList.map((m) => ({
+	path: m.path,
+	volume: m.volume,
+	scale: m.scale,
+	offset: [m.x, m.y] as [number, number],
+}));
+---
+
+<div
+	id="l2d-widget-container"
+	transition:persist="live2d-widget"
+	style={`position:fixed;z-index:${live2d.zIndex};`}
+	data-models={JSON.stringify(models)}
+	data-position={live2d.position}
+	data-size={JSON.stringify(live2d.size)}
+	data-primary-color={live2d.primaryColor}
+	data-transition-duration={live2d.transitionDuration !== undefined ? String(live2d.transitionDuration) : ""}
+	data-transition-type={live2d.transitionType ?? ""}
+	data-menus={JSON.stringify(menus)}
+	data-tips={JSON.stringify(live2d.tips ?? null)}
+	data-responsive={JSON.stringify(live2d.responsive)}
+>
+</div>
+
+<script>
+	// 模块级初始化标志：动态导入等待期间防 resize/重复调度重入（dataset guard 仅成功后置位）
+	let initStarted = false;
+	let currentModelIndex = 0;
+
+	// l2d-widget 气泡行内 white-space:nowrap 不换行；库用行内样式 CSS 盖不动，JS 修正
+	function patchTipBubble(el: HTMLElement) {
+		if (el.style.whiteSpace === "nowrap") {
+			el.style.whiteSpace = "normal";
+			el.style.width = "190px";
+		}
+	}
+
+	const tipObserver = new MutationObserver((mutations) => {
+		const container = document.getElementById("l2d-widget-container");
+		for (const m of mutations) {
+			for (const node of m.addedNodes) {
+				// 只处理挂件容器内的新增节点：VT 换页全页重建 body 时不做全页遍历
+				if (!(node instanceof HTMLElement) || !container?.contains(node)) continue;
+				patchTipBubble(node);
+				node.querySelectorAll<HTMLElement>("*").forEach(patchTipBubble);
+			}
+		}
+	});
+	tipObserver.observe(document.body, { childList: true, subtree: true });
+
+	async function initWidget() {
+		const container = document.getElementById("l2d-widget-container");
+		if (!container || container.dataset.l2dInit === "1" || initStarted) return;
+		initStarted = true;
+
+		try {
+			const models = JSON.parse(container.dataset.models || "[]");
+			if (!models.length) {
+				initStarted = false;
+				return;
+			}
+
+			// 移动端首访不置 guard：跨过断点转桌面端时由 resize 补初始化
+			const responsive = JSON.parse(container.dataset.responsive || "{}");
+			if (
+				responsive.hideOnMobile &&
+				window.innerWidth <= (responsive.mobileBreakpoint || 768)
+			) {
+				container.style.display = "none";
+				initStarted = false;
+				return;
+			}
+
+			const options: any = {
+				model: models.length === 1 ? models[0] : models,
+				position: container.dataset.position || "bottom-left",
+				size: JSON.parse(container.dataset.size || "280"),
+			};
+			const primaryColor = container.dataset.primaryColor;
+			if (primaryColor) options.primaryColor = primaryColor;
+			const transitionDuration = container.dataset.transitionDuration;
+			if (transitionDuration) options.transitionDuration = Number.parseInt(transitionDuration, 10);
+			const transitionType = container.dataset.transitionType;
+			if (transitionType) options.transitionType = transitionType;
+
+			// 菜单 action 字符串映射为函数（l2d-widget 会把 widget 实例传给 onClick）
+			const menuActions: Record<string, (widget: any) => void> = {
+				home: () => (window.location.href = "/"),
+				scrollToTop: () => window.scrollTo({ top: 0, behavior: "smooth" }),
+				sleep: (widget) => widget.sleep(),
+				switchModel: (widget) => {
+					// 循环切换：容器 data-models 为准（persist 后 dataset 仍在）
+					const all = JSON.parse(container.dataset.models || "[]");
+					currentModelIndex = (currentModelIndex + 1) % all.length;
+					widget.switchModel(currentModelIndex);
+				},
+			};
+			const menus = JSON.parse(container.dataset.menus || "{}");
+			if (menus.items?.length) {
+				options.menus = {
+					items: menus.items.map((item: any) => ({
+						icon: item.icon,
+						label: item.label,
+						onClick:
+							item.action === "link" && item.url
+								? () => window.open(item.url, "_blank", "noopener")
+								: menuActions[item.action] || (() => {}),
+					})),
+					...(menus.align && { align: menus.align }),
+				};
+			}
+
+			// tips 挂到 model.tips：enable:false 显式关闭；空对象不覆盖库默认
+			const tips = JSON.parse(container.dataset.tips || "null");
+			if (tips) {
+				const tipsConfig =
+					tips.enable === false
+						? false
+						: {
+								...(tips.welcomeMessage?.length && { welcomeMessage: tips.welcomeMessage }),
+								...(tips.messages?.length && { messages: tips.messages }),
+								...(tips.duration !== undefined && { duration: tips.duration }),
+								...(tips.interval !== undefined && { interval: tips.interval }),
+								...(tips.offset && { offset: tips.offset }),
+								...(tips.typing && { typing: tips.typing }),
+							};
+				if (tipsConfig === false || Object.keys(tipsConfig).length > 0) {
+					if (Array.isArray(options.model)) {
+						options.model.forEach((m: any) => (m.tips = tipsConfig));
+					} else {
+						options.model.tips = tipsConfig;
+					}
+				}
+			}
+
+			// 动态导入：~845KB Cubism/WebGL 引擎拆独立 chunk，首屏不解析不阻塞
+			const { createWidget } = await import("l2d-widget");
+			// await 期间 VT 换页可能移除了旧容器：不在 DOM 则放弃，待新容器重新初始化
+			if (!container.isConnected) {
+				initStarted = false;
+				return;
+			}
+
+			// 库无视传入 container、硬挂 document.body：VT 换页重建 body 时 canvas 根被连根
+			// 拔走，Cubism rAF 继续向脱离 DOM 的 canvas 绘制 → 每次导航泄漏一个 WebGL 上下文。
+			// 挂载前后 diff body 子节点，把库新增根节点迁入 persist 容器：换页不死、上下文只建一次
+			const before = new Set(document.body.children);
+			createWidget(options);
+			// guard 成功后才置位：失败/异常路径全部解锁，允许重试
+			container.dataset.l2dInit = "1";
+			for (const el of [...document.body.children]) {
+				if (!before.has(el)) container.appendChild(el);
+			}
+		} catch (err) {
+			console.error("[live2d] 初始化失败：", err);
+			initStarted = false;
+		}
+	}
+
+	// 响应式：跨过断点隐藏/显示，显示时若尚未初始化则补拉起
+	function handleResponsive() {
+		const container = document.getElementById("l2d-widget-container");
+		if (!container) return;
+		const responsive = JSON.parse(container.dataset.responsive || "{}");
+		if (!responsive.hideOnMobile) return;
+		const hidden = window.innerWidth <= (responsive.mobileBreakpoint || 768);
+		container.style.display = hidden ? "none" : "";
+		if (!hidden && container.dataset.l2dInit !== "1") initWidget();
+	}
+
+	// 空闲时再初始化：不与首屏渲染/VT 换页抢主线程（不支持时降级 setTimeout）
+	function scheduleInit() {
+		if (typeof window.requestIdleCallback === "function") {
+			window.requestIdleCallback(() => initWidget(), { timeout: 2000 });
+		} else {
+			setTimeout(initWidget, 200);
+		}
+	}
+
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", scheduleInit, { once: true });
+	} else {
+		scheduleInit();
+	}
+	window.addEventListener("resize", handleResponsive);
+</script>