Merge remote-tracking branch 'upstream/main'

Author: 29avet1

.vitepress/config.ts

@@ -372,6 +372,10 @@ export const sidebar: ThemeConfig['sidebar'] = {
         {
           text: 'Dependency Injection',
           link: '/api/composition-api-dependency-injection'
+        },
+        {
+          text: 'Helpers',
+          link: '/api/composition-api-helpers'
         }
       ]
     },
@@ -421,6 +425,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
     {
       text: 'Advanced APIs',
       items: [
+        { text: 'Custom Elements', link: '/api/custom-elements' },
         { text: 'Render Function', link: '/api/render-function' },
         { text: 'Server-Side Rendering', link: '/api/ssr' },
         { text: 'TypeScript Utility Types', link: '/api/utility-types' },

.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,31 @@ 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=VUEJS_SPECIAL_OFFER&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, /vuejsde-conf/vuejsdeconf_banner_large_2x.png 2x" />
+        <source media="(min-width:970px)"
+          srcset="/vuejsde-conf/vuejsdeconf_banner_medium.png, /vuejsde-conf/vuejsdeconf_banner_medium_2x.png 2x" />
+        <source media="(min-width:576px)"
+          srcset="/vuejsde-conf/vuejsdeconf_banner_small.png, /vuejsde-conf/vuejsdeconf_banner_small_2x.png 2x" />
+        <source media="(min-width:320px)"
+          srcset="/vuejsde-conf/vuejsdeconf_banner_smallest.png, /vuejsde-conf/vuejsdeconf_banner_smallest_2x.png 2x"
+          alt="" />
+        <img src="/vuejsde-conf/vuejsdeconf_banner_smallest_2x.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>
 
@@ -50,12 +64,10 @@ html:not(.banner-dismissed) {
   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%
-  );
+  background: linear-gradient(90deg,
+      rgba(66, 184, 131, 1) 0%,
+      rgba(39, 179, 137, 1) 19%,
+      rgba(100, 126, 255, 1) 100%);
 }
 
 .banner-dismissed .banner {
@@ -76,9 +88,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 {

.vitepress/theme/index.ts

@@ -10,14 +10,14 @@ import {
 } from './components/preferences'
 import SponsorsAside from './components/SponsorsAside.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
-// import Banner from './components/Banner.vue'
+import Banner from './components/Banner.vue'
 // import TextAd from './components/TextAd.vue'
 
 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)

package.json

@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@vue/repl": "^4.3.1",
-    "@vue/theme": "^2.2.12",
+    "@vue/theme": "^2.2.13",
     "dynamics.js": "^1.1.5",
     "gsap": "^3.12.5",
     "vitepress": "^1.3.2",
-    "vue": "^3.5.0-beta.1"
+    "vue": "^3.5.0"
   },
   "devDependencies": {
     "@types/body-scroll-lock": "^3.1.2",
@@ -25,5 +25,5 @@
     "typescript": "^5.4.5",
     "vue-tsc": "^2.0.29"
   },
-  "packageManager": "pnpm@9.1.4"
+  "packageManager": "pnpm@9.10.0"
 }