Skip to content

Commit f3a65c0

Browse files
matrunchykmatrunchyk
committed
Merge branch 'main-upstream' into upstream-sync
# Conflicts: # .vitepress/config.ts # .vitepress/theme/components/Banner.vue # .vitepress/theme/components/Home.vue # .vitepress/theme/styles/index.css # src/api/built-in-components.md # src/api/composition-api-dependency-injection.md # src/api/options-misc.md # src/guide/best-practices/accessibility.md # src/guide/components/events.md # src/guide/components/provide-inject.md # src/guide/essentials/component-basics.md # src/guide/essentials/forms.md # src/guide/essentials/template-refs.md # src/guide/extras/ways-of-using-vue.md # src/guide/introduction.md # src/guide/quick-start.md # src/guide/scaling-up/testing.md # src/guide/typescript/composition-api.md # src/guide/typescript/overview.md # src/partners/partners.json # src/tutorial/src/step-5/description.md
2 parents 5e3aac8 + 14d762c commit f3a65c0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+2128
-632
lines changed

‎.vitepress/config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const nav: ThemeConfig['nav'] = [
4545
items: [
4646
{ text: 'Партнери', link: '/partners/' },
4747
{ text: 'Теми', link: '/ecosystem/themes' },
48+
{ text: 'UI компоненти', link: 'https://ui-libs.vercel.app/' },
4849
{
4950
text: 'Сертифікація',
5051
link: 'https://certification.vuejs.org/?ref=vuejs-nav'

‎.vitepress/inlined-scripts/restorePreference.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
restore('vue-docs-prefer-composition', 'prefer-composition', true)
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__ = 'herodevs-vue2-nes'
12+
restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
1313
})()

‎.vitepress/theme/components/Banner.vue

+336-33
Large diffs are not rendered by default.

‎.vitepress/theme/components/Home.vue

+18-20
Original file line numberDiff line numberDiff line change
@@ -41,28 +41,26 @@ onMounted(async () => {
4141
</p>
4242
</section>
4343

44-
<section id="special-sponsor">
44+
<section v-if="data && data.special" id="special-sponsor">
4545
<span class="lead">Спеціальний спонсор</span>
46-
<template v-if="data && data.special">
47-
<template v-for="{ url, img, name, description } of data.special">
48-
<a :href="url" target="_blank" rel="sponsored noopener">
49-
<picture v-if="img.endsWith('png')">
50-
<source
51-
type="image/avif"
52-
:srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`"
53-
/>
54-
<img :src="`${base}/images/${img}`" :alt="name" />
55-
</picture>
56-
<img
57-
width="168"
58-
height="42"
59-
v-else
60-
:src="`${base}/images/${img}`"
61-
:alt="name"
46+
<template v-for="{ url, img, name, description } of data.special">
47+
<a :href="url" target="_blank" rel="sponsored noopener">
48+
<picture v-if="img.endsWith('png')">
49+
<source
50+
type="image/avif"
51+
:srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`"
6252
/>
63-
</a>
64-
<span>{{ description }}</span>
65-
</template>
53+
<img :src="`${base}/images/${img}`" :alt="name" />
54+
</picture>
55+
<img
56+
width="168"
57+
height="42"
58+
v-else
59+
:src="`${base}/images/${img}`"
60+
:alt="name"
61+
/>
62+
</a>
63+
<span>{{ description }}</span>
6664
</template>
6765
</section>
6866

‎.vitepress/theme/components/VueMasteryBanner.vue

+284
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
<template>
2+
<div class="vuemastery-banner-wrapper" role="banner" v-if="isVisible">
3+
<div
4+
:class="{ 'show-flash': showFlash }"
5+
class="vuemastery-background-dim"
6+
ref="vuemastery-banner-flash"
7+
></div>
8+
<a
9+
id="vm-banner"
10+
href="https://www.vuemastery.com/holiday"
11+
target="_blank"
12+
>
13+
<img
14+
id="vm-logo-full"
15+
src="/vuemastery/vuemastery-white.svg"
16+
alt="vuemastery"
17+
/>
18+
<img
19+
id="vm-logo-small"
20+
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"
21+
alt="vuemastery"
22+
/>
23+
<div class="vm-banner-wrapper">
24+
<div class="vm-banner-content">
25+
<h1 class="vm-banner-title">
26+
Learn Vue with Evan You
27+
<!-- <span>Dec 18-29</span> -->
28+
</h1>
29+
<p class="vm-banner-sub">Get 60% off a year of Vue courses</p>
30+
</div>
31+
<button id="vm-banner-cta">Unlock your discount</button>
32+
</div>
33+
<button id="vm-banner-close" @click.prevent="closeBanner">
34+
<VTIconPlus class="close" />
35+
</button>
36+
</a>
37+
</div>
38+
</template>
39+
40+
<script setup lang="ts">
41+
import { ref, onMounted } from 'vue'
42+
import { VTIconPlus } from '@vue/theme'
43+
44+
const isVisible = ref<Boolean>(true)
45+
const showFlash = ref<Boolean>(false)
46+
const nameStorage = 'VUEMASTERY-BANNER-DECEMBER-2023'
47+
48+
const closeBanner = () => {
49+
// Hide the banner
50+
isVisible.value = false
51+
// Save action in the local storage
52+
localStorage.setItem(nameStorage, String(true))
53+
document.documentElement.classList.remove('vuemastery-menu-fixed')
54+
}
55+
56+
onMounted(() => {
57+
isVisible.value = !localStorage.getItem(nameStorage)
58+
if (isVisible.value) {
59+
document.documentElement.classList.add('vuemastery-menu-fixed')
60+
setTimeout(() => {
61+
showFlash.value = true
62+
}, 2000)
63+
}
64+
})
65+
</script>
66+
<style scoped>
67+
.vuemastery-banner-wrapper {
68+
position: fixed;
69+
top: 0;
70+
bottom: 0;
71+
left: 0;
72+
right: 0;
73+
z-index: 61;
74+
width: 100%;
75+
height: 100%;
76+
max-height: 70px;
77+
background: linear-gradient(45deg, #0a2b4e, #835ec2);
78+
background-size: 110%;
79+
background-position: 50% 50%;
80+
overflow: hidden;
81+
padding: 12px;
82+
margin: 0;
83+
transition: background-size 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
84+
}
85+
86+
.vuemastery-banner-wrapper:hover {
87+
background-size: 100%;
88+
}
89+
90+
.vuemastery-banner-wrapper:before {
91+
content: '';
92+
background: url(/vuemastery/background-bubbles-vuemastery.svg) left
93+
center no-repeat;
94+
background-size: cover;
95+
position: absolute;
96+
top: 0;
97+
bottom: 0;
98+
left: 0;
99+
right: 0;
100+
transition: all 0.3s ease-out 0.1s;
101+
transform: scale(1.1);
102+
width: 100%;
103+
height: 100%;
104+
}
105+
.vuemastery-banner-wrapper:after {
106+
content: '';
107+
background: url(/vuemastery/lock-vuemastery.svg) right center no-repeat;
108+
background-size: auto 100%;
109+
position: absolute;
110+
width: 100%;
111+
height: 100%;
112+
top: 0;
113+
left: 0;
114+
pointer-events: none;
115+
}
116+
117+
.vuemastery-banner-wrapper:hover:after {
118+
background-image: url(/vuemastery/unlock-vuemastery.svg);
119+
}
120+
121+
#vm-banner {
122+
position: relative;
123+
width: 100%;
124+
height: 100%;
125+
text-decoration: none;
126+
color: white;
127+
display: flex;
128+
justify-content: center;
129+
align-items: center;
130+
overflow: hidden;
131+
}
132+
133+
#vm-logo-full {
134+
position: absolute;
135+
left: 15px;
136+
width: 120px;
137+
}
138+
139+
#vm-logo-small {
140+
display: none;
141+
}
142+
143+
.vm-banner-wrapper {
144+
display: flex;
145+
align-items: center;
146+
}
147+
148+
.vm-banner-content {
149+
display: flex;
150+
}
151+
152+
.vm-banner-title {
153+
margin: 0;
154+
padding: 0;
155+
font-weight: bold;
156+
font-size: 24px;
157+
text-align: center;
158+
background: linear-gradient(145deg, #c3ffac, #86ec87, #38a56a);
159+
background-clip: text;
160+
-webkit-background-clip: text;
161+
-webkit-text-fill-color: transparent;
162+
}
163+
164+
.vm-banner-sub {
165+
margin: 0 2em;
166+
padding: 0;
167+
font-size: 16px;
168+
text-align: center;
169+
color: #fff;
170+
}
171+
172+
#vm-banner-cta {
173+
position: relative;
174+
margin-left: 10px;
175+
padding: 10px 24px;
176+
background: linear-gradient(to top right, #41b782, #86d169);
177+
border: none;
178+
border-radius: 30px;
179+
color: #fff;
180+
font-size: 12px;
181+
font-weight: bold;
182+
text-decoration: none;
183+
text-transform: uppercase;
184+
}
185+
186+
#vm-banner-cta:hover {
187+
background: linear-gradient(to bottom right, #41b782, #86d169);
188+
}
189+
190+
#vm-banner-close {
191+
position: absolute;
192+
right: 12px;
193+
color: #fff;
194+
font-size: 20px;
195+
font-weight: bold;
196+
display: flex;
197+
align-items: center;
198+
justify-content: center;
199+
}
200+
201+
#vm-banner-close > .close {
202+
width: 20px;
203+
height: 20px;
204+
fill: #fff;
205+
transform: rotate(45deg);
206+
}
207+
208+
@media (max-width: 1200px) {
209+
#vm-banner-cta {
210+
display: none;
211+
}
212+
213+
.vm-banner-content {
214+
flex-direction: column;
215+
}
216+
217+
.vm-banner-sub {
218+
margin: 0 1em;
219+
}
220+
}
221+
222+
@media (max-width: 850px) {
223+
.vuemastery-banner-wrapper:after {
224+
background: none;
225+
}
226+
}
227+
@media (max-width: 767px) {
228+
#vm-logo-full {
229+
left: 10px;
230+
width: 100px;
231+
}
232+
}
233+
@media (max-width: 767px) {
234+
#vm-logo-full {
235+
display: none;
236+
}
237+
#vm-logo-small {
238+
position: absolute;
239+
display: block;
240+
left: 10px;
241+
width: 40px;
242+
}
243+
.vm-banner-title {
244+
font-size: 14px;
245+
}
246+
.vm-banner-sub {
247+
font-size: 12px;
248+
margin: 0;
249+
}
250+
}
251+
252+
.vuemastery-background-dim {
253+
position: absolute;
254+
width: 100%;
255+
height: 100%;
256+
top: 0;
257+
left: 0;
258+
}
259+
.vuemastery-background-dim:after {
260+
content: '';
261+
position: absolute;
262+
top: 0;
263+
left: -100%;
264+
width: 100%;
265+
height: 100%;
266+
background: linear-gradient(
267+
90deg,
268+
transparent,
269+
rgba(255, 255, 255, 0.4),
270+
transparent
271+
);
272+
transition: 0.5s;
273+
transition-delay: 0.5s;
274+
}
275+
.vuemastery-background-dim.show-flash:after {
276+
left: 100%;
277+
}
278+
</style>
279+
280+
<style>
281+
html.vuemastery-menu-fixed {
282+
--vt-banner-height: 70px;
283+
}
284+
</style>

