Skip to content

Commit 73661d8

Browse files
yyx990803yyx990803
committed
remove vue toronto banner
1 parent e678767 commit 73661d8

File tree

3 files changed

+11
-244
lines changed

3 files changed

+11
-244
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__ = 'VTO-22'
12-
restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
11+
// window.__VUE_BANNER_ID__ = ''
12+
// restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
1313
})()

‎.vitepress/theme/components/Banner.vue

Lines changed: 7 additions & 240 deletions
Original file line numberDiff line numberDiff line change
@@ -1,263 +1,29 @@
11
<script setup>
2-
import { ref } from 'vue'
32
/**
43
* Adding a new banner:
54
* 1. uncomment the banner slot in ../index.ts
65
* 2. uncomment and update BANNER_ID in ../../inlined-scripts/restorePreferences.ts
76
* 3. update --vt-banner-height if necessary
87
*/
8+
99
let open = $ref(true)
10-
const banner = ref({
11-
cta: 'Get Your Remote Spot',
12-
title:
13-
'Join the Vue community ONLINE at <strong>VueConf Toronto</strong> from 1-3 November 2022!',
14-
subtitle: 'Use the code VUEJS to get 25% off on tickets!',
15-
shortText: 'Join in-person <br> 1-3 November 2022, Toronto, Canada',
16-
link: 'https://vuetoronto.com/tickets'
17-
})
1810
/**
1911
* Call this if the banner is dismissible
2012
*/
2113
function dismiss() {
2214
open = false
2315
document.documentElement.classList.add('banner-dismissed')
24-
localStorage.setItem(
25-
`vue-docs-banner-${window.__VUE_BANNER_ID__}`,
26-
'true'
27-
)
16+
localStorage.setItem(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'true')
2817
}
2918
</script>
30-
<!-- -webkit-linear-gradient(315deg, #42d392 25%, #647eff) -->
19+
3120
<template>
32-
<div class="banner" v-if="open">
33-
<a
34-
id="vt-top"
35-
:href="`${banner.link}?utm_source=vuejs&utm_content=top_banner`"
36-
target="_blank"
37-
:class="banner.assets"
38-
>
39-
<div class="vt-background-wrapper">
40-
<div class="vt-logo">
41-
<svg
42-
width="64"
43-
height="50"
44-
viewBox="0 0 200 141"
45-
fill="none"
46-
xmlns="http://www.w3.org/2000/svg"
47-
>
48-
<rect width="200" height="141" fill="#11252B" />
49-
<path
50-
d="M40.5071 64.8745L50.3002 37.9717H43.2441L37.2998 55.3665L31.3555 37.9717H24L33.7931 64.8745H40.5071Z"
51-
fill="white"
52-
/>
53-
<path
54-
d="M69.5306 45.1575H62.8165V57.1191C62.4744 58.4774 61.3198 59.3099 60.0796 59.3099C58.369 59.3099 57.5992 58.1269 57.5992 56.4619V45.1575H50.928V58.0831C50.928 62.4646 53.4511 65.3126 57.6848 65.3126C59.8658 65.3126 61.7902 64.3925 62.8165 63.1657V64.8745H69.5306V45.1575Z"
55-
fill="white"
56-
/>
57-
<path
58-
d="M84.6949 57.9954C84.3101 59.3537 83.2409 59.9671 81.8725 59.9671C79.9481 59.9671 78.7507 58.6965 78.5368 56.3304H90.9813V54.6216C90.9813 48.7503 87.6457 44.7193 81.7442 44.7193C76.1848 44.7193 72.0794 48.9256 72.0794 55.016C72.0794 61.1502 75.971 65.3126 81.8725 65.3126C86.8759 65.3126 90.2116 62.5523 90.8958 57.9954H84.6949ZM81.7442 50.0648C83.412 50.0648 84.3956 51.2916 84.4811 52.9128H78.6651C79.0928 51.0726 80.1619 50.0648 81.7442 50.0648Z"
59-
fill="white"
60-
/>
61-
<path
62-
d="M92.6722 51.4231C92.6722 59.5728 97.9322 65.3126 105.288 65.3126C111.831 65.3126 115.68 61.3254 116.62 55.8047H109.778C109.094 57.8202 107.683 59.1346 105.288 59.1346C101.653 59.1346 99.6001 55.8047 99.6001 51.4231C99.6001 46.9977 101.653 43.7115 105.288 43.7115C107.683 43.7115 109.094 45.026 109.778 46.9977H116.62C115.68 41.5208 111.831 37.5335 105.288 37.5335C97.9322 37.5335 92.6722 43.2734 92.6722 51.4231Z"
63-
fill="white"
64-
/>
65-
<path
66-
d="M137.982 55.016C137.982 48.9256 134.005 44.7193 128.146 44.7193C122.33 44.7193 118.31 48.9256 118.31 55.016C118.31 61.1063 122.33 65.3126 128.146 65.3126C134.005 65.3126 137.982 61.1063 137.982 55.016ZM131.396 55.016C131.396 57.7325 130.242 59.6166 128.146 59.6166C126.093 59.6166 124.939 57.7325 124.939 55.016C124.939 52.2994 126.093 50.3715 128.146 50.3715C130.242 50.3715 131.396 52.2994 131.396 55.016Z"
67-
fill="white"
68-
/>
69-
<path
70-
d="M140.594 64.8745H147.308V52.9566C147.65 51.5984 148.762 50.8097 150.087 50.8097C151.798 50.8097 152.61 51.9927 152.61 53.6139V64.8745H159.282V51.9489C159.282 47.5673 156.759 44.7193 152.482 44.7193C150.258 44.7193 148.377 45.6394 147.308 46.8663V45.1575H140.594V64.8745Z"
71-
fill="white"
72-
/>
73-
<path
74-
d="M175 36.5258C174.187 36.2191 173.161 36 171.878 36C167.174 36 164.394 38.9795 164.394 43.7115V45.1575H161.529V50.503H164.394V64.8745H171.023V50.503H174.743V45.1575H171.023V44.1059C171.023 42.5285 171.921 41.7398 173.418 41.7398C174.016 41.7398 174.53 41.8713 175 42.1342V36.5258Z"
75-
fill="white"
76-
/>
77-
<path
78-
d="M26.3378 78.7056H34.4203V99.5618H41.3054V78.7056H49.4307V72.6591H26.3378V78.7056Z"
79-
fill="white"
80-
/>
81-
<path
82-
d="M68.0997 89.7033C68.0997 83.613 64.1226 79.4067 58.2639 79.4067C52.4479 79.4067 48.428 83.613 48.428 89.7033C48.428 95.7937 52.4479 100 58.2639 100C64.1226 100 68.0997 95.7937 68.0997 89.7033ZM61.514 89.7033C61.514 92.4199 60.3593 94.304 58.2639 94.304C56.2112 94.304 55.0565 92.4199 55.0565 89.7033C55.0565 86.9868 56.2112 85.0589 58.2639 85.0589C60.3593 85.0589 61.514 86.9868 61.514 89.7033Z"
83-
fill="white"
84-
/>
85-
<path
86-
d="M83.6263 79.7572C83.3269 79.5819 82.6427 79.4067 81.7874 79.4067C79.863 79.4067 78.3662 80.283 77.4254 81.5974V79.8448H70.7114V99.5618H77.4254V87.9945C77.7675 86.5924 79.0077 85.7599 80.8466 85.7599C81.9157 85.7599 82.8137 85.9352 83.6263 86.3733V79.7572Z"
87-
fill="white"
88-
/>
89-
<path
90-
d="M104.725 89.7033C104.725 83.613 100.748 79.4067 94.8894 79.4067C89.0734 79.4067 85.0535 83.613 85.0535 89.7033C85.0535 95.7937 89.0734 100 94.8894 100C100.748 100 104.725 95.7937 104.725 89.7033ZM98.1395 89.7033C98.1395 92.4199 96.9849 94.304 94.8894 94.304C92.8367 94.304 91.682 92.4199 91.682 89.7033C91.682 86.9868 92.8367 85.0589 94.8894 85.0589C96.9849 85.0589 98.1395 86.9868 98.1395 89.7033Z"
91-
fill="white"
92-
/>
93-
<path
94-
d="M107.337 99.5618H114.051V87.644C114.393 86.2857 115.505 85.497 116.831 85.497C118.541 85.497 119.354 86.6801 119.354 88.3012V99.5618H126.025V86.6362C126.025 82.2547 123.502 79.4067 119.225 79.4067C117.002 79.4067 115.12 80.3268 114.051 81.5536V79.8448H107.337V99.5618Z"
95-
fill="white"
96-
/>
97-
<path
98-
d="M130.924 92.7704C130.924 97.7654 133.49 99.9562 138.023 99.9562C139.52 99.9562 140.974 99.6933 141.743 99.3428V93.5153C141.145 93.7782 140.332 93.9535 139.605 93.9535C138.279 93.9535 137.552 93.2962 137.552 91.7627V85.1903H141.572V79.8448H137.552V74.4117H130.924V79.8448H128.101V85.1903H130.924V92.7704Z"
99-
fill="white"
100-
/>
101-
<path
102-
d="M163.401 89.7033C163.401 83.613 159.424 79.4067 153.565 79.4067C147.749 79.4067 143.73 83.613 143.73 89.7033C143.73 95.7937 147.749 100 153.565 100C159.424 100 163.401 95.7937 163.401 89.7033ZM156.815 89.7033C156.815 92.4199 155.661 94.304 153.565 94.304C151.513 94.304 150.358 92.4199 150.358 89.7033C150.358 86.9868 151.513 85.0589 153.565 85.0589C155.661 85.0589 156.815 86.9868 156.815 89.7033Z"
103-
fill="white"
104-
/>
105-
</svg>
106-
</div>
107-
<div class="vt-core">
108-
<div class="vt-slogan-wrapper">
109-
<div class="vt-short" v-html="banner.shortText" />
110-
<div class="vt-slogan" v-html="banner.title" />
111-
<div class="vt-subline" v-html="banner.subtitle" />
112-
</div>
113-
<div class="vt-button-wrapper">
114-
<div class="vt-button">
115-
{{ banner.cta }}
116-
</div>
117-
</div>
118-
</div>
119-
<div class="vt-close" @click.prevent.stop="dismiss">
120-
<svg
121-
xmlns="http://www.w3.org/2000/svg"
122-
fill="none"
123-
viewBox="0 0 24 24"
124-
stroke-width="1.5"
125-
stroke="#fff"
126-
>
127-
<path
128-
stroke-linecap="round"
129-
stroke-linejoin="round"
130-
d="M6 18L18 6M6 6l12 12"
131-
/>
132-
</svg>
133-
</div>
134-
</div>
135-
</a>
136-
</div>
21+
<div class="banner" v-if="open"></div>
13722
</template>
13823

13924
<style>
14025
html:not(.banner-dismissed) {
141-
--vt-banner-height: 72px;
142-
}
143-
#vt-top {
144-
display: block;
145-
box-sizing: border-box;
146-
height: 72px;
147-
position: fixed;
148-
top: 0;
149-
left: 0;
150-
right: 0;
151-
z-index: 100;
152-
line-height: 1;
153-
}
154-
#vt-top .vt-background-wrapper {
155-
align-items: center;
156-
justify-content: center;
157-
display: flex;
158-
padding: 0 10px;
159-
height: 100%;
160-
width: 100%;
161-
}
162-
#vt-top:hover {
163-
text-decoration: none;
164-
}
165-
#vt-top:hover .vt-core .vt-button {
166-
background: #e5c60b;
167-
}
168-
#vt-top .vt-logo {
169-
position: absolute;
170-
left: 10px;
171-
width: 42px;
172-
background-size: contain;
173-
background-position: center;
174-
background-repeat: no-repeat;
175-
}
176-
#vt-top .vt-core {
177-
display: flex;
178-
align-items: center;
179-
width: 260px;
180-
}
181-
#vt-top .vt-core .vt-slogan-wrapper {
182-
text-align: center;
183-
width: 174px;
184-
margin: 0 auto;
185-
}
186-
#vt-top .vt-core .vt-slogan {
187-
display: none;
188-
}
189-
#vt-top .vt-core .vt-subline {
190-
display: none;
191-
}
192-
#vt-top .vt-core .vt-short {
193-
display: block;
194-
line-height: 14px;
195-
}
196-
#vt-top .vt-core .vt-button {
197-
background: #ffe502;
198-
border-radius: 3px;
199-
color: #000;
200-
padding: 8px 6px;
201-
text-align: center;
202-
font-size: 10px;
203-
white-space: nowrap;
204-
}
205-
#vt-top .vt-close {
206-
right: 0;
207-
position: absolute;
208-
padding: 10px;
209-
color: white;
210-
}
211-
#vt-top .vt-close svg {
212-
height: 24px;
213-
width: 24px;
214-
}
215-
#vt-top .vt-close:hover {
216-
color: #56d8ff;
217-
}
218-
@media (min-width: 680px) {
219-
#vt-top .vt-core {
220-
width: auto;
221-
}
222-
#vt-top .vt-core .vt-slogan-wrapper {
223-
margin: 0 20px 0 0;
224-
width: 450px;
225-
}
226-
#vt-top .vt-core .vt-short {
227-
display: none;
228-
}
229-
#vt-top .vt-core .vt-slogan {
230-
display: block;
231-
font-size: 17px;
232-
}
233-
#vt-top .vt-core .vt-slogan strong {
234-
color: #ffe401;
235-
}
236-
#vt-top .vt-core .vt-subline {
237-
display: block;
238-
font-size: 12px;
239-
margin-top: 5px;
240-
opacity: 80%;
241-
}
242-
#vt-top .vt-core .vt-button {
243-
font-size: 13px;
244-
padding: 12px 16px;
245-
}
246-
}
247-
@media (min-width: 1280px) {
248-
#vt-top .vt-logo {
249-
left: 20px;
250-
width: 104px;
251-
}
252-
#vt-top .vt-core {
253-
margin-right: 0;
254-
}
255-
#vt-top .vt-core .vt-slogan-wrapper {
256-
width: auto;
257-
}
258-
#vt-top .vt-core .vt-subline {
259-
font-size: 14px;
260-
}
26+
--vt-banner-height: 60px;
26127
}
26228
</style>
26329

@@ -275,8 +41,9 @@ html:not(.banner-dismissed) {
27541
font-size: 12px;
27642
font-weight: 600;
27743
color: #fff;
278-
background: -webkit-linear-gradient(315deg, #96c93c 25%, #03b19a);
44+
background-color: var(--vt-c-green);
27945
}
46+
28047
.banner-dismissed .banner {
28148
display: none;
28249
}

‎.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
})

0 commit comments

Comments
 (0)