Add /support page, centralize Mux URLs (#783)

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

site/netlify.toml

@@ -45,3 +45,9 @@
   from = "/tags/*"
   to = "/blog"
   status = 307
+
+# Redirect old support URL to new page
+[[redirects]]
+  from = "/html5-video-support"
+  to = "/support"
+  status = 307

site/src/components/Footer.astro

@@ -1,6 +1,6 @@
 ---
 import { ArrowUpRight } from 'lucide-react';
-import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
+import { DISCORD_INVITE_URL, GITHUB_REPO_URL, MUX_URL } from '@/consts';
 import Discord from './icons/discord.svg?react';
 import GitHub from './icons/github.svg?react';
 import LogoMonoVersion from './icons/logo-mono.svg?react';
@@ -97,7 +97,7 @@ const { class: className } = Astro.props;
         >
         <br />
         Video hosting and streaming <a
-          href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
+          href={MUX_URL}
           class="underline intent:no-underline"
           >sponsored by Mux
         </a>

site/src/components/FooterDocs.astro

@@ -1,6 +1,6 @@
 ---
 import { ArrowUpRight } from 'lucide-react';
-import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
+import { DISCORD_INVITE_URL, GITHUB_REPO_URL, MUX_URL } from '@/consts';
 import Discord from './icons/discord.svg?react';
 import GitHub from './icons/github.svg?react';
 import LogoMonoVersion from './icons/logo-mono.svg?react';
@@ -85,7 +85,7 @@ const { class: className } = Astro.props;
         class="underline intent:no-underline">video player.</a
       >
       <br class="xl:hidden" />Video hosting and streaming <a
-        href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
+        href={MUX_URL}
         class="underline intent:no-underline"
         >sponsored by Mux.
       </a>

site/src/components/home/Header.astro

@@ -3,7 +3,7 @@ import FrameworkControl from '@/components/home/FrameworkControl';
 import HeroVideo from '@/components/home/HeroVideo';
 import SkinControl from '@/components/home/SkinControl';
 import MuxLogoSmall from '@/components/icons/mux-logo-small.svg?react';
-import { VJS10_DEMO_VIDEO } from '@/consts';
+import { MUX_URL, VJS10_DEMO_VIDEO } from '@/consts';
 
 const poster = `${VJS10_DEMO_VIDEO.poster}?time=0`;
 ---
@@ -50,7 +50,7 @@ const poster = `${VJS10_DEMO_VIDEO.poster}?time=0`;
   >
     Video hosting sponsored by <a
       class="relative inline-flex w-11 items-center justify-center md:w-12.5"
-      href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
+      href={MUX_URL}
       target="_blank"
       rel="noopener"
     >

site/src/components/home/Sponsors.astro

@@ -1,6 +1,7 @@
 ---
 import clsx from 'clsx';
 import type { ComponentType, SVGProps } from 'react';
+import { MUX_URL } from '@/consts';
 import MuxLogo from '../icons/mux-logo.svg?react';
 import BrightcoveLogo from '../icons/sponsors/brightcove.svg?react';
 import BrowserStackLogo from '../icons/sponsors/browserstack.svg?react';
@@ -37,7 +38,7 @@ const sponsors: SponsorItem[] = [
     class="grid grid-cols-1 rounded-xs border border-faded-black p-2 text-manila-light md:grid-cols-2 md:items-center dark:border-manila-light dark:text-faded-black"
   >
     <a
-      href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
+      href={MUX_URL}
       target="_blank"
       rel="noopener"
       class="flex h-45 items-center justify-center bg-faded-black md:h-full md:min-h-74 dark:bg-soot dark:text-manila-light"

site/src/consts.ts

@@ -3,6 +3,8 @@ export const SEO_SUFFIX = 'Open Source Video Player';
 export const SITE_DESCRIPTION = `The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.`;
 export const GITHUB_REPO_URL = 'https://github.com/videojs/v10/';
 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';
 
 /**

site/src/layouts/ErrorPage.astro

@@ -3,6 +3,7 @@ import DialNav from '@/components/DialNav';
 import Footer from '@/components/Footer.astro';
 import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
 import NavBar from '@/components/NavBar/NavBar.astro';
+import { MUX_URL } from '@/consts';
 import Base from '@/layouts/Base.astro';
 
 interface Props {
@@ -42,7 +43,7 @@ const { title, description, code = '404', message = 'NOT FOUND' } = Astro.props;
           ]}
           right={[
             {
-              href: "https://mux.com?utm_source=videojs&utm_campaign=vjs10",
+              href: MUX_URL,
               label: "mux.com",
               angle: 60,
             },

site/src/pages/support.astro

@@ -0,0 +1,92 @@
+---
+import { ArrowUpRight } from 'lucide-react';
+import Footer from '@/components/Footer.astro';
+import NavBar from '@/components/NavBar/NavBar.astro';
+import { GITHUB_REPO_URL, MUX_SUPPORT_URL } from '@/consts';
+import Base from '@/layouts/Base.astro';
+
+const tiles = [
+  {
+    title: 'Community Support',
+    body: 'No promises or guarantees.',
+    cta: { label: 'Submit an issue', href: `${GITHUB_REPO_URL}issues/new/choose` },
+  },
+  {
+    title: 'Contribute',
+    body: "We're excited to help you!",
+    cta: { label: 'Check out the docs.', href: `${GITHUB_REPO_URL}blob/main/CONTRIBUTING.md` },
+  },
+  {
+    title: 'Offer a Bounty',
+    body: 'Create a bid for your feature to be built or bug to be fixed. Community members can then elect to do the work.',
+    cta: { label: 'More details coming soon' },
+  },
+  {
+    title: 'Enterprise-grade',
+    body: ['Provided by Mux', 'Starting at $20k/yr.'],
+    cta: {
+      label: 'Get in touch',
+      href: MUX_SUPPORT_URL,
+    },
+  },
+] as const;
+---
+
+<Base
+  title="Support"
+  description="Get help with Video.js — from community support and contributing to bounties and enterprise-grade service."
+>
+  <NavBar />
+  <main class="mx-auto w-full max-w-305 px-5 pt-10 pb-20 md:pt-20">
+    <header
+      class="mb-12 border-y border-faded-black py-4 dark:border-manila-light"
+    >
+      <h1
+        class="text-center font-display text-h2 text-faded-black uppercase dark:text-manila-light"
+      >
+        Support
+      </h1>
+    </header>
+
+    <div
+      class="grid auto-rows-auto grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4"
+    >
+      {
+        tiles.map((tile) => (
+          <div class="row-span-3 grid grid-rows-subgrid rounded-xs border border-faded-black p-5 dark:border-manila-light">
+            <h2 class="font-display text-h3 leading-tight text-faded-black uppercase dark:text-manila-light">
+              {tile.title}
+            </h2>
+            {Array.isArray(tile.body) ? (
+              <div class="text-p2 text-warm-gray dark:text-manila-dark">
+                {tile.body.map((line, i) => (
+                  <p class="mb-2 last:mb-0">{line}</p>
+                ))}
+              </div>
+            ) : (
+              <p class="text-p2 text-warm-gray dark:text-manila-dark">
+                {tile.body}
+              </p>
+            )}
+            {tile.cta.href ? (
+              <a
+                href={tile.cta.href}
+                target="_blank"
+                rel="noopener"
+                class="mt-5 inline-flex items-center gap-1 self-end rounded-xs border border-manila-75 bg-manila-50 px-4 py-2.5 text-p3 dark:border-soot dark:bg-warm-gray intent:bg-manila-dark dark:intent:bg-soot"
+              >
+                {tile.cta.label}
+                <ArrowUpRight size="1em" />
+              </a>
+            ) : (
+              <span class="mt-5 inline-flex items-center gap-1 self-end rounded-xs border border-manila-75 px-4 py-2.5 text-p3 text-warm-gray dark:border-soot dark:text-manila-dark">
+                {tile.cta.label}
+              </span>
+            )}
+          </div>
+        ))
+      }
+    </div>
+  </main>
+  <Footer />
+</Base>