From 8a11ab46db8acc91fcf1247112374673854bb10e Mon Sep 17 00:00:00 2001
From: Vladimir <sleuths.slews0s@icloud.com>
Date: Thu, 3 Sep 2026 14:24:51 +0200
Subject: [PATCH] docs: add "old version" banner to v4 docs (#11131)

---
 docs/.vitepress/components/OldDocument.vue | 75 ++++++++++++++++++++++
 docs/.vitepress/theme/index.ts             |  7 ++
 2 files changed, 82 insertions(+)
 create mode 100644 docs/.vitepress/components/OldDocument.vue

diff --git a/docs/.vitepress/components/OldDocument.vue b/docs/.vitepress/components/OldDocument.vue
new file mode 100644
index 000000000..14fb18e5c
--- /dev/null
+++ b/docs/.vitepress/components/OldDocument.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="old-document">
+    <p>
+      This documentation covers Vitest v4 <strong>(old version)</strong>. For the
+      latest version, see
+      <a href="https://vitest.dev" class="new-document-link">https://vitest.dev</a>.
+    </p>
+  </div>
+</template>
+
+<style>
+.docs-layout,
+.marketing-layout {
+  --vp-old-document-height: 96px;
+}
+
+@media (min-width: 455px) {
+  .docs-layout,
+  .marketing-layout {
+    --vp-old-document-height: 64px;
+  }
+}
+
+@media (min-width: 960px) {
+  .docs-layout,
+  .marketing-layout {
+    --vp-old-document-height: 32px;
+  }
+}
+
+.old-document {
+  display: flex;
+  height: var(--vp-old-document-height);
+  width: 100%;
+  padding: 4px 32px;
+  justify-content: center;
+  align-items: center;
+  color: #2a3a1b;
+  background: #f4f8e0;
+  z-index: var(--vp-z-index-layout-top);
+}
+
+.dark .old-document,
+[data-theme='dark'] .old-document {
+  color: #c5d9b6;
+  background: #2d3b2e;
+}
+
+.old-document p {
+  color: inherit !important;
+  font-size: 1rem !important;
+  line-height: 1.75rem !important;
+}
+
+.old-document .new-document-link {
+  text-decoration: underline;
+  color: var(--vp-c-text-1);
+}
+
+.old-document .new-document-link:hover {
+  color: var(--vp-c-text-2);
+}
+
+@media (min-width: 1024px) {
+  .docs-layout:has(.old-document) {
+    --vp-banner-height: var(--vp-old-document-height);
+    --vp-layout-top-height: var(--vp-old-document-height);
+  }
+
+  .docs-layout .old-document {
+    position: fixed;
+    top: 0;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index f521317e8..22ca973ff 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -3,12 +3,14 @@ import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import { inBrowser } from 'vitepress'
 import VitestTheme from '@voidzero-dev/vitepress-theme/src/vitest'
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+import { h } from 'vue'
 import Version from '../components/Version.vue'
 import CRoot from '../components/CRoot.vue'
 import Deprecated from '../components/Deprecated.vue'
 import Experimental from '../components/Experimental.vue'
 import Advanced from '../components/Advanced.vue'
 import CourseLink from '../components/CourseLink.vue'
+import OldDocument from '../components/OldDocument.vue'
 import './styles.css'
 import '@shikijs/vitepress-twoslash/style.css'
 import 'virtual:group-icons.css'
@@ -51,6 +53,11 @@ function getRedirectPath(url: URL) {
 
 export default {
   extends: VitestTheme as unknown as any,
+  Layout() {
+    return h(VitestTheme.Layout, null, {
+      'layout-top': () => h(OldDocument),
+    })
+  },
   enhanceApp({ app }) {
     app.component('Version', Version)
     app.component('CRoot', CRoot)
-- 
2.51.2