Merge branch 'main' into collection/linter-warnings

.gitignore

@@ -42,3 +42,4 @@ out/
 # Cache
 .prettiercache
 .eslintcache
+.vercel

apps/guide/package.json

@@ -39,6 +39,7 @@
 	"dependencies": {
 		"@code-hike/mdx": "^0.8.0",
 		"@discordjs/ui": "workspace:^",
+		"@vercel/analytics": "^0.1.11",
 		"ariakit": "^2.0.0-next.43",
 		"react": "^18.2.0",
 		"react-custom-scrollbars-2": "^4.5.0",

apps/guide/src/components/Navbar.tsx

@@ -18,7 +18,7 @@ export function Navbar({ pages }: { pages?: MDXPage[] | undefined }) {
 
 	return (
 		<>
-			<header className="dark:bg-dark-600 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
+			<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
 				<div className="h-18 block px-6">
 					<div className="flex h-full flex-row place-content-between place-items-center">
 						<Button

apps/guide/src/layouts/SidebarLayout.astro

@@ -2,10 +2,13 @@
 import '../styles/main.css';
 import '@code-hike/mdx/styles.css';
 import '../styles/ch.css';
+import { inject } from '@vercel/analytics';
 import type { MarkdownLayoutProps } from 'astro';
 import SidebarLayout from '../components/SidebarLayout.astro';
 import { DESCRIPTION } from '../util/constants.js';
 
+inject();
+
 type Props = MarkdownLayoutProps<{}>;
 const props = Astro.props;
 ---

apps/website/.gitignore

@@ -13,6 +13,7 @@ pids
 
 # Env
 .env
+.env*.local
 
 # Dist
 dist/

apps/website/package.json

@@ -51,6 +51,8 @@
 		"@microsoft/api-extractor-model": "7.26.4",
 		"@microsoft/tsdoc": "0.14.2",
 		"@react-icons/all-files": "^4.1.0",
+		"@vercel/analytics": "^0.1.11",
+		"@vercel/edge-config": "^0.1.5",
 		"@vercel/og": "^0.4.1",
 		"@vscode/codicons": "^0.0.32",
 		"ariakit": "^2.0.0-next.43",

apps/website/src/app/api/cron/route.ts

@@ -0,0 +1,28 @@
+import { get } from '@vercel/edge-config';
+import { NextResponse } from 'next/server';
+import type { ServerRuntime } from 'next/types';
+
+export const runtime: ServerRuntime = 'edge';
+
+export async function GET() {
+	const url = await get<string>('DISCORD_WEBHOOK_URL');
+	const imageUrl = await get<string>('IT_IS_WEDNESDAY_MY_DUDES');
+	if (url && imageUrl) {
+		await fetch(url, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({
+				username: 'It is wednesday, my dudes',
+				embeds: [
+					{
+						image: {
+							url: imageUrl,
+						},
+					},
+				],
+			}),
+		});
+	}
+
+	return NextResponse.json({ message: 'It is wednesday, my dudes' });
+}

apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx

@@ -180,8 +180,8 @@ export default async function Page({ params }: { params: ItemRouteParams }) {
 					: ''
 			}
 		>
-			<article className="dark:bg-dark-600 bg-light-600">
-				<div className="dark:bg-dark-800  bg-white p-6 pb-20 shadow">{member ? <Member member={member} /> : null}</div>
+			<article className="dark:bg-dark-800 bg-light-600">
+				<div className="dark:bg-dark-600 bg-white p-6 pb-20 shadow">{member ? <Member member={member} /> : null}</div>
 			</article>
 		</div>
 	);

apps/website/src/app/docs/packages/[package]/[version]/layout.tsx

@@ -1,19 +1,20 @@
 import { addPackageToModel } from '@discordjs/scripts';
 import type { ApiFunction, ApiItem } from '@microsoft/api-extractor-model';
 import { ApiModel } from '@microsoft/api-extractor-model';
-import Image from 'next/image';
+import dynamic from 'next/dynamic';
 import { notFound } from 'next/navigation';
 import type { PropsWithChildren } from 'react';
 import { Providers } from './providers';
 import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
-import vercelLogo from '~/assets/powered-by-vercel.svg';
 import { CmdKDialog } from '~/components/CmdK';
-import { Header } from '~/components/Header';
 import { Nav } from '~/components/Nav';
 import type { SidebarSectionItemData } from '~/components/Sidebar';
 import { resolveItemURI } from '~/components/documentation/util';
 import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
 
+const Header = dynamic(async () => import('~/components/Header'));
+const Footer = dynamic(async () => import('~/components/Footer'));
+
 export interface VersionRouteParams {
 	package: string;
 	version: string;
@@ -74,74 +75,8 @@ export default async function PackageLayout({ children, params }: PropsWithChild
 				<article className="pt-18 lg:pl-76">
 					<div className="relative z-10 min-h-[calc(100vh_-_70px)]">{children}</div>
 					<div className="h-76 md:h-52" />
-					<footer className="dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 xl:pr-84 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16">
-						<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" 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>
 				</article>
+				<Footer />
 			</main>
 			<CmdKDialog />
 		</Providers>

apps/website/src/app/docs/packages/[package]/[version]/providers.tsx

@@ -2,12 +2,15 @@
 
 import type { PropsWithChildren } from 'react';
 import { CmdKProvider } from '~/contexts/cmdK';
+import { MemberProvider } from '~/contexts/member';
 import { NavProvider } from '~/contexts/nav';
 
 export function Providers({ children }: PropsWithChildren) {
 	return (
 		<NavProvider>
-			<CmdKProvider>{children}</CmdKProvider>
+			<MemberProvider>
+				<CmdKProvider>{children}</CmdKProvider>
+			</MemberProvider>
 		</NavProvider>
 	);
 }

apps/website/src/app/docs/packages/[package]/page.tsx

@@ -3,8 +3,11 @@ import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
 import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
+import type { ServerRuntime } from 'next/types';
 import { PACKAGES } from '~/util/constants';
 
+export const runtime: ServerRuntime = 'edge';
+
 async function getData(pkg: string) {
 	if (!PACKAGES.includes(pkg)) {
 		notFound();
@@ -24,7 +27,7 @@ export default async function Page({ params }: { params: { package: string } })
 	const data = await getData(params.package);
 
 	return (
-		<div className="min-w-xs sm:w-md mx-auto flex h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
+		<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-8 lg:px-6">
 			<div className="flex grow flex-col place-content-center gap-4">
 				<h1 className="text-2xl font-semibold">Select a version:</h1>
 				{data.map((version, idx) => (

apps/website/src/app/docs/packages/page.tsx

@@ -3,11 +3,14 @@ import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
 import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
 import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
 import Link from 'next/link';
+import type { ServerRuntime } from 'next/types';
 import { PACKAGES } from '~/util/constants';
 
+export const runtime: ServerRuntime = 'edge';
+
 export default function Page() {
 	return (
-		<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
+		<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-8 lg:px-6">
 			<div className="flex grow flex-col place-content-center gap-4">
 				<h1 className="text-2xl font-semibold">Select a package:</h1>
 				<a

apps/website/src/app/global-error.tsx

@@ -8,10 +8,10 @@ export default function GlobalError({ error }: { error: Error }) {
 
 	return (
 		<html className={inter.variable} lang="en" suppressHydrationWarning>
-			<body className="dark:bg-dark-800 bg-white">
+			<body className="dark:bg-dark-800 bg-light-600">
 				<Providers>
 					<main className="mx-auto h-screen max-w-2xl">
-						<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
+						<div className="mx-auto flex h-screen max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
 							<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
 							<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
 						</div>

apps/website/src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { Analytics } from '@vercel/analytics/react';
 import type { Metadata } from 'next/types';
 import type { PropsWithChildren } from 'react';
 import { Providers } from './providers';
@@ -71,8 +72,9 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: PropsWithChildren) {
 	return (
 		<html className={inter.variable} lang="en" suppressHydrationWarning>
-			<body className="dark:bg-dark-800 bg-white">
+			<body className="dark:bg-dark-800 bg-light-600">
 				<Providers>{children}</Providers>
+				<Analytics />
 			</body>
 		</html>
 	);

apps/website/src/app/page.tsx

@@ -7,7 +7,7 @@ import { CODE_EXAMPLE } from '~/util/constants';
 
 export default function Page() {
 	return (
-		<div className="mx-auto flex h-screen max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:place-content-center lg:py-0 lg:px-6">
+		<div className="mx-auto flex h-screen max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:place-content-center lg:py-0 lg:px-8">
 			<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
 				<div className="flex max-w-lg flex-col gap-3 lg:mr-8">
 					<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
@@ -23,7 +23,6 @@ export default function Page() {
 						<Link
 							className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
 							href="/docs"
-							prefetch={false}
 						>
 							Docs
 						</Link>
@@ -45,7 +44,7 @@ export default function Page() {
 						</a>
 					</div>
 				</div>
-				<div className="max-w-sm sm:max-w-6xl">
+				<div className="max-w-xs sm:max-w-6xl">
 					{/* @ts-expect-error async component */}
 					<SyntaxHighlighter code={CODE_EXAMPLE} />
 				</div>

apps/website/src/components/Footer.tsx

@@ -0,0 +1,74 @@
+import Image from 'next/image';
+import vercelLogo from '~/assets/powered-by-vercel.svg';
+
+export default function Footer() {
+	return (
+		<footer className="dark:bg-dark-800 h-76 lg:pl-84 bg-light-600 xl:pr-84 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16">
+			<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" 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>
+	);
+}