refactor: split out package constant

packages/website/src/components/SidebarLayout.tsx

@@ -34,6 +34,7 @@ import useSWR from 'swr';
 import { SidebarItems } from './SidebarItems';
 import type { ApiItemJSON } from '~/DocModel/ApiNodeJSONEncoder';
 import type { findMember } from '~/util/model.server';
+import { PACKAGES } from '~/util/packages';
 import type { getMembers } from '~/util/parse.server';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
@@ -89,19 +90,9 @@ const useStyles = createStyles(
 	}),
 );
 
-const libraries = [
+const packageMenuItems = PACKAGES.map((pkg) => (
-	{ label: 'builders', value: 'builders' },
+	<Menu.Item key={pkg} component={NextLink} href={`/docs/packages/${pkg}/main`}>
-	{ label: 'collection', value: 'collection' },
+		{pkg}
-	{ label: 'discord.js', value: 'discord.js' },
-	{ label: 'proxy', value: 'proxy' },
-	{ label: 'rest', value: 'rest' },
-	{ label: 'voice', value: 'voice' },
-	{ label: 'ws', value: 'ws' },
-];
-
-const libraryMenuItems = libraries.map((item) => (
-	<Menu.Item key={item.label} component={NextLink} href={`/docs/packages/${item.value}/main`}>
-		{item.label}
 	</Menu.Item>
 ));
 
@@ -191,7 +182,7 @@ export function SidebarLayout({
 													</Group>
 												</UnstyledButton>
 											</Menu.Target>
-											<Menu.Dropdown>{libraryMenuItems}</Menu.Dropdown>
+											<Menu.Dropdown>{packageMenuItems}</Menu.Dropdown>
 										</Menu>
 
 										<Menu

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

@@ -32,14 +32,13 @@ import { Variable } from '~/components/model/Variable';
 import { MemberProvider } from '~/contexts/member';
 import { createApiModel } from '~/util/api-model.server';
 import { findMember, findMemberByKey } from '~/util/model.server';
+import { PACKAGES } from '~/util/packages';
 import { findPackage, getMembers } from '~/util/parse.server';
 
 export const getStaticPaths: GetStaticPaths = async () => {
-	const packages = ['builders', 'collection', 'proxy', 'rest', 'voice', 'ws'];
-
 	const pkgs = (
 		await Promise.all(
-			packages.map(async (packageName) => {
+			PACKAGES.map(async (packageName) => {
 				try {
 					let data: any[] = [];
 					let versions: string[] = [];
@@ -121,7 +120,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 	return {
 		paths: pkgs,
-		fallback: true,
+		fallback: 'blocking',
 	};
 };
 

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

@@ -15,6 +15,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import type { GetStaticPaths, GetStaticProps } from 'next/types';
 import { VscArrowLeft, VscArrowRight, VscPackage } from 'react-icons/vsc';
+import { PACKAGES } from '~/util/packages';
 
 interface VersionProps {
 	packageName: string;
@@ -24,9 +25,7 @@ interface VersionProps {
 }
 
 export const getStaticPaths: GetStaticPaths = () => {
-	const packages = ['builders', 'collection', 'proxy', 'rest', 'voice', 'ws'];
+	const versions = PACKAGES.map((packageName) => ({ params: { package: packageName } }));
-
-	const versions = packages.map((packageName) => ({ params: { package: packageName } }));
 
 	return {
 		paths: versions,

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

@@ -11,6 +11,7 @@ import {
 } from '@mantine/core';
 import Link from 'next/link';
 import { VscArrowRight, VscPackage } from 'react-icons/vsc';
+import { PACKAGES } from '~/util/packages';
 
 const useStyles = createStyles((theme) => ({
 	control: {
@@ -29,15 +30,13 @@ export default function PackagesRoute() {
 	const { classes } = useStyles();
 	const { colorScheme } = useMantineColorScheme();
 
-	const packages = ['builders', 'collection', 'proxy', 'rest', 'voice', 'ws'];
-
 	return (
 		<Container pt={128} size="xs">
 			<Stack sx={{ flexGrow: 1 }}>
 				<Title order={2} ml="xs">
 					Select a package:
 				</Title>
-				{packages.map((pkg) => (
+				{PACKAGES.map((pkg) => (
 					<Link key={pkg} href={`/docs/packages/${pkg}`} passHref>
 						<UnstyledButton className={classes.control} component="a">
 							<Group position="apart">

packages/website/src/util/packages.ts

@@ -0,0 +1 @@
+export const PACKAGES = ['builders', 'collection', 'proxy', 'rest', 'voice', 'ws'];

packages/website/src/util/parse.server.ts

@@ -25,6 +25,7 @@ export function findPackage(model: ApiModel, name: string): ApiPackage | undefin
 
 export function generatePath(items: readonly ApiItem[], version: string) {
 	let path = '/docs/packages';
+
 	for (const item of items) {
 		switch (item.kind) {
 			case ApiItemKind.Model: