docs: add Vue Mastery links for Vue Router Cheat Sheet (#1571)

Co-authored-by: Andy <andy@Andys-MacBook-Pro.local>

diff --git a/packages/docs/.vitepress/components/VueMasteryHomeLink.vue b/packages/docs/.vitepress/components/VueMasteryHomeLink.vue
new file mode 100644 (file)
index 0000000..5b2fa0e
--- /dev/null
+++ b/packages/docs/.vitepress/components/VueMasteryHomeLink.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="container">
+    <div class="inside">
+      <a href="https://www.vuemastery.com/vue-router?coupon=ROUTER-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">
+        </span>
+        <span class="description">
+          Get the <span class="highlight">Vue Router Cheat Sheet</span> from Vue Mastery
+        </span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.container {
+  text-align: center;
+  margin-top: -30px;
+}
+
+.inside {
+  width:960px;
+  border-bottom: 1px solid var(--c-divider);
+  padding-bottom:50px;
+  margin: 0 auto;
+}
+
+a {
+  background-color: rgba(27,31,35,0.05);
+  border-radius: 8px;
+  padding: 8px 16px 8px 8px;
+}
+
+.description {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #2c3e50;
+  margin-left:10px;
+  transition: color 0.5s;
+}
+
+a:hover {
+  text-decoration: none !important;
+}
+
+.description .highlight {
+  color: #3eaf7c;
+}
+
+@media (max-width: 960px) {
+  .inside {
+    width:100%;
+  }
+}
+
+@media (max-width: 420px) {   
+  a {
+    display:block;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+</style>
\ No newline at end of file

diff --git a/packages/docs/.vitepress/components/VueMasteryLogoLink.vue b/packages/docs/.vitepress/components/VueMasteryLogoLink.vue
new file mode 100644 (file)
index 0000000..113ce68
--- /dev/null
+++ b/packages/docs/.vitepress/components/VueMasteryLogoLink.vue
@@ -0,0 +1,70 @@
+<template>
+  <a href="https://www.vuemastery.com/vue-router?coupon=ROUTER-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">
+    </span>
+    <span class="description">
+      Get the <span>Vue Router Cheat Sheet</span> from Vue Mastery
+    </span>
+  </a>
+</template>
+
+<style scoped>
+a {
+  background-color: rgba(27,31,35,0.05);
+  border-radius: 8px;
+  padding: 8px 16px 8px 8px;
+  transition: color 0.5s, background-color 0.5s;
+  display: flex;
+  align-items: center;
+  margin-top:10px;
+  margin-bottom:10px;
+}
+
+.description {
+  flex: 1;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #2c3e50;
+  margin: 0 0 0 16px;
+  transition: color 0.5s;
+}
+
+a:hover {
+  text-decoration: none !important;
+}
+
+.description span {
+  color: #3eaf7c;
+}
+
+.logo-wrapper {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo-wrapper img {
+  width: 25px;
+  object-fit: contain;
+}
+
+@media (max-width: 576px) {
+
+  .description {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  .logo-wrapper {
+    position: relative;
+    width: 32px;
+    height: 32px;
+  }
+}
+</style>
\ No newline at end of file

diff --git a/packages/docs/.vitepress/theme/Layout.vue b/packages/docs/.vitepress/theme/Layout.vue
index 78a46f18e85e68ce62ac0711031bf55f5586de40..560ece73521531c80a6c1bbb2247a6c5c9826767 100644 (file)
--- a/packages/docs/.vitepress/theme/Layout.vue
+++ b/packages/docs/.vitepress/theme/Layout.vue
@@ -2,6 +2,9 @@
   <div class="main-container">
     <BannerTop />
     <ParentLayout>
+      <template #home-hero>
+        <VueMasteryHomeLink></VueMasteryHomeLink>
+      </template>
       <template #sidebar-top>
         <div class="sponsors sponsors-top">
           <span>Platinum Sponsors</span>
@@ -50,6 +53,7 @@
 <script>
 import { defineAsyncComponent } from 'vue'
 import DefaultTheme from 'vitepress/dist/client/theme-default'
+import VueMasteryHomeLink from '../components/VueMasteryHomeLink.vue'
 import sponsors from '../components/sponsors.json'
 import './banner-top.css'
 
@@ -59,7 +63,8 @@ export default {
   name: 'Layout',
   components: {
     ParentLayout: DefaultTheme.Layout,
-    BannerTop
+    BannerTop,
+    VueMasteryHomeLink
   },
   data() {
     return {

diff --git a/packages/docs/.vitepress/theme/index.js b/packages/docs/.vitepress/theme/index.js
index b7ffacd7ada1cfdb657a152bf96a8408a845338f..781a9286cadee11dd41e681bcaf6e9c4c27675b6 100644 (file)
--- a/packages/docs/.vitepress/theme/index.js
+++ b/packages/docs/.vitepress/theme/index.js
@@ -2,12 +2,14 @@ import DefaultTheme from 'vitepress/dist/client/theme-default'
 import Layout from './Layout.vue'
 import './sponsors.css'
 import VueSchoolLink from '../components/VueSchoolLink.vue'
+import VueMasteryLogoLink from '../components/VueMasteryLogoLink.vue'
 
 export default {
   ...DefaultTheme,
   Layout,
   enhanceApp({ app, router, siteData }) {
     app.component('VueSchoolLink', VueSchoolLink)
+    app.component('VueMasteryLogoLink', VueMasteryLogoLink)
     // app is the Vue 3 app instance from createApp()
     // router is VitePress' custom router (see `lib/app/router.js`)
     // siteData is a ref of current site-level metadata.

diff --git a/packages/docs/guide/index.md b/packages/docs/guide/index.md
index 243f911956bb0c993642720a17391db151084c03..6d54507e61e56f63bee13299fc43c02938d15ca3 100644 (file)
--- a/packages/docs/guide/index.md
+++ b/packages/docs/guide/index.md
@@ -36,6 +36,8 @@ Note how instead of using regular `a` tags, we use a custom component `router-li
 
 `router-view` will display the component that corresponds to the url. You can put it anywhere to adapt it to your layout.
 
+<VueMasteryLogoLink></VueMasteryLogoLink>
+
 ## JavaScript
 
 ```js

diff --git a/packages/docs/installation.md b/packages/docs/installation.md
index 1afc7d1f2f25d320dfa63803803cbc4bb69c2ac8..5503d5cebc0dbdeb1cf13b257eff58815ef21f52 100644 (file)
--- a/packages/docs/installation.md
+++ b/packages/docs/installation.md
@@ -1,5 +1,7 @@
 # Installation
 
+<VueMasteryLogoLink></VueMasteryLogoLink>
+
 ## Direct Download / CDN
 
 [https://unpkg.com/vue-router@4](https://unpkg.com/vue-router@4)