chore(guide): bring guide up to speed

apps/guide/src/components/Footer.tsx

@@ -0,0 +1,79 @@
+import Image from 'next/image';
+import vercelLogo from '~/assets/powered-by-vercel.svg';
+
+export default function Footer() {
+	return (
+		<footer className="dark:bg-dark-800 bg-light-600 md:pl-12 md:pr-12">
+			<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
+				<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
+					<a
+						className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+						rel="noopener noreferrer"
+						target="_blank"
+						title="Vercel"
+					>
+						<Image
+							alt="Vercel"
+							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+							placeholder="blur"
+							src={vercelLogo}
+						/>
+					</a>
+					<div className="flex flex-row gap-6 md:gap-12">
+						<div className="flex flex-col gap-2">
+							<div className="text-lg font-semibold">Community</div>
+							<div className="flex flex-col gap-1">
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discord.gg/djs"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									Discord
+								</a>
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://github.com/discordjs/discord.js/discussions"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									GitHub discussions
+								</a>
+							</div>
+						</div>
+						<div className="flex flex-col gap-2">
+							<div className="text-lg font-semibold">Project</div>
+							<div className="flex flex-col gap-1">
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://github.com/discordjs/discord.js"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord.js
+								</a>
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discordjs.guide"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord.js guide
+								</a>
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discord-api-types.dev"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord-api-types
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</footer>
+	);
+}

