From f92be4fb944e69ae1b7cf667d99e434ad2ed7491 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Tue, 11 Oct 2022 11:13:25 +0200
Subject: [PATCH] refactor: simplify path logic

---
 apps/website/src/components/CmdK.tsx          |  2 +-
 apps/website/src/components/CodeListing.tsx   |  6 ++--
 apps/website/src/components/MethodItem.tsx    |  6 ++--
 apps/website/src/components/Sections.tsx      |  4 +--
 apps/website/src/components/SidebarItems.tsx  | 13 +++-----
 apps/website/src/components/SidebarLayout.tsx | 33 ++++++++-----------
 apps/website/src/pages/404.tsx                |  2 +-
 apps/website/src/pages/docs/[...slug].tsx     | 12 +++++--
 .../pages/docs/packages/[package]/index.tsx   |  4 +--
 .../website/src/pages/docs/packages/index.tsx |  6 ++--
 apps/website/src/pages/index.tsx              |  8 ++---
 11 files changed, 46 insertions(+), 50 deletions(-)

diff --git a/apps/website/src/components/CmdK.tsx b/apps/website/src/components/CmdK.tsx
index ed75819d0456..0fadbd493953 100644
--- a/apps/website/src/components/CmdK.tsx
+++ b/apps/website/src/components/CmdK.tsx
@@ -52,7 +52,7 @@ export function CmdKDialog({
 		() =>
 			searchResults?.map((item) => (
 				<Command.Item
-					className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex flex transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
+					className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
 					key={item.id}
 					onSelect={() => {
 						void router.push(item.path);
diff --git a/apps/website/src/components/CodeListing.tsx b/apps/website/src/components/CodeListing.tsx
index 7794f1797b90..b20affd00d04 100644
--- a/apps/website/src/components/CodeListing.tsx
+++ b/apps/website/src/components/CodeListing.tsx
@@ -45,17 +45,17 @@ export function CodeListing({
 				{deprecation || readonly || optional ? (
 					<div className="flex flex-row gap-1">
 						{deprecation ? (
-							<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
+							<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 								Deprecated
 							</div>
 						) : null}
 						{readonly ? (
-							<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+							<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
 								Readonly
 							</div>
 						) : null}
 						{optional ? (
-							<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+							<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
 								Optional
 							</div>
 						) : null}
diff --git a/apps/website/src/components/MethodItem.tsx b/apps/website/src/components/MethodItem.tsx
index ef71a3e10ef8..7f77b9fcc02d 100644
--- a/apps/website/src/components/MethodItem.tsx
+++ b/apps/website/src/components/MethodItem.tsx
@@ -47,17 +47,17 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
 					(data.kind === 'Method' && method.static) ? (
 						<div className="flex flex-row gap-1">
 							{data.deprecated ? (
-								<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
+								<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 									Deprecated
 								</div>
 							) : null}
 							{data.kind === 'Method' && method.protected ? (
-								<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+								<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
 									Protected
 								</div>
 							) : null}
 							{data.kind === 'Method' && method.static ? (
-								<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+								<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
 									Static
 								</div>
 							) : null}
diff --git a/apps/website/src/components/Sections.tsx b/apps/website/src/components/Sections.tsx
index 775e17ad2fff..4f196e2d6cf6 100644
--- a/apps/website/src/components/Sections.tsx
+++ b/apps/website/src/components/Sections.tsx
@@ -66,12 +66,12 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
 						{data.deprecated || data.protected ? (
 							<div className="flex flex-row gap-1">
 								{data.deprecated ? (
-									<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
+									<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 										Deprecated
 									</div>
 								) : null}
 								{data.protected ? (
-									<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+									<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
 										Protected
 									</div>
 								) : null}
diff --git a/apps/website/src/components/SidebarItems.tsx b/apps/website/src/components/SidebarItems.tsx
index 6ba808e46d32..88fb57230994 100644
--- a/apps/website/src/components/SidebarItems.tsx
+++ b/apps/website/src/components/SidebarItems.tsx
@@ -1,7 +1,6 @@
 import { Section } from '@discordjs/ui';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { type Dispatch, type SetStateAction, useEffect, useState, useMemo } from 'react';
+import { type Dispatch, type SetStateAction, useMemo } from 'react';
 import {
 	VscSymbolClass,
 	VscSymbolEnum,
@@ -68,18 +67,14 @@ function resolveIcon(item: keyof GroupedMembers) {
 export function SidebarItems({
 	members,
 	setOpened,
+	asPath,
 }: {
+	asPath: string;
 	members: Members;
 	setOpened: Dispatch<SetStateAction<boolean>>;
 }) {
-	const router = useRouter();
-	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
 	const groupItems = useMemo(() => groupMembers(members), [members]);
 
-	useEffect(() => {
-		setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');
-	}, [router.asPath]);
-
 	return (
 		<div className="flex flex-col gap-3 p-3 pb-32 lg:pb-12">
 			{(Object.keys(groupItems) as (keyof GroupedMembers)[])
@@ -90,7 +85,7 @@ export function SidebarItems({
 							<Link href={member.path} key={index} prefetch={false}>
 								<a
 									className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
-										asPathWithoutQueryAndAnchor === member.path
+										asPath === member.path
 											? 'bg-blurple text-white'
 											: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
 									}`}
diff --git a/apps/website/src/components/SidebarLayout.tsx b/apps/website/src/components/SidebarLayout.tsx
index 5d85ff093731..b913c5ebc5c1 100644
--- a/apps/website/src/components/SidebarLayout.tsx
+++ b/apps/website/src/components/SidebarLayout.tsx
@@ -1,9 +1,8 @@
-import type { getMembers, ApiItemJSON, ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
+import type { getMembers, ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
 import { Button } from 'ariakit/button';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import Image from 'next/future/image';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
 import { useTheme } from 'next-themes';
 import { type PropsWithChildren, useState, useEffect, useMemo, Fragment } from 'react';
@@ -29,15 +28,14 @@ import { fetcher } from '~/util/fetcher';
 import type { findMember } from '~/util/model.server';
 
 export interface SidebarLayoutProps {
+	asPath: string;
 	branchName: string;
 	data: {
-		member: ReturnType<typeof findMember>;
+		member?: ReturnType<typeof findMember>;
 		members: ReturnType<typeof getMembers>;
 		source: MDXRemoteSerializeResult;
 	};
 	packageName: string;
-
-	selectedMember?: ApiItemJSON | undefined;
 }
 
 export type Members = SidebarLayoutProps['data']['members'];
@@ -55,11 +53,10 @@ export function SidebarLayout({
 	packageName,
 	branchName,
 	data,
+	asPath,
 	children,
-}: PropsWithChildren<Partial<SidebarLayoutProps>>) {
-	const router = useRouter();
+}: PropsWithChildren<SidebarLayoutProps>) {
 	const dialog = useCmdK();
-	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
 	const { data: versions } = useSWR<string[]>(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher);
 	const { resolvedTheme, setTheme } = useTheme();
 	const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
@@ -75,9 +72,7 @@ export function SidebarLayout({
 		}
 	}, [matches]);
 
-	useEffect(() => {
-		setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0] ?? '');
-	}, [router.asPath]);
+	const asPathWithoutContainerKey = useMemo(() => asPath?.split(':')[0] ?? '', [asPath]);
 
 	const packageMenuItems = useMemo(
 		() => [
@@ -129,7 +124,7 @@ export function SidebarLayout({
 
 	const pathElements = useMemo(
 		() =>
-			asPathWithoutQueryAndAnchor
+			asPathWithoutContainerKey
 				.split('/')
 				.slice(1)
 				.map((path, idx, original) => (
@@ -137,7 +132,7 @@ export function SidebarLayout({
 						<a className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring">{path}</a>
 					</Link>
 				)),
-		[asPathWithoutQueryAndAnchor],
+		[asPathWithoutContainerKey],
 	);
 
 	const breadcrumbs = useMemo(
@@ -174,12 +169,12 @@ export function SidebarLayout({
 					<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"
+							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 md:flex md:flex-row">{breadcrumbs}</div>
+						<div className="hidden md:flex md:flex-row md:overflow-hidden">{breadcrumbs}</div>
 						<div className="flex flex-row place-items-center gap-4">
 							<Button
 								as="div"
@@ -189,7 +184,7 @@ export function SidebarLayout({
 								<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">
+									<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
 										<FiCommand size={18} /> K
 									</div>
 								</div>
@@ -197,7 +192,7 @@ export function SidebarLayout({
 							<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"
+								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"
@@ -206,7 +201,7 @@ export function SidebarLayout({
 							</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-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+								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-full rounded 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} />
@@ -277,7 +272,7 @@ export function SidebarLayout({
 							{versionMenuItems}
 						</Menu>
 					</div>
-					<SidebarItems members={data?.members ?? []} setOpened={setOpened} />
+					<SidebarItems asPath={asPath} members={data?.members ?? []} setOpened={setOpened} />
 				</Scrollbars>
 			</nav>
 			<main
diff --git a/apps/website/src/pages/404.tsx b/apps/website/src/pages/404.tsx
index 5ac5c1969fbb..e52bf19fc3fb 100644
--- a/apps/website/src/pages/404.tsx
+++ b/apps/website/src/pages/404.tsx
@@ -12,7 +12,7 @@ export default function FourOhFourPage() {
 				<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">
+					<a 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">
 						Take me back
 					</a>
 				</Link>
diff --git a/apps/website/src/pages/docs/[...slug].tsx b/apps/website/src/pages/docs/[...slug].tsx
index 432f378ec569..b50200ed6490 100644
--- a/apps/website/src/pages/docs/[...slug].tsx
+++ b/apps/website/src/pages/docs/[...slug].tsx
@@ -20,7 +20,7 @@ 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 { useEffect, useMemo, useState } from 'react';
 import rehypeIgnore from 'rehype-ignore';
 import rehypePrettyCode, { type Options } from 'rehype-pretty-code';
 import rehypeRaw from 'rehype-raw';
@@ -280,8 +280,10 @@ function member(props?: ApiItemJSON | undefined) {
 	}
 }
 
-export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: string }>) {
+export default function SlugPage(props: SidebarLayoutProps & { error?: string }) {
 	const router = useRouter();
+	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
+
 	const name = useMemo(
 		() => `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`,
 		[props.data?.member?.name],
@@ -295,6 +297,10 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
 		[props.packageName, props.data?.member],
 	);
 
+	useEffect(() => {
+		setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');
+	}, [router.asPath]);
+
 	if (router.isFallback) {
 		return null;
 	}
@@ -307,7 +313,7 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
 	) : (
 		<CmdKProvider>
 			<MemberProvider member={props.data?.member}>
-				<SidebarLayout {...props}>
+				<SidebarLayout {...props} asPath={asPathWithoutQueryAndAnchor}>
 					{props.data?.member ? (
 						<>
 							<Head>
diff --git a/apps/website/src/pages/docs/packages/[package]/index.tsx b/apps/website/src/pages/docs/packages/[package]/index.tsx
index 18a87aeaced0..9643a856b6ca 100644
--- a/apps/website/src/pages/docs/packages/[package]/index.tsx
+++ b/apps/website/src/pages/docs/packages/[package]/index.tsx
@@ -71,7 +71,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
 				<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">
+						<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 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} />
@@ -83,7 +83,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
 					</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">
+					<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row 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>
diff --git a/apps/website/src/pages/docs/packages/index.tsx b/apps/website/src/pages/docs/packages/index.tsx
index b7613f39343d..f5df38ce852e 100644
--- a/apps/website/src/pages/docs/packages/index.tsx
+++ b/apps/website/src/pages/docs/packages/index.tsx
@@ -79,7 +79,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
 				</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">
+						<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 flex-row 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">
@@ -89,7 +89,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
 									<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"
+											className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row 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"
 										>
@@ -103,7 +103,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
 					</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">
+					<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row 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>
diff --git a/apps/website/src/pages/index.tsx b/apps/website/src/pages/index.tsx
index 899e43d5dd43..3e9e58c88b8e 100644
--- a/apps/website/src/pages/index.tsx
+++ b/apps/website/src/pages/index.tsx
@@ -21,12 +21,12 @@ export default function IndexRoute() {
 					</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">
+							<a 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">
 								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"
+							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 flex-row 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"
@@ -34,7 +34,7 @@ export default function IndexRoute() {
 							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"
+							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 flex-row 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"
@@ -45,7 +45,7 @@ export default function IndexRoute() {
 				</div>
 				<SyntaxHighlighter code={CODE_EXAMPLE} />
 			</div>
-			<div className="flex place-content-center">
+			<div className="flex flex-row 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"