fix: correctly configure middleware

packages/website/next.config.js

@@ -1,6 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-const UnoCSS = require('@unocss/webpack').default;
-
 /**
  * @type {import('next').NextConfig}
  */
@@ -20,19 +17,4 @@ module.exports = {
 		dangerouslyAllowSVG: true,
 		contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
 	},
-	webpack(config, context) {
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-		config.plugins.push(UnoCSS());
-
-		if (context.buildId !== 'development') {
-			// * disable filesystem cache for build
-			// * https://github.com/unocss/unocss/issues/419
-			// * https://webpack.js.org/configuration/cache/
-			// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-			config.cache = false;
-		}
-
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-return
-		return config;
-	},
 };

packages/website/package.json

@@ -5,9 +5,11 @@
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
-		"build": "next build",
+		"build": "yarn build:css && yarn build:next",
+		"build:next": "next build",
 		"build:css": "yarn generate:css",
-		"dev": "next dev",
+		"dev": "concurrently 'yarn dev:css' 'yarn dev:next'",
+		"dev:next": "next dev",
 		"dev:css": "yarn generate:css --watch",
 		"generate:css": "unocss 'src/**/*.tsx' --out-file ./src/styles/unocss.css",
 		"lint": "prettier --check . && eslint src --ext mjs,js,ts,tsx",
@@ -70,9 +72,9 @@
 		"@unocss/cli": "^0.44.5",
 		"@unocss/preset-web-fonts": "^0.44.5",
 		"@unocss/reset": "^0.44.5",
-		"@unocss/webpack": "^0.44.5",
 		"@vitejs/plugin-react": "^2.0.0",
 		"c8": "^7.12.0",
+		"concurrently": "^7.3.0",
 		"cypress": "^10.3.1",
 		"eslint": "^8.20.0",
 		"eslint-config-marine": "^9.4.1",

packages/website/src/middleware.ts

@@ -2,9 +2,9 @@ import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 
 export default function middleware(request: NextRequest) {
-	const packages = ['builders', 'collection', 'proxy', 'rest', 'voice'];
-	if (packages.some((pkg) => request.nextUrl.pathname.includes(pkg))) {
-		return NextResponse.redirect(new URL('/docs/packages/collection/Collection', request.url));
-	}
-	return NextResponse.next();
+	return NextResponse.rewrite(new URL('/docs/main/packages/builders', request.url));
 }
+
+export const config = {
+	matcher: ['/docs', '/docs/:branch', '/docs/:branch/packages'],
+};

packages/website/src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import type { AppProps } from 'next/app';
 import '@unocss/reset/normalize.css';
-import 'uno.css';
+import '../styles/unocss.css';
 import '../styles/main.css';
 
 export default function MyApp({ Component, pageProps }: AppProps) {

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

@@ -27,17 +27,21 @@ export const getStaticPaths: GetStaticPaths = async () => {
 					return { params: { slug: ['main', 'packages', packageName] } };
 				}
 
-				const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/main.api.json`);
-				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-				const data = await res.json();
+				try {
+					const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/main.api.json`);
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+					const data = await res.json();
 
-				const model = createApiModel(data);
-				const pkg = findPackage(model, packageName);
+					const model = createApiModel(data);
+					const pkg = findPackage(model, packageName);
 
-				return [
-					{ params: { slug: ['main', 'packages', packageName] } },
-					...getMembers(pkg!).map((member) => ({ params: { slug: ['main', 'packages', packageName, member.name] } })),
-				];
+					return [
+						{ params: { slug: ['main', 'packages', packageName] } },
+						...getMembers(pkg!).map((member) => ({ params: { slug: ['main', 'packages', packageName, member.name] } })),
+					];
+				} catch {
+					return { params: { slug: ['', '', '', ''] } };
+				}
 			}),
 		)
 	).flat();
@@ -51,22 +55,30 @@ export const getStaticPaths: GetStaticPaths = async () => {
 export const getStaticProps: GetStaticProps = async ({ params }) => {
 	const [branchName = 'main', , packageName = 'builders', memberName] = params!.slug as string[];
 
-	const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${branchName}.api.json`);
-	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-	const data = await res.json();
+	try {
+		const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${branchName}.api.json`);
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		const data = await res.json();
 
-	const model = createApiModel(data);
-	const pkg = findPackage(model, packageName);
+		const model = createApiModel(data);
+		const pkg = findPackage(model, packageName);
 
-	return {
-		props: {
-			packageName,
-			data: {
-				members: pkg ? getMembers(pkg) : [],
-				member: memberName ? findMember(model, packageName, memberName)?.toJSON() ?? null : null,
+		return {
+			props: {
+				packageName,
+				data: {
+					members: pkg ? getMembers(pkg) : [],
+					member: memberName ? findMember(model, packageName, memberName)?.toJSON() ?? null : null,
+				},
 			},
-		},
-	};
+		};
+	} catch {
+		return {
+			props: {
+				error: 'FetchError',
+			},
+		};
+	}
 };
 
 const member = (props: any) => {
@@ -89,8 +101,12 @@ const member = (props: any) => {
 	}
 };
 
-export default function Slug(props: Partial<ItemListProps & { data: { member: ReturnType<typeof findMember> } }>) {
-	return (
+export default function Slug(
+	props: Partial<ItemListProps & { error?: string; data: { member: ReturnType<typeof findMember> } }>,
+) {
+	return props.error ? (
+		<div className="flex max-w-full h-full bg-white dark:bg-dark">{props.error}</div>
+	) : (
 		<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full bg-white dark:bg-dark">
 			<div className="w-full lg:min-w-1/4 lg:max-w-1/4">
 				{props.packageName && props.data ? <ItemSidebar packageName={props.packageName} data={props.data} /> : null}