docs: v4 show old document warning (#18805) (#18829)

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

docs/.vitepress/theme/components/OldDocument.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="old-document">
+    <p>
+      This documentation covers Vite 4 <strong>(old version)</strong>. For the
+      latest version, see
+      <a href="https://vite.dev" class="new-document-link">https://vite.dev</a>.
+    </p>
+  </div>
+</template>
+
+<style>
+:root {
+  --vp-layout-top-height: 96px;
+  @media (min-width: 455px) {
+    --vp-layout-top-height: 64px;
+  }
+  @media (min-width: 960px) {
+    --vp-layout-top-height: 32px;
+  }
+}
+
+.old-document {
+  position: fixed;
+  display: flex;
+  height: var(--vp-layout-top-height);
+  width: 100%;
+  padding: 4px 32px;
+  justify-content: center;
+  align-items: center;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-brand-lightest);
+  z-index: var(--vp-z-index-layout-top);
+
+  .new-document-link {
+    text-decoration: underline;
+    color: var(--vp-c-text-1);
+    &:hover {
+      color: var(--vp-c-text-2);
+    }
+  }
+}
+.dark {
+  .old-document {
+    background: var(--vp-c-brand-darker);
+  }
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -4,13 +4,15 @@ import './styles/vars.css'
 import HomeSponsors from './components/HomeSponsors.vue'
 import AsideSponsors from './components/AsideSponsors.vue'
 import SvgImage from './components/SvgImage.vue'
+import OldDocument from './components/OldDocument.vue'
 
 export default {
   ...Theme,
   Layout() {
     return h(Theme.Layout, null, {
       'home-features-after': () => h(HomeSponsors),
       'aside-ads-before': () => h(AsideSponsors),
+      'layout-top': () => h(OldDocument),
     })
   },
   enhanceApp({ app }) {