Skip to content

Commit e6acf78

Browse files
nicodevsnicodevs
authored
Add Vue School Free Weekend banner (October 2022) (#1967)
* Add Vue School Free Weekend banner (October 2022) * Change CTA text
1 parent 480c95a commit e6acf78

File tree

11 files changed

+738
-423
lines changed

11 files changed

+738
-423
lines changed

‎.vitepress/inlined-scripts/restorePreference.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
restore('vue-docs-prefer-composition', 'prefer-composition')
99
restore('vue-docs-prefer-sfc', 'prefer-sfc', true)
1010

11-
// window.__VUE_BANNER_ID__ = ''
12-
// restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
11+
window.__VUE_BANNER_ID__ = 'VS-FW'
12+
restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
1313
})()

‎.vitepress/theme/components/Banner.vue

Lines changed: 206 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,220 @@ let open = $ref(true)
1414
function dismiss() {
1515
open = false
1616
document.documentElement.classList.add('banner-dismissed')
17-
localStorage.setItem(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'true')
17+
localStorage.setItem(`vue-docs-banner-${window.__VUE_BANNER_ID__}`, 'true')
1818
}
1919
</script>
2020

2121
<template>
22-
<div class="banner" v-if="open"></div>
22+
<div class="banner" v-if="open">
23+
<a
24+
id="vs"
25+
href="https://vueschool.io/free-weekend?friend=vuejs&utm_source=vuejs&utm_medium=website&utm_campaign=affiliate&utm_content=top_banner"
26+
target="_blank"
27+
rel="noreferrer">
28+
<div
29+
class="vs-background-wrapper">
30+
<div class="vs-logo">
31+
<img src="/images/vueschool/vs-iso.svg" class="logo-small">
32+
<img src="/images/vueschool/vs-logo.svg" class="logo-big">
33+
</div>
34+
<div class="vs-core">
35+
<div class="vs-slogan-wrapper">
36+
<div class="vs-slogan">
37+
Free Weekend 1st & 2nd of October
38+
</div>
39+
<div class="vs-subline">
40+
Get Access to ALL Vue School premium courses
41+
</div>
42+
</div>
43+
<div class="vs-button-wrapper">
44+
<div class="vs-button">
45+
Join for Free
46+
</div>
47+
</div>
48+
</div>
49+
<div
50+
id="vs-close"
51+
class="vs-close"
52+
@click.stop.prevent="dismiss">
53+
<img src="/images/vueschool/close.svg" alt="Close">
54+
</div>
55+
</div>
56+
</a>
57+
</div>
2358
</template>
2459

