Skip to content

Commit 732debc

Browse files
TheAlexLichterTheAlexLichter
committed
chore. set up viteconf banner
1 parent 81d3626 commit 732debc

File tree

3 files changed

+167
-20
lines changed

3 files changed

+167
-20
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', 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__ = 'viteconf2025'
12+
restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
1313
})()

‎.vitepress/theme/components/Banner.vue‎

Lines changed: 163 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,51 @@ function dismiss() {
2222

2323
<template>
2424
<div class="banner" v-if="open">
25-
<a target="_blank"></a>
25+
<svg style="margin-right: 0.25rem" width="30" height="30" viewBox="0 0 30 30" fill="none"
26+
xmlns="http://www.w3.org/2000/svg">
27+
<g>
28+
<path
29+
d="M20.3653 1.01733L11.1779 2.87249C11.0895 2.87249 11.0012 2.96082 11.0012 2.96082C10.9128 3.04916 10.9128 3.13751 10.9128 3.13751L10.3828 13.2083C10.3828 13.2967 10.3828 13.2967 10.3828 13.3851C10.3828 13.4734 10.4711 13.4734 10.4711 13.4734C10.4711 13.4734 10.5595 13.5618 10.6478 13.5618C10.7361 13.5618 10.7361 13.5618 10.8245 13.5618L13.3864 12.9433C13.6514 12.855 13.8281 13.12 13.8281 13.3851L13.033 17.3603C12.9447 17.6254 13.2097 17.8905 13.4748 17.8021L15.0648 17.272C15.3299 17.1837 15.5066 17.4487 15.5066 17.7137L14.2697 23.8976C14.1815 24.251 14.7115 24.5159 14.8882 24.1626L15.0648 23.8976L22.5738 8.08458C22.5738 7.90789 22.3088 7.55453 22.0438 7.64287L19.3935 8.17292C19.1286 8.26125 18.9519 7.99624 19.0402 7.73122L20.7187 1.45903C20.807 1.19401 20.6304 0.928988 20.3653 1.01733Z"
30+
fill="url(#paint0_linear_648_13)" />
31+
<path
32+
d="M29.6424 3.75619C29.2891 3.22614 28.5824 2.96112 27.964 3.04945L20.985 4.37457L20.72 5.43465L28.2289 4.10955C28.494 4.02121 28.7591 4.19788 28.9357 4.37457C29.1124 4.63959 29.1124 4.90462 28.9357 5.16964L15.773 28.5799C15.6846 28.845 15.4196 28.9332 15.1545 28.9332C14.8896 28.9332 14.6245 28.7566 14.5361 28.5799L1.10836 5.08129C0.931674 4.90462 0.931674 4.55125 1.10836 4.37457C1.28504 4.19788 1.46172 4.10955 1.72674 4.10955C1.72674 4.10955 1.81508 4.10955 1.90342 4.10955L9.85411 5.523L9.94246 4.55125L1.99176 3.04945C1.28504 2.96112 0.666654 3.22614 0.313291 3.75619C-0.0400717 4.28623 -0.128412 4.99295 0.22495 5.61134L13.6528 29.1099C13.9178 29.64 14.5361 29.9933 15.1545 29.9933C15.773 29.9933 16.303 29.64 16.6563 29.1099L29.8191 5.61134C30.0842 4.99295 30.0842 4.28623 29.6424 3.75619Z"
33+
fill="url(#paint1_linear_648_13)" />
34+
</g>
35+
<defs>
36+
<linearGradient id="paint0_linear_648_13" x1="10.5947" y1="3.97762" x2="20.9471" y2="17.0584"
37+
gradientUnits="userSpaceOnUse">
38+
<stop stop-color="#B047FF" />
39+
<stop offset="0.75" stop-color="#FFD0D0" />
40+
<stop offset="0.9167" stop-color="#FFF3E6" />
41+
</linearGradient>
42+
<linearGradient id="paint1_linear_648_13" x1="8.078" y1="1.32911" x2="23.118" y2="18.0977"
43+
gradientUnits="userSpaceOnUse">
44+
<stop stop-color="#57CCFF" />
45+
<stop offset="1" stop-color="#AF48FF" />
46+
</linearGradient>
47+
</defs>
48+
</svg>
49+
<p class="vt-banner-text">
50+
<span class="vt-main">ViteConf 2025</span>
51+
<span class="vt-tagline"> · First time <span style="font-weight: 900;">in-person</span></span>
52+
<span class="vt-place"> · Amsterdam</span>
53+
<span class="vt-date"> · Oct 09-10</span>
54+
<a target="_blank" class="vt-primary-action"
55+
href="https://viteconf.amsterdam/?utm_source=vuejs&utm_content=top_banner">
56+
Register
57+
</a>
58+
</p>
2659
<button @click="dismiss">
2760
<VTIconPlus class="close" />
2861
</button>
62+
<div class="glow glow--purple"></div>
63+
<div class="glow glow--blue"></div>
2964
</div>
3065
</template>
3166

3267
<style>
3368
html:not(.banner-dismissed) {
34-
--vt-banner-height: 30px;
69+
--vt-banner-height: 60px;
3570
}
3671
</style>
3772

@@ -48,14 +83,68 @@ html:not(.banner-dismissed) {
4883
text-align: center;
4984
font-size: 13px;
5085
font-weight: 600;
51-
color: #fff;
52-
background-color: var(--vt-c-green);
53-
background: linear-gradient(
54-
90deg,
55-
rgba(66, 184, 131, 1) 0%,
56-
rgba(39, 179, 137, 1) 19%,
57-
rgba(100, 126, 255, 1) 100%
58-
);
86+
color: white;
87+
background: #262626;
88+
display: flex;
89+
justify-content: center;
90+
align-items: center;
91+
overflow: hidden;
92+
}
93+
94+
.glow.glow--purple {
95+
position: absolute;
96+
bottom: -15%;
97+
left: -75%;
98+
width: 80%;
99+
aspect-ratio: 1.5;
100+
pointer-events: none;
101+
border-radius: 100%;
102+
background: linear-gradient(270deg, #7a23a1, #715ebde6 60% 80%, #bd34fe00);
103+
filter: blur(15vw);
104+
transform: none;
105+
opacity: .6
106+
}
107+
108+
.glow.glow--blue {
109+
position: absolute;
110+
bottom: -15%;
111+
right: -40%;
112+
width: 80%;
113+
aspect-ratio: 1.5;
114+
pointer-events: none;
115+
border-radius: 100%;
116+
background: linear-gradient(180deg, #61d9ff, #0000);
117+
filter: blur(15vw);
118+
transform: none;
119+
opacity: .3
120+
}
121+
122+
@media (min-width: 768px) {
123+
.glow.glow--blue {
124+
top: -15%;
125+
right: -40%;
126+
width: 80%;
127+
}
128+
129+
.glow.glow--purple {
130+
bottom: -15%;
131+
left: -40%;
132+
width: 80%;
133+
}
134+
}
135+
136+
@media (min-width: 1025px) {
137+
.glow.glow--blue {
138+
top: -15%;
139+
right: -40%;
140+
width: 80%;
141+
}
142+
143+
.glow.glow--purple {
144+
bottom: -15%;
145+
left: -40%;
146+
width: 80%;
147+
}
59148
}
60149
61150
.banner-dismissed .banner {
@@ -70,7 +159,7 @@ button {
70159
position: absolute;
71160
right: 0;
72161
top: 0;
73-
padding: 5px;
162+
padding: 20px 10px;
74163
}
75164
76165
.close {
@@ -79,10 +168,68 @@ button {
79168
fill: #fff;
80169
transform: rotate(45deg);
81170
}
82-
/*
83-
@media (max-width: 720px) {
84-
a > span {
171+
172+
.vt-banner-text {
173+
color: #fff;
174+
font-size: 16px;
175+
}
176+
177+
.vt-main {
178+
color: transparent;
179+
background-image: linear-gradient(120deg, #b047ff 16%, #9499ff, #9499ff);
180+
background-clip: text;
181+
}
182+
183+
.vt-primary-action {
184+
background: radial-gradient(141.42% 141.42% at 100% 0%, #ffffff80, #fff0), radial-gradient(140.35% 140.35% at 100% 94.74%, #bd34fe, #bd34fe00), radial-gradient(89.94% 89.94% at 18.42% 15.79%, #41d1ff, #41d1ff00);
185+
color: #fff;
186+
padding: 6px 12px;
187+
border-radius: 5px;
188+
font-size: 14px;
189+
text-decoration: none;
190+
margin: 0 20px;
191+
font-weight: bold;
192+
transition: all;
193+
transition-duration: 200ms;
194+
}
195+
196+
.vt-primary-action:hover {
197+
text-decoration: none;
198+
transform: translate3d(0, -2px, 0);
199+
}
200+
201+
@media (max-width: 1280px) {
202+
.banner .vt-banner-text {
203+
font-size: 14px;
204+
}
205+
206+
.vt-tagline {
207+
display: none;
208+
}
209+
}
210+
211+
@media (max-width: 780px) {
212+
.vt-tagline {
85213
display: none;
86214
}
87-
} */
88-
</style>
215+
216+
.vt-coupon {
217+
display: none;
218+
}
219+
220+
.vt-primary-action {
221+
margin: 0 10px;
222+
padding: 5px 8px;
223+
}
224+
225+
.vt-time-now {
226+
display: none;
227+
}
228+
}
229+
230+
@media (max-width: 560px) {
231+
.vt-place {
232+
display: none;
233+
}
234+
}
235+
</style>

‎.vitepress/theme/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import SponsorsAside from './components/SponsorsAside.vue'
1212
import VueSchoolLink from './components/VueSchoolLink.vue'
1313
import ScrimbaLink from './components/ScrimbaLink.vue'
14-
// import Banner from './components/Banner.vue'
14+
import Banner from './components/Banner.vue'
1515
// import TextAd from './components/TextAd.vue'
1616

1717
import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css'
@@ -21,7 +21,7 @@ export default Object.assign({}, VPTheme, {
2121
Layout: () => {
2222
// @ts-ignore
2323
return h(VPTheme.Layout, null, {
24-
// banner: () => h(Banner),
24+
banner: () => h(Banner),
2525
'sidebar-top': () => h(PreferenceSwitch),
2626
'sidebar-bottom': () => h(SecurityUpdateBtn),
2727
'aside-mid': () => h(SponsorsAside)

0 commit comments

Comments
 (0)