apps/guide/src/components/Header.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
+import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
+import { Button } from 'ariakit/button';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Fragment, useMemo } from 'react';
+import { useNav } from '~/contexts/nav';
+
+const ThemeSwitcher = dynamic(async () => import('./ThemeSwitcher'));
+
+export default function Header() {
+	const pathname = usePathname();
+	const { setOpened } = useNav();
+
+	const pathElements = useMemo(
+		() =>
+			pathname
+				.split('/')
+				.slice(1)
+				.map((path, idx, original) => (
+					<Link
+						className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
+						href={`/${original.slice(0, idx + 1).join('/')}`}
+						key={`${path}-${idx}`}
+					>
+						{path}
+					</Link>
+				)),
+		[pathname],
+	);
+
+	const breadcrumbs = useMemo(
+		() =>
+			pathElements.flatMap((el, idx, array) => {
+				if (idx === 0) {
+					return (
+						<Fragment key={`${el.key}-${idx}`}>
+							<div className="mx-2">/</div>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				if (idx !== array.length - 1) {
+					return (
+						<Fragment key={`${el.key}-${idx}`}>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				return <Fragment key={`${el.key}-${idx}`}>{el}</Fragment>;
+			}),
+		[pathElements],
+	);
+
+	return (
+		<header className="dark:bg-dark/50 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/50 shadow backdrop-blur-md">
+			<div className="block h-16 px-6">
+				<div className="flex h-full flex-row place-content-between place-items-center gap-8">
+					<Button
+						aria-label="Menu"
+						className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
+						onClick={() => setOpened((open) => !open)}
+					>
+						<VscMenu size={24} />
+					</Button>
+					<div className="hidden lg:flex lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
+					<div className="flex flex-row place-items-center gap-4">
+						<Button
+							aria-label="GitHub"
+							as="a"
+							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+							href="https://github.com/discordjs/discord.js"
+							rel="noopener noreferrer"
+							target="_blank"
+						>
+							<VscGithubInverted size={24} />
+						</Button>
+						<ThemeSwitcher />
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}

apps/guide/src/components/Nav.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { Sidebar } from './Sidebar';
+import { useNav } from '~/contexts/nav';
+
+export function Nav() {
+	const { opened } = useNav();
+
+	return (
+		<nav
+			className={`dark:bg-dark/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
+				opened ? 'block' : 'hidden'
+			} lg:min-w-xs lg:sticky lg:block lg:h-full lg:w-full lg:max-w-xs`}
+		>
+			<Scrollbars
+				autoHide
+				className="[&>div]:overscroll-none"
+				hideTracksWhenNotNeeded
+				renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
+				renderTrackVertical={(props) => (
+					<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
+				)}
+				universal
+			>
+				<Sidebar />
+			</Scrollbars>
+		</nav>
+	);
+}

apps/guide/src/components/Navbar.tsx

@@ -1,70 +0,0 @@
-import { Button } from 'ariakit/button';
-import { useState, useEffect } from 'react';
-import { FiCommand } from 'react-icons/fi';
-import { VscColorMode, VscGithubInverted, VscMenu, VscSearch } from 'react-icons/vsc';
-import { useMedia } from 'react-use';
-import { Sidebar } from './Sidebar.jsx';
-import type { MDXPage } from './SidebarItems.jsx';
-
-export function Navbar({ pages }: { pages?: MDXPage[] | undefined }) {
-	const matches = useMedia('(min-width: 992px)', false);
-	const [opened, setOpened] = useState(false);
-
-	useEffect(() => {
-		if (matches) {
-			setOpened(false);
-		}
-	}, [matches]);
-
-	return (
-		<>
-			<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed left-0 top-0 z-20 w-full border-b">
-				<div className="block h-16 px-6">
-					<div className="flex h-full flex-row place-content-between place-items-center">
-						<Button
-							aria-label="Menu"
-							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
-							onClick={() => setOpened((open) => !open)}
-						>
-							<VscMenu size={24} />
-						</Button>
-						<div className="hidden md:flex md:flex-row">Placeholder</div>
-						<div className="flex flex-row place-items-center gap-4">
-							<Button
-								as="div"
-								className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
-								// onClick={() => dialog?.toggle()}
-							>
-								<div className="flex flex-row place-items-center gap-4">
-									<VscSearch size={18} />
-									<span className="opacity-65">Search...</span>
-									<div className="opacity-65 flex flex-row place-items-center gap-2">
-										<FiCommand size={18} /> K
-									</div>
-								</div>
-							</Button>
-							<Button
-								aria-label="GitHub"
-								as="a"
-								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
-								href="https://github.com/discordjs/discord.js"
-								rel="noopener noreferrer"
-								target="_blank"
-							>
-								<VscGithubInverted size={24} />
-							</Button>
-							<Button
-								aria-label="Toggle theme"
-								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
-								// onClick={() => toggleTheme()}
-							>
-								<VscColorMode size={24} />
-							</Button>
-						</div>
-					</div>
-				</div>
-			</header>
-			<Sidebar opened={opened} pages={pages} />
-		</>
-	);
-}

apps/guide/src/components/Sidebar.tsx

@@ -1,24 +1,8 @@
-import { Scrollbars } from 'react-custom-scrollbars-2';
-import type { MDXPage } from './SidebarItems.jsx';
+'use client';
 
-export function Sidebar({ pages, opened }: { opened: boolean; pages?: MDXPage[] | undefined }) {
-	return (
-		<nav
-			className={`h-[calc(100vh - 65px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed bottom-0 left-0 top-[65px] z-20 w-full border-r bg-white ${
-				opened ? 'block' : 'hidden'
-			} lg:w-76 lg:max-w-76 lg:block`}
-		>
-			<Scrollbars
-				autoHide
-				hideTracksWhenNotNeeded
-				renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
-				renderTrackVertical={(props) => (
-					<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
-				)}
-				universal
-			>
-				{pages ?? null}
-			</Scrollbars>
-		</nav>
-	);
+export function Sidebar() {
+	// const pathname = usePathname();
+	// const { setOpened } = useNav();
+
+	return null;
 }

apps/guide/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
+import { Button } from 'ariakit/button';
+import { useTheme } from 'next-themes';
+
+export default function ThemeSwitcher() {
+	const { resolvedTheme, setTheme } = useTheme();
+	const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+
+	return (
+		<Button
+			aria-label="Toggle theme"
+			className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+			onClick={() => toggleTheme()}
+		>
+			<VscColorMode size={24} />
+		</Button>
+	);
+}