Update ko (#71)

* chore: up sponsors

* docs: use positive offset in scroll

* docs: fix new links

* docs: update vitepress

* docs: vm update

* docs: twitter logo

* docs: Add links for Mastering Pinia and Vue Certificate (vuejs#2036)

* docs: update links for mastering pinia and Vue Certification banners (vuejs#2038)

Author: niceplugin

docs/.vitepress/config/shared.ts

@@ -80,13 +80,13 @@ export const sharedConfig = defineConfig({
         content: 'summary_large_image',
       },
     ],
-    [
-      'meta',
-      {
-        property: 'twitter:image',
-        content: META_IMAGE,
-      },
-    ],
+    // [
+    //   'meta',
+    //   {
+    //     property: 'twitter:image',
+    //     content: META_IMAGE,
+    //   },
+    // ],
 
     // Vue School Top banner
     [
@@ -107,7 +107,7 @@ export const sharedConfig = defineConfig({
     outline: [2, 3],
 
     socialLinks: [
-      { icon: 'twitter', link: 'https://twitter.com/posva' },
+      { icon: 'x', link: 'https://twitter.com/posva' },
       {
         icon: 'github',
         link: 'https://github.com/vuejs/router',

docs/.vitepress/theme/components/AsideSponsors.vue

@@ -0,0 +1,38 @@
+<script setup>
+const banners = [
+  {
+    id: 1,
+    name: 'Vue.js Certification',
+    link: 'https://certificates.dev/vuejs/?friend=VUEROUTER&utm_source=affiliate&utm_medium=vuerouter&utm_campaign=VueRouter_CERT&utm_content=sidebar',
+    image: '/banners/vuejs-certification.svg',
+  },
+  {
+    id: 2,
+    name: 'Mastering Pinia',
+    link: 'https://masteringpinia.com/?utm_source=affiliate&utm_medium=vuerouter&utm_campaign=VueRouter_MP&utm_content=sidebar',
+    image: '/banners/mastering-pinia.png',
+  },
+]
+</script>
+
+<template>
+  <a
+    v-for="banner in banners"
+    :key="banner.id"
+    :href="banner.link"
+    target="_blank"
+    :class="`banner_image_${banner.id}`"
+  >
+    <img :src="banner.image" :alt="banner.name" />
+  </a>
+</template>
+
+<style scoped>
+.banner_image_1 {
+  padding: 25px 10px 0px 0px;
+}
+
+.banner_image_2 {
+  padding: 15px 10px 15px 0px;
+}
+</style>

docs/.vitepress/theme/components/VueMasteryHomeLink.vue

@@ -1,47 +1,51 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="container">
     <div class="inside">
-      <a href="https://www.vuemastery.com/pinia?coupon=PINIA-DOCS&via=eduardo" target="_blank">
+      <a
+        href="https://www.vuemastery.com/pinia?coupon=PINIA-DOCS&via=eduardo"
+        target="_blank"
+      >
         <span class="logo-wrapper">
-          <img alt="Vue Mastery Logo" width="25px" src="https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2Fvue-mastery-logo-small.png?alt=media&token=941fcc3a-2b6f-40e9-b4c8-56b3890da108">
+          <img
+            alt="Vue Mastery Logo"
+            width="25px"
+            src="https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2Fvue-mastery-logo-small.png?alt=media&token=941fcc3a-2b6f-40e9-b4c8-56b3890da108"
+          />
         </span>
         <span class="description">
-          Get the <span class="highlight">Pinia Cheat Sheet</span> from Vue Mastery
+          Get the <span class="highlight">Pinia Cheat Sheet</span> from Vue
+          Mastery
         </span>
       </a>
     </div>
   </div>
 </template>
 
-
 <style scoped>
 .container {
   text-align: center;
   margin-top: 30px;
 }
 .inside {
-  width:960px;
+  width: 960px;
   border-bottom: 1px solid var(--c-divider);
-  padding-bottom:50px;
+  padding-bottom: 50px;
   margin: 0 auto;
 }
 a {
   background-color: var(--c-bg-accent);
   border-radius: 8px;
   padding: 8px 16px 8px 8px;
+  text-decoration: none !important;
 }
 .description {
   line-height: 20px;
   color: var(--c-text);
-  margin-left:10px;
+  margin-left: 10px;
   transition: color 0.5s;
 }
-a:hover {
-  text-decoration: none !important;
-}
 a:hover .highlight {
   text-decoration: underline;
 }
@@ -50,14 +54,14 @@ a:hover .highlight {
 }
 @media (max-width: 960px) {
   .inside {
-    width:100%;
+    width: 100%;
   }
 }
 @media (max-width: 420px) {
   a {
-    display:block;
+    display: block;
     margin-left: 10px;
     margin-right: 10px;
   }
 }
-</style>
+</style>

docs/.vitepress/theme/components/VueMasteryLogoLink.vue

@@ -26,6 +26,7 @@ a {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  text-decoration: none !important;
 }
 
 .description {
@@ -38,10 +39,6 @@ a {
   transition: color 0.5s;
 }
 
-a:hover {
-  text-decoration: none !important;
-}
-
 .description span {
   color: var(--vp-c-brand);
 }

docs/.vitepress/theme/components/sponsors.json

@@ -29,13 +29,7 @@
       "imgSrcLight": "https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4"
     },
     {
-      "href": "https://storyblok.com",
-      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/storyblok.png",
-      "imgSrcDark": "https://posva-sponsors.pages.dev/logos/storyblok.png",
-      "alt": "Storyblok"
-    },
-    {
-      "href": "https://nuxtjs.org",
+      "href": "https://nuxtlabs.com",
       "imgSrcLight": "https://posva-sponsors.pages.dev/logos/nuxt-light.svg",
       "imgSrcDark": "https://posva-sponsors.pages.dev/logos/nuxt-dark.svg",
       "alt": "Nuxt Labs"

docs/.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
+import { h } from 'vue'
 import { Theme, useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-// import AsideSponsors from './components/AsideSponsors.vue'
+import AsideSponsors from './components/AsideSponsors.vue'
 // import HomeSponsors from './components/HomeSponsors.vue'
 import './styles/vars.css'
 import './styles/sponsors.css'
@@ -9,12 +10,12 @@ import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
 
 const theme: Theme = {
   ...DefaultTheme,
-  // Layout() {
-  //   return h(DefaultTheme.Layout, null, {
-  //     'home-features-after': () => h(HomeSponsors),
-  //     'aside-ads-before': () => h(AsideSponsors),
-  //   })
-  // },
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      // 'home-features-after': () => h(HomeSponsors),
+      'aside-ads-before': () => h(AsideSponsors),
+    })
+  },
 
   enhanceApp({ app }) {
     app.component('VueSchoolLink', VueSchoolLink)

docs/.vitepress/theme/styles/vars.css

@@ -1,22 +1,18 @@
 :root {
-  --vp-code-block-bg: var(--vp-c-bg-alt);
+  --vp-c-brand-1: var(--vp-c-green-1);
+  --vp-c-brand-2: var(--vp-c-green-2);
+  --vp-c-brand-3: var(--vp-c-green-3);
+  --vp-c-brand-soft: var(--vp-c-green-soft);
+  --vp-code-color: #476582;
 }
-/**
- * Component: Home
- * -------------------------------------------------------------------------- */
 
-:root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: linear-gradient(
-    292deg,
-    var(--vp-c-brand-light) 50%,
-    var(--vp-c-brand-dark)
-  );
-  /* It doesn't look good... */
-  /* --vp-home-hero-image-background-image: linear-gradient(
-    15deg,
-    var(--vp-c-brand-darker) 65%,
-    var(--vp-c-brand-dark) 30%
+:root.dark {
+  --vp-code-color: #c9def1;
+
+  --vp-home-hero-image-filter: blur(72px);
+  --vp-home-hero-image-background-image: linear-gradient(
+    0deg,
+    var(--vp-c-brand-soft) 50%,
+    var(--vp-c-brand-soft) 50%
   );
-  --vp-home-hero-image-filter: blur(40px); */
 }

docs/api/index.md

@@ -42,25 +42,25 @@ API Documentation
 
 ### LocationQuery
 
-Ƭ **LocationQuery**: `Record`<`string`, `LocationQueryValue` \| `LocationQueryValue`[]\>
+Ƭ **LocationQuery**: `Record`\<`string`, `LocationQueryValue` \| `LocationQueryValue`[]\>
 
 Normalized query object that appears in [RouteLocationNormalized](interfaces/RouteLocationNormalized.md)
 
 ___
 
 ### LocationQueryRaw
 
-Ƭ **LocationQueryRaw**: `Record`<`string` \| `number`, `LocationQueryValueRaw` \| `LocationQueryValueRaw`[]\>
+Ƭ **LocationQueryRaw**: `Record`\<`string` \| `number`, `LocationQueryValueRaw` \| `LocationQueryValueRaw`[]\>
 
 Loose [LocationQuery](index.md#LocationQuery) object that can be passed to functions like
-[push](interfaces/Router.md#push) and [replace](interfaces/Router.md#replace) or anywhere when creating a
+[Router.push](interfaces/Router.md#push) and [Router.replace](interfaces/Router.md#replace) or anywhere when creating a
 [RouteLocationRaw](index.md#RouteLocationRaw)
 
 ___
 
 ### PathParserOptions
 
-Ƭ **PathParserOptions**: `Pick`<`_PathParserOptions`, ``"end"`` \| ``"sensitive"`` \| ``"strict"``\>
+Ƭ **PathParserOptions**: `Pick`\<`_PathParserOptions`, ``"end"`` \| ``"sensitive"`` \| ``"strict"``\>
 
 ___
 
@@ -82,13 +82,13 @@ ___
 
 ### RouteParams
 
-Ƭ **RouteParams**: `Record`<`string`, `RouteParamValue` \| `RouteParamValue`[]\>
+Ƭ **RouteParams**: `Record`\<`string`, `RouteParamValue` \| `RouteParamValue`[]\>
 
 ___
 
 ### RouteParamsRaw
 
-Ƭ **RouteParamsRaw**: `Record`<`string`, `RouteParamValueRaw` \| `Exclude`<`RouteParamValueRaw`, ``null`` \| `undefined`\>[]\>
+Ƭ **RouteParamsRaw**: `Record`\<`string`, `RouteParamValueRaw` \| `Exclude`\<`RouteParamValueRaw`, ``null`` \| `undefined`\>[]\>
 
 ___
 
@@ -116,7 +116,7 @@ ___
 
 ### UseLinkOptions
 
-Ƭ **UseLinkOptions**: `VueUseOptions`<`RouterLinkOptions`\>
+Ƭ **UseLinkOptions**: `VueUseOptions`\<`RouterLinkOptions`\>
 
 ## Variables
 
@@ -130,14 +130,24 @@ ___
 
 ### RouterView
 
-• `Const` **RouterView**: () => { `$props`: `AllowedComponentProps` & `ComponentCustomProps` & `VNodeProps` & [`RouterViewProps`](interfaces/RouterViewProps.md) ; `$slots`: { `default?`: (`__namedParameters`: { `Component`: `VNode`<`RendererNode`, `RendererElement`, { `[key: string]`: `any`;  }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)  }) => `VNode`<`RendererNode`, `RendererElement`, { `[key: string]`: `any`;  }\>[]  }  }
+• `Const` **RouterView**: () => \{ `$props`: `AllowedComponentProps` & `ComponentCustomProps` & `VNodeProps` & [`RouterViewProps`](interfaces/RouterViewProps.md) ; `$slots`: \{ `default?`: (`__namedParameters`: \{ `Component`: `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`;  }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)  }) => `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`;  }\>[]  }  }
 
 #### Type declaration
 
-• **new RouterView**()
+• **new RouterView**(): `Object`
 
 Component to display the current route the user is at.
 
+##### Returns
+
+`Object`
+
+| Name | Type |
+| :------ | :------ |
+| `$props` | `AllowedComponentProps` & `ComponentCustomProps` & `VNodeProps` & [`RouterViewProps`](interfaces/RouterViewProps.md) |
+| `$slots` | \{ `default?`: (`__namedParameters`: \{ `Component`: `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`;  }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)  }) => `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`;  }\>[]  } |
+| `$slots.default?` | (`__namedParameters`: \{ `Component`: `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`;  }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)  }) => `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`;  }\>[] |
+
 ___
 
 ### START\_LOCATION
@@ -308,7 +318,7 @@ ___
 
 ### loadRouteLocation
 
-▸ **loadRouteLocation**(`route`): `Promise`<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\>
+▸ **loadRouteLocation**(`route`): `Promise`\<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\>
 
 Ensures a route is loaded, so it can be passed as o prop to `<RouterView>`.
 
@@ -320,7 +330,7 @@ Ensures a route is loaded, so it can be passed as o prop to `<RouterView>`.
 
 #### Returns
 
-`Promise`<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\>
+`Promise`\<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\>
 
 ___
 
@@ -372,19 +382,19 @@ ___
 
 | Name | Type |
 | :------ | :------ |
-| `props` | `VueUseOptions`<`RouterLinkOptions`\> |
+| `props` | `VueUseOptions`\<`RouterLinkOptions`\> |
 
 #### Returns
 
 `Object`
 
 | Name | Type |
 | :------ | :------ |
-| `href` | `ComputedRef`<`string`\> |
-| `isActive` | `ComputedRef`<`boolean`\> |
-| `isExactActive` | `ComputedRef`<`boolean`\> |
-| `navigate` | (`e`: `MouseEvent`) => `Promise`<`void` \| [`NavigationFailure`](interfaces/NavigationFailure.md)\> |
-| `route` | `ComputedRef`<[`RouteLocation`](interfaces/RouteLocation.md) & { `href`: `string`  }\> |
+| `href` | `ComputedRef`\<`string`\> |
+| `isActive` | `ComputedRef`\<`boolean`\> |
+| `isExactActive` | `ComputedRef`\<`boolean`\> |
+| `navigate` | (`e`: `MouseEvent`) => `Promise`\<`void` \| [`NavigationFailure`](interfaces/NavigationFailure.md)\> |
+| `route` | `ComputedRef`\<[`RouteLocation`](interfaces/RouteLocation.md) & \{ `href`: `string`  }\> |
 
 ___
 

docs/api/interfaces/NavigationGuard.md

@@ -13,7 +13,7 @@ Guards](/guide/advanced/navigation-guards.md).
 
 ### NavigationGuard
 
-▸ **NavigationGuard**(`to`, `from`, `next`): `NavigationGuardReturn` \| `Promise`<`NavigationGuardReturn`\>
+▸ **NavigationGuard**(`to`, `from`, `next`): `NavigationGuardReturn` \| `Promise`\<`NavigationGuardReturn`\>
 
 #### Parameters
 
@@ -25,4 +25,4 @@ Guards](/guide/advanced/navigation-guards.md).
 
 #### Returns
 
-`NavigationGuardReturn` \| `Promise`<`NavigationGuardReturn`\>
+`NavigationGuardReturn` \| `Promise`\<`NavigationGuardReturn`\>