From 49627b1f46e01d9b6f7c41c63bbd72d9c6a4a0a5 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Sat, 15 Apr 2023 14:03:03 +0200
Subject: [PATCH] chore(website): add banner

---
 apps/guide/src/app/page.tsx                   |   2 +-
 apps/guide/src/components/Footer.tsx          |  12 +-
 apps/guide/src/components/Header.tsx          |   2 +-
 .../packages/[package]/[version]/layout.tsx   |   4 +-
 apps/website/src/app/page.tsx                 | 106 +++++++++---------
 apps/website/src/components/Banner.tsx        |  13 +++
 apps/website/src/components/Footer.tsx        |  10 +-
 apps/website/src/components/Header.tsx        |   2 +-
 8 files changed, 85 insertions(+), 66 deletions(-)
 create mode 100644 apps/website/src/components/Banner.tsx

diff --git a/apps/guide/src/app/page.tsx b/apps/guide/src/app/page.tsx
index 4ae27b01f..daedca5d8 100644
--- a/apps/guide/src/app/page.tsx
+++ b/apps/guide/src/app/page.tsx
@@ -8,7 +8,7 @@ export default function Page() {
 				<a
 					className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 					href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
-					rel="noopener noreferrer"
+					rel="external noopener noreferrer"
 					target="_blank"
 					title="Vercel"
 				>
diff --git a/apps/guide/src/components/Footer.tsx b/apps/guide/src/components/Footer.tsx
index f2b3cec8e..45167ec8d 100644
--- a/apps/guide/src/components/Footer.tsx
+++ b/apps/guide/src/components/Footer.tsx
@@ -9,7 +9,7 @@ export default function Footer() {
 					<a
 						className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
-						rel="noopener noreferrer"
+						rel="external noopener noreferrer"
 						target="_blank"
 						title="Vercel"
 					>
@@ -27,7 +27,7 @@ export default function Footer() {
 								<a
 									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://discord.gg/djs"
-									rel="noopener noreferrer"
+									rel="external noopener noreferrer"
 									target="_blank"
 								>
 									Discord
@@ -35,7 +35,7 @@ export default function Footer() {
 								<a
 									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://github.com/discordjs/discord.js/discussions"
-									rel="noopener noreferrer"
+									rel="external noopener noreferrer"
 									target="_blank"
 								>
 									GitHub discussions
@@ -48,14 +48,14 @@ export default function Footer() {
 								<a
 									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://github.com/discordjs/discord.js"
-									rel="noopener noreferrer"
+									rel="external noopener noreferrer"
 									target="_blank"
 								>
 									discord.js
 								</a>
 								<a
 									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://discord.js.org/docs/"
+									href="https://discord.js.org/docs"
 									rel="noopener noreferrer"
 									target="_blank"
 								>
@@ -64,7 +64,7 @@ export default function Footer() {
 								<a
 									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://discord-api-types.dev"
-									rel="noopener noreferrer"
+									rel="external noopener noreferrer"
 									target="_blank"
 								>
 									discord-api-types
diff --git a/apps/guide/src/components/Header.tsx b/apps/guide/src/components/Header.tsx
index 310679123..0f889454b 100644
--- a/apps/guide/src/components/Header.tsx
+++ b/apps/guide/src/components/Header.tsx
@@ -77,7 +77,7 @@ export default function Header() {
 							as="a"
 							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
 							href="https://github.com/discordjs/discord.js"
-							rel="noopener noreferrer"
+							rel="external noopener noreferrer"
 							target="_blank"
 						>
 							<VscGithubInverted size={24} />
diff --git a/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx b/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
index fa6bce190..225002d21 100644
--- a/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
+++ b/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
@@ -6,6 +6,7 @@ import { notFound } from 'next/navigation';
 import type { PropsWithChildren } from 'react';
 import { Providers } from './providers';
 import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
+import { Banner } from '~/components/Banner';
 import { CmdKDialog } from '~/components/CmdK';
 import { Nav } from '~/components/Nav';
 import type { SidebarSectionItemData } from '~/components/Sidebar';
@@ -69,9 +70,10 @@ export default async function PackageLayout({ children, params }: PropsWithChild
 
 	return (
 		<Providers>
+			<Banner />
 			<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
 				<Header />
-				<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
+				<div className="relative top-2.5 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
 					<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
 						<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
 					</div>
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index b67bcf768..a4674eac7 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -2,66 +2,70 @@ import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
 import Image from 'next/image';
 import Link from 'next/link';
 import vercelLogo from '~/assets/powered-by-vercel.svg';
+import { Banner } from '~/components/Banner';
 import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
 import { DESCRIPTION, CODE_EXAMPLE } from '~/util/constants';
 
 export default function Page() {
 	return (
-		<div className="mx-auto max-w-6xl min-h-screen flex flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0">
-			<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
-				<div className="max-w-lg flex flex-col gap-3 lg:mr-8">
-					<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
-						The <span className="relative rounded bg-blurple px-3 py-1 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">{DESCRIPTION}</p>
-					<div className="flex flex-row gap-4">
-						<Link
-							className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
-							href="/docs"
-						>
-							Docs
-						</Link>
-						<a
-							className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
-							href="https://discordjs.guide"
-							rel="noopener noreferrer"
-							target="_blank"
-						>
-							Guide <FiExternalLink />
-						</a>
-						<a
-							className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
-							href="https://github.com/discordjs/discord.js"
-							rel="noopener noreferrer"
-							target="_blank"
-						>
-							GitHub <FiExternalLink />
-						</a>
+		<div className="min-h-screen">
+			<Banner />
+			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 px-8 py-16 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-0">
+				<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
+					<div className="max-w-lg flex flex-col gap-3 lg:mr-8">
+						<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
+							The <span className="relative rounded bg-blurple px-3 py-1 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">{DESCRIPTION}</p>
+						<div className="flex flex-row gap-4">
+							<Link
+								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
+								href="/docs"
+							>
+								Docs
+							</Link>
+							<a
+								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+								href="https://discordjs.guide"
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								Guide <FiExternalLink />
+							</a>
+							<a
+								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+								href="https://github.com/discordjs/discord.js"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								GitHub <FiExternalLink />
+							</a>
+						</div>
+					</div>
+					<div className="max-w-xs sm:max-w-2xl">
+						{/* @ts-expect-error async component */}
+						<SyntaxHighlighter code={CODE_EXAMPLE} />
 					</div>
 				</div>
-				<div className="max-w-xs sm:max-w-6xl">
-					{/* @ts-expect-error async component */}
-					<SyntaxHighlighter code={CODE_EXAMPLE} />
+				<div className="flex flex-row place-content-center">
+					<a
+						className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+						rel="external noopener noreferrer"
+						target="_blank"
+						title="Vercel"
+					>
+						<Image
+							alt="Vercel"
+							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+							placeholder="blur"
+							priority
+							src={vercelLogo}
+						/>
+					</a>
 				</div>
 			</div>
-			<div className="flex flex-row place-content-center">
-				<a
-					className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
-					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"
-						priority
-						src={vercelLogo}
-					/>
-				</a>
-			</div>
 		</div>
 	);
 }
diff --git a/apps/website/src/components/Banner.tsx b/apps/website/src/components/Banner.tsx
new file mode 100644
index 000000000..9447b09fb
--- /dev/null
+++ b/apps/website/src/components/Banner.tsx
@@ -0,0 +1,13 @@
+export function Banner() {
+	return (
+		<div className="mb-6 bg-blurple px-4 py-2 text-center text-sm text-white">
+			You are reading the documentation for the <strong>next</strong> version of discord.js. Documentation for v13/v14+
+			has been moved to{' '}
+			<strong>
+				<a href="https://old.discordjs.dev/#/docs" rel="external noopener noreferrer" target="_blank">
+					old.discordjs.dev
+				</a>
+			</strong>
+		</div>
+	);
+}
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
index f7f95ee21..97fe9b798 100644
--- a/apps/website/src/components/Footer.tsx
+++ b/apps/website/src/components/Footer.tsx
@@ -9,7 +9,7 @@ export default function Footer() {
 					<a
 						className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
-						rel="noopener noreferrer"
+						rel="external noopener noreferrer"
 						target="_blank"
 						title="Vercel"
 					>
@@ -27,7 +27,7 @@ export default function Footer() {
 								<a
 									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://discord.gg/djs"
-									rel="noopener noreferrer"
+									rel="external noopener noreferrer"
 									target="_blank"
 								>
 									Discord
@@ -35,7 +35,7 @@ export default function Footer() {
 								<a
 									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://github.com/discordjs/discord.js/discussions"
-									rel="noopener noreferrer"
+									rel="external noopener noreferrer"
 									target="_blank"
 								>
 									GitHub discussions
@@ -48,7 +48,7 @@ export default function Footer() {
 								<a
 									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://github.com/discordjs/discord.js"
-									rel="noopener noreferrer"
+									rel="external noopener noreferrer"
 									target="_blank"
 								>
 									discord.js
@@ -64,7 +64,7 @@ export default function Footer() {
 								<a
 									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://discord-api-types.dev"
-									rel="noopener noreferrer"
+									rel="external noopener noreferrer"
 									target="_blank"
 								>
 									discord-api-types
diff --git a/apps/website/src/components/Header.tsx b/apps/website/src/components/Header.tsx
index 7ffb0c390..e8edde50e 100644
--- a/apps/website/src/components/Header.tsx
+++ b/apps/website/src/components/Header.tsx
@@ -94,7 +94,7 @@ export default function Header() {
 							as="a"
 							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
 							href="https://github.com/discordjs/discord.js"
-							rel="noopener noreferrer"
+							rel="external noopener noreferrer"
 							target="_blank"
 						>
 							<VscGithubInverted size={24} />