Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-15 11:03:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: search

Browse Source
This commit is contained in:
iCrawl
2022-09-16 23:04:05 +02:00
parent 1c5b78fd21
commit 735e0bf52e
6 changed files with 98 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/scripts/src/generateIndex.ts
View File

@@ -29,6 +29,7 @@ export interface MemberJSON {
} }
export const PACKAGES = ['builders', 'collection', 'proxy', 'rest', 'voice', 'ws']; export const PACKAGES = ['builders', 'collection', 'proxy', 'rest', 'voice', 'ws'];
let idx = 0;
export function createApiModel(data: any) { export function createApiModel(data: any) {
const model = new ApiModel(); const model = new ApiModel();
@@ -96,7 +97,7 @@ function tryResolveSummaryText(item: ApiDeclaredItem): string | null {
} }
export function visitNodes(item: ApiItem, tag: string) { export function visitNodes(item: ApiItem, tag: string) {
const members: MemberJSON[] = []; const members: (MemberJSON & { id: number })[] = [];
for (const member of item.members) { for (const member of item.members) {
if (!(member instanceof ApiDeclaredItem)) { if (!(member instanceof ApiDeclaredItem)) {
@@ -112,6 +113,7 @@ export function visitNodes(item: ApiItem, tag: string) {
} }
members.push({ members.push({
id: idx++,
name: member.displayName, name: member.displayName,
kind: member.kind, kind: member.kind,
summary: tryResolveSummaryText(member) ?? '', summary: tryResolveSummaryText(member) ?? '',
@@ -153,6 +155,7 @@ export async function generateAllIndicies() {
// await generateIndex(model, pkg, version); // await generateIndex(model, pkg, version);
// } // }
idx = 0;
const model = createApiModel(data); const model = createApiModel(data);
await generateIndex(model, pkg); await generateIndex(model, pkg);
} }

2
packages/website/package.json
View File

@@ -42,12 +42,12 @@
"dependencies": { "dependencies": {
"@discordjs/api-extractor-utils": "workspace:^", "@discordjs/api-extractor-utils": "workspace:^",
"@discordjs/scripts": "workspace:^", "@discordjs/scripts": "workspace:^",
"@lyrasearch/lyra": "^0.2.3",
"@microsoft/api-extractor-model": "7.24.0", "@microsoft/api-extractor-model": "7.24.0",
"@microsoft/tsdoc": "0.14.1", "@microsoft/tsdoc": "0.14.1",
"@vscode/codicons": "^0.0.32", "@vscode/codicons": "^0.0.32",
"ariakit": "^2.0.0-next.41", "ariakit": "^2.0.0-next.41",
"cmdk": "^0.1.20", "cmdk": "^0.1.20",
"meilisearch": "^0.27.0",
"next": "^12.3.0", "next": "^12.3.0",
"next-mdx-remote": "^4.1.0", "next-mdx-remote": "^4.1.0",
"next-progress": "^2.2.0", "next-progress": "^2.2.0",

162
packages/website/src/components/Cmdk.tsx
View File

@@ -1,5 +1,4 @@
// import { insertBatch, search as searchDb } from '@lyrasearch/lyra'; import type { ApiItemKind } from '@microsoft/api-extractor-model';
// import type { ApiItemKind } from '@microsoft/api-extractor-model';
import { Dialog, useDialogState } from 'ariakit/dialog'; import { Dialog, useDialogState } from 'ariakit/dialog';
import { Command } from 'cmdk'; import { Command } from 'cmdk';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@@ -7,65 +6,59 @@ import { useEffect, useMemo, useState } from 'react';
import { import {
VscArrowRight, VscArrowRight,
VscPackage, VscPackage,
// VscSymbolClass, VscSymbolClass,
// VscSymbolEnum, VscSymbolEnum,
// VscSymbolField, VscSymbolField,
// VscSymbolInterface, VscSymbolInterface,
// VscSymbolMethod, VscSymbolMethod,
// VscSymbolProperty, VscSymbolProperty,
// VscSymbolVariable, VscSymbolVariable,
VscVersions, VscVersions,
} from 'react-icons/vsc'; } from 'react-icons/vsc';
import { useKey } from 'react-use'; import { useKey } from 'react-use';
import useSWR from 'swr'; import useSWR from 'swr';
import { PACKAGES } from '~/util/constants'; import { PACKAGES } from '~/util/constants';
import { fetcher } from '~/util/fetcher'; import { fetcher } from '~/util/fetcher';
import { client } from '~/util/search';
// function resolveIcon(item: keyof ApiItemKind) { function resolveIcon(item: keyof ApiItemKind) {
// switch (item) { switch (item) {
// case 'Class': case 'Class':
// return <VscSymbolClass size={25} />; return <VscSymbolClass size={25} />;
// case 'Enum': case 'Enum':
// return <VscSymbolEnum size={25} />; return <VscSymbolEnum size={25} />;
// case 'Interface': case 'Interface':
// return <VscSymbolInterface size={25} />; return <VscSymbolInterface size={25} />;
// case 'Property': case 'Property':
// return <VscSymbolProperty size={25} />; return <VscSymbolProperty size={25} />;
// case 'TypeAlias': case 'TypeAlias':
// return <VscSymbolField size={25} />; return <VscSymbolField size={25} />;
// case 'Variables': case 'Variables':
// return <VscSymbolVariable size={25} />; return <VscSymbolVariable size={25} />;
// default: default:
// return <VscSymbolMethod size={25} />; return <VscSymbolMethod size={25} />;
// } }
// } }
// const searchIndex: any[] = []; export function CmdkDialog({ currentPackageName }: { currentPackageName?: string | undefined }) {
export function CmdkDialog() {
const router = useRouter(); const router = useRouter();
const dialog = useDialogState(); const dialog = useDialogState();
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [page, setPage] = useState(''); const [page, setPage] = useState('');
const [packageName, setPackageName] = useState(''); const [packageName, setPackageName] = useState('');
// const [searchResults, setSearchResults] = useState<any[]>([]); const [searchResults, setSearchResults] = useState<any[]>([]);
const { data: versions, isValidating } = useSWR<string[]>( const { data: versions, isValidating } = useSWR<string[]>(
packageName ? `https://docs.discordjs.dev/api/info?package=${packageName}` : null, packageName ? `https://docs.discordjs.dev/api/info?package=${packageName}` : null,
fetcher, fetcher,
); );
// const { data: searchIndex } = useSWR<any[]>(
// packageName ? `http://localhost:3000/searchIndex/${packageName}-main-index.json` : null,
// fetcher,
// );
const packageCommandItems = useMemo( const packageCommandItems = useMemo(
() => () =>
PACKAGES.map((pkg) => ( PACKAGES.map((pkg) => (
<Command.Item <Command.Item
key={pkg} key={pkg}
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-offset-0 [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring flex flex h-11 w-full transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white" className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-offset-0 [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring flex flex w-full transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
onSelect={() => { onSelect={() => {
setPackageName(pkg); setPackageName(pkg);
setPage('version'); setPage('version');
@@ -92,7 +85,7 @@ export function CmdkDialog() {
?.map((version) => ( ?.map((version) => (
<Command.Item <Command.Item
key={version} key={version}
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-offset-0 [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring flex flex h-11 w-full transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white" className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-offset-0 [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring flex flex w-full transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
onSelect={() => { onSelect={() => {
void router.push(`/docs/packages/${packageName}/${version}`); void router.push(`/docs/packages/${packageName}/${version}`);
dialog.setOpen(false); dialog.setOpen(false);
@@ -114,34 +107,35 @@ export function CmdkDialog() {
[packageName], [packageName],
); );
// const searchResultItems = useMemo( const searchResultItems = useMemo(
// () => () =>
// searchResults?.map((item) => ( searchResults?.map((item) => (
// <Command.Item <Command.Item
// key={item.id} key={item.id}
// className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-offset-0 [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring flex flex h-11 w-full transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white" className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-offset-0 [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring flex flex w-full transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
// onSelect={() => { onSelect={() => {
// void router.push(item.path); void router.push(item.path);
// dialog.setOpen(false); dialog.setOpen(false);
// }} }}
// > >
// <div className="flex w-full grow flex-row place-content-between place-items-center gap-4"> <div className="flex w-full grow flex-row place-content-between place-items-center gap-4">
// <div className="flex grow flex-row place-content-between place-items-center gap-4"> <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"> <div className="flex flex-row place-content-between place-items-center gap-4">
// {resolveIcon(item.kind)} {resolveIcon(item.kind)}
// <div className="flex flex-col"> <div className="flex flex-col">
// <h2 className="font-semibold">{item.name}</h2> <h2 className="font-semibold">{item.name}</h2>
// <span className="text-sm font-normal">{item.summary}</span> <span className="text-sm font-normal">{item.summary}</span>
// </div> <span className="text-xs font-light opacity-50">{item.path}</span>
// </div> </div>
// </div> </div>
// <VscArrowRight size={20} /> </div>
// </div> <VscArrowRight size={20} />
// </Command.Item> </div>
// )) ?? [], </Command.Item>
// // eslint-disable-next-line react-hooks/exhaustive-deps )) ?? [],
// [searchResults], // eslint-disable-next-line react-hooks/exhaustive-deps
// ); [searchResults],
);
useKey((event) => event.key === 'k' && event.metaKey, dialog.toggle, { event: 'keydown' }, []); useKey((event) => event.key === 'k' && event.metaKey, dialog.toggle, { event: 'keydown' }, []);
useKey( useKey(
@@ -158,27 +152,23 @@ export function CmdkDialog() {
} }
}, [dialog.open]); }, [dialog.open]);
// useEffect(() => { useEffect(() => {
// if (searchIndex?.length) { const searchDoc = async (searchString: string) => {
// void insertBatch(db, searchIndex); const res = await client.index(`${currentPackageName}-main`).search(searchString, { limit: 5 });
// } setSearchResults(res.hits);
// // eslint-disable-next-line react-hooks/exhaustive-deps };
// }, [searchIndex]);
// useEffect(() => { if (search && currentPackageName) {
// if (search) { void searchDoc(search);
// const results = searchDb(db, { } else {
// term: search, setSearchResults([]);
// properties: ['name', 'kind', 'summary'], }
// }); // eslint-disable-next-line react-hooks/exhaustive-deps
// setSearchResults(results.hits); }, [search]);
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [search]);
return ( return (
<Dialog className="fixed top-1/4 left-1/2 z-50 -translate-x-1/2" state={dialog}> <Dialog className="fixed top-1/4 left-1/2 z-50 -translate-x-1/2" state={dialog}>
<Command label="Command Menu" className="bg-dark-300 min-w-xs sm:min-w-lg rounded"> <Command label="Command Menu" className="bg-dark-300 min-w-xs sm:min-w-lg rounded" shouldFilter={false}>
<Command.Input <Command.Input
className="bg-dark-300 caret-blurple mt-4 w-full border-0 p-4 pt-0 text-lg outline-0" className="bg-dark-300 caret-blurple mt-4 w-full border-0 p-4 pt-0 text-lg outline-0"
placeholder="Type to search..." placeholder="Type to search..."
@@ -213,11 +203,11 @@ export function CmdkDialog() {
</Command.Loading> </Command.Loading>
) : null} ) : null}
{page /* || search */ ? null : packageCommandItems} {page || search ? null : packageCommandItems}
{page === 'version' /* && !search */ ? versionCommandItems : null} {page === 'version' && !search ? versionCommandItems : null}
{/* {search && !page ? searchResultItems : null} */} {search ? searchResultItems : null}
</Command.List> </Command.List>
</Command> </Command>
</Dialog> </Dialog>

2
packages/website/src/components/SidebarLayout.tsx
View File

@@ -307,7 +307,7 @@ export function SidebarLayout({
</footer> </footer>
</article> </article>
</main> </main>
<CmdkDialog /> <CmdkDialog currentPackageName={packageName} />
</> </>
); );
} }

6
packages/website/src/util/search.ts Normal file
View File

@@ -0,0 +1,6 @@
import MeiliSearch from 'meilisearch';
export const client = new MeiliSearch({
host: 'https://search.discordjs.dev',
apiKey: 'b51923c6abb574b1e97be9a03dc6414b6c69fb0c5696d0ef01a82b0f77d223db',
});

18
yarn.lock
View File

@@ -2123,7 +2123,6 @@ __metadata:
dependencies: dependencies:
"@discordjs/api-extractor-utils": "workspace:^" "@discordjs/api-extractor-utils": "workspace:^"
"@discordjs/scripts": "workspace:^" "@discordjs/scripts": "workspace:^"
"@lyrasearch/lyra": ^0.2.3
"@microsoft/api-extractor-model": 7.24.0 "@microsoft/api-extractor-model": 7.24.0
"@microsoft/tsdoc": 0.14.1 "@microsoft/tsdoc": 0.14.1
"@testing-library/react": ^13.4.0 "@testing-library/react": ^13.4.0
@@ -2142,6 +2141,7 @@ __metadata:
eslint: ^8.23.0 eslint: ^8.23.0
eslint-config-neon: ^0.1.33 eslint-config-neon: ^0.1.33
happy-dom: ^6.0.4 happy-dom: ^6.0.4
meilisearch: ^0.27.0
next: ^12.3.0 next: ^12.3.0
next-mdx-remote: ^4.1.0 next-mdx-remote: ^4.1.0
next-progress: ^2.2.0 next-progress: ^2.2.0
@@ -2708,13 +2708,6 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@lyrasearch/lyra@npm:^0.2.3":
version: 0.2.3
resolution: "@lyrasearch/lyra@npm:0.2.3"
checksum: 5fde21ef623222657255fb9f592c16fcfc1f5e81fc0bf48a7c196aee9fcdc857c3cedb9ffbc55654778d6822c4c48c1ea76701a117719007d83d7e9017a24933
languageName: node
linkType: hard
"@mapbox/node-pre-gyp@npm:^1.0.5": "@mapbox/node-pre-gyp@npm:^1.0.5":
version: 1.0.9 version: 1.0.9
resolution: "@mapbox/node-pre-gyp@npm:1.0.9" resolution: "@mapbox/node-pre-gyp@npm:1.0.9"
@@ -12171,6 +12164,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"meilisearch@npm:^0.27.0":
version: 0.27.0
resolution: "meilisearch@npm:0.27.0"
dependencies:
cross-fetch: ^3.1.5
checksum: 78c1a667f4dc95f2a77f1a2d929d8ad25e090544abfb3d8ad44ace19e9c16f4b5a18bd74ebd0f1c33f72381732f7d31531090130fd0844460b0380bd2c875358
languageName: node
linkType: hard
"meow@npm:^8.0.0": "meow@npm:^8.0.0":
version: 8.1.2 version: 8.1.2
resolution: "meow@npm:8.1.2" resolution: "meow@npm:8.1.2"