docs: Add links for Mastering Pinia and Vue Certificate (#2489)

packages/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',
+    image: '/banners/vuejs-certification.svg',
+  },
+  {
+    id: 2,
+    name: 'Mastering Pinia',
+    link: 'https://masteringpinia.com',
+    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>

packages/docs/.vitepress/theme/index.ts

@@ -1,19 +1,20 @@
+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 AsideSponsors from './components/AsideSponsors.vue'
 import './styles/vars.css'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 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)