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

fix: sidebar behaviour when switching package/version

Browse Source
This commit is contained in:
iCrawl
2025-05-15 17:11:47 +02:00
parent 14e226b72b
commit c92a8c27a2
18 changed files with 377 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/website/src/app/api/docs/entrypoints/route.ts Normal file
View File

@@ -0,0 +1,16 @@
import { NextResponse, type NextRequest } from 'next/server';
import { fetchEntryPoints } from '@/util/fetchEntryPoints';
export async function GET(request: NextRequest) {
const { searchParams } = request.nextUrl;
const packageName = searchParams.get('packageName');
const version = searchParams.get('version');
if (!packageName || !version) {
return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
}
const response = await fetchEntryPoints(packageName, version);
return NextResponse.json(response);
}

21
apps/website/src/app/api/docs/sitemap/route.ts Normal file
View File

@@ -0,0 +1,21 @@
import { NextResponse, type NextRequest } from 'next/server';
import { fetchSitemap } from '@/util/fetchSitemap';
export async function GET(request: NextRequest) {
const { searchParams } = request.nextUrl;
const packageName = searchParams.get('packageName');
const version = searchParams.get('version');
const entryPoint = searchParams.get('entryPoint');
if (!packageName || !version) {
return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
}
const response = await fetchSitemap({
entryPoint,
packageName,
version,
});
return NextResponse.json(response);
}

15
apps/website/src/app/api/docs/versions/route.ts Normal file
View File

@@ -0,0 +1,15 @@
import { NextResponse, type NextRequest } from 'next/server';
import { fetchVersions } from '@/util/fetchVersions';
export async function GET(request: NextRequest) {
const { searchParams } = request.nextUrl;
const packageName = searchParams.get('packageName');
if (!packageName) {
return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
}
const response = await fetchVersions(packageName);
return NextResponse.json(response);
}

94
apps/website/src/app/docs/packages/[packageName]/[version]/[[...item]]/layout.tsx
View File

