docs: better index

Author: posva

docs/.vitepress/components/HomeSponsors.vue

@@ -10,7 +10,7 @@
       <a
         class="become-sponsor button white"
         href="https://github.com/sponsors/posva"
-        >Become a Sponsor!</a
+        >{{ translations[$siteByRoute.themeConfig.lang] || translations.en }}</a
       >
     </div>
   </div>
@@ -19,13 +19,17 @@
 <script setup>
 import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
 import sponsors from './sponsors.json'
+
+const translations = {
+  'en-US': 'Become a Sponsor!',
+  'zh-CN': '成为赞助者！',
+}
 </script>
 
 <style scoped>
 .sponsors_outer {
   text-align: center;
-  padding: 35px 40px 45px;
-  margin: 0 -2.5rem;
+  padding: 35px 20px 45px;
   background-color: var(--c-bg-accent);
   /* transition when toggling dark mode */
   transition: background-color 300ms ease-in-out, color 300ms ease-in-out;

docs/index.md

@@ -3,21 +3,21 @@ home: true
 
 heroImage: /logo.png
 actionText: Get Started →
-actionLink: /introduction.html
+actionLink: /installation.html
 
 features:
   - title: 🛣 Expressive route syntax
-    details: Define static and dynamic routes with an intuitive syntax.
+    details: Define static and dynamic routes with an intuitive and powerful syntax.
   - title: 🛑 Fine-grained Navigation control
     details: Intercept any navigation and precisely control its outcome.
-  - title: ⚙️ Devtools support
-    details: Pinia hooks into Vue devtools to give you a enhanced development experience in both Vue 2 and Vue 3.
-  - title: 🔌 Extensible
-    details: React to store changes to extend Pinia with transactions, local storage synchronization, etc.
-  - title: 🏗 Modular by design
-    details: Build multiple stores and let your bundler code split them automatically.
-  - title: 📦 Extremely light
-    details: Pinia weights around 1kb, you will forget it's even there!
+  - title: 🧱 Component-based configuration
+    details: Map each route to the component that should display.
+  - title: 🔌 History modes
+    details: Choose between HTML5, Hash or Memory history modes.
+  - title: 🎚 Scroll control
+    details: Precisely control the scroll position in every page.
+  - title: 🌐 Automatic Encoding
+    details: Directly use unicode characters (你好) in your code.
 
 footer: MIT Licensed | Copyright © 2014-present Evan You, Eduardo San Martin Morote
 ---

docs/introduction.md

@@ -14,3 +14,9 @@ Vue Router is the official router for [Vue.js](http://v3.vuejs.org). It deeply i
 - Proper encoding for URLs
 
 [Get started](/guide/) or play with the [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) (see [`README.md`](https://github.com/vuejs/vue-router-next) to run them).
+
+<HomeSponsors />
+
+<script setup>
+import HomeSponsors from './.vitepress/components/HomeSponsors.vue'
+</script>

docs/zh/index.md

@@ -6,3 +6,9 @@ actionLink: /zh/introduction.html
 
 footer: MIT Licensed | Copyright © 2014-present Evan You, Eduardo San Martin Morote
 ---
+
+<HomeSponsors />
+
+<script setup>
+import HomeSponsors from '../.vitepress/components/HomeSponsors.vue'
+</script>

docs/zh/introduction.md

@@ -13,6 +13,10 @@ Vue Router 是 [Vue.js](http://v3.vuejs.org) 的官方路由。它与 Vue.js 核
 - 可定制的滚动行为
 - URL 的正确编码
 
+[入门](/zh/guide/)或使用 [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) (详见[`README.md`](https://github.com/vuejs/vue-router-next)来运行它们)。
+
 <HomeSponsors />
 
-[入门](/zh/guide/)或使用 [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) (详见[`README.md`](https://github.com/vuejs/vue-router-next)来运行它们)。
+<script setup>
+import HomeSponsors from '../.vitepress/components/HomeSponsors.vue'
+</script>