Skip to content

Commit ec87602

Browse files
tutorialcodeAndy
tutorialcode
and
Andy
authored
docs: add Vue Mastery links for Vue Router Cheat Sheet (#1571)
Co-authored-by: Andy <[email protected]>
1 parent 30002aa commit ec87602

File tree

6 files changed

+151
-1
lines changed

6 files changed

+151
-1
lines changed

‎packages/docs/.vitepress/components/VueMasteryHomeLink.vue

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script setup lang="ts">
2+
</script>
3+
4+
<template>
5+
<div class="container">
6+
<div class="inside">
7+
<a href="https://www.vuemastery.com/vue-router?coupon=ROUTER-DOCS&via=eduardo" target="_blank">
8+
<span class="logo-wrapper">
9+
<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">
10+
</span>
11+
<span class="description">
12+
Get the <span class="highlight">Vue Router Cheat Sheet</span> from Vue Mastery
13+
</span>
14+
</a>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<style scoped>
20+
21+
.container {
22+
text-align: center;
23+
margin-top: -30px;
24+
}
25+
26+
.inside {
27+
width:960px;
28+
border-bottom: 1px solid var(--c-divider);
29+
padding-bottom:50px;
30+
margin: 0 auto;
31+
}
32+
33+
a {
34+
background-color: rgba(27,31,35,0.05);
35+
border-radius: 8px;
36+
padding: 8px 16px 8px 8px;
37+
}
38+
39+
.description {
40+
font-weight: 500;
41+
font-size: 14px;
42+
line-height: 20px;
43+
color: #2c3e50;
44+
margin-left:10px;
45+
transition: color 0.5s;
46+
}
47+
48+
a:hover {
49+
text-decoration: none !important;
50+
}
51+
52+
.description .highlight {
53+
color: #3eaf7c;
54+
}
55+
56+
@media (max-width: 960px) {
57+
.inside {
58+
width:100%;
59+
}
60+
}
61+
62+
@media (max-width: 420px) {
63+
a {
64+
display:block;
65+
margin-left: 10px;
66+
margin-right: 10px;
67+
}
68+
}
69+
</style>

‎packages/docs/.vitepress/components/VueMasteryLogoLink.vue

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<a href="https://www.vuemastery.com/vue-router?coupon=ROUTER-DOCS&via=eduardo" target="_blank">
3+
<span class="logo-wrapper">
4+
<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">
5+
</span>
6+
<span class="description">
7+
Get the <span>Vue Router Cheat Sheet</span> from Vue Mastery
8+
</span>
9+
</a>
10+
</template>
11+
12+
<style scoped>
13+
a {
14+
background-color: rgba(27,31,35,0.05);
15+
border-radius: 8px;
16+
padding: 8px 16px 8px 8px;
17+
transition: color 0.5s, background-color 0.5s;
18+
display: flex;
19+
align-items: center;
20+
margin-top:10px;
21+
margin-bottom:10px;
22+
}
23+
24+
.description {
25+
flex: 1;
26+
font-weight: 500;
27+
font-size: 14px;
28+
line-height: 20px;
29+
color: #2c3e50;
30+
margin: 0 0 0 16px;
31+
transition: color 0.5s;
32+
}
33+
34+
a:hover {
35+
text-decoration: none !important;
36+
}
37+
38+
.description span {
39+
color: #3eaf7c;
40+
}
41+
42+
.logo-wrapper {
43+
position: relative;
44+
width: 48px;
45+
height: 48px;
46+
border-radius: 50%;
47+
background-color: white;
48+
display: flex;
49+
justify-content: center;
50+
align-items: center;
51+
}
52+
53+
.logo-wrapper img {
54+
width: 25px;
55+
object-fit: contain;
56+
}
57+
58+
@media (max-width: 576px) {
59+
60+
.description {
61+
font-size: 12px;
62+
line-height: 18px;
63+
}
64+
.logo-wrapper {
65+
position: relative;
66+
width: 32px;
67+
height: 32px;
68+
}
69+
}
70+
</style>

‎packages/docs/.vitepress/theme/Layout.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
<div class="main-container">
33
<BannerTop />
44
<ParentLayout>
5+
<template #home-hero>
6+
<VueMasteryHomeLink></VueMasteryHomeLink>
7+
</template>
58
<template #sidebar-top>
69
<div class="sponsors sponsors-top">
710
<span>Platinum Sponsors</span>
@@ -50,6 +53,7 @@
5053
<script>
5154
import { defineAsyncComponent } from 'vue'
5255
import DefaultTheme from 'vitepress/dist/client/theme-default'
56+
import VueMasteryHomeLink from '../components/VueMasteryHomeLink.vue'
5357
import sponsors from '../components/sponsors.json'
5458
import './banner-top.css'
5559
@@ -59,7 +63,8 @@ export default {
5963
name: 'Layout',
6064
components: {
6165
ParentLayout: DefaultTheme.Layout,
62-
BannerTop
66+
BannerTop,
67+
VueMasteryHomeLink
6368
},
6469
data() {
6570
return {

‎packages/docs/.vitepress/theme/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import DefaultTheme from 'vitepress/dist/client/theme-default'
22
import Layout from './Layout.vue'
33
import './sponsors.css'
44
import VueSchoolLink from '../components/VueSchoolLink.vue'
5+
import VueMasteryLogoLink from '../components/VueMasteryLogoLink.vue'
56

67
export default {
78
...DefaultTheme,
89
Layout,
910
enhanceApp({ app, router, siteData }) {
1011
app.component('VueSchoolLink', VueSchoolLink)
12+
app.component('VueMasteryLogoLink', VueMasteryLogoLink)
1113
// app is the Vue 3 app instance from createApp()
1214
// router is VitePress' custom router (see `lib/app/router.js`)
1315
// siteData is a ref of current site-level metadata.

‎packages/docs/guide/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ Note how instead of using regular `a` tags, we use a custom component `router-li
3636

3737
`router-view` will display the component that corresponds to the url. You can put it anywhere to adapt it to your layout.
3838

39+
<VueMasteryLogoLink></VueMasteryLogoLink>
40+
3941
## JavaScript
4042

4143
```js

‎packages/docs/installation.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Installation
22

3+
<VueMasteryLogoLink></VueMasteryLogoLink>
4+
35
## Direct Download / CDN
46

57
[https://unpkg.com/vue-router@4](https://unpkg.com/vue-router@4)

0 commit comments

Comments
 (0)