feat(addon-components): add ValaxyThemesResolver (#448)

packages/valaxy-addon-components/README.md

@@ -1,35 +1,21 @@
 # valaxy-addon-components
 
-[![NPM version](https://img.shields.io/npm/v/valaxy-addon-waline?color=0078E7)](https://www.npmjs.com/package/valaxy-addon-waline)
-
-- [ ] English Docs
-
-valaxy-addon-components 是可以提供通用 Vue 组件 的一个 Valaxy 插件。
-
-主题开发者可以通过将其作为依赖使用，以快速使用内置组件。
-
-## 组件列表
-
-> 命名空间以 VC 开头。
-
-- `VCLiveTime`: 生存时间
-
-### 第三方组件
-
-对第三方服务的封装，优先使用通用命名。
+**valaxy-addon-components** is a plugin that provides general-purpose Vue components for Valaxy.
 
-- `CodePen`: [Codepen](https://codepen.io/)
-  - Example: <https://yun.valaxy.site/examples/addons/components>
+[![NPM version](https://img.shields.io/npm/v/valaxy-addon-waline?color=0078E7)](https://www.npmjs.com/package/valaxy-addon-waline)
 
-## 如何使用
+- **English** | [简体中文](./README.zh-CN.md)
 
-### 安装依赖
+## Installation
 
 ```bash
-npm i valaxy-addon-components
+pnpm add valaxy-addon-components
 ```
 
-### 加载插件
+<details>
+<summary>Common Components</summary><br>
+
+You can enable common components of the plugin as follows. For a full list of common components, see [Common Components](#common-components).
 
 ```ts
 import { defineValaxyConfig } from 'valaxy'
@@ -42,29 +28,66 @@ export default defineValaxyConfig({
 })
 ```
 
-### 在任意地方使用并设置你的参数
+<br></details>
 
-> 大部分人可能希望挂在主题页脚
-> 这里以主题 `valaxy-theme-yun` 为例：
+<details>
+<summary>Theme Components</summary><br>
 
-- `start-time`: 代表站点成立开始计时的时间
+You can also extend `unplugin-vue-components` using the plugin's `ValaxyThemesResolver` to introduce third-party themes. Here is an example using the [Yun](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-yun) theme:
 
-```vue
-<!-- 新建 components/YunFooter.vue -->
-<script lang="ts" setup>
-import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
-</script>
+```ts
+import { defineValaxyConfig } from 'valaxy'
+import { ValaxyThemesResolver } from 'valaxy-addon-components'
+
+export default defineValaxyConfig({
+  components: {
+    resolvers: [ValaxyThemesResolver({ themes: ['yun'] })],
+  },
+})
+```
+
+| Property | Type | Default | Description |
+| ---- | ---- | ---- | ---- |
+| themes | `string[]` | --- | Third-party themes to import components from |
+
+<br></details>
+
+## Usage
 
+Most users may want to mount the components to the footer of the theme. You can create a new file in the `components` folder, such as `MyFooter.vue`, and use it as follows:
+
+```vue
 <template>
   <YunFooter>
     <VCLiveTime start-time="2022-01-01">
       <template #live-time-before>
-        <span>本站已运行</span>
+        <span>This site has been running for</span>
       </template>
       <template #live-time-after>
-        <span>后缀</span>
+        <span>suffix</span>
       </template>
     </VCLiveTime>
   </YunFooter>
 </template>
 ```
+
+## Common Components
+
+### Namespace starting with VC
+
+#### VCLiveTime
+
+Used to display the site's uptime.
+
+| Property | Type | Default | Description |
+| ---- | ---- | ---- | ---- |
+| startTime | `string` | --- | The time from which the site starts counting |
+
+### Third-Party Components
+
+Encapsulates third-party services and follows general naming rules.
+
+#### Codepen
+
+- `CodePen`: [Codepen](https://codepen.io/)
+  - Example: <https://yun.valaxy.site/examples/addons/components>

packages/valaxy-addon-components/README.zh-CN.md

@@ -0,0 +1,93 @@
+# valaxy-addon-components
+
+**valaxy-addon-components** 是一个为 Valaxy 提供通用 Vue 组件的插件
+
+[![NPM version](https://img.shields.io/npm/v/valaxy-addon-waline?color=0078E7)](https://www.npmjs.com/package/valaxy-addon-waline)
+
+- [English](./README.md) | **简体中文**
+
+## 安装
+
+```bash
+pnpm add valaxy-addon-components
+```
+
+<details>
+<summary>通用组件</summary><br>
+
+可以通过以下方式启用插件的通用组件，关于通用组件的完整列表，请参见 [通用组件](#通用组件)
+
+```ts
+import { defineValaxyConfig } from 'valaxy'
+import { addonComponents } from 'valaxy-addon-components'
+
+export default defineValaxyConfig({
+  addons: [
+    addonComponents(),
+  ],
+})
+```
+
+<br></details>
+
+<details>
+<summary>主题组件</summary><br>
+
+还可以通过插件 `ValaxyThemesResolver` 功能扩展 `unplugin-vue-components`，实现引入第三方主题。以下以 [Yun](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-yun) 主题为例：
+
+```ts
+import { defineValaxyConfig } from 'valaxy'
+import { ValaxyThemesResolver } from 'valaxy-addon-components'
+
+export default defineValaxyConfig({
+  components: {
+    resolvers: [ValaxyThemesResolver({ themes: ['yun'] })],
+  },
+})
+```
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ---- | ---- | ---- | ---- |
+| themes | `string[]` | --- | 需要导入 components 的第三方主题 |
+
+<br></details>
+
+## 使用
+
+大多数用户可能希望将组件挂载到主题的页脚。你可以在 `components` 文件夹下新建一个文件，例如 `MyFooter.vue`，并按如下方式使用：
+
+```vue
+<template>
+  <YunFooter>
+    <VCLiveTime start-time="2022-01-01">
+      <template #live-time-before>
+        <span>本站已运行</span>
+      </template>
+      <template #live-time-after>
+        <span>后缀</span>
+      </template>
+    </VCLiveTime>
+  </YunFooter>
+</template>
+```
+
+## 通用组件
+
+### 命名空间以 VC 开头
+
+#### VCLiveTime
+
+用于显示站点的生存时间
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ---- | ---- | ---- | ---- |
+| startTime | `string` | --- | 设置站点开始计时的时间 |
+
+### 第三方组件
+
+对第三方服务进行封装，优先使用通用命名规则。
+
+#### Codepen
+
+- `CodePen`: [Codepen](https://codepen.io/)
+  - Example: <https://yun.valaxy.site/examples/addons/components>

packages/valaxy-addon-components/core/resolvers.ts

@@ -0,0 +1,24 @@
+import type { ComponentResolver } from 'unplugin-vue-components'
+
+export interface ValaxyThemesResolverOptions {
+  themes: string[]
+}
+
+export function ValaxyThemesResolver(options: ValaxyThemesResolverOptions): ComponentResolver {
+  const { themes } = options
+  return {
+    type: 'component',
+    resolve: (name: string) => {
+      for (const theme of themes) {
+        if (name.toLowerCase().startsWith(theme.toLowerCase())) {
+          const formattedName = name.charAt(0).toUpperCase() + name.slice(1)
+          return {
+            name: formattedName,
+            path: `valaxy-theme-${theme}/components/${name.toLowerCase()}`,
+            from: `valaxy-theme-${theme}`,
+          }
+        }
+      }
+    },
+  }
+}

packages/valaxy-addon-components/index.ts

@@ -1 +1,2 @@
 export * from './node'
+export * from './core/resolvers'

packages/valaxy-addon-components/package.json

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