vitepress-plugin-codepen 0.3.0 → 0.5.0

package/dist/client/browser/index.d.ts

@@ -2,20 +2,25 @@ import { EnhanceAppContext } from "vitepress/client";
 
 //#region src/client/VPCodepen.vue.d.ts
 type __VLS_Props = {
-  user: string;
-  slash: string;
-  title?: string;
-  preview?: boolean;
-  editable?: boolean;
-  tab?: string;
-  theme?: 'light' | 'dark';
-  width?: string;
+  /** CodePen user name owning the Pen / 拥有该 Pen 的 CodePen 用户名 */user: string; /** Pen slug identifier used in the CodePen URL / Pen 标识，用于 CodePen URL 中 */
+  slash: string; /** Pen title displayed as the iframe `title` attribute / Pen 标题，作为 iframe 的 `title` 属性显示 */
+  title?: string; /** Whether to render the preview embed view / 是否渲染预览嵌入视图 */
+  preview?: boolean; /** Whether the embedded Pen is editable by the viewer / 嵌入的 Pen 是否可被查看者编辑 */
+  editable?: boolean; /** Comma-separated list of tabs to display / 要显示的选项卡列表，以逗号分隔 */
+  tab?: string; /** Embed theme, follows site theme when omitted / 嵌入主题，省略时跟随站点主题 */
+  theme?: 'light' | 'dark'; /** Iframe width, defaults to `100%` / iframe 宽度，默认为 `100%` */
+  width?: string; /** Iframe height, defaults to `400px` / iframe 高度，默认为 `400px` */
   height?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
 //#region src/client/index.d.ts
+/**
+ * Enhances the VitePress application by registering the `VPCodepen` component.
+ *
+ * 通过注册 `VPCodepen` 组件来增强 VitePress 应用。
+ */
 declare function enhanceAppWithCodepen({
   app
 }: EnhanceAppContext): void;

package/dist/client/browser/index.js

@@ -18,6 +18,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	},
 	setup(__props) {
 		const { isDark } = useData();
+		/**
+		* Builds the CodePen embed URL from the component props.
+		*
+		* 根据组件 props 构建 CodePen 嵌入 URL。
+		*
+		* The URL switches between preview and standard embed endpoints, and forwards
+		* the `editable`, `tab`, and `theme` options as query parameters. When `theme`
+		* is omitted, it falls back to the current site theme.
+		*
+		* URL 会在预览和标准嵌入端点之间切换，并将 `editable`、`tab` 和 `theme`
+		* 选项作为查询参数传递。当省略 `theme` 时，回退到当前站点主题。
+		*
+		* @returns The fully qualified CodePen embed URL / 完整的 CodePen 嵌入 URL
+		*/
 		const link = computed(() => {
 			const middle = __props.preview ? "/embed/preview/" : "/embed/";
 			const params = new URLSearchParams();
@@ -50,6 +64,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/client/index.ts
+/**
+* Enhances the VitePress application by registering the `VPCodepen` component.
+*
+* 通过注册 `VPCodepen` 组件来增强 VitePress 应用。
+*/
 function enhanceAppWithCodepen({ app }) {
 	app.component("VPCodepen", _sfc_main);
 }

package/dist/client/ssr/index.d.ts

@@ -2,20 +2,25 @@ import { EnhanceAppContext } from "vitepress/client";
 
 //#region src/client/VPCodepen.vue.d.ts
 type __VLS_Props = {
-  user: string;
-  slash: string;
-  title?: string;
-  preview?: boolean;
-  editable?: boolean;
-  tab?: string;
-  theme?: 'light' | 'dark';
-  width?: string;
+  /** CodePen user name owning the Pen / 拥有该 Pen 的 CodePen 用户名 */user: string; /** Pen slug identifier used in the CodePen URL / Pen 标识，用于 CodePen URL 中 */
+  slash: string; /** Pen title displayed as the iframe `title` attribute / Pen 标题，作为 iframe 的 `title` 属性显示 */
+  title?: string; /** Whether to render the preview embed view / 是否渲染预览嵌入视图 */
+  preview?: boolean; /** Whether the embedded Pen is editable by the viewer / 嵌入的 Pen 是否可被查看者编辑 */
+  editable?: boolean; /** Comma-separated list of tabs to display / 要显示的选项卡列表，以逗号分隔 */
+  tab?: string; /** Embed theme, follows site theme when omitted / 嵌入主题，省略时跟随站点主题 */
+  theme?: 'light' | 'dark'; /** Iframe width, defaults to `100%` / iframe 宽度，默认为 `100%` */
+  width?: string; /** Iframe height, defaults to `400px` / iframe 高度，默认为 `400px` */
   height?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
 //#region src/client/index.d.ts
+/**
+ * Enhances the VitePress application by registering the `VPCodepen` component.
+ *
+ * 通过注册 `VPCodepen` 组件来增强 VitePress 应用。
+ */
 declare function enhanceAppWithCodepen({
   app
 }: EnhanceAppContext): void;

package/dist/client/ssr/index.js

@@ -19,6 +19,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	},
 	setup(__props) {
 		const { isDark } = useData();
+		/**
+		* Builds the CodePen embed URL from the component props.
+		*
+		* 根据组件 props 构建 CodePen 嵌入 URL。
+		*
+		* The URL switches between preview and standard embed endpoints, and forwards
+		* the `editable`, `tab`, and `theme` options as query parameters. When `theme`
+		* is omitted, it falls back to the current site theme.
+		*
+		* URL 会在预览和标准嵌入端点之间切换，并将 `editable`、`tab` 和 `theme`
+		* 选项作为查询参数传递。当省略 `theme` 时，回退到当前站点主题。
+		*
+		* @returns The fully qualified CodePen embed URL / 完整的 CodePen 嵌入 URL
+		*/
 		const link = computed(() => {
 			const middle = __props.preview ? "/embed/preview/" : "/embed/";
 			const params = new URLSearchParams();
@@ -57,6 +71,11 @@ _sfc_main.setup = (props, ctx) => {
 };
 //#endregion
 //#region src/client/index.ts
+/**
+* Enhances the VitePress application by registering the `VPCodepen` component.
+*
+* 通过注册 `VPCodepen` 组件来增强 VitePress 应用。
+*/
 function enhanceAppWithCodepen({ app }) {
 	app.component("VPCodepen", _sfc_main);
 }

package/dist/node/index.d.ts

@@ -2,7 +2,18 @@ import { PluginSimple } from "markdown-it";
 
 //#region src/node/plugin.d.ts
 /**
+ * VitePress plugin for embedding CodePen demos.
+ *
+ * VitePress 插件，用于嵌入 CodePen 演示。
+ *
+ * The plugin registers a markdown embed rule (`@codepen`) and the `VPCodepen`
+ * Vue component, which renders an iframe pointing to the CodePen embed service.
+ *
+ * 该插件注册 markdown 嵌入规则（`@codepen`）和 `VPCodepen` Vue 组件，
+ * 组件会渲染指向 CodePen 嵌入服务的 iframe。
+ *
  * @example
+ * `.vitepress/config.ts`
  * ```ts
  * import codepen from 'vitepress-plugin-codepen'
  * import { defineConfig } from 'vitepress-tuck'
@@ -15,7 +26,24 @@ declare const codepen: (options?: unknown) => import("vitepress-tuck").Vitepress
 //#endregion
 //#region src/node/markdown.d.ts
 /**
+ * markdown-it plugin that registers the `@codepen` embed block rule.
+ *
+ * markdown-it 插件，注册 `@codepen` 嵌入块规则。
+ *
+ * Supported syntaxes:
+ * - `@[codepen](user/slash)` — default embed view / 默认嵌入视图
+ * - `@[codepen preview](user/slash)` — preview embed view / 预览嵌入视图
+ * - `@[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)`
+ *   — fully customized embed / 完全自定义的嵌入
+ *
+ * 支持的语法：
+ * - `@[codepen](user/slash)` — 默认嵌入视图
+ * - `@[codepen preview](user/slash)` — 预览嵌入视图
+ * - `@[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)`
+ *   — 完全自定义的嵌入
+ *
  * @example
+ * `.vitepress/config.ts`
  * ```ts
  * import { codepenMarkdownPlugin } from 'vitepress-plugin-codepen'
  * import { defineConfig } from 'vitepress'

package/dist/node/index.js

@@ -2,7 +2,24 @@ import { definePlugin } from "vitepress-tuck";
 import { createEmbedRuleBlock, parseRect, resolveAttrs, stringifyAttrs } from "vitepress-plugin-toolkit";
 //#region src/node/markdown.ts
 /**
+* markdown-it plugin that registers the `@codepen` embed block rule.
+*
+* markdown-it 插件，注册 `@codepen` 嵌入块规则。
+*
+* Supported syntaxes:
+* - `@[codepen](user/slash)` — default embed view / 默认嵌入视图
+* - `@[codepen preview](user/slash)` — preview embed view / 预览嵌入视图
+* - `@[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)`
+*   — fully customized embed / 完全自定义的嵌入
+*
+* 支持的语法：
+* - `@[codepen](user/slash)` — 默认嵌入视图
+* - `@[codepen preview](user/slash)` — 预览嵌入视图
+* - `@[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)`
+*   — 完全自定义的嵌入
+*
 * @example
+* `.vitepress/config.ts`
 * ```ts
 * import { codepenMarkdownPlugin } from 'vitepress-plugin-codepen'
 * import { defineConfig } from 'vitepress'
@@ -18,8 +35,7 @@ import { createEmbedRuleBlock, parseRect, resolveAttrs, stringifyAttrs } from "v
 const codepenMarkdownPlugin = (md) => {
 	createEmbedRuleBlock(md, {
 		type: "codepen",
-		syntaxPattern: /^@\[codepen([^\]]*)\]\(([^)]*)\)/,
-		meta: ([, info, source]) => {
+		meta: (info, source) => {
 			const { width, height, title, tab, ...rest } = resolveAttrs(info);
 			const [user, slash] = source.split("/");
 			return {
@@ -38,7 +54,18 @@ const codepenMarkdownPlugin = (md) => {
 //#endregion
 //#region src/node/plugin.ts
 /**
+* VitePress plugin for embedding CodePen demos.
+*
+* VitePress 插件，用于嵌入 CodePen 演示。
+*
+* The plugin registers a markdown embed rule (`@codepen`) and the `VPCodepen`
+* Vue component, which renders an iframe pointing to the CodePen embed service.
+*
+* 该插件注册 markdown 嵌入规则（`@codepen`）和 `VPCodepen` Vue 组件，
+* 组件会渲染指向 CodePen 嵌入服务的 iframe。
+*
 * @example
+* `.vitepress/config.ts`
 * ```ts
 * import codepen from 'vitepress-plugin-codepen'
 * import { defineConfig } from 'vitepress-tuck'
@@ -49,7 +76,7 @@ const codepenMarkdownPlugin = (md) => {
 */
 const codepen = definePlugin(() => ({
 	name: "vitepress-plugin-codepen",
-	client: { enhance: "enhanceAppWithCodepen" },
+	componentResolver: ["VPCodepen"],
 	markdown: { config(md) {
 		md.use(codepenMarkdownPlugin);
 	} },

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "vitepress-plugin-codepen",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "embed codepen in vitepress document.",
   "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
   "license": "MIT",
+  "homepage": "https://tuck.pengzhanbo.cn/plugins/codepen",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pengzhanbo/vitepress-tuck.git",
     "directory": "packages/plugin-codepen"
   },
+  "bugs": {
+    "url": "https://github.com/pengzhanbo/vitepress-tuck/issues"
+  },
   "keywords": [
     "vitepress",
     "vitepress-plugin",
@@ -33,8 +37,8 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "vitepress-plugin-toolkit": "0.3.0",
-    "vitepress-tuck": "0.3.0"
+    "vitepress-plugin-toolkit": "0.5.0",
+    "vitepress-tuck": "0.5.0"
   },
   "publishConfig": {
     "access": "public",