version banners

Author: mdjastrzebski

website/docs/styles/index.css

@@ -5,17 +5,43 @@
   text-align: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
 }
 
 .pre-release-banner strong {
   font-weight: 600;
 }
 
+/* Old Version Banner */
+.old-version-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem 0.5rem;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(90deg, var(--rp-c-brand-darker) 0%, var(--rp-c-brand) 100%);
+  color: #ffffff;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.old-version-banner strong {
+  font-weight: 600;
+}
+
+.old-version-banner-link {
+  color: #ffffff !important;
+  font-weight: 500;
+  white-space: nowrap;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.old-version-banner-link:hover {
+  color: #ffffff !important;
+  opacity: 0.85;
+}
+
 :root {
   --rp-nav-height: 60px !important;
   --rp-sidebar-width: 320px !important;

website/rspress.config.ts

@@ -438,5 +438,4 @@ export default defineConfig({
     // @ts-expect-error
     pluginVercelAnalytics(),
   ],
-  globalUIComponents: [path.join(__dirname, 'theme/PreReleaseBanner.tsx')],
 });

website/theme/PreReleaseBanner.tsx

@@ -0,0 +1,45 @@
+import { useLocation } from '@rspress/core/runtime';
+import { Link, Layout as RspressLayout } from '@rspress/core/theme-original';
+
+const LATEST_VERSION = '13.x';
+
+const PreReleaseBanner = () => (
+  <div className="pre-release-banner">
+    <span>
+      You are viewing documentation for <strong>v14 alpha</strong>. This version is under active
+      development and APIs may change.
+    </span>
+  </div>
+);
+
+const OldVersionBanner = ({ version }: { version: string }) => (
+  <div className="old-version-banner">
+    <span>
+      You're viewing the documentation for <strong>{version}</strong>. Current latest version is{' '}
+      <strong>{LATEST_VERSION}</strong>.
+    </span>
+    <Link href="/react-native-testing-library/docs/start/intro" className="old-version-banner-link">
+      View latest version <strong>here</strong>.
+    </Link>
+  </div>
+);
+
+const AnnouncementBanner = () => {
+  const { pathname } = useLocation();
+
+  if (pathname.includes('/14.x/')) {
+    return <PreReleaseBanner />;
+  }
+
+  if (pathname.includes('/12.x/')) {
+    return <OldVersionBanner version="12.x" />;
+  }
+
+  return null;
+};
+
+const Layout = () => <RspressLayout beforeNav={<AnnouncementBanner />} />;
+
+export { Layout };
+
+export * from '@rspress/core/theme-original';