vitepress-plugin-codepen 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,111 @@
+# vitepress-plugin-codepen
+
+Embed CodePen in your VitePress site.
+
+在 VitePress 中嵌入 CodePen。
+
+## Usage
+
+### With Vitepress-tuck
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-tuck vitepress-plugin-codepen
+# pnpm
+pnpm add -D vitepress-tuck vitepress-plugin-codepen
+# yarn
+yarn add -D vitepress-tuck vitepress-plugin-codepen
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import codepen from 'vitepress-plugin-codepen'
+import { defineConfig } from 'vitepress-tuck'
+
+export default defineConfig({
+  plugins: [codepen()],
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import enhanceApp from 'virtual:enhance-app'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    enhanceApp(ctx)
+  },
+} satisfies Theme
+```
+
+### With Vitepress
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-plugin-codepen
+# pnpm
+pnpm add -D vitepress-plugin-codepen
+# yarn
+yarn add -D vitepress-plugin-codepen
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { codepenMarkdownPlugin } from 'vitepress-plugin-codepen'
+
+export default defineConfig({
+  markdown: {
+    config: (md) => {
+      md.use(codepenMarkdownPlugin)
+    },
+  },
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import { enhanceAppWithCodepen } from 'vitepress-plugin-codepen/client'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    enhanceAppWithCodepen(ctx)
+  },
+} satisfies Theme
+```
+
+## Syntax
+
+```md
+@[codepen](user/slash)
+```
+
+### With Options
+
+```md
+@[codepen preview editable title="My Demo" height="500px" tab="css,result" theme="dark"](user/slash)
+```
+
+| Option     | Type                | Default      | Description                             |
+| ---------- | ------------------- | ------------ | --------------------------------------- |
+| `preview`  | `boolean`           | `false`      | Use preview embed mode                  |
+| `editable` | `boolean`           | `false`      | Allow editing                           |
+| `tab`      | `string`            | `"result"`   | Default tab (e.g. `"css,result"`)       |
+| `theme`    | `'light' \| 'dark'` | auto         | Theme, auto follows VitePress dark mode |
+| `width`    | `string`            | `"100%"`     | iframe width                            |
+| `height`   | `string`            | `"400px"`    | iframe height                           |
+| `title`    | `string`            | `"Code Pen"` | iframe title                            |

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

@@ -0,0 +1,23 @@
+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;
+  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
+declare function enhanceAppWithCodepen({
+  app
+}: EnhanceAppContext): void;
+//#endregion
+export { _default as VPCodepen, enhanceAppWithCodepen };

package/dist/client/browser/index.js

