@fuxishi/vitepress-theme 2.0.0-alpha.4 → 2.0.0-alpha.6

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/{FxHeroImageBg-AXhVm0se.js → FxHeroImageBg-DyiZOKOD.js}

@@ -117,24 +117,7 @@ var C = e({
 		function T() {
 			return m.value.fxHeroImages || {};
 		}
-		async function E() {
-			try {
-				let e = await import(
-					/* @vite-ignore */
-					[h.value.base, "index.md"].join("")
-), 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;
-			}
-		}
-		async function D(e, t) {
+		async function E(e, t) {
 			let n = e.src;
 			if (n) try {
 				let e = b(await c.from(n).quality(1).getPalette());
@@ -143,7 +126,7 @@ var C = e({
 				r[t] = e, r.images ||= {}, r.images[t] = n, d(r);
 			} catch {}
 		}
-		async function O(e, t) {
+		async function D(e, t) {
 			try {
 				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;
@@ -151,15 +134,15 @@ var C = e({
 				return null;
 			}
 		}
-		async function k(e, t = !0) {
+		async function O(e, t = !0) {
 			if (!e.light && !e.dark) return;
 			let n = {};
 			if (e.light) {
-				let r = await O(t ? s(e.light) : e.light, "light");
+				let r = await D(t ? s(e.light) : e.light, "light");
 				r && (n.light = r);
 			}
 			if (e.dark) {
-				let r = await O(t ? s(e.dark) : e.dark, "dark");
+				let r = await D(t ? s(e.dark) : e.dark, "dark");
 				r && (n.dark = r);
 			}
 			if (n.light || n.dark) {
@@ -167,38 +150,28 @@ var C = e({
 				e && x(e);
 			}
 		}
-		async function A() {
+		async function k() {
 			let e = T();
 			if (e.light || e.dark) {
-				await k(e);
-				return;
-			}
-			let t = await E();
-			if (t) {
-				await k(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 k(n, !1);
+				}), (n.light || n.dark) && await O(n, !1);
 			} catch {}
 		}
-		function j() {
+		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 ? D(e, "light") : e && e.addEventListener("load", () => D(e, "light"), { once: !0 }), t && t.complete && t.naturalWidth > 0 ? D(t, "dark") : t && t.addEventListener("load", () => D(t, "dark"), { once: !0 })) : (g(), w(), E().then((e) => {
-				if (e && (e.light || e.dark)) {
-					let t = u();
-					t?.images && (e.light && t.images.light && e.light !== t.images.light || e.dark && t.images.dark && e.dark !== t.images.dark) && (localStorage.removeItem(l), k(e));
-				}
-			}), A());
+			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(() => {
-			v(T()), C() || A(), j(), f = new MutationObserver((e) => {
+			v(T()), C() || k(), A(), f = new MutationObserver((e) => {
 				for (let t of e) if (t.attributeName === "class") {
-					w(), j();
+					w(), A();
 					break;
 				}
 			}), f.observe(document.documentElement, {
@@ -206,7 +179,7 @@ var C = e({
 				attributeFilter: ["class"]
 			});
 		}), i(() => p.path, () => {
-			t(j);
+			t(A);
 		}), n(() => {
 			f?.disconnect(), g();
 		});

package/dist/index.d.ts

@@ -1,2 +1,12 @@
-export type { FxThemeCustomConfig, MusicItem, ConfettiShape, ConfettiConfig } from './config'
-export { default as configPreset } from './config'
+import type { Theme } from "vitepress";
+
+declare const theme: Theme;
+export default theme;
+
+export type {
+  FxThemeCustomConfig,
+  MusicItem,
+  ConfettiShape,
+  ConfettiConfig,
+} from "./config";
+export { default as configPreset } from "./config";

package/dist/index.js

@@ -32,7 +32,7 @@ var d = {
 			}, t = document.querySelector(".VPNavBarTitle .title");
 			t && (x = new ResizeObserver(e), x.observe(t)), e();
 		}), a(() => x?.disconnect());
-		let w = c(() => import("./chunk/FxMusicBall-CTP51ydo.js"), [{ style: { display: g.musicBall && g.musicBall.visible ? "" : "none" } }]), T = c(() => import("./chunk/FxHomeFeatureBefore-Cd9m9wit.js")), E = c(() => import("./chunk/FxConfetti-DFRD5KKS.js"), [{ confetti: g.confetti }]), D = c(() => import("./chunk/FxHeroImageBg-AXhVm0se.js"), [{ heroImageColor: g.heroImageColor }]), O = c(() => import("./chunk/FxCodeBlockFold-BZw-1rNl.js"), [{ lines: C }]);
+		let w = c(() => import("./chunk/FxMusicBall-CTP51ydo.js"), [{ style: { display: g.musicBall && g.musicBall.visible ? "" : "none" } }]), T = c(() => import("./chunk/FxHomeFeatureBefore-Cd9m9wit.js")), E = c(() => import("./chunk/FxConfetti-DFRD5KKS.js"), [{ confetti: g.confetti }]), D = c(() => import("./chunk/FxHeroImageBg-DyiZOKOD.js"), [{ heroImageColor: g.heroImageColor }]), O = c(() => import("./chunk/FxCodeBlockFold-BZw-1rNl.js"), [{ lines: C }]);
 		return () => [
 			S && n("style", `:root{--fx-code-fold-lines:${C || 10}}`),
 			g.heroImageColor && n("style", ":root{--vp-home-hero-image-background-image:none;--vp-home-hero-name-color:transparent;--vp-home-hero-name-background:none}"),

package/dist/style.css.d.ts

@@ -1 +1 @@
-export {}
+export {}

package/package.json

@@ -2,40 +2,41 @@
   "name": "@fuxishi/vitepress-theme",
   "displayName": "@fuxishi/vitepress-theme",
   "private": false,
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.6",
   "license": "MIT",
   "description": "一款精美的 VitePress 主题",
   "keywords": [
     "vitepress",
-    "theme",
     "vitepress-theme",
     "@fuxishi/vitepress-theme",
     "fuxishi"
   ],
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "LICENSE",
+    "README.md",
+    "README_EN.md",
+    "package.json"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./config": {
-      "import": {
-        "types": "./dist/config.d.ts",
-        "default": "./dist/config.js"
-      }
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js",
+      "default": "./dist/config.js"
     },
     "./style.css": {
-      "import": {
-        "types": "./dist/style.css.d.ts",
-        "default": "./dist/style.css"
-      }
+      "types": "./dist/style.css.d.ts",
+      "import": "./dist/style.css",
+      "default": "./dist/style.css"
     }
   },
   "scripts": {