‎.vitepress/theme/index.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,16 @@ import {
99
} from './components/preferences'
1010
import SponsorsAside from './components/SponsorsAside.vue'
1111
import VueSchoolLink from './components/VueSchoolLink.vue'
12-
// import Banner from './components/Banner.vue'
12+
import Banner from './components/Banner.vue'
13+
import VueMasteryBanner from './components/VueMasteryBanner.vue'
1314
// import TextAd from './components/TextAd.vue'
1415

1516
export default Object.assign({}, VPTheme, {
1617
Layout: () => {
1718
// @ts-ignore
1819
return h(VPTheme.Layout, null, {
1920
// banner: () => h(Banner),
21+
banner: () => h(VueMasteryBanner),
2022
'sidebar-top': () => h(PreferenceSwitch),
2123
'aside-mid': () => h(SponsorsAside)
2224
})

‎.vitepress/theme/styles/index.css

+3-8
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
@import "./utilities.css";
66
@import "./style-guide.css";
77

8-
:root {
9-
--vp-sidebar-width-small: 289px !important;
10-
}
11-
12-
/* bugfix: https://github.com/vuejs/theme/pull/95 */
13-
14-
.vt-flyout-menu {
15-
max-height: calc(100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px)) !important;
8+
/* vitepress rc.31 migrated to shijiki and need this to apply code styles */
9+
.vp-code span {
10+
color: var(--shiki-dark, inherit);
1611
}

0 commit comments

Comments
 (0)