diff --git a/packages/website/src/components/Cmdk.tsx b/packages/website/src/components/CmdK.tsx similarity index 94% rename from packages/website/src/components/Cmdk.tsx rename to packages/website/src/components/CmdK.tsx index 65f29815b..6c12d91e0 100644 --- a/packages/website/src/components/Cmdk.tsx +++ b/packages/website/src/components/CmdK.tsx @@ -1,5 +1,5 @@ import type { ApiItemKind } from '@microsoft/api-extractor-model'; -import { Dialog, useDialogState } from 'ariakit/dialog'; +import { Dialog } from 'ariakit/dialog'; import { Command } from 'cmdk'; import { useRouter } from 'next/router'; import { useEffect, useMemo, useState } from 'react'; @@ -17,6 +17,7 @@ import { } from 'react-icons/vsc'; import { useKey } from 'react-use'; import useSWR from 'swr'; +import { useCmdK } from '~/contexts/cmdK'; import { PACKAGES } from '~/util/constants'; import { fetcher } from '~/util/fetcher'; import { client } from '~/util/search'; @@ -40,9 +41,9 @@ function resolveIcon(item: keyof ApiItemKind) { } } -export function CmdkDialog({ currentPackageName }: { currentPackageName?: string | undefined }) { +export function CmdKDialog({ currentPackageName }: { currentPackageName?: string | undefined }) { const router = useRouter(); - const dialog = useDialogState(); + const dialog = useCmdK(); const [search, setSearch] = useState(''); const [page, setPage] = useState(''); const [packageName, setPackageName] = useState(''); @@ -86,7 +87,7 @@ export function CmdkDialog({ currentPackageName }: { currentPackageName?: string 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 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); + dialog!.setOpen(false); }} >
@@ -111,13 +112,13 @@ export function CmdkDialog({ currentPackageName }: { currentPackageName?: string 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 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); + dialog!.setOpen(false); }} >
{resolveIcon(item.kind)} -
+

{item.name}

{item.summary}
@@ -142,7 +143,7 @@ export function CmdkDialog({ currentPackageName }: { currentPackageName?: string return false; }, - dialog.toggle, + dialog!.toggle, { event: 'keydown', options: {} }, [], ); @@ -154,11 +155,12 @@ export function CmdkDialog({ currentPackageName }: { currentPackageName?: string ); useEffect(() => { - if (!dialog.open) { + if (!dialog!.open) { setSearch(''); setPage(''); } - }, [dialog.open]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [dialog!.open]); useEffect(() => { const searchDoc = async (searchString: string) => { @@ -175,7 +177,7 @@ export function CmdkDialog({ currentPackageName }: { currentPackageName?: string }, [search]); return ( - + diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx index a45e04fd6..6b955461b 100644 --- a/packages/website/src/components/SidebarLayout.tsx +++ b/packages/website/src/components/SidebarLayout.tsx @@ -8,12 +8,22 @@ import type { MDXRemoteSerializeResult } from 'next-mdx-remote'; import { useTheme } from 'next-themes'; import { type PropsWithChildren, useState, useEffect, useMemo, Fragment } from 'react'; import { Scrollbars } from 'react-custom-scrollbars-2'; -import { VscChevronDown, VscColorMode, VscGithubInverted, VscMenu, VscPackage, VscVersions } from 'react-icons/vsc'; +import { FiCommand } from 'react-icons/fi'; +import { + VscChevronDown, + VscColorMode, + VscGithubInverted, + VscMenu, + VscPackage, + VscSearch, + VscVersions, +} from 'react-icons/vsc'; import { useMedia /* useLockBodyScroll */ } from 'react-use'; import useSWR from 'swr'; import vercelLogo from '../assets/powered-by-vercel.svg'; -import { CmdkDialog } from './Cmdk'; +import { CmdKDialog } from './CmdK'; import { SidebarItems } from './SidebarItems'; +import { useCmdK } from '~/contexts/cmdK'; import { PACKAGES } from '~/util/constants'; import { fetcher } from '~/util/fetcher'; import type { findMember } from '~/util/model.server'; @@ -49,6 +59,7 @@ export function SidebarLayout({ children, }: PropsWithChildren>) { const router = useRouter(); + const dialog = useCmdK(); const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState(''); const { data: versions } = useSWR(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher); const { resolvedTheme, setTheme } = useTheme(); @@ -157,7 +168,20 @@ export function SidebarLayout({
{breadcrumbs}
-
+
+
) : ( - - - {props.data?.member ? ( - <> - - {name} - - - {member(props.data.member)} - - ) : props.data?.source ? ( -
- -
- ) : null} - - + + + + {props.data?.member ? ( + <> + + {name} + + + {member(props.data.member)} + + ) : props.data?.source ? ( +
+ +
+ ) : null} + + + ); } diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx index 91d3394d5..c5c4d52d1 100644 --- a/packages/website/src/pages/index.tsx +++ b/packages/website/src/pages/index.tsx @@ -33,6 +33,14 @@ export default function IndexRoute() { > Guide + + GitHub +