docs: add multiple language support (#19)

docs/.vuepress/config.ts

@@ -22,6 +22,11 @@ export default defineUserConfig({
       title: 'vlib-starter',
       description: 'Vue3 组件库开发模板 & Vue3 组件库实践指南',
     },
+    '/en/': {
+      lang: 'en-US',
+      title: 'vlib-starter',
+      description: 'Vue3 components template & Vue3 components starter',
+    },
   },
 
   bundler: viteBundler({
@@ -46,6 +51,14 @@ export default defineUserConfig({
         selectLanguageText: '选择语言',
         selectLanguageAriaLabel: '选择语言',
       },
+      '/en/': {
+        navbar: navbar.en,
+        sidebar: sidebar.en,
+        sidebarDepth: 1,
+        selectLanguageName: 'English',
+        selectLanguageText: 'Choose Language',
+        selectLanguageAriaLabel: 'Choose Language',
+      },
     },
   }),
 

docs/.vuepress/configs/navbar/en.ts

@@ -0,0 +1,8 @@
+import type { NavbarConfig } from 'vuepress'
+
+export const en: NavbarConfig = [
+  {
+    text: 'Components',
+    link: '/en/components/',
+  },
+]

docs/.vuepress/configs/navbar/index.ts

@@ -1 +1,2 @@
 export * from './zh'
+export * from './en'

docs/.vuepress/configs/sidebar/en.ts

@@ -0,0 +1,23 @@
+import type { SidebarConfig } from 'vuepress'
+
+export const en: SidebarConfig = {
+  '/en/components': [
+    {
+      text: 'Base Components',
+      children: [
+        {
+          text: 'Button',
+          link: '/en/components/button/',
+        },
+        {
+          text: 'BackTop',
+          link: '/en/components/backtop/',
+        },
+        {
+          text: 'BackTopTsx',
+          link: '/en/components/backtoptsx/',
+        },
+      ],
+    },
+  ],
+}

docs/.vuepress/configs/sidebar/index.ts

@@ -1 +1,2 @@
 export * from './zh'
+export * from './en'

docs/README.md

@@ -7,9 +7,9 @@ actions:
     link: /components/
     type: primary
 features:
-  - title: Simplicity First
+  - title: 简洁第一
     details: Minimal setup with markdown-centered project structure helps you focus on writing.
-  - title: Vue-Powered
+  - title: 数据驱动视图
     details: Enjoy the dev experience of Vue, use Vue components in markdown, and develop custom themes with Vue.
   - title: Performant
     details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.

docs/components/README.md

@@ -1,3 +1,3 @@
 # Introduction
 
-Vue components.
+Vue 组件.

docs/en/README.md

@@ -0,0 +1,23 @@
+---
+home: true
+title: Home
+heroImage: /images/hero.png
+actions:
+  - text: Get Started
+    link: /components/
+    type: primary
+features:
+  - title: Simplicity First
+    details: Minimal setup with markdown-centered project structure helps you focus on writing.
+  - title: Vue-Powered
+    details: Enjoy the dev experience of Vue, use Vue components in markdown, and develop custom themes with Vue.
+  - title: Performant
+    details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
+  - title: Themes
+    details: Providing a default theme out of the box. You can also choose a community theme or create your own one.
+  - title: Plugins
+    details: Flexible plugin API, allowing plugins to provide lots of plug-and-play features for your site.
+  - title: Bundlers
+    details: Default bundler is Vite, while Webpack is also supported. Choose the one you like!
+footer: MIT Licensed | Copyright © 2018-present Evan You
+---

docs/en/components/README.md

@@ -0,0 +1,3 @@
+# Introduction
+
+Vue components.

packages/vlib-ui/src/back-top-tsx/docs/README.en-US.md

@@ -0,0 +1,54 @@
+---
+permalink: /en/components/backtoptsx
+---
+
+# BackTopTsx
+
+Back top button.
+
+## Base usage
+
+Swipe to view the button in the bottom right corner of the container.
+
+<demo src="../__demos__/basic.vue"></demo>
+
+## Component Configuration
+
+### BackTopTsx Props
+
+| prop              | description                                                              | type            | default |
+| ----------------- | ------------------------------------------------------------------------ | --------------- | ------- |
+| target            | Objects that trigger scrolling                                           | string          | window  |
+| visibility-height | Only when the rolling height reaches this parameter value will it appear | number / string | 200     |
+| right             | Control its display position, distance from the right margin of the page | number / string | 40      |
+| bottom            | Control its display position, distance from the bottom of the page       | number / string | 40      |
+
+### BackTopTsx Events
+
+| event | description                          | param                         |
+| ----- | ------------------------------------ | ----------------------------- |
+| click | Event triggered by clicking a button | `(event: MouseEvent) => void` |
+
+### BackTopTsx Slots
+
+| slot    | description               |
+| ------- | ------------------------- |
+| default | Customize default content |
+
+## type definition
+
+Component exports the following type definitions
+
+```ts
+import type { BackTopTsxProps } from '@bfehub/vlib-ui'
+```
+
+## Style variables
+
+The component provides the following CSS variables that can be used to customize styles
+
+| name                            | default |
+| ------------------------------- | ------- |
+| --vlib-back-top-tsx-right       | 40px    |
+| --vlib-back-top-tsx-bottom      | 40px    |
+| --vlib-back-top-tsx-button-size | 40px    |

packages/vlib-ui/src/back-top-tsx/README.md → packages/vlib-ui/src/back-top-tsx/docs/README.md

@@ -10,7 +10,7 @@ permalink: /components/backtoptsx
 
 通过滑动来查看容器右下角的按钮。
 
-<demo src="./__demos__/basic.vue"></demo>
+<demo src="../__demos__/basic.vue"></demo>
 
 ## 组件配置
 

packages/vlib-ui/src/back-top/docs/README.en-US.md

@@ -0,0 +1,54 @@
+---
+permalink: /en/components/backtop
+---
+
+# BackTopTsx
+
+Back top button.
+
+## Base usage
+
+Swipe to view the button in the bottom right corner of the container.
+
+<demo src="../__demos__/basic.vue"></demo>
+
+## Component Configuration
+
+### BackTopTsx Props
+
+| prop              | description                                                              | type            | default |
+| ----------------- | ------------------------------------------------------------------------ | --------------- | ------- |
+| target            | Objects that trigger scrolling                                           | string          | window  |
+| visibility-height | Only when the rolling height reaches this parameter value will it appear | number / string | 200     |
+| right             | Control its display position, distance from the right margin of the page | number / string | 40      |
+| bottom            | Control its display position, distance from the bottom of the page       | number / string | 40      |
+
+### BackTopTsx Events
+
+| event | description                          | param                         |
+| ----- | ------------------------------------ | ----------------------------- |
+| click | Event triggered by clicking a button | `(event: MouseEvent) => void` |
+
+### BackTopTsx Slots
+
+| slot    | description               |
+| ------- | ------------------------- |
+| default | Customize default content |
+
+## type definition
+
+Component exports the following type definitions
+
+```ts
+import type { BackTopProps } from '@bfehub/vlib-ui'
+```
+
+## Style variables
+
+The component provides the following CSS variables that can be used to customize styles
+
+| name                            | default |
+| ------------------------------- | ------- |
+| --vlib-back-top-tsx-right       | 40px    |
+| --vlib-back-top-tsx-bottom      | 40px    |
+| --vlib-back-top-tsx-button-size | 40px    |

packages/vlib-ui/src/back-top/README.md → packages/vlib-ui/src/back-top/docs/README.md

@@ -10,7 +10,7 @@ permalink: /components/backtop
 
 通过滑动来查看容器右下角的按钮。
 
-<demo src="./__demos__/basic.vue"></demo>
+<demo src="../__demos__/basic.vue"></demo>
 
 ## 组件配置
 

packages/vlib-ui/src/button/docs/README.en-US.md

@@ -0,0 +1,13 @@
+---
+permalink: /en/components/button
+---
+
+# Button
+
+Normal button.
+
+## Base usage
+
+Use `type`, `plain`, `round`, and `circle` to define the style of the button.
+
+<demo src="../__demos__/basic.vue"></demo>

packages/vlib-ui/src/button/README.md → packages/vlib-ui/src/button/docs/README.md

@@ -10,4 +10,4 @@ permalink: /components/button
 
 使用 `type`、`plain`、`round` 和 `circle` 来定义按钮的样式。
 
-<demo src="./__demos__/basic.vue"></demo>
+<demo src="../__demos__/basic.vue"></demo>