@fuxishi/vitepress-theme 2.0.0-alpha.1 → 2.0.0-alpha.10

package/README.md

@@ -10,16 +10,14 @@
 - 🎊 **点击彩纸** — 全局点击彩纸特效，支持金色星星、彩色纸片和自定义 Emoji
 - 🎨 **Hero 图片取色** — 自动提取首页 hero 图片颜色，动态应用到背景光晕、标题渐变、代码块光束和音乐球
 - ✨ **Feature 光效** — 首页 Feature 卡片鼠标追踪光晕效果
-- ✨ **光束边框** — 暗色模式下代码块和导航 hover 时展示紫青品牌色光束旋转边框
+- ✨ **光束边框** — 暗色模式下代码块、代码组和导航 hover 时展示紫青品牌色光束旋转边框
 - 🔄 **主题切换动画** — View Transition API 实现亮暗模式圆形扩散动画
 - 📜 **平滑滚动** — 右侧大纲导航点击时平滑滚动，指示条丝滑过渡
 - 🎨 **标题装饰** — h1-h4 各有不同颜色的下划线装饰
 - 📦 **代码块折叠** — 超过指定行数的代码块自动折叠，底部毛玻璃模糊遮罩，可配置折叠行数阈值
 - ⚙️ **类型安全** — 完整的 TypeScript 类型定义，IDE 友好
 
-> **注意：** `1.0.9` 及之前的版本仅适用于 VitePress `1.6.4`。如果你使用 VitePress 2.x，请等待主题后续版本适配。
->
-> ⚠️ `1.0.10` 版本的代码块折叠展开功能存在问题，已废弃，请升级到 `1.0.11` 及以上版本。
+> **注意：** 本版本（v2.x）基于 VitePress `2.0` 开发，不向下兼容 VitePress 1.x。
 
 ## 安装
 