@@ -1,24 +1,5 @@
'use cache';
import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
import type { Metadata } from 'next';
import Link from 'next/link';
import { Suspense, type PropsWithChildren } from 'react';
import { EntryPointSelect } from '@/components/EntrypointSelect';
import { Footer } from '@/components/Footer';
import { Navigation } from '@/components/Navigation';
import { Scrollbars } from '@/components/OverlayScrollbars';
import { PackageSelect } from '@/components/PackageSelect';
import { SearchButton } from '@/components/SearchButton';
import { ThemeSwitchNoSRR } from '@/components/ThemeSwitch';
import { VersionSelect } from '@/components/VersionSelect';
import { Sidebar, SidebarContent, SidebarHeader, SidebarInset, SidebarTrigger } from '@/components/ui/Sidebar';
import { buttonStyles } from '@/styles/ui/button';
import { PACKAGES_WITH_ENTRY_POINTS } from '@/util/constants';
import { ENV } from '@/util/env';
import { fetchEntryPoints } from '@/util/fetchEntryPoints';
import { fetchVersions } from '@/util/fetchVersions';
import { parseDocsPathParams } from '@/util/parseDocsPathParams';
import { CmdK } from './CmdK';
export async function generateMetadata({
@@ -44,82 +25,11 @@ export default async function Layout({
params,
children,
}: PropsWithChildren<{
readonly params: Promise<{
readonly item?: string[] | undefined;
readonly packageName: string;
readonly version: string;
}>;
readonly params: Promise<{ readonly packageName: string; readonly version: string }>;
}>) {
const { packageName, version, item } = await params;
const versions = fetchVersions(packageName);
const hasEntryPoints = PACKAGES_WITH_ENTRY_POINTS.includes(packageName);
const entryPoints = hasEntryPoints ? fetchEntryPoints(packageName, version) : Promise.resolve([]);
const { entryPoints: parsedEntrypoints } = parseDocsPathParams(item);
return (
<>
<Sidebar closeButton={false} intent="inset">
<SidebarHeader className="bg-[#f3f3f4] p-4 dark:bg-[#121214]">
<div className="flex flex-col gap-2">
<div className="flex place-content-between place-items-center p-1">
<Link className="text-xl font-bold" href={`/docs/packages/${packageName}/${version}`}>
{packageName}
</Link>
<div className="flex place-items-center gap-2">
<Link
aria-label="GitHub"
className={buttonStyles({ variant: 'filled', size: 'icon-sm' })}
href="https://github.com/discordjs/discord.js"
rel="external noopener noreferrer"
target="_blank"
>
<VscGithubInverted aria-hidden data-slot="icon" size={18} />
</Link>
<ThemeSwitchNoSRR />
</div>
</div>
<PackageSelect />
{/* <h3 className="p-1 text-lg font-semibold">{version}</h3> */}
<VersionSelect versionsPromise={versions} />
{hasEntryPoints ? <EntryPointSelect entryPointsPromise={entryPoints} /> : null}
<SearchButton />
</div>
</SidebarHeader>
<SidebarContent className="bg-[#f3f3f4] p-0 py-4 pl-4 dark:bg-[#121214]">
<Scrollbars>
<Navigation entryPoint={parsedEntrypoints.join('.')} packageName={packageName} version={version} />
</Scrollbars>
</SidebarContent>
</Sidebar>
<SidebarInset>
{ENV.IS_LOCAL_DEV ? (
<div className="sticky top-0 z-10 flex place-content-center place-items-center border border-red-400/35 bg-red-500/65 p-2 px-4 text-center text-base text-white shadow-md backdrop-blur">
Local test environment
</div>
) : null}
{ENV.IS_PREVIEW ? (
<div className="sticky top-0 z-10 flex place-content-center place-items-center border border-red-400/35 bg-red-500/65 p-2 px-4 text-center text-base text-white shadow-md backdrop-blur">
Preview environment
</div>
) : null}
<div className="bg-[#fbfbfb] pb-12 dark:bg-[#1a1a1e]">
<div className="relative px-6 pt-6 md:hidden">
<div className="fixed top-5 left-6 z-20 md:hidden">
<SidebarTrigger aria-label="Navigation" size="icon" variant="filled" />
</div>
<div className="flex place-content-end">
<Link className="text-xl font-bold" href={`/docs/packages/${packageName}/${version}`}>
{packageName}
</Link>
</div>
</div>
{children}
<Footer />
</div>
</SidebarInset>
{children}
<Suspense>
<CmdK params={params} />
</Suspense>

2
apps/website/src/app/docs/packages/[packageName]/[version]/[[...item]]/page.tsx
View File

@@ -1,5 +1,3 @@
'use cache';
import { readFile } from 'node:fs/promises';
import { join } from 'node:path';
import rehypeShikiFromHighlighter from '@shikijs/rehype/core';

49
apps/website/src/app/docs/packages/layout.tsx Normal file
View File

@@ -0,0 +1,49 @@
// import Link from 'next/link';
import type { PropsWithChildren } from 'react';
import { Footer } from '@/components/Footer';
import { Navigation } from '@/components/Navigation';
import { Scrollbars } from '@/components/OverlayScrollbars';
import { SidebarHeader } from '@/components/Sidebar';
import { Sidebar, SidebarContent, SidebarInset, SidebarTrigger } from '@/components/ui/Sidebar';
import { ENV } from '@/util/env';
export default async function Layout({ children }: PropsWithChildren) {
return (
<>
<Sidebar closeButton={false} intent="inset">
<SidebarHeader />
<SidebarContent className="bg-[#f3f3f4] p-0 py-4 pl-4 dark:bg-[#121214]">
<Scrollbars>
<Navigation />
</Scrollbars>
</SidebarContent>
</Sidebar>
<SidebarInset>
{ENV.IS_LOCAL_DEV ? (
<div className="sticky top-0 z-10 flex place-content-center place-items-center border border-red-400/35 bg-red-500/65 p-2 px-4 text-center text-base text-white shadow-md backdrop-blur">
Local test environment
</div>
) : null}
{ENV.IS_PREVIEW ? (
<div className="sticky top-0 z-10 flex place-content-center place-items-center border border-red-400/35 bg-red-500/65 p-2 px-4 text-center text-base text-white shadow-md backdrop-blur">
Preview environment
</div>
) : null}
<div className="bg-[#fbfbfb] pb-12 dark:bg-[#1a1a1e]">
<div className="relative px-6 pt-6 md:hidden">
<div className="fixed top-5 left-6 z-20 md:hidden">
<SidebarTrigger aria-label="Navigation" size="icon" variant="filled" />
</div>
{/* <div className="flex place-content-end">
<Link className="text-xl font-bold" href={`/docs/packages/${packageName}/${version}`}>
{packageName}
</Link>
</div> */}
</div>
{children}
<Footer />
</div>
</SidebarInset>
</>
);
}

28
apps/website/src/app/providers.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Provider as JotaiProvider } from 'jotai';
import { useRouter } from 'next/navigation';
import { ThemeProvider } from 'next-themes';
@@ -10,7 +11,30 @@ import { SidebarProvider } from '@/components/ui/Sidebar';
import { useSystemThemeFallback } from '@/hooks/useSystemThemeFallback';
import { useUnregisterServiceWorker } from '@/hooks/useUnregisterServiceWorker';
function makeQueryClient() {
return new QueryClient({
defaultOptions: {
queries: {
staleTime: 60 * 1_000,
},
},
});
}
let browserQueryClient: QueryClient | undefined;
function getQueryClient() {
if (isServer) {
// Server: always make a new query client
return makeQueryClient();
} else {
browserQueryClient ??= makeQueryClient();
return browserQueryClient;
}
}
export function Providers({ children }: PropsWithChildren) {
const queryClient = getQueryClient();
const router = useRouter();
useUnregisterServiceWorker();
useSystemThemeFallback();
@@ -20,7 +44,9 @@ export function Providers({ children }: PropsWithChildren) {
<ThemeProvider attribute="class">
<RouterProvider navigate={router.push}>
<JotaiProvider>
<SidebarProvider defaultOpen>{children}</SidebarProvider>
<QueryClientProvider client={queryClient}>
<SidebarProvider defaultOpen>{children}</SidebarProvider>
</QueryClientProvider>
</JotaiProvider>
</RouterProvider>
</ThemeProvider>