mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(website): discord link
This commit is contained in:
Darius Cepulis
@@ -1,11 +1,13 @@
|
||||
import { Dialog } from '@base-ui-components/react/dialog';
|
||||
import clsx from 'clsx';
|
||||
import { Menu, X } from 'lucide-react';
|
||||
import { ArrowUpRight, Menu, X } from 'lucide-react';
|
||||
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
|
||||
|
||||
interface NavLink {
|
||||
href: string;
|
||||
label: string;
|
||||
matchPath: string | null;
|
||||
external?: boolean;
|
||||
}
|
||||
|
||||
export interface MobileNavProps {
|
||||
@@ -58,8 +60,26 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
|
||||
aria-current={link.matchPath && currentPath.startsWith(link.matchPath) ? 'page' : undefined}
|
||||
>
|
||||
{link.label}
|
||||
{' '}
|
||||
{link.external ? <ArrowUpRight size="1em" /> : null}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href={GITHUB_REPO_URL}
|
||||
className="text-md px-6 py-3 inline-flex items-center gap-1 intent:underline"
|
||||
>
|
||||
GitHub
|
||||
{' '}
|
||||
<ArrowUpRight size="1em" />
|
||||
</a>
|
||||
<a
|
||||
href={DISCORD_INVITE_URL}
|
||||
className="text-md px-6 py-3 inline-flex items-center gap-1 intent:underline"
|
||||
>
|
||||
Discord
|
||||
{' '}
|
||||
<ArrowUpRight size="1em" />
|
||||
</a>
|
||||
</nav>
|
||||
</Dialog.Popup>
|
||||
</Dialog.Portal>
|
||||
|
||||
@@ -1,17 +1,24 @@
|
||||
---
|
||||
import { GITHUB_REPO_URL } from '@/consts';
|
||||
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
|
||||
import MobileNav from './MobileNav';
|
||||
import { ArrowUpRight } from 'lucide-react';
|
||||
import Discord from '@/components/icons/Discord';
|
||||
import GitHub from '@/components/icons/GitHub';
|
||||
|
||||
export interface Props {
|
||||
dark?: boolean;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const navLinks = [
|
||||
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' },
|
||||
{ href: GITHUB_REPO_URL, label: 'GitHub', matchPath: null, external: true },
|
||||
];
|
||||
|
||||
const currentPath = Astro.url.pathname;
|
||||
@@ -41,14 +48,34 @@ const { class: className, dark = false } = Astro.props;
|
||||
? 'border-current'
|
||||
: 'border-transparent intent:border-current',
|
||||
]}
|
||||
aria-current={link.matchPath && currentPath.startsWith(link.matchPath) ? 'page' : undefined}
|
||||
>
|
||||
{link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<a
|
||||
href={GITHUB_REPO_URL}
|
||||
class="h-full flex items-center px-3 border-b border-transparent intent:border-current"
|
||||
aria-label="GitHub"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<GitHub size="1.1em" strokeWidth="0.0625em" />
|
||||
</a>
|
||||
<a
|
||||
href={DISCORD_INVITE_URL}
|
||||
class="h-full flex items-center px-3 border-b border-transparent intent:border-current"
|
||||
aria-label="Discord"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Discord size="1.1em" strokeWidth="0.0625em" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile nav -->
|
||||
<MobileNav client:load navLinks={navLinks} currentPath={currentPath} dark={dark}><slot name="mobile-nav" /></MobileNav
|
||||
>
|
||||
<MobileNav client:load navLinks={navLinks} currentPath={currentPath} dark={dark}>
|
||||
<slot name="mobile-nav" />
|
||||
</MobileNav>
|
||||
</nav>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
interface DiscordProps extends React.SVGProps<SVGSVGElement> {
|
||||
size?: number | string;
|
||||
}
|
||||
|
||||
export default function Discord({ size = 24, ...props }: DiscordProps) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 126.644 96"
|
||||
width={size}
|
||||
height={size}
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path d="M81.15 0a73.742 73.742 0 00-3.36 6.794 97.868 97.868 0 00-28.994 0A67.874 67.874 0 0045.437 0a105.547 105.547 0 00-26.14 8.057C2.779 32.53-1.691 56.373.53 79.887a105.038 105.038 0 0032.05 16.088 76.912 76.912 0 006.87-11.063c-3.738-1.389-7.35-3.131-10.81-5.152.91-.657 1.794-1.338 2.653-1.995a75.255 75.255 0 0064.075 0c.86.707 1.743 1.389 2.652 1.995a68.772 68.772 0 01-10.835 5.178A76.903 76.903 0 0094.056 96a104.99 104.99 0 0032.051-16.063c2.626-27.277-4.496-50.917-18.817-71.855A103.923 103.923 0 0081.175.05L81.15 0zM42.28 65.414c-6.238 0-11.416-5.657-11.416-12.653s4.976-12.679 11.391-12.679 11.517 5.708 11.416 12.679c-.101 6.97-5.026 12.653-11.39 12.653zm42.078 0c-6.264 0-11.391-5.657-11.391-12.653s4.975-12.679 11.39-12.679S95.85 45.79 95.749 52.761c-.1 6.97-5.026 12.653-11.39 12.653z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
interface GitHubProps extends React.SVGProps<SVGSVGElement> {
|
||||
size?: number | string;
|
||||
}
|
||||
|
||||
export default function GitHub({ size = 24, ...props }: GitHubProps) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 98 96"
|
||||
width={size}
|
||||
height={size}
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0112.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
export const SITE_TITLE = 'Video.js 10';
|
||||
export const SITE_DESCRIPTION = `For over 15 years, Video.js has been the world's web video player. Now rebuilt in v10 for modern development and performance.`;
|
||||
export const GITHUB_REPO_URL = 'https://github.com/muxinc/vjs-10-monorepo/';
|
||||
export const DISCORD_INVITE_URL = 'https://discord.gg/yyatwmQr';
|
||||
|
||||
Reference in New Issue
Block a user