mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(site): add legacy docs banner and v8 links (#786)
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
732d509b11
commit
ead03d76c4
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
/>© 2010–{new Date().getFullYear()} Video.js contributors
|
||||
</p>
|
||||
</nav>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user