banner slot

Author: yyx990803

package.json

@@ -6,10 +6,10 @@
   },
   "dependencies": {
     "@vue/repl": "^0.4.8",
-    "@vue/theme": "^0.1.25",
+    "@vue/theme": "^0.1.26",
     "dynamics.js": "^1.1.5",
     "gsap": "^3.9.0",
-    "vitepress": "^0.20.9",
+    "vitepress": "^0.20.10",
     "vue": "^3.2.25"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -7,4 +7,7 @@
   }
   restore('vue-docs-prefer-composition', 'prefer-composition')
   restore('vue-docs-prefer-sfc', 'prefer-sfc', true)
+
+  window.__VUE_BANNER_ID__ = 'wip'
+  restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
 })()

src/.vitepress/inlined-scripts/restorePreference.js

@@ -0,0 +1,53 @@
+<script setup>
+/**
+ * Adding a new banner:
+ * 1. uncomment the banner slot in ../index.ts
+ * 2. uncomment and update BANNER_ID in ../../inlined-scripts/restorePreferences.ts
+ * 3. update --vt-banner-height if necessary
+ */
+
+let open = $ref(true)
+
+/**
+ * Call this if the banner is dismissible
+ */
+function dismiss() {
+  open = false
+  document.documentElement.classList.add('banner-dismissed')
+  localStorage.setItem(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'true')
+}
+</script>
+
+<template>
+  <div class="banner" v-if="open">
+    Work in Progress - for Preview Only
+  </div>
+</template>
+
+<style>
+html:not(.banner-dismissed) {
+  --vt-banner-height: 24px;
+}
+</style>
+
+<style scoped>
+.banner {
+  position: fixed;
+  z-index: var(--vp-z-index-banner);
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--vt-banner-height);
+  line-height: var(--vt-banner-height);
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+  background-color: var(--vt-c-green);
+}
+
+.banner-dismissed .banner {
+  display: none;
+}
+</style>

src/.vitepress/theme/components/Banner.vue

@@ -1,5 +1,6 @@
 import { h } from 'vue'
 import { VPTheme, VTBadge } from '@vue/theme'
+import Banner from './components/Banner.vue'
 import PreferenceSwitch from './components/PreferenceSwitch.vue'
 import {
   preferComposition,
@@ -14,6 +15,7 @@ import './styles/options-boxes.css'
 export default Object.assign({}, VPTheme, {
   Layout: () => {
     return h(VPTheme.Layout, null, {
+      banner: () => h(Banner),
       'sidebar-top': () => h(PreferenceSwitch)
     })
   },