@@ -51,11 +49,14 @@ export default FxTheme
 创建 `.vitepress/config.mts`：
 
 ```ts
-import { defineConfigWithTheme } from "vitepress"
+import { defineConfig } from "vitepress"
+import type { DefaultTheme } from "vitepress"
 import fxConfig from "@fuxishi/vitepress-theme/config"
-import type { FxThemeConfig } from "@fuxishi/vitepress-theme/config"
+import type { FxThemeCustomConfig } from "@fuxishi/vitepress-theme"
 
-export default defineConfigWithTheme<FxThemeConfig>({
+type ThemeConfig = DefaultTheme.Config & FxThemeCustomConfig
+
+export default defineConfig<ThemeConfig>({
   extends: fxConfig,
   lang: "zh-CN",
   title: "我的文档站",
@@ -97,9 +98,9 @@ npx vitepress dev
 
 ## 配置
 
-### FxThemeConfig
+### FxThemeCustomConfig
 
-继承自 VitePress `DefaultTheme.Config`，新增以下字段：
+通过 `DefaultTheme.Config & FxThemeCustomConfig` 交叉类型扩展 VitePress 默认主题配置，新增以下字段：
 
 | 配置项                | 类型                        | 默认值   | 说明                                                   |
 | --------------------- | --------------------------- | -------- | ------------------------------------------------------ |

package/README_EN.md

@@ -0,0 +1,140 @@
+# @fuxishi/vitepress-theme
+
+A beautiful VitePress theme extension with frosted glass effects, purple-blue gradients, rich animations, and ready to use.
+
+[中文](./README.md)
+
+## Features
+
+- 🎵 **Floating Music Ball** — Frosted glass floating player with single/playlist mode, purple-blue gradient progress ring and four playback animations
+- 🎊 **Click Confetti** — Global click confetti effect with gold stars, colored paper pieces, and custom Emoji
+- 🎨 **Hero Image Color** — Auto-extract colors from hero image for background glow, title gradient, code block beams, and music ball
+- ✨ **Feature Glow** — Mouse-tracking glow effect on homepage Feature cards
+- ✨ **Beam Border** — Purple-cyan brand color beam border on code blocks, code groups, and navigation in dark mode on hover
+- 🔄 **Theme Switch Animation** — Circular spread animation for light/dark mode switching using View Transition API
+- 📜 **Smooth Scroll** — Smooth scrolling when clicking outline navigation with silky marker transition
+- 🎨 **Heading Decorations** — Different colored underlines for h1-h4 headings
+- 📦 **Code Block Fold** — Auto-fold code blocks exceeding a line threshold with frosted glass blur overlay, configurable fold line count
+- ⚙️ **Type-safe** — Complete TypeScript type definitions, IDE friendly
+
+> **Note:** This version (v2.x) is built on VitePress `2.0` and is not backward compatible with VitePress 1.x.
+
+## Installation
+
+```bash
+npm install @fuxishi/vitepress-theme
+```
+
+Install peerDependencies:
+
+```bash
+npm install vitepress
+```
+
+## Usage
+
+### 1. Register Theme
+
+Create `.vitepress/theme/index.ts`:
+
+```ts
+import FxTheme from "@fuxishi/vitepress-theme"
+import "@fuxishi/vitepress-theme/style.css"
+
+export default FxTheme
+```
+
+### 2. Extend Configuration
+
+Create `.vitepress/config.mts`:
+
+```ts
+import { defineConfig } from "vitepress"
+import type { DefaultTheme } from "vitepress"
+import fxConfig from "@fuxishi/vitepress-theme/config"
+import type { FxThemeCustomConfig } from "@fuxishi/vitepress-theme"
+
+type ThemeConfig = DefaultTheme.Config & FxThemeCustomConfig
+
+export default defineConfig<ThemeConfig>({
+  extends: fxConfig,
+  lang: "en",
+  title: "My Docs",
+  themeConfig: {
+    nav: [{ text: "Guide", link: "/guide/" }],
+    sidebar: {
+      "/guide/": [{ text: "Getting Started", link: "/guide/" }],
+    },
+    // Enable music ball
+    musicBall: {
+      enable: true,
+      autoplay: false,
+      loop: true,
+      src: "/music/my-song.mp3",
+    },
+    // Enable confetti
+    confetti: true,
+    // Colored paper pieces
+    // confetti: { shape: "colored-paper" },
+    // Custom Emoji
+    // confetti: { shapes: ["🌸", "🎀"] },
+    // Enable hero image color extraction
+    heroImageColor: true,
+    // Enable smooth scroll
+    smoothScroll: true,
+    // Code block fold (enabled by default, 10 lines threshold)
+    codeBlockFold: true,
+    // Custom fold line threshold
+    // codeBlockFold: { lines: 20 },
+  },
+})
+```
+
+### 3. Start Dev Server
+
+```bash
+npx vitepress dev
+```
+
+## Configuration
+
+### FxThemeCustomConfig
+
+Extends VitePress `DefaultTheme.Config` via intersection type `DefaultTheme.Config & FxThemeCustomConfig`, adding the following fields:
+
+| Option                | Type                        | Default  | Description                                                       |
+| --------------------- | --------------------------- | -------- | ----------------------------------------------------------------- |
+| `musicBall.enable`    | `boolean`                   | `true`   | Enable music ball                                                 |
+| `musicBall.visible`   | `boolean`                   | `true`   | Visibility                                                        |
+| `musicBall.autoplay`  | `boolean`                   | `false`  | Autoplay                                                          |
+| `musicBall.loop`      | `boolean`                   | `true`   | Loop playback (single mode)                                       |
+| `musicBall.src`       | `string`                    | `''`     | Single music URL                                                  |
+| `musicBall.list`      | `MusicItem[]`               | —        | Multi-song playlist                                               |
+| `confetti`            | `boolean \| object`         | `true`   | Enable confetti                                                   |
+| `confetti.shape`      | `'star' \| 'colored-paper'` | `'star'` | Preset shape                                                      |
+| `confetti.shapes`     | `string \| string[]`        | —        | Custom Emoji shapes                                               |
+| `confetti.secondary`  | `boolean`                   | `true`   | Whether to add secondary particles                                |
+| `heroImageColor`      | `boolean`                   | `false`  | Auto-extract hero image colors (affects glow, title, beams, ball) |
+| `smoothScroll`        | `boolean`                   | `false`  | Enable smooth scrolling and outline marker transition             |
+| `codeBlockFold`       | `boolean \| object`         | `true`   | Enable code block folding                                         |
+| `codeBlockFold.lines` | `number`                    | `10`     | Line count threshold for folding                                  |
+
+## Exports
+
+| Export Path                          | Description                  |
+| ------------------------------------ | ---------------------------- |
+| `@fuxishi/vitepress-theme`           | Theme (Layout + Styles)      |
+| `@fuxishi/vitepress-theme/config`    | VitePress base config preset |
+| `@fuxishi/vitepress-theme/style.css` | Standalone style file        |
+
+## Documentation
+
+Full documentation:
+
+[https://fuxishi-vitepress-theme.fuxizjxzy.cn](https://fuxishi-vitepress-theme.fuxizjxzy.cn)
+
+## License
+
+[MIT](./LICENSE)
+
+> Will be open-sourced on GitHub in the future.

package/dist/chunk/{FxCodeBlockFold-C7zqZ39g.js → FxCodeBlockFold-DGFv2bTG.js}

@@ -1,18 +1,18 @@
-import { t as e } from "./icons-DtAsNqxj.js";
+import { t as e } from "./icons-BLv72Cfw.js";
 import { defineComponent as t, nextTick as n, onBeforeUnmount as r, onMounted as i, watch as a } from "vue";
 import { useRoute as o } from "vitepress";
 //#region .vitepress/components/FxCodeBlockFold.ts
-var s = "fx-code-folded", c = "fx-code-fold-overlay", l = t({
+var s = "fx-code-folded", c = "fx-code-fold-overlay", l = "div[class*='language-']", u = t({
 	props: { lines: {
 		type: Number,
 		default: 10
 	} },
 	setup(t) {
-		function l() {
+		function u() {
 			let n = t.lines ?? 10;
-			document.querySelectorAll(".vp-adaptive-theme").forEach((t) => {
+			document.querySelectorAll(l).forEach((t) => {
 				if (t.classList.contains(c) || t.classList.contains("vp-code-group")) return;
-				let r = t.querySelector("pre.vp-code code");
+				let r = t.querySelector("pre.shiki code");
 				if (!r) return;
 				if (r.querySelectorAll(".line").length <= n) {
 					t.classList.add("fx-code-no-fold");
@@ -29,29 +29,29 @@ var s = "fx-code-folded", c = "fx-code-fold-overlay", l = t({
 				}), t.appendChild(i);
 			});
 		}
-		let u = null;
-		function d() {
-			u?.disconnect();
+		let d = null;
+		function f() {
+			d?.disconnect();
 			let e = document.querySelector(".vp-doc");
-			e && (u = new MutationObserver(() => {
-				requestAnimationFrame(l);
-			}), u.observe(e, {
+			e && (d = new MutationObserver(() => {
+				requestAnimationFrame(u);
+			}), d.observe(e, {
 				childList: !0,
 				subtree: !0
 			}));
 		}
 		i(() => {
-			l(), d();
+			u(), f();
 		});
-		let f = o();
-		return a(() => f.path, () => {
+		let p = o();
+		return a(() => p.path, () => {
 			n(() => {
-				l(), d();
+				u(), f();
 			});
 		}), r(() => {
-			u?.disconnect();
+			d?.disconnect();
 		}), () => null;
 	}
 });
 //#endregion
-export { l as default };
+export { u as default };

package/dist/chunk/{FxHeroImageBg-CiY3qciK.js → FxHeroImageBg-BWDDLukW.js}

@@ -1,22 +1,22 @@
 import { defineComponent as e, nextTick as t, onBeforeUnmount as n, onMounted as r, watch as i } from "vue";
-import { useData as a, useRoute as o } from "vitepress";
-import { Vibrant as s } from "node-vibrant/browser";
+import { useData as a, useRoute as o, withBase as s } from "vitepress";
+import { Vibrant as c } from "node-vibrant/browser";
 //#region .vitepress/components/FxHeroImageBg.ts
-var c = "fx-hero-colors";
-function l() {
+var l = "fx-hero-colors";
+function u() {
 	try {
-		let e = localStorage.getItem(c);
+		let e = localStorage.getItem(l);
 		return e ? JSON.parse(e) : null;
 	} catch {
 		return null;
 	}
 }
-function u(e) {
+function d(e) {
 	try {
-		localStorage.setItem(c, JSON.stringify(e));
+		localStorage.setItem(l, JSON.stringify(e));
 	} catch {}
 }
-function d(e) {
+function f(e) {
 	return [
 		e.Vibrant,
 		e.DarkVibrant,
@@ -26,63 +26,63 @@ function d(e) {
 		e.LightMuted
 	].filter(Boolean);
 }
-function f(e) {
+function p(e) {
 	return e.slice().sort((e, t) => e.hsl[0] - t.hsl[0]).map((e) => e.hex);
 }
-function p(e) {
-	let t = d(e);
+function m(e) {
+	let t = f(e);
 	if (t.length === 0) return "-webkit-linear-gradient(-45deg, #bd34fe 50%, #47caff 50%)";
-	let n = f(t);
+	let n = p(t);
 	return `conic-gradient(from 0deg, ${[...n, n[0]].join(", ")})`;
 }
-function m(e, t) {
+function h(e, t) {
 	let n = Math.abs(e - t);
 	return Math.min(n, 360 - n);
 }
-function h(e) {
-	let t = d(e);
+function g(e) {
+	let t = f(e);
 	if (t.length < 2) return "linear-gradient(120deg, #bd34fe, #41d1ff)";
 	let n = -1, r = [t[0].hex, t[1].hex];
 	for (let e = 0; e < t.length; e++) for (let i = e + 1; i < t.length; i++) {
-		let a = m(t[e].hsl[0], t[i].hsl[0]);
+		let a = h(t[e].hsl[0], t[i].hsl[0]);
 		a > n && (n = a, r = [t[e].hex, t[i].hex]);
 	}
 	return `linear-gradient(120deg, ${r[0]}, ${r[1]})`;
 }
-function g(e) {
+function _(e) {
 	return `${parseInt(e.slice(1, 3), 16)}, ${parseInt(e.slice(3, 5), 16)}, ${parseInt(e.slice(5, 7), 16)}`;
 }
-function _(e) {
-	let t = d(e);
+function v(e) {
+	let t = f(e);
 	if (t.length < 2) return ["189, 52, 254", "65, 209, 255"];
 	let n = -1, r = [t[0], t[1]];
 	for (let e = 0; e < t.length; e++) for (let i = e + 1; i < t.length; i++) {
-		let a = m(t[e].hsl[0], t[i].hsl[0]);
+		let a = h(t[e].hsl[0], t[i].hsl[0]);
 		a > n && (n = a, r = [t[e], t[i]]);
 	}
-	return [g(r[0].hex), g(r[1].hex)];
+	return [_(r[0].hex), _(r[1].hex)];
 }
-function v() {
+function y() {
 	return document.documentElement.classList.contains("dark");
 }
-function y(e) {
-	let [t, n] = _(e);
+function b(e) {
+	let [t, n] = v(e);
 	return {
-		imageGradient: p(e),
-		nameGradient: h(e),
+		imageGradient: m(e),
+		nameGradient: g(e),
 		beamC1: t,
 		beamC2: n
 	};
 }
-function b(e) {
+function x(e) {
 	let t = document.documentElement;
 	t.style.setProperty("--vp-home-hero-image-background-image", e.imageGradient), t.style.setProperty("--vp-home-hero-name-background", e.nameGradient), t.style.setProperty("--fx-beam-c1", e.beamC1), t.style.setProperty("--fx-beam-c2", e.beamC2);
 }
-function x(e) {
+function S(e) {
 	let t = document.documentElement;
 	t.style.setProperty("--fx-beam-c1", e.beamC1), t.style.setProperty("--fx-beam-c2", e.beamC2);
 }
-var S = e({
+var C = e({
 	props: { heroImageColor: {
 		type: Boolean,
 		default: !1
@@ -90,127 +90,100 @@ var S = e({
 	render: () => null,
 	setup(e) {
 		if (!e.heroImageColor) return;
-		let d = null, f = o(), { frontmatter: p } = a();
-		function m() {
+		let f = null, p = o(), { frontmatter: m, site: h } = a();
+		function g() {
 			let e = document.documentElement;
 			e.style.removeProperty("--vp-home-hero-image-background-image"), e.style.removeProperty("--vp-home-hero-name-background"), e.style.removeProperty("--fx-beam-c1"), e.style.removeProperty("--fx-beam-c2");
 		}
-		function h(e) {
-			return v() ? e.dark || e.light : e.light || e.dark;
+		function _(e) {
+			return y() ? e.dark || e.light : e.light || e.dark;
 		}
-		function g(e) {
-			let t = l();
-			return !t || !t.images ? !1 : e && (e.light && t.images.light && e.light !== t.images.light || e.dark && t.images.dark && e.dark !== t.images.dark) ? (localStorage.removeItem(c), !0) : !1;
+		function v(e) {
+			let t = u();
+			return !t || !t.images ? !1 : e && (e.light && t.images.light && e.light !== t.images.light || e.dark && t.images.dark && e.dark !== t.images.dark) ? (localStorage.removeItem(l), !0) : !1;
 		}
-		function _() {
-			let e = l();
-			if (!e) return !1;
-			let t = h(e);
-			return t ? (b(t), !0) : !1;
-		}
-		function S() {
-			let e = l();
+		function C() {
+			let e = u();
 			if (!e) return !1;
-			let t = h(e);
+			let t = _(e);
 			return t ? (x(t), !0) : !1;
 		}
-		function C() {
-			return p.value.fxHeroImages || {};
+		function w() {
+			let e = u();
+			if (!e) return !1;
+			let t = _(e);
+			return t ? (S(t), !0) : !1;
 		}
-		async function w() {
-			try {
-				let e = await import(
-					/* @vite-ignore */
-					"/index.md"
-), t = (typeof e.__pageData == "string" ? JSON.parse(e.__pageData) : e.__pageData)?.frontmatter?.hero?.image;
-				return t ? typeof t == "string" ? {
-					light: t,
-					dark: t
-				} : {
-					light: t.light,
-					dark: t.dark
-				} : null;
-			} catch {
-				return null;
-			}
+		function T() {
+			return m.value.fxHeroImages || {};
 		}
-		async function T(e, t) {
+		async function E(e, t) {
 			let n = e.src;
 			if (n) try {
-				let e = y(await s.from(n).quality(1).getPalette());
-				(v() && t === "dark" || !v() && t === "light") && b(e);
-				let r = l() || {};
-				r[t] = e, r.images ||= {}, r.images[t] = n, u(r);
+				let e = b(await c.from(n).quality(1).getPalette());
+				(y() && t === "dark" || !y() && t === "light") && x(e);
+				let r = u() || {};
+				r[t] = e, r.images ||= {}, r.images[t] = n, d(r);
 			} catch {}
 		}
-		async function E(e, t) {
+		async function D(e, t) {
 			try {
-				let n = y(await s.from(e).quality(1).getPalette()), r = l() || {};
-				return r[t] = n, r.images ||= {}, r.images[t] = e, u(r), n;
+				let n = b(await c.from(e).quality(1).getPalette()), r = u() || {};
+				return r[t] = n, r.images ||= {}, r.images[t] = e, d(r), n;
 			} catch {
 				return null;
 			}
 		}
-		async function D(e) {
+		async function O(e, t = !0) {
 			if (!e.light && !e.dark) return;
-			let t = {};
+			let n = {};
 			if (e.light) {
-				let n = await E(e.light, "light");
-				n && (t.light = n);
+				let r = await D(t ? s(e.light) : e.light, "light");
+				r && (n.light = r);
 			}
 			if (e.dark) {
-				let n = await E(e.dark, "dark");
-				n && (t.dark = n);
+				let r = await D(t ? s(e.dark) : e.dark, "dark");
+				r && (n.dark = r);
 			}
-			if (t.light || t.dark) {
-				let e = v() ? t.dark || t.light : t.light || t.dark;
-				e && b(e);
+			if (n.light || n.dark) {
+				let e = y() ? n.dark || n.light : n.light || n.dark;
+				e && x(e);
 			}
 		}
-		async function O() {
-			let e = C();
+		async function k() {
+			let e = T();
 			if (e.light || e.dark) {
-				await D(e);
-				return;
-			}
-			let t = await w();
-			if (t) {
-				await D(t);
+				await O(e);
 				return;
 			}
 			try {
-				let e = await (await fetch(window.location.origin + "/")).text(), t = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".VPHero .image-container img.VPImage"), n = {};
+				let e = await (await fetch(window.location.origin + h.value.base)).text(), t = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".VPHero .image-container img.VPImage"), n = {};
 				t.forEach((e) => {
 					let t = e.getAttribute("src");
 					t && (e.classList.contains("dark") ? n.dark = t : n.light = t);
-				}), (n.light || n.dark) && await D(n);
+				}), (n.light || n.dark) && await O(n, !1);
 			} catch {}
 		}
-		function k() {
+		function A() {
 			let e = document.querySelector(".VPHero .image-container img.VPImage.light"), t = document.querySelector(".VPHero .image-container img.VPImage.dark");
-			e || t ? (e && e.complete && e.naturalWidth > 0 ? T(e, "light") : e && e.addEventListener("load", () => T(e, "light"), { once: !0 }), t && t.complete && t.naturalWidth > 0 ? T(t, "dark") : t && t.addEventListener("load", () => T(t, "dark"), { once: !0 })) : (m(), S(), w().then((e) => {
-				if (e && (e.light || e.dark)) {
-					let t = l();
-					t?.images && (e.light && t.images.light && e.light !== t.images.light || e.dark && t.images.dark && e.dark !== t.images.dark) && (localStorage.removeItem(c), D(e));
-				}
-			}), O());
+			e || t ? (e && e.complete && e.naturalWidth > 0 ? E(e, "light") : e && e.addEventListener("load", () => E(e, "light"), { once: !0 }), t && t.complete && t.naturalWidth > 0 ? E(t, "dark") : t && t.addEventListener("load", () => E(t, "dark"), { once: !0 })) : (g(), w(), k());
 		}
 		r(() => {
-			g(C()), _() || O(), k(), d = new MutationObserver((e) => {
+			v(T()), C() || k(), A(), f = new MutationObserver((e) => {
 				for (let t of e) if (t.attributeName === "class") {
-					S(), k();
+					w(), A();
 					break;
 				}
-			}), d.observe(document.documentElement, {
+			}), f.observe(document.documentElement, {
 				attributes: !0,
 				attributeFilter: ["class"]
 			});
-		}), i(() => f.path, () => {
-			t(k);
+		}), i(() => p.path, () => {
+			t(A);
 		}), n(() => {
-			d?.disconnect(), m();
+			f?.disconnect(), g();
 		});
 	}
 });
 //#endregion
-export { S as default };
+export { C as default };