chore: move website and guide out of packages

2026-03-15 02:53:31 +01:00 · 2022-10-10 01:22:48 +02:00
parent 0a9d57b011
commit 3ed668e539
175 changed files with 428 additions and 487 deletions
--- a/apps/website/src/pages/404.tsx
+++ b/apps/website/src/pages/404.tsx
@@ -0,0 +1,22 @@
+import Head from 'next/head';
+import Link from 'next/link';
+
+export default function FourOhFourPage() {
+	return (
+		<>
+			<Head>
+				<title key="title">discord.js | 404</title>
+				<meta content="discord.js | 404" key="og_title" property="og:title" />
+			</Head>
+			<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">
+				<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
+				<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
+				<Link href="/docs/packages" prefetch={false}>
+					<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none 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">
+						Take me back
+					</a>
+				</Link>
+			</div>
+		</>
+	);
+}
--- a/apps/website/src/pages/_app.tsx
+++ b/apps/website/src/pages/_app.tsx
@@ -0,0 +1,32 @@
+import type { AppProps } from 'next/app';
+import Head from 'next/head';
+import NextProgress from 'next-progress';
+import { ThemeProvider } from 'next-themes';
+import '@unocss/reset/tailwind.css';
+import '../styles/unocss.css';
+import '../styles/cmdk.css';
+import '../styles/main.css';
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+	return (
+		<>
+			<Head>
+				<title key="title">discord.js</title>
+				<meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
+				<meta content="#5865f2" name="theme-color" />
+			</Head>
+			<ThemeProvider
+				attribute="class"
+				defaultTheme="system"
+				disableTransitionOnChange
+				value={{
+					light: 'light',
+					dark: 'dark',
+				}}
+			>
+				<NextProgress color="#5865f2" options={{ showSpinner: false }} />
+				<Component {...pageProps} />
+			</ThemeProvider>
+		</>
+	);
+}
--- a/apps/website/src/pages/_document.tsx
+++ b/apps/website/src/pages/_document.tsx
@@ -0,0 +1,32 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+import { DESCRIPTION } from '~/util/constants';
+
+export default function Document() {
+	return (
+		<Html lang="en">
+			<Head>
+				<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
+				<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
+				<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
+				<link href="/site.webmanifest" rel="manifest" />
+				<link color="#090a16" href="/safari-pinned-tab.svg" rel="mask-icon" />
+				<meta content="light dark" name="color-scheme" />
+				<meta content="discord.js" name="apple-mobile-web-app-title" />
+				<meta content="discord.js" name="application-name" />
+				<meta content="#090a16" name="msapplication-TileColor" />
+				<meta content={DESCRIPTION} key="description" name="description" />
+				<meta content="discord.js" property="og:site_name" />
+				<meta content="website" property="og:type" />
+				<meta content="discord.js" key="og_title" property="og:title" />
+				<meta content={DESCRIPTION} key="og_description" name="og:description" />
+				<meta content="https://discordjs.dev/open-graph.png" property="og:image" />
+				<meta content="summary_large_image" name="twitter:card" />
+				<meta content="@iCrawlToGo" name="twitter:creator" />
+			</Head>
+			<body className="dark:bg-dark-800 bg-white">
+				<Main />
+				<NextScript />
+			</body>
+		</Html>
+	);
+}
--- a/apps/website/src/pages/docs/[...slug].tsx
+++ b/apps/website/src/pages/docs/[...slug].tsx
@@ -0,0 +1,284 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import process, { cwd } from 'node:process';
+import {
+	findPackage,
+	getMembers,
+	type ApiItemJSON,
+	type ApiClassJSON,
+	type ApiFunctionJSON,
+	type ApiInterfaceJSON,
+	type ApiTypeAliasJSON,
+	type ApiVariableJSON,
+	type ApiEnumJSON,
+} from '@discordjs/api-extractor-utils';
+import { createApiModel } from '@discordjs/scripts';
+import { ApiFunction, ApiItemKind, type ApiPackage } from '@microsoft/api-extractor-model';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import type { GetStaticPaths, GetStaticProps } from 'next/types';
+import { MDXRemote } from 'next-mdx-remote';
+import { serialize } from 'next-mdx-remote/serialize';
+import { useMemo } from 'react';
+import rehypeIgnore from 'rehype-ignore';
+import rehypePrettyCode, { type Options } from 'rehype-pretty-code';
+import rehypeRaw from 'rehype-raw';
+import rehypeSlug from 'rehype-slug';
+import remarkGfm from 'remark-gfm';
+import { getHighlighter } from 'shiki';
+import shikiLangJavascript from 'shiki/languages/javascript.tmLanguage.json';
+import shikiLangTypescript from 'shiki/languages/typescript.tmLanguage.json';
+import shikiThemeDarkPlus from 'shiki/themes/dark-plus.json';
+import shikiThemeLightPlus from 'shiki/themes/light-plus.json';
+import { SidebarLayout, type SidebarLayoutProps } from '~/components/SidebarLayout';
+import { Class } from '~/components/model/Class';
+import { Enum } from '~/components/model/Enum';
+import { Function } from '~/components/model/Function';
+import { Interface } from '~/components/model/Interface';
+import { TypeAlias } from '~/components/model/TypeAlias';
+import { Variable } from '~/components/model/Variable';
+import { CmdKProvider } from '~/contexts/cmdK';
+import { MemberProvider } from '~/contexts/member';
+import { PACKAGES } from '~/util/constants';
+import { findMember, findMemberByKey } from '~/util/model.server';
+// import { miniSearch } from '~/util/search';
+
+export const getStaticPaths: GetStaticPaths = async () => {
+	const pkgs = (
+		await Promise.all(
+			PACKAGES.map(async (packageName) => {
+				try {
+					let data: any[] = [];
+					let versions: string[] = [];
+					if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
+						const res = await readFile(join(cwd(), '..', packageName, 'docs', 'docs.api.json'), 'utf8');
+						data = JSON.parse(res);
+					} else {
+						const response = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`);
+						versions = await response.json();
+						versions = versions.slice(-2);
+
+						for (const version of versions) {
+							const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${version}.api.json`);
+							data = [...data, await res.json()];
+						}
+					}
+
+					if (Array.isArray(data)) {
+						const models = data.map((innerData) => createApiModel(innerData));
+						const pkgs = models.map((model) => findPackage(model, packageName)) as ApiPackage[];
+
+						return [
+							...versions.map((version) => ({ params: { slug: ['packages', packageName, version] } })),
+							...pkgs.flatMap((pkg, idx) =>
+								getMembers(pkg, versions[idx]!).map((member) => {
+									if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
+										return {
+											params: {
+												slug: [
+													'packages',
+													packageName,
+													versions[idx]!,
+													`${member.name}:${member.overloadIndex}:${member.kind}`,
+												],
+											},
+										};
+									}
+
+									return {
+										params: {
+											slug: ['packages', packageName, versions[idx]!, `${member.name}:${member.kind}`],
+										},
+									};
+								}),
+							),
+						];
+					}
+
+					const model = createApiModel(data);
+					const pkg = findPackage(model, packageName)!;
+
+					return [
+						{ params: { slug: ['packages', packageName, 'main'] } },
+						...getMembers(pkg, 'main').map((member) => {
+							if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
+								return {
+									params: {
+										slug: ['packages', packageName, 'main', `${member.name}:${member.overloadIndex}:${member.kind}`],
+									},
+								};
+							}
+
+							return { params: { slug: ['packages', packageName, 'main', `${member.name}:${member.kind}`] } };
+						}),
+					];
+				} catch {
+					return { params: { slug: [] } };
+				}
+			}),
+		)
+	).flat();
+
+	return {
+		paths: pkgs,
+		fallback: true,
+	};
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+	const [path, packageName = 'builders', branchName = 'main', member] = params!.slug as string[];
+
+	if (path !== 'packages' || !PACKAGES.includes(packageName)) {
+		return {
+			notFound: true,
+		};
+	}
+
+	const [memberName, overloadIndex] = member?.split(':') ?? [];
+
+	try {
+		const readme = await readFile(join(cwd(), '..', packageName, 'README.md'), 'utf8');
+
+		const mdxSource = await serialize(readme, {
+			mdxOptions: {
+				remarkPlugins: [remarkGfm],
+				remarkRehypeOptions: { allowDangerousHtml: true },
+				rehypePlugins: [
+					rehypeRaw,
+					rehypeIgnore,
+					rehypeSlug,
+					[
+						rehypePrettyCode,
+						{
+							theme: {
+								dark: shikiThemeDarkPlus,
+								light: shikiThemeLightPlus,
+							},
+							getHighlighter: async (options?: Partial<Options>) =>
+								getHighlighter({
+									...options,
+									langs: [
+										// @ts-expect-error: Working as intended
+										{ id: 'javascript', aliases: ['js'], scopeName: 'source.js', grammar: shikiLangJavascript },
+										// @ts-expect-error: Working as intended
+										{ id: 'typescript', aliases: ['ts'], scopeName: 'source.ts', grammar: shikiLangTypescript },
+									],
+								}),
+						},
+					],
+				],
+				format: 'md',
+			},
+		});
+
+		let data;
+		if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
+			const res = await readFile(join(cwd(), '..', packageName, 'docs', 'docs.api.json'), 'utf8');
+			data = JSON.parse(res);
+		} else {
+			const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${branchName}.api.json`);
+			data = await res.json();
+		}
+
+		const model = createApiModel(data);
+		const pkg = findPackage(model, packageName);
+
+		// eslint-disable-next-line prefer-const
+		let { containerKey, name } = findMember(model, packageName, memberName, branchName) ?? {};
+		if (name && overloadIndex && !Number.isNaN(Number.parseInt(overloadIndex, 10))) {
+			containerKey = ApiFunction.getContainerKey(name, Number.parseInt(overloadIndex, 10));
+		}
+
+		return {
+			props: {
+				packageName,
+				branchName,
+				data: {
+					members: pkg
+						? getMembers(pkg, branchName).filter((item) => item.overloadIndex === null || item.overloadIndex <= 1)
+						: [],
+					member:
+						memberName && containerKey ? findMemberByKey(model, packageName, containerKey, branchName) ?? null : null,
+					source: mdxSource,
+				},
+			},
+			revalidate: 3_600,
+		};
+	} catch (error_) {
+		const error = error_ as Error;
+		console.error(error);
+
+		return {
+			props: {
+				error: error.message,
+			},
+			revalidate: 1,
+		};
+	}
+};
+
+const member = (props?: ApiItemJSON | undefined) => {
+	switch (props?.kind) {
+		case 'Class':
+			return <Class data={props as ApiClassJSON} />;
+		case 'Function':
+			return <Function data={props as ApiFunctionJSON} key={props.containerKey} />;
+		case 'Interface':
+			return <Interface data={props as ApiInterfaceJSON} />;
+		case 'TypeAlias':
+			return <TypeAlias data={props as ApiTypeAliasJSON} />;
+		case 'Variable':
+			return <Variable data={props as ApiVariableJSON} />;
+		case 'Enum':
+			return <Enum data={props as ApiEnumJSON} />;
+		default:
+			return <div>Cannot render that item type</div>;
+	}
+};
+
+export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: string }>) {
+	const router = useRouter();
+	const name = useMemo(
+		() => `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`,
+		[props.data?.member?.name],
+	);
+	const ogTitle = useMemo(
+		() => `${props.packageName ?? 'discord.js'}${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`,
+		[props.packageName, props.data?.member?.name],
+	);
+
+	if (router.isFallback) {
+		return null;
+	}
+
+	// Just in case
+	// return <iframe src="https://discord.js.org" style={{ border: 0, height: '100%', width: '100%' }}></iframe>;
+
+	return props.error ? (
+		<div className="flex h-full max-h-full w-full max-w-full flex-row">{props.error}</div>
+	) : (
+		<CmdKProvider>
+			<MemberProvider member={props.data?.member}>
+				<SidebarLayout {...props}>
+					{props.data?.member ? (
+						<>
+							<Head>
+								<title key="title">{name}</title>
+								<meta content={ogTitle} key="og_title" property="og:title" />
+							</Head>
+							{member(props.data.member)}
+						</>
+					) : props.data?.source ? (
+						<div className="prose max-w-none">
+							<MDXRemote {...props.data.source} />
+						</div>
+					) : null}
+				</SidebarLayout>
+			</MemberProvider>
+		</CmdKProvider>
+	);
+}
+
+export const config = {
+	unstable_includeFiles: ['../{builders,collection,proxy,rest,util,voice,ws}/README.md'],
+};
--- a/apps/website/src/pages/docs/packages/[package]/index.tsx
+++ b/apps/website/src/pages/docs/packages/[package]/index.tsx
@@ -0,0 +1,93 @@
+import Link from 'next/link';
+import type { GetStaticPaths, GetStaticProps } from 'next/types';
+import { VscArrowLeft, VscArrowRight, VscVersions } from 'react-icons/vsc';
+import { PACKAGES } from '~/util/constants';
+
+interface VersionProps {
+	data: {
+		versions: string[];
+	};
+	packageName: string;
+}
+
+export const getStaticPaths: GetStaticPaths = () => {
+	const versions = PACKAGES.map((packageName) => ({ params: { package: packageName } }));
+
+	return {
+		paths: versions,
+		fallback: false,
+	};
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+	const packageName = params!.package as string;
+
+	if (!PACKAGES.includes(packageName)) {
+		return {
+			notFound: true,
+		};
+	}
+
+	try {
+		const res = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`);
+		const data: string[] = await res.json();
+
+		if (!data.length) {
+			return {
+				notFound: true,
+			};
+		}
+
+		return {
+			props: {
+				packageName,
+				data: {
+					versions: data.reverse(),
+				},
+			},
+			revalidate: 3_600,
+		};
+	} catch (error_) {
+		const error = error_ as Error;
+		console.error(error);
+
+		return {
+			props: {
+				error: error.message,
+			},
+			revalidate: 1,
+		};
+	}
+};
+
+export default function VersionsRoute(props: Partial<VersionProps> & { error?: string }) {
+	return props.error ? (
+		<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
+			{props.error}
+		</div>
+	) : (
+		<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
+			<div className="flex grow flex-col place-content-center gap-4">
+				<h1 className="text-2xl font-semibold">Select a version:</h1>
+				{props.data?.versions.map((version) => (
+					<Link href={`/docs/packages/${props.packageName}/${version}`} key={version} prefetch={false}>
+						<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white">
+							<div className="flex flex-row place-content-between place-items-center gap-4">
+								<div className="flex flex-row place-content-between place-items-center gap-4">
+									<VscVersions size={25} />
+									<h2 className="font-semibold">{version}</h2>
+								</div>
+								<VscArrowRight size={20} />
+							</div>
+						</a>
+					</Link>
+				)) ?? null}
+				<Link href="/docs/packages" prefetch={false}>
+					<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
+						<VscArrowLeft size={20} /> Go back
+					</a>
+				</Link>
+			</div>
+		</div>
+	);
+}
--- a/apps/website/src/pages/docs/packages/index.tsx
+++ b/apps/website/src/pages/docs/packages/index.tsx
@@ -0,0 +1,113 @@
+import { Button } from 'ariakit/button';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import type { GetStaticProps } from 'next/types';
+import { useCallback, type MouseEvent } from 'react';
+import { VscArrowLeft, VscArrowRight, VscPackage } from 'react-icons/vsc';
+import { PACKAGES } from '~/util/constants';
+
+interface PackageProps {
+	data: {
+		versions: { packageName: string; version: string }[];
+	};
+}
+
+export const getStaticProps: GetStaticProps = async () => {
+	try {
+		const versions = await Promise.all(
+			PACKAGES.map(async (pkg) => {
+				const response = await fetch(`https://docs.discordjs.dev/api/info?package=${pkg}`);
+				const versions = await response.json();
+				const latestVersion = versions.at(-2);
+				return { packageName: pkg, version: latestVersion };
+			}),
+		);
+
+		return {
+			props: {
+				versions,
+			},
+			revalidate: 3_600,
+		};
+	} catch (error_) {
+		const error = error_ as Error;
+		console.error(error);
+
+		return {
+			props: {
+				error: error.message,
+			},
+			revalidate: 1,
+		};
+	}
+};
+
+export default function PackagesRoute(props: Partial<PackageProps> & { error?: string }) {
+	const router = useRouter();
+
+	const findLatestVersion = useCallback(
+		(pkg: string) => props.data?.versions.find((version) => version.packageName === pkg),
+		[props.data?.versions],
+	);
+
+	const handleClick = async (ev: MouseEvent<HTMLDivElement>, packageName: string) => {
+		ev.stopPropagation();
+		void router.push(`/docs/packages/${packageName}`);
+	};
+
+	return props.error ? (
+		<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
+			{props.error}
+		</div>
+	) : (
+		<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 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
+					className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
+					href="https://discord.js.org/#/docs/discord.js"
+				>
+					<div className="flex grow flex-row place-content-between place-items-center gap-4">
+						<div className="flex grow flex-row place-content-between place-items-center gap-4">
+							<div className="flex flex-row place-content-between place-items-center gap-4">
+								<VscPackage size={25} />
+								<h2 className="font-semibold">discord.js</h2>
+							</div>
+						</div>
+						<VscArrowRight size={20} />
+					</div>
+				</a>
+				{PACKAGES.map((pkg) => (
+					<Link href={`/docs/packages/${pkg}/${findLatestVersion(pkg)?.version ?? 'main'}`} key={pkg} prefetch={false}>
+						<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white">
+							<div className="flex grow flex-row place-content-between place-items-center gap-4">
+								<div className="flex grow flex-row place-content-between place-items-center gap-4">
+									<div className="flex flex-row place-content-between place-items-center gap-4">
+										<VscPackage size={25} />
+										<h2 className="font-semibold">{pkg}</h2>
+									</div>
+									<Link href={`/docs/packages/${pkg}`} prefetch={false}>
+										<Button
+											as="div"
+											className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-0 focus:ring focus:ring-white active:translate-y-px"
+											onClick={async (ev: MouseEvent<HTMLDivElement>) => handleClick(ev, pkg)}
+											role="link"
+										>
+											Select version
+										</Button>
+									</Link>
+								</div>
+								<VscArrowRight size={20} />
+							</div>
+						</a>
+					</Link>
+				))}
+				<Link href="/" prefetch={false}>
+					<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
+						<VscArrowLeft size={20} /> Go back
+					</a>
+				</Link>
+			</div>
+		</div>
+	);
+}
--- a/apps/website/src/pages/index.tsx
+++ b/apps/website/src/pages/index.tsx
@@ -0,0 +1,61 @@
+import Image from 'next/future/image';
+import Link from 'next/link';
+import { FiExternalLink } from 'react-icons/fi';
+import vercelLogo from '../assets/powered-by-vercel.svg';
+import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
+import { CODE_EXAMPLE } from '~/util/constants';
+
+export default function IndexRoute() {
+	return (
+		<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:h-full lg:place-content-center lg:py-0 lg:px-6">
+			<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">
+						The <span className="bg-blurple relative rounded py-1 px-3 text-white">most popular</span> way to build
+						Discord <br /> bots.
+					</h1>
+					<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">
+						discord.js is a powerful node.js module that allows you to interact with the Discord API very easily. It
+						takes a much more object-oriented approach than most other JS Discord libraries, making your bot&apos;s code
+						significantly tidier and easier to comprehend.
+					</p>
+					<div className="flex flex-row gap-4">
+						<Link href="/docs" prefetch={false}>
+							<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none 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">
+								Docs
+							</a>
+						</Link>
+						<a
+							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
+							href="https://discordjs.guide"
+							rel="noopener noreferrer"
+							target="_blank"
+						>
+							Guide <FiExternalLink />
+						</a>
+						<a
+							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
+							href="https://github.com/discordjs/discord.js"
+							rel="noopener noreferrer"
+							target="_blank"
+						>
+							GitHub <FiExternalLink />
+						</a>
+					</div>
+				</div>
+				<SyntaxHighlighter code={CODE_EXAMPLE} />
+			</div>
+			<div className="flex place-content-center">
+				<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>
+		</div>
+	);
+}