refactor: website components (#8600)

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

@@ -13,22 +13,23 @@ import {
 	type ApiEnumJSON,
 } from '@discordjs/api-extractor-utils';
 import { createApiModel } from '@discordjs/scripts';
-import { ActionIcon, Affix, Box, LoadingOverlay, Transition } from '@mantine/core';
-import { useMediaQuery, useWindowScroll } from '@mantine/hooks';
-import { registerSpotlightActions } from '@mantine/spotlight';
 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';
-import { useEffect } from 'react';
-import { VscChevronUp } from 'react-icons/vsc';
+import { useMemo } from 'react';
 import rehypeIgnore from 'rehype-ignore';
-import rehypePrettyCode from 'rehype-pretty-code';
+import rehypePrettyCode, { type Options } from 'rehype-pretty-code';
 import rehypeRaw from 'rehype-raw';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
+import { getHighlighter } from 'shiki';
+import shikiLangJavascript from 'shiki/languages/javascript.tmLanguage.json';
+import shikiLangTypescript from 'shiki/languages/typescript.tmLanguage.json';
+import shikiThemeDarkPlus from 'shiki/themes/dark-plus.json';
+import shikiThemeLightPlus from 'shiki/themes/light-plus.json';
 import { SidebarLayout, type SidebarLayoutProps } from '~/components/SidebarLayout';
 import { Class } from '~/components/model/Class';
 import { Enum } from '~/components/model/Enum';
@@ -37,9 +38,9 @@ import { Interface } from '~/components/model/Interface';
 import { TypeAlias } from '~/components/model/TypeAlias';
 import { Variable } from '~/components/model/Variable';
 import { MemberProvider } from '~/contexts/member';
+import { PACKAGES } from '~/util/constants';
 import { findMember, findMemberByKey } from '~/util/model.server';
-import { PACKAGES } from '~/util/packages';
-import { miniSearch } from '~/util/search';
+// import { miniSearch } from '~/util/search';
 
 export const getStaticPaths: GetStaticPaths = async () => {
 	const pkgs = (
@@ -54,6 +55,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 					} else {
 						const response = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`);
 						versions = await response.json();
+						versions = versions.slice(-2);
 
 						for (const version of versions) {
 							const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${version}.api.json`);
@@ -123,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(':') ?? [];
 
@@ -134,7 +142,30 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 			mdxOptions: {
 				remarkPlugins: [remarkGfm],
 				remarkRehypeOptions: { allowDangerousHtml: true },
-				rehypePlugins: [rehypeRaw, rehypeIgnore, rehypeSlug, [rehypePrettyCode, { theme: 'dark-plus' }]],
+				rehypePlugins: [
+					rehypeRaw,
+					rehypeIgnore,
+					rehypeSlug,
+					[
+						rehypePrettyCode,
+						{
+							theme: {
+								dark: shikiThemeDarkPlus,
+								light: shikiThemeLightPlus,
+							},
+							getHighlighter: async (options?: Partial<Options>) =>
+								getHighlighter({
+									...options,
+									langs: [
+										// @ts-expect-error: Working as intended
+										{ id: 'javascript', aliases: ['js'], scopeName: 'source.js', grammar: shikiLangJavascript },
+										// @ts-expect-error: Working as intended
+										{ id: 'typescript', aliases: ['ts'], scopeName: 'source.ts', grammar: shikiLangTypescript },
+									],
+								}),
+						},
+					],
+				],
 				format: 'md',
 			},
 		});
@@ -186,7 +217,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 			props: {
 				error: error_,
 			},
-			revalidate: 3_600,
+			revalidate: 1,
 		};
 	}
 };
@@ -206,46 +237,30 @@ const member = (props?: ApiItemJSON | undefined) => {
 		case 'Enum':
 			return <Enum data={props as ApiEnumJSON} />;
 		default:
-			return <Box>Cannot render that item type</Box>;
+			return <div>Cannot render that item type</div>;
 	}
 };
 
 export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: string }>) {
 	const router = useRouter();
-	const [scroll, scrollTo] = useWindowScroll();
-	const matches = useMediaQuery('(max-width: 1200px)');
-
-	useEffect(() => {
-		if (props.data?.searchIndex) {
-			const searchIndex = props.data?.searchIndex.map((idx, index) => ({ id: index, ...idx })) ?? [];
-			miniSearch.addAll(searchIndex);
-
-			registerSpotlightActions(
-				searchIndex.map((idx) => ({
-					title: idx.name,
-					description: idx.summary ?? '',
-					onTrigger: () => void router.push(idx.path),
-				})),
-			);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	const name = `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`;
+	const name = useMemo(
+		() => `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`,
+		[props.data?.member?.name],
+	);
+	const ogTitle = useMemo(
+		() => `${props.packageName ?? 'discord.js'}${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`,
+		[props.packageName, props.data?.member?.name],
+	);
 
 	if (router.isFallback) {
-		return (
-			<SidebarLayout>
-				<LoadingOverlay visible overlayBlur={2} />
-			</SidebarLayout>
-		);
+		return null;
 	}
 
 	// Just in case
 	// return <iframe src="https://discord.js.org" style={{ border: 0, height: '100%', width: '100%' }}></iframe>;
 
 	return props.error ? (
-		<Box sx={{ display: 'flex', maxWidth: '100%', height: '100%' }}>{props.error}</Box>
+		<div className="flex h-full max-h-full w-full max-w-full flex-row">{props.error}</div>
 	) : (
 		<MemberProvider member={props.data?.member}>
 			<SidebarLayout {...props}>
@@ -253,50 +268,20 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
 					<>
 						<Head>
 							<title key="title">{name}</title>
+							<meta key="og_title" property="og:title" content={ogTitle} />
 						</Head>
 						{member(props.data.member)}
 					</>
 				) : props.data?.source ? (
-					<Box
-						sx={(theme) => ({
-							a: {
-								backgroundColor: 'transparent',
-								color: theme.colors.blurple![0],
-								textDecoration: 'none',
-							},
-							img: {
-								borderStyle: 'none',
-								maxWidth: '100%',
-								boxSizing: 'content-box',
-							},
-						})}
-						px="xl"
-					>
+					<div className="prose max-w-none">
 						<MDXRemote {...props.data.source} />
-					</Box>
+					</div>
 				) : null}
-				<Affix
-					position={{
-						bottom: 20,
-						right:
-							matches || (props.data?.member?.kind !== 'Class' && props.data?.member?.kind !== 'Interface') ? 20 : 268,
-					}}
-				>
-					<Transition transition="slide-up" mounted={scroll.y > 200}>
-						{(transitionStyles) => (
-							<ActionIcon
-								variant="filled"
-								color="blurple"
-								size={30}
-								style={transitionStyles}
-								onClick={() => scrollTo({ y: 0 })}
-							>
-								<VscChevronUp size={20} />
-							</ActionIcon>
-						)}
-					</Transition>
-				</Affix>
 			</SidebarLayout>
 		</MemberProvider>
 	);
 }
+
+export const config = {
+	unstable_includeFiles: ['../{builders,collection,proxy,rest,voice,ws}/README.md'],
+};