feat(addon-components): add CodePen and usage

.vscode/settings.json

@@ -29,5 +29,6 @@
     "editor.formatOnSave": true
   },
   "svg.preview.background": "editor",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "unocss.root": "."
 }

demo/yun/pages/examples/addons/components.md

@@ -0,0 +1,50 @@
+---
+title: 常用公共组件 | Valaxy Addon Components
+categories:
+  - Docs
+  - Example
+codepen: false
+---
+
+## 安装
+
+更多可参见 [README | valaxy-addon-components](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-components).
+
+`valaxy-addon-components` 是 valaxy 的一个插件，它内置了一些公共第三方组件，譬如 Codepen `<CodePen />`。
+
+```bash
+pnpm add -D valaxy-addon-components
+```
+
+```ts
+// valaxy.config.ts
+import { defineValaxyConfig } from 'valaxy'
+import { addonComponents } from 'valaxy-addon-components'
+
+export default defineValaxyConfig({
+  addons: [
+    addonComponents(),
+  ],
+})
+```
+
+更多使用示例如下。
+
+### 插入 [CodePen](https://codepen.io/)
+
+#### 使用
+
+```vue
+<!-- needed -->
+<CodePen id="WqXGpo" user="YunYouJun" />
+
+<!-- 自定义插槽（ CodePen 默认展示未加载完时显示的内容） -->
+<CodePen id="WqXGpo" user="YunYouJun">
+  <span> Custom Slot </span>
+</CodePen>
+
+<!-- all parameters -->
+<CodePen class="h-300px" name="Margin Collapse" id="WqXGpo" user="YunYouJun" tab="html,result" />
+```
+
+<CodePen class="h-300px" name="Margin Collapse" id="WqXGpo" user="YunYouJun" tab="html,result" />

docs/pages/guide/best-pratice.md

@@ -13,3 +13,4 @@ top: 1
 - 使用英文命名文件夹与文件，如 `/posts/your-post.md`。
 - 如需使用本地图片（且仅在对应文章中展示），您可以新建文件夹 `/posts/your-post/`，并将图片放置其中，如 `/posts/your-post/your-image.png`。
   - <https://github.com/YunYouJun/valaxy/issues/259>
+- 插入第三方/大量动态内容时，优先将其封装为组件放置于 `components`，并通过组件标签名引入。

docs/pages/guide/custom/components.md

@@ -228,3 +228,5 @@ The principle is to cover components. You can also freely cover any other compon
 
 > Because Vue components published is native, it will be completely **on-demand** when packaging, without your extra worry.
 :::
+
+[使用 valaxy-addon-components 插入公共组件的示例](https://yun.valaxy.site/examples/addons/components)

docs/pages/guide/post.md

@@ -3,6 +3,7 @@ title: Post
 title_zh-CN: 文章
 categories:
   - Guide
+end: false
 ---
 
 > [Post VS Page](https://wordpress.com/zh-cn/support/post-vs-page/)
@@ -106,3 +107,20 @@ Here goes the body
 ```
 
 :::
+
+## 插入
+
+### 组件
+
+- 如想在文章中插入现有公共组件，请参照 [组件](/guide/built-ins)。
+- 如想在文章中插入自定义组件，请参照 [自定义组件](/guide/custom/components)。
+
+### 脚本
+
+可直接通过 [`useScriptTag`](https://vueuse.org/core/useScriptTag/) 使用，封装为组件或直接添加在文章中。
+
+```vue
+<script lang="ts" setup>
+useScriptTag('https://static.codepen.io/assets/embed/ei.js')
+</script>
+```

package.json

@@ -2,7 +2,7 @@
   "name": "@valaxyjs/monorepo",
   "version": "0.14.54",
   "private": true,
-  "packageManager": "pnpm@8.6.12",
+  "packageManager": "pnpm@8.7.1",
   "description": "📄 Vite & Vue powered static blog generator.",
   "author": {
     "email": "me@yunyoujun.cn",

packages/create-valaxy/template/package.json

@@ -15,6 +15,6 @@
     "valaxy-theme-yun": "0.14.54"
   },
   "devDependencies": {
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   }
 }

packages/valaxy-addon-components/README.md

@@ -1,8 +1,8 @@
-# valaxy-addon-waline
+# valaxy-addon-components
 
 [![NPM version](https://img.shields.io/npm/v/valaxy-addon-waline?color=0078E7)](https://www.npmjs.com/package/valaxy-addon-waline)
 
-TODO: English Docs
+- [ ] English Docs
 
 valaxy-addon-components 是可以提供通用 Vue 组件 的一个 Valaxy 插件。
 
@@ -14,6 +14,13 @@ valaxy-addon-components 是可以提供通用 Vue 组件 的一个 Valaxy 插件
 
 - `VCLiveTime`: 生存时间
 
+### 第三方组件
+
+对第三方服务的封装，优先使用通用命名。
+
+- `CodePen`: [Codepen](https://codepen.io/)
+  - Example: <https://yun.valaxy.site/examples/addons/components>
+
 ## 如何使用
 
 ### 安装依赖

packages/valaxy-addon-components/components/CodePen.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { useScriptTag } from '@vueuse/core'
+
+withDefaults(defineProps<{
+  /**
+   * Pen Hash ID
+   */
+  id: string
+  /**
+   * User ID
+   */
+  user: string
+  name?: string
+  tab?: string
+}>(), {
+  name: '',
+  tab: 'html,result',
+})
+
+// use codepen script
+// useScriptTag instead of useHead script for not repeat
+useScriptTag('https://static.codepen.io/assets/embed/ei.js')
+</script>
+
+<template>
+  <p
+    class="codepen flex justify-center items-center box-border border-2px border-solid my-4 p-4"
+    :data-default-tab="tab" :data-slug-hash="id" :data-user="user"
+  >
+    <slot>
+      <span>
+        See the Pen
+        <a v-if="name" :href="`https://codepen.io/${user}/pen/${id}`">{{ name }}</a>
+        by {{ user }} (<a :href="`https://codepen.io/${user}`">@{{ user }}</a>)
+        on <a href="https://codepen.io">CodePen</a>.
+      </span>
+    </slot>
+  </p>
+</template>

packages/valaxy-addon-components/package.json

@@ -1,7 +1,8 @@
 {
   "name": "valaxy-addon-components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Common Components for Valaxy",
+  "homepage": "https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-components",
   "repository": "https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-components",
   "keywords": [
     "valaxy",

packages/valaxy/client/composables/widgets/codepen.ts

@@ -1,5 +1,8 @@
 import { useHead } from '@vueuse/head'
 
+/**
+ * @deprecated
+ */
 export function useCodePen() {
   useHead({
     script: [