feat(site): add legacy docs banner and v8 links (#786)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

site/src/components/BannerInit.astro

@@ -0,0 +1,11 @@
+---
+import { BANNER_DISMISS_KEY } from '@/consts';
+---
+
+<script is:inline define:vars={{ bannerKey: BANNER_DISMISS_KEY }}>
+  if (typeof localStorage !== "undefined" && typeof document !== "undefined") {
+    if (localStorage[bannerKey] === "true") {
+      document.documentElement.classList.add("banner-dismissed");
+    }
+  }
+</script>

site/src/components/Footer.astro

@@ -15,6 +15,7 @@ type NavLink = {
 const navLinks: NavLink[] = [
   { href: '/blog', label: 'Blog' },
   { href: '/privacy', label: 'Privacy' },
+  { href: 'https://legacy.videojs.org', label: 'V8', external: true },
 ];
 
 type Props = {
@@ -36,7 +37,7 @@ const { class: className } = Astro.props;
       class="flex flex-col gap-0 text-faded-black md:-ml-5 md:flex-row dark:text-manila-light"
     >
       <div
-        class="flex justify-between border-t border-b border-faded-black pt-3 pb-3 md:justify-center md:border-0 md:pt-0 md:pb-0 dark:border-manila-light"
+        class="flex flex-wrap justify-between gap-2 border-t border-b border-faded-black pt-3 pb-3 md:justify-center md:border-0 md:pt-0 md:pb-0 dark:border-manila-light"
       >
         <GetStartedLink
           client:idle
@@ -48,7 +49,7 @@ const { class: className } = Astro.props;
           navLinks.map((link) => (
             <a
               href={link.href}
-              class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+              class="flex items-center gap-1.5 rounded-xs px-2 py-2 font-display font-bold uppercase md:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
             >
               {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
             </a>

site/src/components/FooterDocs.astro

@@ -15,6 +15,7 @@ type NavLink = {
 const navLinks: NavLink[] = [
   { href: '/blog', label: 'Blog' },
   { href: '/privacy', label: 'Privacy' },
+  { href: 'https://legacy.videojs.org', label: 'V8', external: true },
 ];
 
 type Props = {
@@ -23,19 +24,24 @@ type Props = {
 const { class: className } = Astro.props;
 ---
 
-<footer class:list={["mt-30 grid gap-3 pb-11 lg:mt-32 lg:pt-0", className]}>
+<footer
+  class:list={[
+    "@container mt-30 grid gap-3 pb-11 @4xl:mt-32 @4xl:pt-0",
+    className,
+  ]}
+>
   <nav
-    class="mb-2 items-start justify-between gap-3 border-faded-black px-5 pt-5 sm:mb-0 lg:flex-row lg:items-start lg:border-t lg:px-10 dark:border-warm-gray"
+    class="mb-2 items-start justify-between gap-3 border-faded-black px-5 pt-5 sm:mb-0 @4xl:flex-row @4xl:items-start @4xl:border-t @4xl:px-10 dark:border-warm-gray"
   >
     <nav
-      class="flex flex-col gap-0 text-faded-black lg:-ml-5 lg:flex-row dark:text-manila-light"
+      class="flex flex-col gap-0 text-faded-black @4xl:-ml-5 @4xl:flex-row dark:text-manila-light"
     >
       <div
-        class="flex justify-between border-t border-b border-faded-black pt-3 pb-3 lg:justify-center lg:border-0 lg:pt-0 lg:pb-0 dark:border-manila-light"
+        class="flex flex-wrap justify-between gap-2 border-t border-b border-faded-black pt-3 pb-3 @4xl:justify-center @4xl:border-0 @4xl:pt-0 @4xl:pb-0 dark:border-manila-light"
       >
         <GetStartedLink
           client:idle
-          className="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase lg:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+          className="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
         >
           Docs
         </GetStartedLink>
@@ -43,7 +49,7 @@ const { class: className } = Astro.props;
           navLinks.map((link) => (
             <a
               href={link.href}
-              class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase lg:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+              class="flex items-center gap-1.5 rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
             >
               {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
             </a>
@@ -51,11 +57,11 @@ const { class: className } = Astro.props;
         }
       </div>
       <div
-        class="flex flex-1 justify-start gap-4 pt-5 pb-8 lg:justify-center lg:gap-0 lg:py-0 lg:pb-0"
+        class="flex flex-1 justify-start gap-4 pt-5 pb-8 @4xl:justify-center @4xl:gap-0 @4xl:py-0 @4xl:pb-0"
       >
         <a
           href={DISCORD_INVITE_URL}
-          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase lg:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
           aria-label="Discord"
           target="_blank"
           rel="noopener noreferrer"
@@ -64,7 +70,7 @@ const { class: className } = Astro.props;
         </a>
         <a
           href={GITHUB_REPO_URL}
-          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase lg:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
           aria-label="GitHub"
           target="_blank"
           rel="noopener noreferrer"
@@ -84,14 +90,14 @@ const { class: className } = Astro.props;
         href="/"
         class="underline intent:no-underline">video player.</a
       >
-      <br class="xl:hidden" />Video hosting and streaming <a
+      <br class="@5xl:hidden" />Video hosting and streaming <a
         href={MUX_URL}
         class="underline intent:no-underline"
         >sponsored by Mux.
       </a>
       <br />
       The term VIDEO.JS is a registered trademark of Brightcove Inc. <br
-        class="xl:hidden"
+        class="@5xl:hidden"
       />&copy; 2010&ndash;{new Date().getFullYear()} Video.js contributors
     </p>
   </nav>

site/src/components/LegacyBanner.astro

@@ -0,0 +1,59 @@
+---
+import { BANNER_DISMISS_KEY } from '@/consts';
+---
+
+<div
+  data-legacy-banner
+  class:list={[
+    "banner-dismissed:hidden",
+    "flex items-center justify-center gap-2 px-5 py-2 text-p2",
+    "border-b border-manila-75 bg-manila-50 text-faded-black",
+    "dark:border-soot dark:bg-warm-gray dark:text-manila-light",
+  ]}
+>
+  <p>
+    Using Video.js v8 or earlier?{" "}
+    <a
+      href="https://legacy.videojs.org"
+      class="font-bold underline intent:no-underline"
+    >
+      Visit the legacy docs
+    </a>
+  </p>
+  <button
+    type="button"
+    data-legacy-banner-dismiss
+    aria-label="Dismiss banner"
+    class:list={[
+      "shrink-0 cursor-pointer rounded p-2 intent:bg-manila-light dark:intent:bg-faded-black",
+    ]}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M18 6 6 18"></path>
+      <path d="m6 6 12 12"></path>
+    </svg>
+  </button>
+</div>
+
+<script is:inline define:vars={{ bannerKey: BANNER_DISMISS_KEY }}>
+  var dismissBtn = document.querySelector("[data-legacy-banner-dismiss]");
+  if (dismissBtn) {
+    dismissBtn.addEventListener("click", function () {
+      try {
+        localStorage.setItem(bannerKey, "true");
+      } catch (e) {}
+      document.documentElement.classList.add("banner-dismissed");
+    });
+  }
+</script>

site/src/consts.ts

@@ -6,6 +6,7 @@ export const DISCORD_INVITE_URL = 'https://discord.gg/JBqHh485uF';
 export const MUX_URL = 'https://www.mux.com?utm_source=videojs&utm_campaign=vjs10';
 export const MUX_SUPPORT_URL = 'https://www.mux.com/sales-contact?form=sales&utm_source=videojs&utm_campaign=vjs10';
 export const THEME_KEY = 'vjs-site-theme';
+export const BANNER_DISMISS_KEY = 'vjs-legacy-banner-dismissed';
 
 /**
  * Video source for demos and examples throughout the site,

site/src/content/docs/concepts/v10-roadmap.mdx

@@ -12,6 +12,7 @@ Video.js v10 is a complete rebuild from the ground up, designed to be more modul
 - Maintained with bug fixes and critical security patches only
 - No new features will be planned
 - Community contributions still welcome
+- Documentation available at [legacy.videojs.org](https://legacy.videojs.org)
 
 ### Version 9
 
@@ -63,6 +64,7 @@ Wider testing release to the community.
 ### Mid-2026
 
 - v8/v9 moved to "video.js-legacy" repository and package
+- Documentation preserved at [legacy.videojs.org](https://legacy.videojs.org)
 - Hosted CDN copies will remain available
 
 ### 2027 and beyond

site/src/layouts/Base.astro

@@ -6,6 +6,7 @@ import { SEO_SUFFIX, SITE_TITLE } from '@/consts';
 
 import '@/styles/globals.css';
 
+import BannerInit from '@/components/BannerInit.astro';
 import { PreferenceSync } from '@/components/docs/PreferenceSync';
 import ThemeInit from '@/components/ThemeInit.astro';
 
@@ -128,6 +129,7 @@ const fullTitle =
     <slot name="head" />
 
     <ThemeInit />
+    <BannerInit />
   </head>
   <body
     class:list={[

site/src/layouts/Docs.astro

@@ -8,6 +8,7 @@ import StyleInit from '@/components/docs/StyleInit.astro';
 import FilmGrain from '@/components/FilmGrain';
 import Footer from '@/components/FooterDocs.astro';
 import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
+import LegacyBanner from '@/components/LegacyBanner.astro';
 import NavBarDocs from '@/components/NavBar/NavBarDocs.astro';
 import { FRAMEWORK_LABELS, type SupportedFramework } from '@/types/docs';
 import { getDocTitle } from '@/utils/docs/title';
@@ -41,6 +42,7 @@ const docsSidebarId = 'docs-sidebar';
     <DocsSidebarRestoration docsSidebarId={docsSidebarId} />
     <slot name="head" slot="head" />
   </Fragment>
+  <LegacyBanner />
   <div
     class:list={[
       "grid min-h-screen grid-cols-1",

site/src/styles/globals.css

@@ -159,6 +159,7 @@
   }
 }
 @custom-variant dark (&:where(.dark, .dark *));
+@custom-variant banner-dismissed (&:where(.banner-dismissed, .banner-dismissed *));
 
 @layer base {
   .list-decimal .list-decimal {