docs: rewrite introduction

README.md

@@ -3,27 +3,42 @@
 </p>
 
 <h1 align="center">Naive UI</h1>
-<p align="center">A Vue UI Framework</p>
-<p align="center"><b>Caring About Styles, Themed, Batteries Included, Not Rather Slow</b></p>
+<p align="center">An Vue 3 UI Framework</p>
+<p align="center"><b>Rather Complete, Themable, With Typescript, Not Too Slow</b></p>
 <p align="center">Interesting Somehow</p>
 
 ## Documentation
+
 [www.naiveui.com(WIP)](http://www.naiveui.com)
 
 ## Features
-### Caring About Styles
-As is.
-> The reason I started to build the library is I'm not satisfied with the UI framework I used. I think maybe it's possible to caring about nearily all the details of an UI framework, except the compitability of IE.
-### Themed
-Dark theme included. Theme switching is seamlessly.
-> At first there's only dark mode UI design drafts. It's wired but true. After you starting to build a dark mode UI, sooner or later you will have to create a light theme for it. As a result, naive-ui has both of them.
-### Batteries Included
-There are more than 60 components. Utils for building themed component are provided.
-### Not Rather Slow
-I try to make it not rather slow.
-> You can never know how much data will the backends send to you. Maybe thousands of options in single select.
+
+### Rather Complete
+
+There are more than 70 components. Hope they can help you write less code.
+
+What's more, they are all treeshakable.
+
+### Themeable
+
+We provide an advanced type safe theme system that built with typescript. All you need is to provide a theme overrides object in JS. Then all the staff is done by us.
+
+What's more, no less/sass/css variables, no webpack loaders are required.
+
+### With Typescript
+
+All the staff in Naive UI is wrote in Typescript. It can work with your typescript project seamlessly.
+
+What's more, you don't need to import any CSS to use the components.
+
+### Not too Slow
+
+I try to make it not rather slow. At least select works with virtual list.
+
+What's more, ..., no more. Just enjoy it.
 
 ## License
+
 Naive UI is licensed under the [MIT license](https://opensource.org/licenses/MIT).
 
-Graphics resouces of `result` component is licensed under the [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/). The graphics resouces come from [Twemoji](https://github.com/twitter/twemoji) and none of them is modified.
+Graphics resouces of `result` component is licensed under the [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/). The graphics resources come from [Twemoji](https://github.com/twitter/twemoji).

demo/SiteHeader.vue

@@ -217,7 +217,7 @@ export default {
       if (value === 'doc') {
         if (!/^(\/[^/]+){2}\/docs/.test(route.path)) {
           router.push(
-            themeAndLocaleReg.exec(route.path)[0] + '/docs/installation'
+            themeAndLocaleReg.exec(route.path)[0] + '/docs/introduction'
           )
         }
       }

demo/pages/docs/introduction/enUS/index.md

@@ -0,0 +1,37 @@
+<!--anchor:on-->
+
+# Naive UI
+
+Naive UI is a Vue 3 component library.
+
+To know how to install it, see [Installation](installation).
+
+It is rather complele, themeable, wrote in typescript, not too slow.
+
+## Rather Complete
+
+There are more than 70 components. Hope they can help you write less code.
+
+What's more, they are all treeshakable.
+
+## Themeable
+
+We provide an advanced type safe theme system that built with typescript. All you need is to provide a theme overrides object in JS. Then all the staff is done by us.
+
+What's more, no less/sass/css variables, no webpack loaders are required. And you can try the theme editor on the bottom right of the page.
+
+## With Typescript
+
+All the staff in Naive UI is wrote in Typescript. It can work with your typescript project seamlessly.
+
+What's more, you don't need to import any CSS to use the components.
+
+## Not too Slow
+
+I try to make it not rather slow. At least select works with virtual list.
+
+What's more, ..., no more. Just enjoy it.
+
+## License
+
+Naive UI is licensed under the [MIT license](https://opensource.org/licenses/MIT).

demo/pages/docs/introduction/zhCN/index.md

@@ -0,0 +1,37 @@
+<!--anchor:on-->
+
+# Naive UI
+
+Naive UI 是一个 Vue3 组件库。
+
+要了解如何安装，参见[安装](installation)。
+
+它比较完整，主题可调，用 Typescript 写的，不算太慢。
+
+## 比较完整
+
+有超过 70 个组件，希望能帮你少写点代码。
+
+顺便一提，它们全都可以 treeshaking。
+
+## 主题可调
+
+我们提供了一个使用 Typescript 构建的先进的类型安全主题系统。你只需要提供一个样式覆盖的对象，剩下的都交给我们。
+
+顺便一提，不用 less、sass、css 变量，也不用 webpack 的 loaders。以及你可以试试右下角的主题编辑器。
+
+## 使用 Typescript
+
+Naive UI 全量使用 Typescript 编写，和你的 Typescript 项目无缝衔接。
+
+顺便一提，你不需要导入任何 CSS 就能让组件正常工作。
+
+## 不算太慢
+
+我尽力让它不要太慢。至少 select 使用虚拟列表写的。
+
+顺便一提，...，没有顺便了。祝你使用愉快。
+
+## 许可
+
+Naive UI 使用 [MIT license](https://opensource.org/licenses/MIT) 许可证书。

demo/pages/home/index.vue

@@ -83,16 +83,15 @@ export default {
       ...i18n({
         'zh-CN': {
           start: '开始使用',
-          intro1: '一个 Vue UI 框架',
-          intro2: '在意样式，带主题，比较完整，不算太慢',
+          intro1: '一个 Vue 3 UI 框架',
+          intro2: '比较完整，主题可调，使用 Typescript，不算太慢',
           intro3: '有点意思',
           intro4: '换个主题'
         },
         'en-US': {
           start: 'Get Started',
-          intro1: 'A Vue UI Framework',
-          intro2:
-            'Caring About Styles, Themed, Batteries Included, Not Rather Slow',
+          intro1: 'A Vue 3 UI Framework',
+          intro2: 'Rather Complete, Themeable, With Typescript, Not Too Slow',
           intro3: 'Interesting Somehow',
           intro4: 'Change Theme'
         }
@@ -187,6 +186,7 @@ export default {
     margin-left: 16px;
     transform: none;
     margin-top: 60px;
+    margin-right: 16px;
     min-height: 550px;
     height: calc(100vh - 180px);
   }

demo/routes/routes.js

@@ -1,5 +1,9 @@
 export const enDocRoutes = [
   // basic docs
+  {
+    path: 'introduction',
+    component: () => import('../pages/docs/introduction/enUS/index.md')
+  },
   {
     path: 'installation',
     component: () => import('../pages/docs/installation/enUS/index.md')
@@ -40,6 +44,10 @@ export const enDocRoutes = [
 
 export const zhDocRoutes = [
   // basic docs
+  {
+    path: 'introduction',
+    component: () => import('../pages/docs/introduction/zhCN/index.md')
+  },
   {
     path: 'installation',
     component: () => import('../pages/docs/installation/zhCN/index.md')

demo/store/menu-options.js

@@ -50,6 +50,18 @@ function createItems (lang, theme, prefix, items) {
 
 export function createDocumentationMenuOptions ({ lang, theme, mode }) {
   return createItems(lang, theme, '/docs', [
+    {
+      en: 'Introduction',
+      zh: '介绍',
+      type: 'group',
+      children: [
+        {
+          en: 'Naive UI',
+          zh: 'Naive UI',
+          path: '/introduction'
+        }
+      ]
+    },
     {
       en: 'Getting Started',
       zh: '快速上手',