Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-12 09:33:32 +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'];
let idx = 0;
export function createApiModel(data: any) {
const model = new ApiModel();
@@ -96,7 +97,7 @@ function tryResolveSummaryText(item: ApiDeclaredItem): string | null {
}
export function visitNodes(item: ApiItem, tag: string) {
const members: MemberJSON[] = [];
const members: (MemberJSON & { id: number })[] = [];
for (const member of item.members) {
if (!(member instanceof ApiDeclaredItem)) {
@@ -112,6 +113,7 @@ export function visitNodes(item: ApiItem, tag: string) {
}
members.push({
id: idx++,
name: member.displayName,
kind: member.kind,
summary: tryResolveSummaryText(member) ?? '',
@@ -153,6 +155,7 @@ export async function generateAllIndicies() {
// await generateIndex(model, pkg, version);
// }
idx = 0;
const model = createApiModel(data);
await generateIndex(model, pkg);
}

2
packages/website/package.json
View File

@@ -42,12 +42,12 @@
"dependencies": {
"@discordjs/api-extractor-utils": "workspace:^",
"@discordjs/scripts": "workspace:^",
"@lyrasearch/lyra": "^0.2.3",
"@microsoft/api-extractor-model": "7.24.0",
"@microsoft/tsdoc": "0.14.1",
"@vscode/codicons": "^0.0.32",
"ariakit": "^2.0.0-next.41",
"cmdk": "^0.1.20",
"meilisearch": "^0.27.0",
"next": "^12.3.0",
"next-mdx-remote": "^4.1.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 { Command } from 'cmdk';
import { useRouter } from 'next/router';
@@ -7,65 +6,59 @@ import { useEffect, useMemo, useState } from 'react';
import {
VscArrowRight,
VscPackage,
// VscSymbolClass,
// VscSymbolEnum,
// VscSymbolField,
// VscSymbolInterface,
// VscSymbolMethod,
// VscSymbolProperty,
// VscSymbolVariable,
VscSymbolClass,
VscSymbolEnum,
VscSymbolField,
VscSymbolInterface,
VscSymbolMethod,
VscSymbolProperty,
VscSymbolVariable,
VscVersions,
} from 'react-icons/vsc';
import { useKey } from 'react-use';
import useSWR from 'swr';
import { PACKAGES } from '~/util/constants';
import { fetcher } from '~/util/fetcher';
import { client } from '~/util/search';
// function resolveIcon(item: keyof ApiItemKind) {
// switch (item) {
// case 'Class':
// return <VscSymbolClass size={25} />;
// case 'Enum':
// return <VscSymbolEnum size={25} />;
// case 'Interface':
// return <VscSymbolInterface size={25} />;
// case 'Property':
// return <VscSymbolProperty size={25} />;
// case 'TypeAlias':
// return <VscSymbolField size={25} />;
// case 'Variables':
// return <VscSymbolVariable size={25} />;
// default:
// return <VscSymbolMethod size={25} />;
// }
// }
function resolveIcon(item: keyof ApiItemKind) {
switch (item) {
case 'Class':
return <VscSymbolClass size={25} />;
case 'Enum':
return <VscSymbolEnum size={25} />;
case 'Interface':
return <VscSymbolInterface size={25} />;
case 'Property':
return <VscSymbolProperty size={25} />;
case 'TypeAlias':
return <VscSymbolField size={25} />;
case 'Variables':
return <VscSymbolVariable size={25} />;
default:
return <VscSymbolMethod size={25} />;
}
}
// const searchIndex: any[] = [];
export function CmdkDialog() {
export function CmdkDialog({ currentPackageName }: { currentPackageName?: string | undefined }) {
const router = useRouter();
const dialog = useDialogState();
const [search, setSearch] = useState('');
const [page, setPage] = useState('');
const [packageName, setPackageName] = useState('');
// const [searchResults, setSearchResults] = useState<any[]>([]);
const [searchResults, setSearchResults] = useState<any[]>([]);
const { data: versions, isValidating } = useSWR<string[]>(
packageName ? `https://docs.discordjs.dev/api/info?package=${packageName}` : null,
fetcher,
);
// const { data: searchIndex } = useSWR<any[]>(
// packageName ? `http://localhost:3000/searchIndex/${packageName}-main-index.json` : null,
// fetcher,
// );
const packageCommandItems = useMemo(
() =>
PACKAGES.map((pkg) => (
<Command.Item
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={() => {
setPackageName(pkg);
setPage('version');
@@ -92,7 +85,7 @@ export function CmdkDialog() {
?.map((version) => (
<Command.Item
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={() => {
void router.push(`/docs/packages/${packageName}/${version}`);
dialog.setOpen(false);
@@ -114,34 +107,35 @@ export function CmdkDialog() {
[packageName],
);
// const searchResultItems = useMemo(
// () =>
// searchResults?.map((item) => (
// <Command.Item
// 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"
// onSelect={() => {
// void router.push(item.path);
// dialog.setOpen(false);
// }}
// >
// <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 flex-row place-content-between place-items-center gap-4">
// {resolveIcon(item.kind)}
// <div className="flex flex-col">
// <h2 className="font-semibold">{item.name}</h2>
// <span className="text-sm font-normal">{item.summary}</span>
// </div>
// </div>
// </div>
// <VscArrowRight size={20} />
// </div>
// </Command.Item>
// )) ?? [],
// // eslint-disable-next-line react-hooks/exhaustive-deps
// [searchResults],
// );
const searchResultItems = useMemo(
() =>
searchResults?.map((item) => (
<Command.Item
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 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={() => {
void router.push(item.path);
dialog.setOpen(false);
}}
>
<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 flex-row place-content-between place-items-center gap-4">
{resolveIcon(item.kind)}
<div className="flex flex-col">
<h2 className="font-semibold">{item.name}</h2>
<span className="text-sm font-normal">{item.summary}</span>
<span className="text-xs font-light opacity-50">{item.path}</span>
</div>
</div>
</div>
<VscArrowRight size={20} />
</div>
</Command.Item>
)) ?? [],
// eslint-disable-next-line react-hooks/exhaustive-deps
[searchResults],
);
useKey((event) => event.key === 'k' && event.metaKey, dialog.toggle, { event: 'keydown' }, []);
useKey(
@@ -158,27 +152,23 @@ export function CmdkDialog() {
}
}, [dialog.open]);
// useEffect(() => {
// if (searchIndex?.length) {
// void insertBatch(db, searchIndex);
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [searchIndex]);
useEffect(() => {
const searchDoc = async (searchString: string) => {
const res = await client.index(`${currentPackageName}-main`).search(searchString, { limit: 5 });
setSearchResults(res.hits);
};
// useEffect(() => {
// if (search) {
// const results = searchDb(db, {
// term: search,
// properties: ['name', 'kind', 'summary'],
// });
// setSearchResults(results.hits);
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [search]);
if (search && currentPackageName) {
void searchDoc(search);
} else {
setSearchResults([]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [search]);
return (
<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
className="bg-dark-300 caret-blurple mt-4 w-full border-0 p-4 pt-0 text-lg outline-0"
placeholder="Type to search..."
@@ -213,11 +203,11 @@ export function CmdkDialog() {
</Command.Loading>
) : 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>
</Dialog>

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

@@ -307,7 +307,7 @@ export function SidebarLayout({
</footer>
</article>
</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',
});