refactor: use planetscale instead of custom api

This commit is contained in:
iCrawl
2023-11-07 15:08:03 +01:00
parent 344a3f9344
commit 009c0a3bae
10 changed files with 131 additions and 69 deletions

View File

@@ -9,7 +9,13 @@ import type { SidebarSectionItemData } from './Sidebar';
const PackageSelect = dynamic(async () => import('./PackageSelect'));
const VersionSelect = dynamic(async () => import('./VersionSelect'));
export function Nav({ members }: { readonly members: SidebarSectionItemData[] }) {
export function Nav({
members,
versions,
}: {
readonly members: SidebarSectionItemData[];
readonly versions: string[];
}) {
const { opened } = useNav();
return (
@@ -30,7 +36,7 @@ export function Nav({ members }: { readonly members: SidebarSectionItemData[] })
>
<div className="flex flex-col gap-4 p-3">
<PackageSelect />
<VersionSelect />
<VersionSelect versions={versions} />
</div>
<Sidebar members={members} />
</Scrollbars>

View File

@@ -6,34 +6,29 @@ import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useMemo } from 'react';
import useSWR from 'swr';
import { fetcher } from '~/util/fetcher';
const isDev = process.env.NEXT_PUBLIC_LOCAL_DEV ?? process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview';
export default function VersionSelect() {
export default function VersionSelect({ versions }: { readonly versions: string[] }) {
const pathname = usePathname();
const packageName = pathname?.split('/').slice(3, 4)[0];
const branchName = pathname?.split('/').slice(4, 5)[0];
const { data: versions } = useSWR<string[]>(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher);
const versionMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
const versionMenuItems = useMemo(
() =>
versions
?.map((item, idx) => (
<Link href={`/docs/packages/${packageName}/${isDev ? 'main' : item}`} key={`${item}-${idx}`}>
<MenuItem
className="my-0.5 rounded bg-white p-3 text-sm outline-none active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
onClick={() => versionMenu.setOpen(false)}
state={versionMenu}
>
{item}
</MenuItem>
</Link>
))
.reverse() ?? [],
versions?.map((item, idx) => (
<Link href={`/docs/packages/${packageName}/${isDev ? 'main' : item}`} key={`${item}-${idx}`}>
<MenuItem
className="my-0.5 rounded bg-white p-3 text-sm outline-none active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
onClick={() => versionMenu.setOpen(false)}
state={versionMenu}
>
{item}
</MenuItem>
</Link>
)) ?? [],
[versions, packageName, versionMenu],
);