feat: add naive client-based search

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

@@ -14,12 +14,14 @@ import {
 } from '@discordjs/api-extractor-utils';
 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 rehypeIgnore from 'rehype-ignore';
 import rehypePrettyCode from 'rehype-pretty-code';
@@ -37,6 +39,7 @@ 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 { miniSearch } from '~/util/search';
 
 export const getStaticPaths: GetStaticPaths = async () => {
 	const pkgs = (
@@ -137,9 +140,16 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 		});
 
 		let data;
+		let searchIndex = [];
 		if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
 			const res = await readFile(join(cwd(), '..', packageName, 'docs', 'docs.api.json'), 'utf8');
 			data = JSON.parse(res);
+
+			const response = await readFile(
+				join(cwd(), '..', 'scripts', 'searchIndex', `${packageName}-main-index.json`),
+				'utf8',
+			);
+			searchIndex = JSON.parse(response);
 		} else {
 			const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${branchName}.api.json`);
 			data = await res.json();
@@ -163,6 +173,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 					member:
 						memberName && containerKey ? findMemberByKey(model, packageName, containerKey, branchName) ?? null : null,
 					source: mdxSource,
+					searchIndex,
 				},
 			},
 			revalidate: 3_600,
@@ -204,6 +215,22 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
 	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}` : ''}`;
 
 	if (router.isFallback) {