Skip to content

Commit 01d80e7

Browse files
jay-esdanielkellyioskirtles-codei5dr0id
authored
Vuemastery video modal and graphical link (#316) (#317)
* 4 more Vue School Video Links (CAPI events, teleport, component registration, devtools) (#1576) * Fix mismatched quotes in import (#1586) * Dark-mode styling for select and option elements (#1587) * Use 'Count' instead of 'count' (#1585) * Builds named 'runtime' don't include the compiler (#1584) * Vuemastery video modal and graphical link (#1572) Co-authored-by: Daniel Kelly <[email protected]> Co-authored-by: skirtle <[email protected]> Co-authored-by: Israel Ugbodaga <[email protected]>
1 parent 671974a commit 01d80e7

File tree

4 files changed

+280
-13
lines changed

4 files changed

+280
-13
lines changed

.vitepress/theme/components/Home.vue

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import NewsLetter from './NewsLetter.vue'
33
import SponsorsGroup from './SponsorsGroup.vue';
4+
import VueMasteryModal from './VueMasteryModal.vue';
45
</script>
56

67
<template>
@@ -15,6 +16,7 @@ import SponsorsGroup from './SponsorsGroup.vue';
1516
user interfaces.
1617
</p>
1718
<p class="actions">
19+
<vue-mastery-modal />
1820
<a class="get-started" href="/guide/introduction.html">
1921
Get Started
2022
<svg
@@ -131,9 +133,6 @@ html:not(.dark) .accent,
131133
}
132134
133135
.actions .get-started {
134-
font-weight: 600;
135-
background-color: var(--vt-c-green);
136-
color: #fff;
137136
margin-right: 18px;
138137
}
139138
@@ -146,32 +145,26 @@ html:not(.dark) .accent,
146145
transition: transform 0.2s;
147146
}
148147
149-
.dark .actions .get-started {
150-
color: var(--vt-c-indigo);
151-
}
152-
153148
.actions .get-started:hover {
154-
background-color: var(--vt-c-green-dark);
155149
transition-duration: 0.2s;
156150
}
157151
158152
.actions .get-started:hover .icon {
159153
transform: translateX(2px);
160154
}
161155
162-
.dark .actions .get-started:hover {
163-
background-color: var(--vt-c-green-light);
164-
}
165-
156+
.actions .get-started,
166157
.actions .setup {
167158
color: var(--vt-c-text-code);
168159
}
169160
161+
.actions .get-started:hover,
170162
.actions .setup:hover {
171163
background-color: var(--vt-c-gray-light-4);
172164
transition-duration: 0.2s;
173165
}
174166
167+
.dark .actions .get-started:hover,
175168
.dark .actions .setup:hover {
176169
background-color: var(--vt-c-gray-dark-3);
177170
}
@@ -276,11 +269,14 @@ html:not(.dark) .accent,
276269
#highlights .vt-box {
277270
padding: 20px 36px;
278271
}
272+
.actions a {
273+
margin: 0.5em 0;
274+
}
279275
}
280276
281277
@media (max-width: 370px) {
282278
.tagline {
283279
font-size: 36px;
284280
}
285281
}
286-
</style>
282+
</style>
Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<script setup lang="ts">
2+
import { watch } from 'vue'
3+
4+
const VIDEO_SOURCE = 'https://player.vimeo.com/video/647441538?autoplay=1'
5+
let showWhyVue: boolean = $ref(false)
6+
7+
watch(
8+
() => showWhyVue,
9+
(value) => {
10+
value
11+
? (document.documentElement.style.overflow = 'hidden')
12+
: (document.documentElement.style.overflow = 'auto')
13+
}
14+
)
15+
</script>
16+
17+
<template>
18+
<a
19+
id="vuemastery-action"
20+
class="why-vue"
21+
@click="showWhyVue = true"
22+
href="javascript:;"
23+
>
24+
<svg
25+
class="icon-play"
26+
aria-labelledby="simpleicons-play-icon"
27+
role="img"
28+
viewBox="0 0 100 125"
29+
fill="#FFFFFF"
30+
>
31+
<title id="simpleicons-play-icon" lang="en">Play icon</title>
32+
<path
33+
d="M50,3.8C24.5,3.8,3.8,24.5,3.8,50S24.5,96.2,50,96.2S96.2,75.5,96.2,50S75.5,3.8,50,3.8z M71.2,53.3l-30.8,18 c-0.6,0.4-1.3,0.5-1.9,0.5c-0.6,0-1.3-0.1-1.9-0.5c-1.2-0.6-1.9-1.9-1.9-3.3V32c0-1.4,0.8-2.7,1.9-3.3c1.2-0.6,2.7-0.6,3.8,0 l30.8,18c1.2,0.6,1.9,1.9,1.9,3.3S72.3,52.7,71.2,53.3z"
34+
></path>
35+
</svg>
36+
Why Vue
37+
</a>
38+
<Teleport v-if="showWhyVue" to="body">
39+
<div
40+
@click="showWhyVue = false"
41+
class="vuemastery-modal-mask"
42+
>
43+
<div class="vuemastery-modal-wrapper">
44+
<div class="vuemastery-modal-container">
45+
<div class="vuemastery-modal-content">
46+
<div class="vuemastery-video-space">
47+
<iframe
48+
:src="VIDEO_SOURCE"
49+
style="
50+
height: 100%;
51+
left: 0;
52+
position: absolute;
53+
top: 0;
54+
width: 100%;
55+
border-radius: 6px;
56+
"
57+
frameborder="0"
58+
webkitallowfullscreen
59+
mozallowfullscreen
60+
allowfullscreen
61+
allow="autoplay"
62+
></iframe>
63+
</div>
64+
</div>
65+
66+
<div class="vuemastery-modal-footer">
67+
<p class="vuemastery-modal-footer-text">
68+
Video by
69+
<a
70+
href="https://www.vuemastery.com"
71+
target="_blank"
72+
rel="sponsored noopener"
73+
title="Vue.js Courses on Vue Mastery"
74+
>
75+
Vue Mastery.</a
76+
> Watch Vue Mastery’s free
77+
<a
78+
href="https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3"
79+
target="_blank"
80+
rel="sponsored noopener"
81+
title="Vue.js Courses on Vue Mastery"
82+
>
83+
Intro to Vue course.</a
84+
>
85+
</p>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</Teleport>
91+
</template>
92+
93+
<style scoped>
94+
#vuemastery-action {
95+
font-size: 16px;
96+
display: inline-block;
97+
border-radius: 8px;
98+
transition: background-color 0.5s, color 0.5s;
99+
position: relative;
100+
font-weight: 600;
101+
background-color: var(--vt-c-green);
102+
color: #fff;
103+
margin-right: 18px;
104+
padding: 8px 1em 8px 3em;
105+
}
106+
107+
.dark #vuemastery-action {
108+
color: var(--vt-c-indigo);
109+
}
110+
111+
#vuemastery-action:hover {
112+
background-color: var(--vt-c-green-dark);
113+
transition-duration: 0.2s;
114+
}
115+
116+
.dark #vuemastery-action:hover {
117+
background-color: var(--vt-c-green-light);
118+
}
119+
120+
.icon-play {
121+
display: inline;
122+
position: absolute;
123+
left: 15px;
124+
top: 8px;
125+
margin-left: 2px;
126+
fill: currentColor;
127+
width: 1.5em;
128+
}
129+
130+
.vuemastery-modal-mask {
131+
position: fixed;
132+
top: 0;
133+
bottom: 0;
134+
left: 0;
135+
right: 0;
136+
background: rgba(0, 0, 0, 0.2);
137+
z-index: 30;
138+
transition: opacity 0.3s ease;
139+
}
140+
141+
.vuemastery-modal-wrapper {
142+
display: block;
143+
box-sizing: border-box;
144+
border-radius: 8px;
145+
position: fixed;
146+
width: 75%;
147+
height: auto;
148+
padding: 0.5em;
149+
background-color: #f9f9f9;
150+
box-shadow: 0 0 10px rgb(0 0 0 / 20%);
151+
top: 50%;
152+
left: 50%;
153+
transform: translate(-50%, -50%);
154+
z-index: 40;
155+
}
156+
157+
.dark .vuemastery-modal-wrapper {
158+
background-color: var(--vt-c-bg-soft);
159+
}
160+
161+
.vuemastery-modal-content {
162+
margin-bottom: 10px;
163+
}
164+
165+
.vuemastery-video-space {
166+
position: relative;
167+
padding: 56.25% 0 0 0;
168+
}
169+
170+
.vuemastery-modal-footer-text {
171+
color: var(--vt-c-text-2);
172+
margin-bottom: 0.5em;
173+
text-align: center;
174+
word-spacing: 0.05em;
175+
font-size: 12px;
176+
}
177+
178+
.vuemastery-modal-footer-text a {
179+
color: #42b983;
180+
font-weight: 600;
181+
}
182+
183+
.dark .vuemastery-modal-footer-text {
184+
color: var(--vt-c-text-2);
185+
font-weight: 600;
186+
}
187+
188+
@media (max-width: 360px) {
189+
#vuemastery-action {
190+
margin-right: 0;
191+
}
192+
}
193+
</style>
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.vue-mastery-link {
2+
background-color: var(--vt-c-bg-soft);
3+
border-radius: 8px;
4+
padding: 8px 16px 8px 8px;
5+
transition: color 0.5s, background-color 0.5s;
6+
}
7+
8+
.vue-mastery-link a {
9+
display: flex;
10+
align-items: center;
11+
}
12+
13+
.vue-mastery-link .banner {
14+
background-color: var(--vt-c-white-soft);
15+
border-radius: 4px;
16+
width:96px;
17+
height:56px;
18+
object-fit: cover;
19+
}
20+
21+
.vue-mastery-link .description {
22+
flex: 1;
23+
font-weight: 500;
24+
font-size: 14px;
25+
line-height: 20px;
26+
color: var(--vt-c-text-1);
27+
margin: 0 0 0 16px;
28+
transition: color 0.5s;
29+
}
30+
31+
.vue-mastery-link .description span {
32+
color: var(--vt-c-brand);
33+
}
34+
35+
.vue-mastery-link .logo-wrapper {
36+
position: relative;
37+
width: 48px;
38+
height: 48px;
39+
border-radius: 50%;
40+
background-color: var(--vt-c-white);
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
}
45+
46+
.vue-mastery-link .logo-wrapper img {
47+
width: 25px;
48+
object-fit: contain;
49+
}
50+
51+
@media (max-width: 576px) {
52+
.vue-mastery-link .banner {
53+
width:56px;
54+
}
55+
56+
.vue-mastery-link .description {
57+
font-size: 12px;
58+
line-height: 18px;
59+
}
60+
.vue-mastery-link .logo-wrapper {
61+
position: relative;
62+
width: 32px;
63+
height: 32px;
64+
}
65+
}

src/guide/introduction.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,19 @@ footer: false
1010
- Upgrading from Vue 2? Check out the [Migration Guide](https://v3-migration.vuejs.org/).
1111
:::
1212

13+
<style src="/@theme/styles/vue-mastery.css"></style>
14+
<div class="vue-mastery-link">
15+
<a href="https://www.vuemastery.com/courses-path/beginner" target="_blank">
16+
<div class="banner-wrapper">
17+
<img class="banner" alt="Vue Mastery banner" width="96px" height="56px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png" />
18+
</div>
19+
<p class="description">Learn Vue with video tutorials on <span>VueMastery.com</span></p>
20+
<div class="logo-wrapper">
21+
<img alt="Vue Mastery Logo" width="25px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue-mastery-logo.png" />
22+
</div>
23+
</a>
24+
</div>
25+
1326
## What is Vue?
1427

1528
Vue (pronounced /vjuː/, like **view**) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.

0 commit comments

Comments
 (0)