zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-03-09 19:17:09 -05:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 732d509b11
commit ead03d76c4
9 changed files with 98 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/FooterDocs.astro
+17 -11
View File
@@ -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>