Add VueToronto banner to the docs (#2393)

Author: jay-es

.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__ = 'vuefes2024_ticket4'
+  window.__VUE_BANNER_ID__ = 'vt2024_1'
   restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
 })()

.vitepress/theme/components/Banner.vue

@@ -22,16 +22,31 @@ function dismiss() {
 
 <template>
   <div class="banner" v-if="open">
-    <a href="https://vuefes.jp/2024/" target="_blank">
-      Vue Fes Japan 2024、10月19日（土）開催
-    </a>
+    <p class="vt-banner-text">
+      <span class="vt-text-primary">VueConf Toronto</span>
+      <span class="vt-tagline"> - Join the premier Vue.js conference</span>
+      | 18-20 Nov 2024 <span class="vt-place"> - Toronto, Canada</span>
+      <a
+        target="_blank"
+        class="vt-primary-action"
+        href="https://vuetoronto.com/?utm_source=vuejs&utm_content=top_banner"
+      >
+        Register
+      </a>
+    </p>
+    <button @click="dismiss">
+      <VTIconPlus class="close" />
+    </button>
+    <p class="vt-banner-text vt-coupon">
+      <span class="vt-text-primary">Use code</span> VUEJS
+      <span class="vt-text-primary">to get 15% off</span>
+    </p>
   </div>
 </template>
 
 <style>
 html:not(.banner-dismissed) {
   --vt-banner-height: 60px;
-  --vt-banner-height: 30px; /* Vue Fes */
 }
 </style>
 
@@ -50,7 +65,10 @@ html:not(.banner-dismissed) {
   font-weight: 600;
   color: #fff;
   background-color: var(--vt-c-green);
-  background-color: #35495e; /* Vue Fes */
+  background: #11252b;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .banner-dismissed .banner {
@@ -75,8 +93,57 @@ button {
   transform: rotate(45deg);
 }
 
-@media (max-width: 720px) {
-  a > span {
+.vt-banner-text {
+  color: #fff;
+  font-size: 16px;
+}
+
+.vt-text-primary {
+  color: #75c05e;
+}
+
+.vt-primary-action {
+  background: #75c05e;
+  color: #121c1a;
+  padding: 8px 15px;
+  border-radius: 5px;
+  font-size: 14px;
+  text-decoration: none;
+  margin: 0 20px;
+  font-weight: bold;
+}
+.vt-primary-action:hover {
+  text-decoration: none;
+  background: #5a9f45;
+}
+
+@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: 7px 10px;
+  }
+  .vt-time-now {
+    display: none;
+  }
+}
+
+@media (max-width: 560px) {
+  .vt-place {
     display: none;
   }
 }