feat: redirect for stable

packages/website/src/middleware.ts

@@ -1,9 +1,21 @@
 import { NextResponse, type NextRequest } from 'next/server';
+import { PACKAGES } from './util/constants';
+
+export default async function middleware(request: NextRequest) {
+	if (PACKAGES.some((pkg) => request.nextUrl.pathname.includes(pkg))) {
+		const packageName = /\/docs\/packages\/([^/]+)\/.*/.exec(request.nextUrl.pathname)?.[1] ?? 'builders';
+		const res = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`);
+		const data: string[] = await res.json();
+
+		const latestVersion = data.at(-2);
+		return NextResponse.redirect(
+			new URL(request.nextUrl.pathname.replace('stable', latestVersion ?? 'main'), request.url),
+		);
+	}
 
-export default function middleware(request: NextRequest) {
 	return NextResponse.redirect(new URL('/docs/packages', request.url));
 }
 
 export const config = {
-	matcher: ['/docs'],
+	matcher: ['/docs', '/docs/packages/:package/stable/:member*'],
 };

packages/website/src/pages/docs/[...slug].tsx

@@ -15,6 +15,7 @@ import {
 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';
@@ -124,7 +125,13 @@ export const getStaticPaths: GetStaticPaths = async () => {
 };
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-	const [, packageName = 'builders', branchName = 'main', member] = params!.slug as string[];
+	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(':') ?? [];
 
@@ -235,6 +242,7 @@ const member = (props?: ApiItemJSON | undefined) => {
 };
 
 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],
@@ -244,6 +252,10 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
 		[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>;
 

packages/website/src/pages/docs/packages/[package]/index.tsx

@@ -21,20 +21,21 @@ export const getStaticPaths: GetStaticPaths = () => {
 };
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-	const packageName = params!.package as string | undefined;
+	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 ?? 'builders'}`);
+		const res = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`);
 		const data: string[] = await res.json();
 
 		if (!data.length) {
-			console.error('No tags');
-
 			return {
-				props: {
-					error: 'No tags',
-				},
-				revalidate: 3_600,
+				notFound: true,
 			};
 		}
 

packages/website/src/pages/docs/packages/index.tsx

@@ -1,53 +1,81 @@
 import { Button } from 'ariakit/button';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import type { MouseEvent } from 'react';
+import type { GetStaticProps } from 'next/types';
+import { useCallback, type MouseEvent } from 'react';
 import { VscArrowRight, VscPackage } from 'react-icons/vsc';
 import { PACKAGES } from '~/util/constants';
 
-export default function PackagesRoute() {
+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_,
+			},
+			revalidate: 3_600,
+		};
+	}
+};
+
+export default function PackagesRoute(props: { versions: { packageName: string; version: string }[] }) {
 	const router = useRouter();
+	const findLatestVersion = useCallback(
+		(pkg: string) => props.versions.find((version) => version.packageName === pkg),
+		[props.versions],
+	);
 
 	const handleClick = async (ev: MouseEvent<HTMLDivElement>, packageName: string) => {
 		ev.stopPropagation();
-
-		const res = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName ?? 'builders'}`);
-		const data: string[] = await res.json();
-
-		const latestVersion = data.at(-2);
-		void router.push(`/docs/packages/${packageName}/${latestVersion}`);
+		void router.push(`/docs/packages/${packageName}`);
 	};
 
 	return (
 		<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>
 				{PACKAGES.map((pkg) => (
-					<Button
-						key={pkg}
-						as="div"
-						className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-center rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
-						role="link"
-						onClick={(ev: MouseEvent<HTMLDivElement>) => void handleClick(ev, pkg)}
-					>
-						<div className="flex flex-row place-content-between place-items-center gap-4">
+					<Link key={pkg} href={`/docs/packages/${pkg}/${findLatestVersion(pkg)?.version ?? 'main'}`} prefetch={false}>
+						<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 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 hover:bg-neutral-100 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 flex-row place-content-between place-items-center gap-4">
-									<VscPackage size={25} />
-									<h2 className="font-semibold">{pkg}</h2>
+								<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"
+											role="link"
+											className="bg-blurple 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 active:translate-y-px"
+											onClick={async (ev: MouseEvent<HTMLDivElement>) => handleClick(ev, pkg)}
+										>
+											Select version
+										</Button>
+									</Link>
 								</div>
-								<Link href={`/docs/packages/${pkg}`} prefetch={false}>
-									<a
-										className="bg-blurple flex h-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white active:translate-y-px"
-										onClick={(ev: MouseEvent<HTMLAnchorElement>) => ev.stopPropagation()}
-									>
-										Select version
-									</a>
-								</Link>
+								<VscArrowRight size={20} />
 							</div>
-							<VscArrowRight size={20} />
-						</div>
-					</Button>
+						</a>
+					</Link>
 				))}
 			</div>
 		</div>