mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-14 02:23:31 +01:00
refactor: docs (#10126)
This commit is contained in:
Noel
@@ -0,0 +1,98 @@
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
import { ImageResponse } from 'next/og';
|
||||
import { resolveKind } from '~/util/resolveNodeKind';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
export const size = {
|
||||
width: 1_200,
|
||||
height: 630,
|
||||
};
|
||||
|
||||
export const contentType = 'image/png';
|
||||
|
||||
export default async function Image({
|
||||
params,
|
||||
}: {
|
||||
readonly params: { readonly item: string; readonly packageName: string; readonly version: string };
|
||||
}) {
|
||||
const normalizeItem = params.item.split(encodeURIComponent(':')).join('.').toLowerCase();
|
||||
|
||||
const isMainVersion = params.version === 'main';
|
||||
const fileContent = await fetch(
|
||||
`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.${normalizeItem}.api.json`,
|
||||
{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
|
||||
);
|
||||
const node = await fileContent.json();
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div tw="flex bg-[#121212] h-full w-full p-14">
|
||||
<div tw="flex flex-col mx-auto h-full text-white">
|
||||
<div tw="flex text-4xl text-gray-400">{params.packageName}</div>
|
||||
<div tw="flex flex-col justify-between h-full w-full pt-14">
|
||||
<div tw="flex items-center max-w-full">
|
||||
<span tw="mr-6">{resolveKind(node.kind, 94)}</span>
|
||||
<h2
|
||||
style={{
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
tw="text-[5.5rem] font-bold w-full"
|
||||
>
|
||||
{node.displayName}
|
||||
</h2>
|
||||
</div>
|
||||
<div tw="flex flex-row w-full justify-between">
|
||||
<div tw="flex flex-row">
|
||||
{node.members?.properties?.length ? (
|
||||
<div tw="flex mr-12">
|
||||
<span tw="mr-4">{resolveKind('Property', 42)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{node.members.properties.length}</span>
|
||||
<span>Properties</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{node.members?.events?.length ? (
|
||||
<div tw="flex mr-12">
|
||||
<span tw="mr-4">{resolveKind('Method', 42)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{node.members.events.length}</span>
|
||||
<span>Events</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{node.members?.methods?.length ? (
|
||||
<div tw="flex mr-12">
|
||||
<span tw="mr-4">{resolveKind('Method', 42)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{node.members.methods.length}</span>
|
||||
<span>Methods</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{node.members?.length ? (
|
||||
<div tw="flex">
|
||||
<span tw="mr-4">{resolveKind('EnumMember', 42)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{node.members.length}</span>
|
||||
<span>Members</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div tw="flex h-full items-end">
|
||||
<span tw="bg-[#5865f2] text-4xl font-black relative rounded-lg py-4 px-8">discord.js</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{
|
||||
...size,
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
// import { readFile } from 'node:fs/promises';
|
||||
// import { join } from 'node:path';
|
||||
// import { inspect } from 'node:util';
|
||||
import type { Metadata } from 'next';
|
||||
import { DocItem } from '~/components/DocItem';
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
readonly params: {
|
||||
readonly item: string;
|
||||
readonly packageName: string;
|
||||
readonly version: string;
|
||||
};
|
||||
}): Promise<Metadata> {
|
||||
const normalizeItem = params.item.split(encodeURIComponent(':'))[0];
|
||||
|
||||
return {
|
||||
title: `${normalizeItem} (${params.packageName} - ${params.version})`,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
}: {
|
||||
readonly params: { readonly item: string; readonly packageName: string; readonly version: string };
|
||||
}) {
|
||||
const normalizeItem = params.item.split(encodeURIComponent(':')).join('.').toLowerCase();
|
||||
|
||||
// const fileContent = await readFile(
|
||||
// join(process.cwd(), `../../packages/${params.packageName}/docs/split/${params.version}.${normalizeItem}.api.json`),
|
||||
// 'utf8',
|
||||
// );
|
||||
// const node = JSON.parse(fileContent);
|
||||
|
||||
const isMainVersion = params.version === 'main';
|
||||
const fileContent = await fetch(
|
||||
`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.${normalizeItem}.api.json`,
|
||||
{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
|
||||
);
|
||||
const node = await fileContent.json();
|
||||
|
||||
// console.log(inspect(node, { depth: 0 }));
|
||||
|
||||
return (
|
||||
<main className="flex w-full flex-col gap-8 pb-12 md:pb-0">
|
||||
<DocItem node={node} packageName={params.packageName} version={params.version} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
// import { readFile } from 'node:fs/promises';
|
||||
// import { join } from 'node:path';
|
||||
// import { inspect } from 'node:util';
|
||||
import type { Metadata } from 'next';
|
||||
import dynamic from 'next/dynamic';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { Navigation } from '~/components/Navigation';
|
||||
import { OverlayScrollbarsComponent } from '~/components/OverlayScrollbars';
|
||||
import { Drawer } from '~/components/ui/Drawer';
|
||||
import { Footer } from '~/components/ui/Footer';
|
||||
|
||||
// eslint-disable-next-line promise/prefer-await-to-then
|
||||
const CmdK = dynamic(async () => import('~/components/ui/CmdK').then((mod) => mod.CmdK), { ssr: false });
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
readonly params: { readonly packageName: string; readonly version: string };
|
||||
}): Promise<Metadata> {
|
||||
return {
|
||||
title: {
|
||||
template: '%s | discord.js',
|
||||
default: `${params.packageName} (${params.version})`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function Layout({
|
||||
params,
|
||||
children,
|
||||
}: PropsWithChildren<{ readonly params: { readonly packageName: string; readonly version: string } }>) {
|
||||
// const fileContent = await readFile(
|
||||
// join(process.cwd(), `../../packages/${params.packageName}/docs/split/${params.version}.dependencies.api.json`),
|
||||
// 'utf8',
|
||||
// );
|
||||
// const dependencies = JSON.parse(fileContent);
|
||||
|
||||
const isMainVersion = params.version === 'main';
|
||||
const fileContent = await fetch(
|
||||
`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.dependencies.api.json`,
|
||||
{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
|
||||
);
|
||||
const parsedDependencies = await fileContent.json();
|
||||
const dependencies = Object.entries<string>(parsedDependencies)
|
||||
.filter(([key]) => key.startsWith('@discordjs/') && !key.includes('api-extractor'))
|
||||
.map(([key, value]) => `${key.replace('@discordjs/', '').replaceAll('.', '-')}-${value.replaceAll('.', '-')}`);
|
||||
|
||||
// console.log(inspect(dependencies, { depth: 0 }));
|
||||
|
||||
return (
|
||||
// eslint-disable-next-line react/no-unknown-property
|
||||
<div vaul-drawer-wrapper="" className="mx-auto flex max-w-screen-xl flex-col gap-12 p-6 md:flex-row">
|
||||
<div className="sticky top-6 hidden flex-shrink-0 self-start md:block">
|
||||
<OverlayScrollbarsComponent
|
||||
className="max-h-[calc(100dvh-48px)]"
|
||||
defer
|
||||
options={{
|
||||
overflow: { x: 'hidden' },
|
||||
scrollbars: {
|
||||
autoHide: 'scroll',
|
||||
autoHideDelay: 500,
|
||||
autoHideSuspend: true,
|
||||
clickScroll: true,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Navigation className="pr-4" packageName={params.packageName} version={params.version} />
|
||||
</OverlayScrollbarsComponent>
|
||||
</div>
|
||||
<div className="pb-12">
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
<div className="fixed bottom-0 left-0 right-0 md:hidden">
|
||||
<Drawer>
|
||||
<Navigation
|
||||
className="max-w-none overflow-auto p-0 lg:max-w-none"
|
||||
packageName={params.packageName}
|
||||
version={params.version}
|
||||
drawer
|
||||
/>
|
||||
</Drawer>
|
||||
</div>
|
||||
<CmdK dependencies={dependencies} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
import rehypeShikiFromHighlighter from '@shikijs/rehype/core';
|
||||
import { MDXRemote } from 'next-mdx-remote/rsc';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { getHighlighterCore } from 'shiki/core';
|
||||
import getWasm from 'shiki/wasm';
|
||||
|
||||
const highlighter = await getHighlighterCore({
|
||||
themes: [import('shiki/themes/vitesse-light.mjs'), import('shiki/themes/vitesse-dark.mjs')],
|
||||
langs: [
|
||||
import('shiki/langs/typescript.mjs'),
|
||||
import('shiki/langs/javascript.mjs'),
|
||||
import('shiki/langs/shellscript.mjs'),
|
||||
],
|
||||
loadWasm: getWasm,
|
||||
});
|
||||
|
||||
export default async function Page({ params }: { readonly params: { readonly packageName: string } }) {
|
||||
const fileContent = await readFile(
|
||||
join(process.cwd(), `src/assets/readme/${params.packageName}/home-README.md`),
|
||||
'utf8',
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="prose prose-neutral mx-auto max-w-screen-lg dark:prose-invert">
|
||||
<MDXRemote
|
||||
options={{
|
||||
mdxOptions: {
|
||||
remarkPlugins: [remarkGfm],
|
||||
rehypePlugins: [
|
||||
[
|
||||
rehypeShikiFromHighlighter as any,
|
||||
highlighter,
|
||||
{
|
||||
themes: {
|
||||
light: 'vitesse-light',
|
||||
dark: 'vitesse-dark',
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
}}
|
||||
source={fileContent}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="relative top-6 mx-4 min-h-xl flex flex-col items-center justify-center gap-4">
|
||||
<svg
|
||||
className="h-9 w-9 animate-spin text-black dark:text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path
|
||||
className="opacity-75 dark:opacity-100"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<div className="text-lg font-medium">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import type { Route } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
export default function NotFound() {
|
||||
const pathname = usePathname();
|
||||
const href = pathname.split('/').slice(0, -1).join('/');
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
|
||||
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
|
||||
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
|
||||
<Link
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base text-white font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
|
||||
href={href as Route}
|
||||
>
|
||||
Take me back
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,180 +0,0 @@
|
||||
import type {
|
||||
ApiClass,
|
||||
ApiDeclaredItem,
|
||||
ApiEnum,
|
||||
ApiInterface,
|
||||
ApiItem,
|
||||
ApiItemContainerMixin,
|
||||
ApiMethod,
|
||||
ApiMethodSignature,
|
||||
ApiProperty,
|
||||
ApiPropertySignature,
|
||||
ApiTypeAlias,
|
||||
ApiVariable,
|
||||
ApiFunction,
|
||||
} from '@discordjs/api-extractor-model';
|
||||
import { ApiItemKind, ApiModel, ApiPackage } from '@discordjs/api-extractor-model';
|
||||
import { tryResolveSummaryText } from '@discordjs/scripts';
|
||||
import type { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { fetchModelJSON } from '~/app/docAPI';
|
||||
import { Class } from '~/components/model/Class';
|
||||
import { Interface } from '~/components/model/Interface';
|
||||
import { TypeAlias } from '~/components/model/TypeAlias';
|
||||
import { Variable } from '~/components/model/Variable';
|
||||
import { Enum } from '~/components/model/enum/Enum';
|
||||
import { Function } from '~/components/model/function/Function';
|
||||
import { OVERLOAD_SEPARATOR } from '~/util/constants';
|
||||
import { fetchMember } from '~/util/fetchMember';
|
||||
import { findMember } from '~/util/model';
|
||||
|
||||
export const revalidate = 86_400;
|
||||
|
||||
export interface ItemRouteParams {
|
||||
item: string;
|
||||
package: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
async function fetchHeadMember({ package: packageName, version, item }: ItemRouteParams) {
|
||||
const modelJSON = await fetchModelJSON(packageName, version);
|
||||
|
||||
if (!modelJSON) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const model = new ApiModel();
|
||||
model.addMember(ApiPackage.loadFromJson(modelJSON));
|
||||
const pkg = model.tryGetPackageByName(packageName);
|
||||
const entry = pkg?.entryPoints[0];
|
||||
|
||||
if (!entry) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const [memberName] = decodeURIComponent(item).split(OVERLOAD_SEPARATOR);
|
||||
return findMember(model, packageName, memberName);
|
||||
}
|
||||
|
||||
function resolveMemberSearchParams(packageName: string, member?: ApiItem) {
|
||||
const params = new URLSearchParams({
|
||||
pkg: packageName,
|
||||
kind: member?.kind ?? '',
|
||||
name: member?.displayName ?? '',
|
||||
});
|
||||
|
||||
switch (member?.kind) {
|
||||
case ApiItemKind.Interface:
|
||||
case ApiItemKind.Class: {
|
||||
const typedMember = member as ApiItemContainerMixin;
|
||||
|
||||
const properties = typedMember.members.filter((member) =>
|
||||
[ApiItemKind.Property, ApiItemKind.PropertySignature].includes(member.kind),
|
||||
) as (ApiProperty | ApiPropertySignature)[];
|
||||
const methods = typedMember.members.filter((member) =>
|
||||
[ApiItemKind.Method, ApiItemKind.Method].includes(member.kind),
|
||||
) as (ApiMethod | ApiMethodSignature)[];
|
||||
|
||||
params.append('methods', methods.length.toString());
|
||||
params.append('props', properties.length.toString());
|
||||
break;
|
||||
}
|
||||
|
||||
case ApiItemKind.Enum: {
|
||||
const typedMember = member as ApiEnum;
|
||||
params.append('members', typedMember.members.length.toString());
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: ItemRouteParams }) {
|
||||
const member = await fetchHeadMember(params);
|
||||
const name = `discord.js${member?.displayName ? ` | ${member.displayName}` : ''}`;
|
||||
const ogTitle = `${params.package ?? 'discord.js'}${member?.displayName ? ` | ${member.displayName}` : ''}`;
|
||||
const url = new URL('https://discordjs.dev/api/dynamic-open-graph.png');
|
||||
const searchParams = resolveMemberSearchParams(params.package, member);
|
||||
url.search = searchParams.toString();
|
||||
const ogImage = url.toString();
|
||||
let description;
|
||||
|
||||
if (member) {
|
||||
description = tryResolveSummaryText(member as ApiDeclaredItem);
|
||||
}
|
||||
|
||||
return {
|
||||
title: name,
|
||||
description: description ?? 'Discord.js API Documentation',
|
||||
openGraph: {
|
||||
title: ogTitle,
|
||||
description: description ?? 'Discord.js API Documentation',
|
||||
images: ogImage,
|
||||
},
|
||||
} satisfies Metadata;
|
||||
}
|
||||
|
||||
export async function generateStaticParams({ params: { package: packageName, version } }: { params: ItemRouteParams }) {
|
||||
if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
|
||||
return [];
|
||||
}
|
||||
|
||||
const modelJSON = await fetchModelJSON(packageName, version);
|
||||
|
||||
if (!modelJSON) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const model = new ApiModel();
|
||||
model.addMember(ApiPackage.loadFromJson(modelJSON));
|
||||
|
||||
const pkg = model.tryGetPackageByName(packageName);
|
||||
const entry = pkg?.entryPoints[0];
|
||||
|
||||
if (!entry) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return entry.members.map((member: ApiItem) => ({
|
||||
package: packageName,
|
||||
version,
|
||||
item: `${member.displayName}${OVERLOAD_SEPARATOR}${member.kind}`,
|
||||
}));
|
||||
}
|
||||
|
||||
function Member({ member }: { readonly member?: ApiItem }) {
|
||||
switch (member?.kind) {
|
||||
case 'Class':
|
||||
return <Class clazz={member as ApiClass} />;
|
||||
case 'Function':
|
||||
return <Function item={member as ApiFunction} />;
|
||||
case 'Interface':
|
||||
return <Interface item={member as ApiInterface} />;
|
||||
case 'TypeAlias':
|
||||
return <TypeAlias item={member as ApiTypeAlias} />;
|
||||
case 'Variable':
|
||||
return <Variable item={member as ApiVariable} />;
|
||||
case 'Enum':
|
||||
return <Enum item={member as ApiEnum} />;
|
||||
default:
|
||||
return <div>Cannot render that item type</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default async function Page({ params }: { params: ItemRouteParams }) {
|
||||
const member = await fetchMember(params.package, params.version ?? 'main', params.item);
|
||||
|
||||
if (!member) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Member member={member} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
'use client';
|
||||
|
||||
export default function Error({ error }: { readonly error: Error }) {
|
||||
console.error(error);
|
||||
|
||||
return (
|
||||
<div className="mx-auto h-full max-w-lg flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
|
||||
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
|
||||
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
import type { ApiFunction, ApiItem } from '@discordjs/api-extractor-model';
|
||||
import { ApiModel, ApiPackage } from '@discordjs/api-extractor-model';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { notFound } from 'next/navigation';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
|
||||
import { CmdKDialog } from '~/components/CmdK';
|
||||
import { Nav } from '~/components/Nav';
|
||||
import { Outline } from '~/components/Outline';
|
||||
import type { SidebarSectionItemData } from '~/components/Sidebar';
|
||||
import { resolveItemURI } from '~/components/documentation/util';
|
||||
import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
|
||||
import { Providers } from './providers';
|
||||
|
||||
const Header = dynamic(async () => import('~/components/Header'));
|
||||
const Footer = dynamic(async () => import('~/components/Footer'));
|
||||
|
||||
interface VersionRouteParams {
|
||||
package: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
export const generateStaticParams = async () => {
|
||||
if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
|
||||
return [];
|
||||
}
|
||||
|
||||
const params: VersionRouteParams[] = [];
|
||||
|
||||
await Promise.all(
|
||||
PACKAGES.map(async (packageName) => {
|
||||
const versions = (await fetchVersions(packageName)).slice(1, N_RECENT_VERSIONS);
|
||||
|
||||
params.push(...versions.map((version) => ({ package: packageName, version })));
|
||||
}),
|
||||
);
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
const serializeIntoSidebarItemData = (item: ApiItem) => {
|
||||
return {
|
||||
kind: item.kind,
|
||||
name: item.displayName,
|
||||
href: resolveItemURI(item),
|
||||
overloadIndex: 'overloadIndex' in item ? (item.overloadIndex as number) : undefined,
|
||||
} as SidebarSectionItemData;
|
||||
};
|
||||
|
||||
export default async function PackageLayout({ children, params }: PropsWithChildren<{ params: VersionRouteParams }>) {
|
||||
const modelJSON = await fetchModelJSON(params.package, params.version);
|
||||
|
||||
if (!modelJSON) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const model = new ApiModel();
|
||||
model.addMember(ApiPackage.loadFromJson(modelJSON));
|
||||
|
||||
const pkg = model.tryGetPackageByName(params.package);
|
||||
|
||||
if (!pkg) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const entry = pkg.entryPoints[0];
|
||||
|
||||
if (!entry) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const members = entry.members.filter((member) => {
|
||||
if (member.kind !== 'Function') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (member as ApiFunction).overloadIndex === 1;
|
||||
});
|
||||
|
||||
const versions = await fetchVersions(params.package);
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
|
||||
<Header />
|
||||
<div className="relative top-6.5 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
|
||||
<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
|
||||
<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} versions={versions} />
|
||||
</div>
|
||||
|
||||
<div className="relative top-4.5 mx-auto max-w-5xl min-w-xs w-full pb-10">
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<Outline />
|
||||
</div>
|
||||
</main>
|
||||
<CmdKDialog />
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
import { compileMDX } from 'next-mdx-remote/rsc';
|
||||
import { cache } from 'react';
|
||||
import rehypeSlug from 'rehype-slug';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
|
||||
|
||||
interface VersionRouteParams {
|
||||
package: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
const loadREADME = cache(async (packageName: string) => {
|
||||
return readFile(join(process.cwd(), 'src', 'assets', 'readme', packageName, 'home-README.md'), 'utf8');
|
||||
});
|
||||
|
||||
export default async function Page({ params }: { params: VersionRouteParams }) {
|
||||
const readmeSource = await loadREADME(params.package);
|
||||
const { content } = await compileMDX({
|
||||
source: readmeSource,
|
||||
// @ts-expect-error SyntaxHighlighter is assignable
|
||||
components: { pre: SyntaxHighlighter },
|
||||
options: {
|
||||
mdxOptions: {
|
||||
remarkPlugins: [remarkGfm],
|
||||
rehypePlugins: [rehypeSlug],
|
||||
format: 'mdx',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return <div className="relative top-4 max-w-none prose">{content}</div>;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { CmdKProvider } from '~/contexts/cmdK';
|
||||
import { MemberProvider } from '~/contexts/member';
|
||||
import { NavProvider } from '~/contexts/nav';
|
||||
import { OutlineProvider } from '~/contexts/outline';
|
||||
|
||||
export function Providers({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<NavProvider>
|
||||
<OutlineProvider>
|
||||
<MemberProvider>
|
||||
<CmdKProvider>{children}</CmdKProvider>
|
||||
</MemberProvider>
|
||||
</OutlineProvider>
|
||||
</NavProvider>
|
||||
);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from '~/app/loading';
|
||||
@@ -1,44 +0,0 @@
|
||||
import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
|
||||
import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
|
||||
import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { fetchVersions } from '~/app/docAPI';
|
||||
import { buttonVariants } from '~/styles/Button';
|
||||
import { PACKAGES } from '~/util/constants';
|
||||
|
||||
export const revalidate = 86_400;
|
||||
|
||||
export default async function Page({ params }: { params: { package: string } }) {
|
||||
if (!PACKAGES.includes(params.package)) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const data = await fetchVersions(params.package);
|
||||
|
||||
return (
|
||||
<div className="mx-auto min-h-screen min-w-xs flex flex-col gap-8 px-4 py-6 sm:w-md lg:px-6 lg:py-6">
|
||||
<h1 className="text-2xl font-semibold">Select a version:</h1>
|
||||
<div className="flex flex-col gap-4">
|
||||
{data.map((version, idx) => (
|
||||
<Link
|
||||
className={buttonVariants({ variant: 'secondary' })}
|
||||
href={`/docs/packages/${params.package}/${version}`}
|
||||
key={`${version}-${idx}`}
|
||||
>
|
||||
<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">
|
||||
<VscVersions size={25} />
|
||||
<h2 className="font-semibold">{version}</h2>
|
||||
</div>
|
||||
<VscArrowRight size={20} />
|
||||
</div>
|
||||
</Link>
|
||||
)) ?? null}
|
||||
</div>
|
||||
<Link className={buttonVariants({ className: 'place-self-center' })} href="/docs/packages">
|
||||
<VscArrowLeft size={20} /> Go back
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from '~/app/loading';
|
||||
@@ -1,44 +0,0 @@
|
||||
import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
|
||||
import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
|
||||
import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
|
||||
import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
|
||||
import Link from 'next/link';
|
||||
import { buttonVariants } from '~/styles/Button';
|
||||
import { PACKAGES } from '~/util/constants';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="mx-auto min-h-screen min-w-xs flex flex-col gap-8 px-4 py-6 sm:w-md lg:px-6 lg:py-6">
|
||||
<h1 className="text-2xl font-semibold">Select a package:</h1>
|
||||
<div className="flex flex-col gap-4">
|
||||
{PACKAGES.map((pkg, idx) => (
|
||||
<Link
|
||||
className={buttonVariants({ variant: 'secondary' })}
|
||||
href={`/docs/packages/${pkg}`}
|
||||
key={`${pkg}-${idx}`}
|
||||
>
|
||||
<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">
|
||||
<VscPackage size={25} />
|
||||
<h2 className="font-semibold">{pkg}</h2>
|
||||
</div>
|
||||
<VscArrowRight size={20} />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
<a className={buttonVariants({ variant: 'secondary' })} href="https://discord-api-types.dev/">
|
||||
<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">
|
||||
<VscPackage size={25} />
|
||||
<h2 className="font-semibold">discord-api-types</h2>
|
||||
</div>
|
||||
<FiExternalLink size={20} />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<Link className={buttonVariants({ className: 'place-self-center' })} href="/">
|
||||
<VscArrowLeft size={20} /> Go back
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user