Vuejsde conf banner september 16 22 2024

.vitepress/config.ts

@@ -626,13 +626,6 @@ export default defineConfigWithTheme<ThemeConfig>({
         defer: ''
       }
     ],
-    [
-      'script',
-      {
-        src: 'https://vueschool.io/banner.js?affiliate=vuejs&type=top',
-        async: 'true'
-      }
-    ]
   ],
 
   themeConfig: {

.vitepress/inlined-scripts/restorePreference.js

@@ -1,4 +1,4 @@
-;(() => {
+; (() => {
   const restore = (key, cls, def = false) => {
     const saved = localStorage.getItem(key)
     if (saved ? saved !== 'false' : def) {
@@ -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__ = 'vuejsdeconf2024-promo-september'
+  restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
 })()

.vitepress/theme/components/Banner.vue

@@ -21,17 +21,25 @@ function dismiss() {
 </script>
 
 <template>
-  <div class="banner" v-if="open">
-    <a target="_blank"></a>
-    <button @click="dismiss">
+  <div class="banner banner-vuejsconf" v-if="open">
+    <a href="https://conf.vuejs.de/tickets/?voucher=COMMUNITY&utm_source=vuejs&utm_medium=referral&utm_campaign=banner-placement&utm_content=banner"
+      target="_blank">
+      <picture>
+        <source media="(min-width:1260px)" srcset="/vuejsde-conf/vuejsdeconf_banner_large.png" />
+        <source media="(min-width:970px)" srcset="/vuejsde-conf/vuejsdeconf_banner_medium.png" />
+        <source media="(min-width:576px)" srcset="/vuejsde-conf/vuejsdeconf_banner_small.png" />
+        <img src="/vuejsde-conf/vuejsdeconf_banner_smallest.png" alt="" />
+      </picture>
+    </a>
+    <div class="close-btn" @click.stop.prevent="dismiss">
       <VTIconPlus class="close" />
-    </button>
+    </div>
   </div>
 </template>
 
 <style>
 html:not(.banner-dismissed) {
-  --vt-banner-height: 30px;
+  --vt-banner-height: 72px;
 }
 </style>
 
@@ -76,9 +84,28 @@ button {
 .close {
   width: 20px;
   height: 20px;
-  fill: #fff;
+  fill: #000;
   transform: rotate(45deg);
 }
+
+.banner-vuejsconf {
+  background: linear-gradient(90deg, #fff 50%, #6f97c4 50%);
+}
+
+.banner-vuejsconf a {
+  display: inline-block;
+  margin: 0 auto;
+}
+
+.banner-vuejsconf .close-btn {
+  top: 0px;
+  left: 0px;
+  z-index: 99;
+  position: absolute;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
 /*
 @media (max-width: 720px) {
   a > span {