2560
<style>
2661
html:not(.banner-dismissed) {
27-
--vt-banner-height: 60px;
62+
--vt-banner-height: 72px;
63+
}
64+
65+
#vs {
66+
background-color: #0A1124;
67+
box-sizing: border-box;
68+
color: #fff;
69+
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
70+
position: fixed;
71+
left: 0;
72+
right: 0;
73+
top: 0;
74+
z-index: 100;
75+
height: 72px;
76+
background: linear-gradient(to left, #161a35, #283065);
77+
line-height: 1;
78+
}
79+
80+
#vs .vs-background-wrapper {
81+
align-items: center;
82+
justify-content: center;
83+
display: flex;
84+
padding: 0 10px;
85+
height: 100%;
86+
width: 100%;
87+
background-image: url(/images/vueschool/bg-mobile.png);
88+
background-repeat: no-repeat;
89+
background-size: cover;
90+
background-position: top right;
91+
}
92+
93+
#vs:hover {
94+
text-decoration: none;
95+
}
96+
97+
#vs:hover .vs-core .vs-button {
98+
background-image: linear-gradient(to bottom, #5ccc45, #419E2D), linear-gradient(to bottom, #388f26, #50b83b);
99+
}
100+
101+
#vs .vs-logo {
102+
position: absolute;
103+
left: 10px;
104+
}
105+
106+
#vs .vs-logo .logo-big {
107+
display: none;
108+
}
109+
110+
#vs .vs-core {
111+
display: flex;
112+
align-items: center;
113+
width: 288px;
114+
}
115+
116+
#vs .vs-core .vs-slogan-wrapper {
117+
text-align: center;
118+
width: 170px;
119+
margin: 0 auto;
120+
}
121+
122+
#vs .vs-core .vs-slogan {
123+
color: #fff;
124+
font-weight: bold;
125+
font-size: 10px;
126+
}
127+
128+
#vs .vs-core .vs-subline {
129+
color: #c6cdf7;
130+
font-size: 10px;
131+
margin-top: 4px;
132+
}
133+
134+
#vs .vs-core .vs-button-wrapper {
135+
padding: 2px;
136+
background-image: linear-gradient(to bottom, #388f26, #50b83b);
137+
border-radius: 60px;
138+
overflow: hidden;
139+
}
140+
141+
#vs .vs-core .vs-button {
142+
border-radius: 60px;
143+
color: #FFF;
144+
padding: 8px 6px;
145+
background-image: linear-gradient(to bottom, #5ccc45, #368c24), linear-gradient(to bottom, #388f26, #50b83b);
146+
font-weight: bold;
147+
text-transform: uppercase;
148+
text-align: center;
149+
font-size: 10px;
150+
letter-spacing: 0.3px;
151+
white-space: nowrap;
152+
}
153+
154+
#vs .vs-close {
155+
right: 0;
156+
position: absolute;
157+
padding: 10px;
158+
}
159+
160+
#vs .vs-close:hover {
161+
color: #56d8ff;
162+
}
163+
164+
@media (min-width: 680px) {
165+
#vs .vs-background-wrapper {
166+
background-image: url(/images/vueschool/bg-tablet.svg);
167+
}
168+
169+
#vs .vs-logo {
170+
left: 20px;
171+
}
172+
173+
#vs .vs-logo .logo-small {
174+
display: none;
175+
}
176+
177+
#vs .vs-logo .logo-big {
178+
display: inline-block;
179+
width: 90px;
180+
}
181+
182+
#vs .vs-core {
183+
width: auto;
184+
margin-right: -60px;
185+
}
186+
187+
#vs .vs-core .vs-slogan-wrapper {
188+
margin: 0 12px 0 0;
189+
width: auto;
190+
}
191+
192+
#vs .vs-core .vs-slogan {
193+
font-size: 16px;
194+
}
195+
196+
#vs .vs-core .vs-subline {
197+
font-size: 15px;
198+
text-align: left;
199+
}
200+
201+
#vs .vs-core .vs-button {
202+
font-size: 13px;
203+
padding: 8px 15px;
204+
}
205+
206+
#vs .vs-close {
207+
right: 20px;
208+
}
209+
}
210+
211+
@media (min-width: 900px) {
212+
#vs .vs-background-wrapper {
213+
background-image: url(/images/vueschool/bg-desktop.svg);
214+
background-position: top right -300px;
215+
}
216+
217+
#vs .vs-logo .logo-big {
218+
display: inline-block;
219+
width: auto;
220+
}
221+
222+
#vs .vs-core {
223+
margin-right: 0;
224+
}
225+
}
226+
227+
@media (min-width: 1280px) {
228+
#vs .vs-background-wrapper {
229+
background-position: top right;
230+
}
28231
}
29232
</style>
30233

‎.vitepress/theme/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ import {
1010
import SponsorsAside from './components/SponsorsAside.vue'
1111
import VueJobs from './components/VueJobs.vue'
1212
import VueSchoolLink from './components/VueSchoolLink.vue'
13-
// import Banner from './components/Banner.vue'
13+
import Banner from './components/Banner.vue'
1414

1515
export default Object.assign({}, VPTheme, {
1616
Layout: () => {
1717
// @ts-ignore
1818
return h(VPTheme.Layout, null, {
19-
// banner: () => h(Banner),
19+
banner: () => h(Banner),
2020
'sidebar-top': () => h(PreferenceSwitch),
2121
'aside-mid': () => h(SponsorsAside)
2222
})

‎src/public/images/vueschool/bg-desktop.svg

Lines changed: 253 additions & 0 deletions
Loading

‎src/public/images/vueschool/bg-mobile.png

8.07 KB
Loading

‎src/public/images/vueschool/bg-tablet.svg

Lines changed: 253 additions & 0 deletions
Loading

‎src/public/images/vueschool/vs-close.svg renamed to ‎src/public/images/vueschool/close.svg

Lines changed: 1 addition & 1 deletion
Loading

0 commit comments

Comments
 (0)