Skip to content

Commit 21a6598

Browse files
JustineoJustineo
authored
Merge pull request #932 from vuejs-translations/sync
Sync #50f3f20a
2 parents de1d319 + c150587 commit 21a6598

Some content is hidden

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

54 files changed

+1472
-667
lines changed

‎.vitepress/config.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const nav: ThemeConfig['nav'] = [
4949
{ text: 'UI 组件', link: 'https://ui-libs.vercel.app/' },
5050
{
5151
text: '证书',
52-
link: 'https://certification.vuejs.org/?ref=vuejs-nav'
52+
link: 'https://certificates.dev/vuejs/?ref=vuejs-nav'
5353
},
5454
{ text: '找工作', link: 'https://vuejobs.com/?ref=vuejs' },
5555
{ text: 'T-Shirt 商店', link: 'https://vue.threadless.com/' }
@@ -113,6 +113,7 @@ const nav: ThemeConfig['nav'] = [
113113
link: '/about/community-guide'
114114
},
115115
{ text: '行为规范', link: '/about/coc' },
116+
{ text: '隐私政策', link: '/about/privacy' },
116117
{
117118
text: '纪录片',
118119
link: 'https://www.youtube.com/watch?v=OrxmtDw4pVI'
@@ -634,6 +635,14 @@ export default defineConfigWithTheme<ThemeConfig>({
634635
'utf-8'
635636
)
636637
],
638+
[
639+
'script',
640+
{},
641+
fs.readFileSync(
642+
path.resolve(__dirname, './inlined-scripts/uwu.js'),
643+
'utf-8'
644+
)
645+
],
637646
[
638647
'script',
639648
{

‎.vitepress/inlined-scripts/uwu.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
if (location.search.includes('?uwu')) {
2+
document.documentElement.classList.add('uwu')
3+
}

‎.vitepress/theme/components/Home.vue‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { onMounted } from 'vue'
2+
import { ref, onMounted } from 'vue'
33
import SiteMap from './SiteMap.vue'
44
// import NewsLetter from './NewsLetter.vue'
55
import { load, data, base } from './sponsors'
@@ -8,13 +8,12 @@ import SponsorsGroup from './SponsorsGroup.vue'
88
// https://github.com/vuejs-translations/docs-zh-cn/issues/177
99
// import VueMasteryModal from './VueMasteryModal.vue'
1010
11-
onMounted(async () => {
12-
await load()
13-
})
11+
onMounted(load)
1412
</script>
1513

1614
<template>
1715
<section id="hero">
16+
<img id="uwu" alt="Vue.js Kawaii Logo by @icarusgkx" />
1817
<h1 class="tagline">
1918
<span class="accent">渐进式</span>
2019
<br />JavaScript 框架
@@ -356,4 +355,23 @@ html:not(.dark) .accent,
356355
font-size: 36px;
357356
}
358357
}
358+
359+
#uwu {
360+
display: none;
361+
}
362+
363+
.uwu #uwu {
364+
display: block;
365+
width: 100%;
366+
max-width: 720px;
367+
margin: -120px auto -20px;
368+
aspect-ratio: 192 / 108;
369+
content: url(/logo-uwu.png);
370+
}
371+
372+
@media (max-width: 576px) {
373+
.uwu #uwu {
374+
margin: -60px auto -10px;
375+
}
376+
}
359377
</style>

‎.vitepress/theme/components/VueMasteryBanner.vue‎

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

‎.vitepress/theme/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,12 @@ import SponsorsAside from './components/SponsorsAside.vue'
1313
import WwAds from './components/WwAds.vue'
1414
// import TextAd from './components/TextAd.vue'
1515

16+
1617
export default Object.assign({}, VPTheme, {
1718
Layout: () => {
1819
// @ts-ignore
1920
return h(VPTheme.Layout, null, {
20-
// banner: () => h(Banner),
21+
// banner: () => h(VueMasteryBanner),
2122
'sidebar-top': () => h(PreferenceSwitch),
2223
'aside-mid': () => h(SponsorsAside),
2324
'aside-bottom': () => h(WwAds),

‎.vitepress/theme/styles/inline-demo.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
border: 2px solid var(--vt-c-green);
1313
margin-right: 8px;
1414
margin-left: 4px;
15-
line-height: 15px;
16-
padding-left: 4.5px;
15+
line-height: 16px;
16+
padding-left: 4.2px;
1717
font-size: 11px;
1818
}
1919

0 commit comments

Comments
 (0)