feat(site): new home page, docs, and design system (#566)

Co-authored-by: Darius Cepulis <dcepulis@mux.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-08-16 02:45:09 +00:00 · 2026-03-06 16:19:27 -06:00
parent f2f9e6ddc3
commit 351a3e8bda
255 changed files with 3574 additions and 1532 deletions
@@ -0,0 +1,98 @@
+---
+import clsx from 'clsx';
+import { ArrowUpRight } from 'lucide-react';
+import Discord from '@/components/icons/discord.svg?react';
+import GitHub from '@/components/icons/github.svg?react';
+import LogoDocs from '@/components/icons/logo-docs.svg?react';
+import Search from '@/components/Search';
+import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
+import GetStartedLink from './GetStartedLink';
+import MobileNav from './MobileNav';
+
+export interface Props {
+  class?: string;
+}
+
+type NavLink = {
+  href: string;
+  label: string;
+  matchPath: string | null;
+  external?: boolean;
+};
+const navLinks: NavLink[] = [
+  { href: '/docs', label: 'Docs', matchPath: '/docs' },
+  { href: '/blog', label: 'Blog', matchPath: '/blog' },
+];
+
+const currentPath = Astro.url.pathname;
+const isDocsActive = currentPath.startsWith('/docs');
+const otherNavLinks = navLinks.filter((link) => link.href !== '/docs');
+const { class: className } = Astro.props;
+---
+
+<nav
+  class:list={[
+    "sticky top-0 z-30 mx-auto flex w-full items-center justify-between border-b border-b-manila-75 bg-manila-light px-5 dark:border-warm-gray dark:bg-faded-black",
+    className,
+  ]}
+  style="height:var(--nav-h)"
+>
+  <a href="/" class="flex items-center" aria-label="Video.js v10 home">
+    <div class="relative w-40 md:w-49.5">
+      <LogoDocs width="100%" />
+    </div>
+  </a>
+  <Search class="mr-4 ml-auto sm:self-center" />
+  {/* Desktop nav links */}
+  <div class="hidden h-full md:flex">
+    <GetStartedLink
+      client:idle
+      className={clsx(
+        "flex items-center rounded-xs px-5 py-2 font-display text-h3 uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
+        isDocsActive ? "relative z-10 text-orange" : "",
+      )}
+      aria-current={isDocsActive ? "page" : undefined}
+    >
+      Docs
+      <hr class="absolute right-0 -bottom-px left-0 h-px bg-orange" />
+    </GetStartedLink>
+    {
+      otherNavLinks.map((link) => (
+        <a
+          href={link.href}
+          class:list={[
+            "flex items-center rounded-xs px-5 py-2 font-display text-h3 uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
+          ]}
+        >
+          {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
+        </a>
+      ))
+    }
+    <a
+      href={DISCORD_INVITE_URL}
+      class={clsx(
+        "my-1 flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
+      )}
+      aria-label="Discord"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Discord width="1.5em" height="1.5em" />
+    </a>
+    <a
+      href={GITHUB_REPO_URL}
+      class={clsx(
+        "my-1 flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
+      )}
+      aria-label="GitHub"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <GitHub width="1.5em" height="1.5em" />
+    </a>
+  </div>
+
+  <MobileNav client:idle navLinks={navLinks} currentPath={currentPath}>
+    <slot name="mobile-nav" />
+  </MobileNav>
+</nav>