From 732debc548da434e18a6a67b177c49acec28e063 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 17 Jul 2025 11:17:19 +0200 Subject: [PATCH 1/3] chore. set up viteconf banner --- .../inlined-scripts/restorePreference.js | 4 +- .vitepress/theme/components/Banner.vue | 179 ++++++++++++++++-- .vitepress/theme/index.ts | 4 +- 3 files changed, 167 insertions(+), 20 deletions(-) diff --git a/.vitepress/inlined-scripts/restorePreference.js b/.vitepress/inlined-scripts/restorePreference.js index 5e18b50ffa..9338835ac0 100644 --- a/.vitepress/inlined-scripts/restorePreference.js +++ b/.vitepress/inlined-scripts/restorePreference.js @@ -8,6 +8,6 @@ restore('vue-docs-prefer-composition', 'prefer-composition', true) restore('vue-docs-prefer-sfc', 'prefer-sfc', true) - // window.__VUE_BANNER_ID__ = '' - // restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed') + window.__VUE_BANNER_ID__ = 'viteconf2025' + restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed') })() diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue index 6730fcd48d..06a247b608 100644 --- a/.vitepress/theme/components/Banner.vue +++ b/.vitepress/theme/components/Banner.vue @@ -22,16 +22,51 @@ function dismiss() { @@ -48,14 +83,68 @@ html:not(.banner-dismissed) { text-align: center; font-size: 13px; font-weight: 600; - color: #fff; - background-color: var(--vt-c-green); - background: linear-gradient( - 90deg, - rgba(66, 184, 131, 1) 0%, - rgba(39, 179, 137, 1) 19%, - rgba(100, 126, 255, 1) 100% - ); + color: white; + background: #262626; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} + +.glow.glow--purple { + position: absolute; + bottom: -15%; + left: -75%; + width: 80%; + aspect-ratio: 1.5; + pointer-events: none; + border-radius: 100%; + background: linear-gradient(270deg, #7a23a1, #715ebde6 60% 80%, #bd34fe00); + filter: blur(15vw); + transform: none; + opacity: .6 +} + +.glow.glow--blue { + position: absolute; + bottom: -15%; + right: -40%; + width: 80%; + aspect-ratio: 1.5; + pointer-events: none; + border-radius: 100%; + background: linear-gradient(180deg, #61d9ff, #0000); + filter: blur(15vw); + transform: none; + opacity: .3 +} + +@media (min-width: 768px) { + .glow.glow--blue { + top: -15%; + right: -40%; + width: 80%; + } + + .glow.glow--purple { + bottom: -15%; + left: -40%; + width: 80%; + } +} + +@media (min-width: 1025px) { + .glow.glow--blue { + top: -15%; + right: -40%; + width: 80%; + } + + .glow.glow--purple { + bottom: -15%; + left: -40%; + width: 80%; + } } .banner-dismissed .banner { @@ -70,7 +159,7 @@ button { position: absolute; right: 0; top: 0; - padding: 5px; + padding: 20px 10px; } .close { @@ -79,10 +168,68 @@ button { fill: #fff; transform: rotate(45deg); } -/* -@media (max-width: 720px) { - a > span { + +.vt-banner-text { + color: #fff; + font-size: 16px; +} + +.vt-main { + color: transparent; + background-image: linear-gradient(120deg, #b047ff 16%, #9499ff, #9499ff); + background-clip: text; +} + +.vt-primary-action { + 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); + color: #fff; + padding: 6px 12px; + border-radius: 5px; + font-size: 14px; + text-decoration: none; + margin: 0 20px; + font-weight: bold; + transition: all; + transition-duration: 200ms; +} + +.vt-primary-action:hover { + text-decoration: none; + transform: translate3d(0, -2px, 0); +} + +@media (max-width: 1280px) { + .banner .vt-banner-text { + font-size: 14px; + } + + .vt-tagline { + display: none; + } +} + +@media (max-width: 780px) { + .vt-tagline { display: none; } -} */ - + + .vt-coupon { + display: none; + } + + .vt-primary-action { + margin: 0 10px; + padding: 5px 8px; + } + + .vt-time-now { + display: none; + } +} + +@media (max-width: 560px) { + .vt-place { + display: none; + } +} + \ No newline at end of file diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts index 7782fa6f6d..4aa8af6488 100644 --- a/.vitepress/theme/index.ts +++ b/.vitepress/theme/index.ts @@ -11,7 +11,7 @@ import { import SponsorsAside from './components/SponsorsAside.vue' import VueSchoolLink from './components/VueSchoolLink.vue' import ScrimbaLink from './components/ScrimbaLink.vue' -// import Banner from './components/Banner.vue' +import Banner from './components/Banner.vue' // import TextAd from './components/TextAd.vue' import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css' @@ -21,7 +21,7 @@ export default Object.assign({}, VPTheme, { Layout: () => { // @ts-ignore return h(VPTheme.Layout, null, { - // banner: () => h(Banner), + banner: () => h(Banner), 'sidebar-top': () => h(PreferenceSwitch), 'sidebar-bottom': () => h(SecurityUpdateBtn), 'aside-mid': () => h(SponsorsAside) From 252c52b8b0fc61db9941a530b8447520a88348d5 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 17 Jul 2025 11:30:16 +0200 Subject: [PATCH 2/3] chore: hover state --- .vitepress/theme/components/Banner.vue | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue index 06a247b608..a7153deac2 100644 --- a/.vitepress/theme/components/Banner.vue +++ b/.vitepress/theme/components/Banner.vue @@ -151,10 +151,6 @@ html:not(.banner-dismissed) { display: none; } -a:hover { - text-decoration: underline; -} - button { position: absolute; right: 0; @@ -189,15 +185,14 @@ button { text-decoration: none; margin: 0 20px; font-weight: bold; - transition: all; - transition-duration: 200ms; -} + transition: all .2s ease-in-out; -.vt-primary-action:hover { - text-decoration: none; - transform: translate3d(0, -2px, 0); + &:hover { + box-shadow: 0 1px #fffc inset; + } } + @media (max-width: 1280px) { .banner .vt-banner-text { font-size: 14px; From c858969608768cf5a1b247d76cd09771eefa2e39 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 17 Jul 2025 14:49:28 +0200 Subject: [PATCH 3/3] chore: update banner --- .vitepress/theme/components/Banner.vue | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue index a7153deac2..47242691c9 100644 --- a/.vitepress/theme/components/Banner.vue +++ b/.vitepress/theme/components/Banner.vue @@ -20,9 +20,10 @@ function dismiss() { } +