@@ -0,0 +1,57 @@
+import { computed, createElementBlock, defineComponent, normalizeStyle, openBlock } from "vue";
+import { useData } from "vitepress/client";
+//#region src/client/VPCodepen.vue
+const _hoisted_1 = ["src", "title"];
+const CODEPEN_LINK = "https://codepen.io/";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "VPCodepen",
+	props: {
+		user: {},
+		slash: {},
+		title: {},
+		preview: { type: Boolean },
+		editable: { type: Boolean },
+		tab: {},
+		theme: {},
+		width: {},
+		height: {}
+	},
+	setup(__props) {
+		const { isDark } = useData();
+		const link = computed(() => {
+			const middle = __props.preview ? "/embed/preview/" : "/embed/";
+			const params = new URLSearchParams();
+			__props.editable && params.set("editable", "true");
+			__props.tab && params.set("default-tab", __props.tab);
+			const themeMode = __props.theme ?? (isDark.value ? "dark" : "light");
+			themeMode && params.set("theme-id", themeMode);
+			return `${CODEPEN_LINK}${__props.user}${middle}${__props.slash}?${params.toString()}`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("iframe", {
+				src: link.value,
+				class: "vp-codepen",
+				title: __props.title,
+				frameborder: "0",
+				loading: "lazy",
+				allowtransparency: "true",
+				allowfullscreen: "true",
+				style: normalizeStyle({
+					width: __props.width,
+					height: __props.height,
+					marginBlock: "16px",
+					marginInline: "0",
+					border: "none",
+					boxShadow: "var(--vp-shadow-2)"
+				})
+			}, null, 12, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/client/index.ts
+function enhanceAppWithCodepen({ app }) {
+	app.component("VPCodepen", _sfc_main);
+}
+//#endregion
+export { _sfc_main as VPCodepen, enhanceAppWithCodepen };

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

@@ -0,0 +1,23 @@
+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;
+  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
+declare function enhanceAppWithCodepen({
+  app
+}: EnhanceAppContext): void;
+//#endregion
+export { _default as VPCodepen, enhanceAppWithCodepen };

package/dist/client/ssr/index.js

@@ -0,0 +1,64 @@
+import { computed, defineComponent, mergeProps, useSSRContext } from "vue";
+import { ssrRenderAttrs } from "vue/server-renderer";
+import { useData } from "vitepress/client";
+//#region src/client/VPCodepen.vue
+const CODEPEN_LINK = "https://codepen.io/";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "VPCodepen",
+	__ssrInlineRender: true,
+	props: {
+		user: {},
+		slash: {},
+		title: {},
+		preview: { type: Boolean },
+		editable: { type: Boolean },
+		tab: {},
+		theme: {},
+		width: {},
+		height: {}
+	},
+	setup(__props) {
+		const { isDark } = useData();
+		const link = computed(() => {
+			const middle = __props.preview ? "/embed/preview/" : "/embed/";
+			const params = new URLSearchParams();
+			__props.editable && params.set("editable", "true");
+			__props.tab && params.set("default-tab", __props.tab);
+			const themeMode = __props.theme ?? (isDark.value ? "dark" : "light");
+			themeMode && params.set("theme-id", themeMode);
+			return `${CODEPEN_LINK}${__props.user}${middle}${__props.slash}?${params.toString()}`;
+		});
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<iframe${ssrRenderAttrs(mergeProps({
+				src: link.value,
+				class: "vp-codepen",
+				title: __props.title,
+				frameborder: "0",
+				loading: "lazy",
+				allowtransparency: "true",
+				allowfullscreen: "true",
+				style: {
+					width: __props.width,
+					height: __props.height,
+					marginBlock: "16px",
+					marginInline: "0",
+					border: "none",
+					boxShadow: "var(--vp-shadow-2)"
+				}
+			}, _attrs))}></iframe>`);
+		};
+	}
+});
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+	const ssrContext = useSSRContext();
+	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/VPCodepen.vue");
+	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+//#endregion
+//#region src/client/index.ts
+function enhanceAppWithCodepen({ app }) {
+	app.component("VPCodepen", _sfc_main);
+}
+//#endregion
+export { _sfc_main as VPCodepen, enhanceAppWithCodepen };

package/dist/node/index.d.ts

@@ -0,0 +1,33 @@
+import { PluginSimple } from "markdown-it";
+
+//#region src/node/codepenPlugin.d.ts
+/**
+ * @example
+ * ```ts
+ * import { codepenMarkdownPlugin } from 'vitepress-plugin-codepen'
+ * import { defineConfig } from 'vitepress'
+ * export default defineConfig({
+ *   markdown: {
+ *     config: (md) => {
+ *       md.use(codepenMarkdownPlugin)
+ *     },
+ *   },
+ * })
+ * ```
+ */
+declare const codepenMarkdownPlugin: PluginSimple;
+//#endregion
+//#region src/node/index.d.ts
+/**
+ * @example
+ * ```ts
+ * import codepen from 'vitepress-plugin-codepen'
+ * import { defineConfig } from 'vitepress-tuck'
+ * export default defineConfig({
+ *   plugins: [codepen()]
+ * })
+ * ```
+ */
+declare const _default: (option?: unknown) => import("vitepress-tuck").VitepressPlugin;
+//#endregion
+export { codepenMarkdownPlugin, _default as default };

package/dist/node/index.js

@@ -0,0 +1,62 @@
+import { definePlugin } from "vitepress-tuck";
+import { createEmbedRuleBlock, parseRect, resolveAttrs, stringifyAttrs } from "vitepress-plugin-toolkit";
+//#region src/node/codepenPlugin.ts
+/**
+* @example
+* ```ts
+* import { codepenMarkdownPlugin } from 'vitepress-plugin-codepen'
+* import { defineConfig } from 'vitepress'
+* export default defineConfig({
+*   markdown: {
+*     config: (md) => {
+*       md.use(codepenMarkdownPlugin)
+*     },
+*   },
+* })
+* ```
+*/
+const codepenMarkdownPlugin = (md) => {
+	createEmbedRuleBlock(md, {
+		type: "codepen",
+		syntaxPattern: /^@\[codepen([^\]]*)\]\(([^)]*)\)/,
+		meta: ([, info, source]) => {
+			const { width, height, title, tab, ...rest } = resolveAttrs(info);
+			const [user, slash] = source.split("/");
+			return {
+				title: title || "Code Pen",
+				tab: tab || "result",
+				width: width ? parseRect(width) : "100%",
+				height: height ? parseRect(height) : "400px",
+				user,
+				slash,
+				...rest
+			};
+		},
+		content: (meta) => `<VPCodepen${stringifyAttrs(meta)} />`
+	});
+};
+//#endregion
+//#region src/node/index.ts
+/**
+* @example
+* ```ts
+* import codepen from 'vitepress-plugin-codepen'
+* import { defineConfig } from 'vitepress-tuck'
+* export default defineConfig({
+*   plugins: [codepen()]
+* })
+* ```
+*/
+var node_default = definePlugin(() => ({
+	name: "vitepress-plugin-codepen",
+	client: { enhance: "enhanceAppWithCodepen" },
+	markdown: { config(md) {
+		md.use(codepenMarkdownPlugin);
+	} },
+	vite: {
+		optimizeDeps: { include: ["@pengzhanbo/utils"] },
+		ssr: { noExternal: ["vitepress-plugin-codepen"] }
+	}
+}));
+//#endregion
+export { codepenMarkdownPlugin, node_default as default };

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "vitepress-plugin-codepen",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "embed codepen in vitepress document.",
+  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
+  "license": "MIT",
+  "keywords": [
+    "vitepress",
+    "vitepress-plugin",
+    "codepen"
+  ],
+  "exports": {
+    ".": "./dist/node/index.js",
+    "./client": {
+      "browser": "./dist/client/browser/index.js",
+      "default": "./dist/client/ssr/index.js"
+    },
+    "./style.css": "./dist/client/style.css"
+  },
+  "module": "./dist/node/index.js",
+  "types": "./dist/node/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vitepress": "^1.6.4 || ^2.0.0-alpha.17",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "vitepress-plugin-toolkit": "0.1.0",
+    "vitepress-tuck": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf --glob ./dist",
+    "dev": "pnpm '/(tsdown|copy):watch/'",
+    "build": "pnpm tsdown && pnpm copy",
+    "copy": "cpx \"src/**/*.css\" dist",
+    "copy:watch": "pnpm copy -w",
+    "tsdown": "tsdown --config-loader unrun",
+    "tsdown:watch": "pnpm tsdown -w"
+  }
+}