mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-12 09:33:32 +01:00
refactor(website): extract layouts and use more server components (#9027)
Closes https://github.com/discordjs/discord.js/issues/8920 Closes https://github.com/discordjs/discord.js/issues/8997
This commit is contained in:
Suneet Tipirneni
26
apps/website/src/app/docAPI.ts
Normal file
26
apps/website/src/app/docAPI.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
|
||||
export async function fetchVersions(packageName: string): Promise<string[]> {
|
||||
const response = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`, {
|
||||
next: { revalidate: 3_600 },
|
||||
});
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function fetchModelJSON(packageName: string, version: string): Promise<unknown> {
|
||||
if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
|
||||
const res = await readFile(
|
||||
join(process.cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'),
|
||||
'utf8',
|
||||
);
|
||||
return JSON.parse(res);
|
||||
}
|
||||
|
||||
const response = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${version}.api.json`, {
|
||||
next: { revalidate: 3_600 },
|
||||
});
|
||||
|
||||
return response.json();
|
||||
}
|
||||
@@ -1,382 +0,0 @@
|
||||
/* eslint-disable no-case-declarations */
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
// eslint-disable-next-line n/prefer-global/process
|
||||
import process, { cwd } from 'node:process';
|
||||
import {
|
||||
findPackage,
|
||||
getMembers,
|
||||
type ApiItemJSON,
|
||||
type ApiClassJSON,
|
||||
type ApiFunctionJSON,
|
||||
type ApiInterfaceJSON,
|
||||
type ApiTypeAliasJSON,
|
||||
type ApiVariableJSON,
|
||||
type ApiEnumJSON,
|
||||
} from '@discordjs/api-extractor-utils';
|
||||
import { createApiModel } from '@discordjs/scripts';
|
||||
import { ApiFunction, ApiItemKind, type ApiPackage } from '@microsoft/api-extractor-model';
|
||||
import Image from 'next/image';
|
||||
// import Head from 'next/head';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { serialize } from 'next-mdx-remote/serialize';
|
||||
import rehypeIgnore from 'rehype-ignore';
|
||||
import rehypePrettyCode, { type Options } from 'rehype-pretty-code';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import rehypeSlug from 'rehype-slug';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { getHighlighter } from 'shiki';
|
||||
import shikiLangJavascript from 'shiki/languages/javascript.tmLanguage.json';
|
||||
import shikiLangTypescript from 'shiki/languages/typescript.tmLanguage.json';
|
||||
import shikiThemeDarkPlus from 'shiki/themes/dark-plus.json';
|
||||
import shikiThemeLightPlus from 'shiki/themes/light-plus.json';
|
||||
import vercelLogo from '../../../../../assets/powered-by-vercel.svg';
|
||||
import { MDXRemote } from '~/components/MDXRemote';
|
||||
import { Nav } from '~/components/Nav';
|
||||
import { Class } from '~/components/model/Class';
|
||||
import { Enum } from '~/components/model/Enum';
|
||||
import { Function } from '~/components/model/Function';
|
||||
import { Interface } from '~/components/model/Interface';
|
||||
import { TypeAlias } from '~/components/model/TypeAlias';
|
||||
import { Variable } from '~/components/model/Variable';
|
||||
import { MemberProvider } from '~/contexts/member';
|
||||
import { DESCRIPTION, PACKAGES } from '~/util/constants';
|
||||
import { findMember, findMemberByKey } from '~/util/model.server';
|
||||
import { tryResolveDescription } from '~/util/summary';
|
||||
|
||||
export async function generateStaticParams({ params }: { params?: { package: string } }) {
|
||||
const packageName = params?.package ?? 'builders';
|
||||
|
||||
try {
|
||||
let data: any[] = [];
|
||||
let versions: string[] = [];
|
||||
if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
|
||||
const res = await readFile(join(cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'), 'utf8');
|
||||
data = JSON.parse(res);
|
||||
} else {
|
||||
const response = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`, {
|
||||
next: { revalidate: 3_600 },
|
||||
});
|
||||
versions = await response.json();
|
||||
versions = versions.slice(-2);
|
||||
|
||||
for (const version of versions) {
|
||||
const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${version}.api.json`);
|
||||
data = [...data, await res.json()];
|
||||
}
|
||||
}
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
const models = data.map((innerData) => createApiModel(innerData));
|
||||
const pkgs = models.map((model) => findPackage(model, packageName)) as ApiPackage[];
|
||||
|
||||
return [
|
||||
...versions.map((version) => ({ slug: [version] })),
|
||||
...pkgs.flatMap((pkg, idx) =>
|
||||
getMembers(pkg, versions[idx] ?? 'main').map((member) => {
|
||||
if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
|
||||
return {
|
||||
slug: [versions[idx] ?? 'main', `${member.name}:${member.overloadIndex}:${member.kind}`],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
slug: [versions[idx] ?? 'main', `${member.name}:${member.kind}`],
|
||||
};
|
||||
}),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
const model = createApiModel(data);
|
||||
const pkg = findPackage(model, packageName)!;
|
||||
|
||||
return [
|
||||
{ slug: ['main'] },
|
||||
...getMembers(pkg, 'main').map((member) => {
|
||||
if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
|
||||
return {
|
||||
slug: ['main', `${member.name}:${member.overloadIndex}:${member.kind}`],
|
||||
};
|
||||
}
|
||||
|
||||
return { slug: ['main', `${member.name}:${member.kind}`] };
|
||||
}),
|
||||
];
|
||||
} catch {
|
||||
return [{ slug: ['main'] }];
|
||||
}
|
||||
}
|
||||
|
||||
async function getData(packageName: string, slug: string[]) {
|
||||
const [branchName = 'main', member] = slug;
|
||||
|
||||
if (!PACKAGES.includes(packageName)) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
let data;
|
||||
try {
|
||||
if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
|
||||
const res = await readFile(join(cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'), 'utf8');
|
||||
data = JSON.parse(res);
|
||||
} else {
|
||||
const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${branchName}.api.json`);
|
||||
data = await res.json();
|
||||
}
|
||||
} catch {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const [memberName, overloadIndex] = member?.split('%3A') ?? [];
|
||||
|
||||
const readme = await readFile(join(cwd(), 'src', 'assets', 'readme', packageName, 'home-README.md'), 'utf8');
|
||||
|
||||
const mdxSource = await serialize(readme, {
|
||||
mdxOptions: {
|
||||
remarkPlugins: [remarkGfm],
|
||||
remarkRehypeOptions: { allowDangerousHtml: true },
|
||||
rehypePlugins: [
|
||||
rehypeRaw,
|
||||
rehypeIgnore,
|
||||
rehypeSlug,
|
||||
[
|
||||
rehypePrettyCode,
|
||||
{
|
||||
theme: {
|
||||
dark: shikiThemeDarkPlus,
|
||||
light: shikiThemeLightPlus,
|
||||
},
|
||||
getHighlighter: async (options?: Partial<Options>) =>
|
||||
getHighlighter({
|
||||
...options,
|
||||
langs: [
|
||||
// @ts-expect-error: Working as intended
|
||||
{ id: 'javascript', aliases: ['js'], scopeName: 'source.js', grammar: shikiLangJavascript },
|
||||
// @ts-expect-error: Working as intended
|
||||
{ id: 'typescript', aliases: ['ts'], scopeName: 'source.ts', grammar: shikiLangTypescript },
|
||||
],
|
||||
}),
|
||||
},
|
||||
],
|
||||
],
|
||||
format: 'md',
|
||||
},
|
||||
});
|
||||
|
||||
const model = createApiModel(data);
|
||||
const pkg = findPackage(model, packageName);
|
||||
|
||||
// eslint-disable-next-line prefer-const
|
||||
let { containerKey, name } = findMember(model, packageName, memberName, branchName) ?? {};
|
||||
if (name && overloadIndex && !Number.isNaN(Number.parseInt(overloadIndex, 10))) {
|
||||
containerKey = ApiFunction.getContainerKey(name, Number.parseInt(overloadIndex, 10));
|
||||
}
|
||||
|
||||
const members = pkg
|
||||
? getMembers(pkg, branchName).filter((item) => item.overloadIndex === null || item.overloadIndex <= 1)
|
||||
: [];
|
||||
const foundMember =
|
||||
memberName && containerKey ? findMemberByKey(model, packageName, containerKey, branchName) ?? null : null;
|
||||
const description = foundMember ? tryResolveDescription(foundMember) ?? DESCRIPTION : DESCRIPTION;
|
||||
|
||||
return {
|
||||
packageName,
|
||||
branchName,
|
||||
data: {
|
||||
members,
|
||||
member: foundMember,
|
||||
description,
|
||||
source: mdxSource,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// function resolveMember(packageName?: string | undefined, member?: SidebarLayoutProps['data']['member']) {
|
||||
// switch (member?.kind) {
|
||||
// case 'Class': {
|
||||
// const typedMember = member as ApiClassJSON;
|
||||
// return `?pkg=${packageName}&kind=${typedMember.kind}&name=${typedMember.name}&methods=${typedMember.methods.length}&props=${typedMember.properties.length}`;
|
||||
// }
|
||||
|
||||
// case 'Function': {
|
||||
// const typedMember = member as ApiFunctionJSON;
|
||||
// return `?pkg=${packageName}&kind=${typedMember.kind}&name=${typedMember.name}`;
|
||||
// }
|
||||
|
||||
// case 'Interface': {
|
||||
// const typedMember = member as ApiInterfaceJSON;
|
||||
// return `?pkg=${packageName}&kind=${typedMember.kind}&name=${typedMember.name}&methods=${typedMember.methods.length}&props=${typedMember.properties.length}`;
|
||||
// }
|
||||
|
||||
// case 'TypeAlias': {
|
||||
// const typedMember = member as ApiTypeAliasJSON;
|
||||
// return `?pkg=${packageName}&kind=${typedMember.kind}&name=${typedMember.name}`;
|
||||
// }
|
||||
|
||||
// case 'Variable': {
|
||||
// const typedMember = member as ApiVariableJSON;
|
||||
// return `?pkg=${packageName}&kind=${typedMember.kind}&name=${typedMember.name}`;
|
||||
// }
|
||||
|
||||
// case 'Enum': {
|
||||
// const typedMember = member as ApiEnumJSON;
|
||||
// return `?pkg=${packageName}&kind=${typedMember.kind}&name=${typedMember.name}&members=${typedMember.members.length}`;
|
||||
// }
|
||||
|
||||
// default: {
|
||||
// return `?pkg=${packageName}&kind=${member?.kind}&name=${member?.name}`;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
function member(props?: ApiItemJSON | undefined) {
|
||||
switch (props?.kind) {
|
||||
case 'Class':
|
||||
return <Class data={props as ApiClassJSON} />;
|
||||
case 'Function':
|
||||
return <Function data={props as ApiFunctionJSON} key={props.containerKey} />;
|
||||
case 'Interface':
|
||||
return <Interface data={props as ApiInterfaceJSON} />;
|
||||
case 'TypeAlias':
|
||||
return <TypeAlias data={props as ApiTypeAliasJSON} />;
|
||||
case 'Variable':
|
||||
return <Variable data={props as ApiVariableJSON} />;
|
||||
case 'Enum':
|
||||
return <Enum data={props as ApiEnumJSON} />;
|
||||
default:
|
||||
return <div>Cannot render that item type</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default async function Page({ params }: { params: { package: string; slug: string[] } }) {
|
||||
const data = await getData(params.package, params.slug);
|
||||
|
||||
// const name = useMemo(
|
||||
// () => `discord.js${params.data?.member?.name ? ` | ${params.data.member.name}` : ''}`,
|
||||
// [params.data?.member?.name],
|
||||
// );
|
||||
// const ogTitle = useMemo(
|
||||
// () => `${params.packageName ?? 'discord.js'}${params.data?.member?.name ? ` | ${params.data.member.name}` : ''}`,
|
||||
// [params.packageName, params.data?.member?.name],
|
||||
// );
|
||||
// const ogImage = useMemo(
|
||||
// () => resolveMember(params.packageName, params.data?.member),
|
||||
// [params.packageName, params.data?.member],
|
||||
// );
|
||||
|
||||
// Just in case
|
||||
// return <iframe src="https://discord.js.org" style={{ border: 0, height: '100%', width: '100%' }}></iframe>;
|
||||
|
||||
return (
|
||||
<MemberProvider member={data.data?.member}>
|
||||
<Nav members={data.data.members} />
|
||||
<>
|
||||
{/* <Head>
|
||||
<title key="title">{name}</title>
|
||||
<meta content={params.data.description} key="description" name="description" />
|
||||
<meta content={ogTitle} key="og_title" property="og:title" />
|
||||
<meta content={params.data.description} key="og_description" property="og:description" />
|
||||
<meta content={`https://discordjs.dev/api/og_model${ogImage}`} key="og_image" property="og:image" />
|
||||
</Head> */}
|
||||
<main
|
||||
className={`pt-18 lg:pl-76 ${
|
||||
(data?.data.member?.kind === 'Class' || data?.data.member?.kind === 'Interface') &&
|
||||
((data.data.member as ApiClassJSON | ApiInterfaceJSON).methods?.length ||
|
||||
(data.data.member as ApiClassJSON | ApiInterfaceJSON).properties?.length)
|
||||
? 'xl:pr-64'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<article className="dark:bg-dark-600 bg-light-600">
|
||||
<div className="dark:bg-dark-800 relative z-10 min-h-[calc(100vh_-_70px)] bg-white p-6 pb-20 shadow">
|
||||
{data.data?.member ? (
|
||||
member(data.data.member)
|
||||
) : data.data?.source ? (
|
||||
<div className="prose max-w-none">
|
||||
<MDXRemote {...data.data?.source} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="h-76 md:h-52" />
|
||||
<footer
|
||||
className={`dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16 ${
|
||||
(data?.data.member?.kind === 'Class' || data?.data.member?.kind === 'Interface') &&
|
||||
((data.data.member as ApiClassJSON | ApiInterfaceJSON).methods?.length ||
|
||||
(data.data.member as ApiClassJSON | ApiInterfaceJSON).properties?.length)
|
||||
? 'xl:pr-76'
|
||||
: 'xl:pr-16'
|
||||
}`}
|
||||
>
|
||||
<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
|
||||
<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Vercel"
|
||||
>
|
||||
<Image alt="Vercel" src={vercelLogo} />
|
||||
</a>
|
||||
<div className="flex flex-row gap-6 md:gap-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="text-lg font-semibold">Community</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://discord.gg/djs"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://github.com/discordjs/discord.js/discussions"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
GitHub discussions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="text-lg font-semibold">Project</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://github.com/discordjs/discord.js"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
discord.js
|
||||
</a>
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://discordjs.guide"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
discord.js guide
|
||||
</a>
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://discord-api-types.dev"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
discord-api-types
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</main>
|
||||
</>
|
||||
</MemberProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { createApiModel, tryResolveSummaryText } from '@discordjs/scripts';
|
||||
import type {
|
||||
ApiDeclaredItem,
|
||||
ApiEnum,
|
||||
ApiItem,
|
||||
ApiItemContainerMixin,
|
||||
ApiMethod,
|
||||
ApiMethodSignature,
|
||||
ApiProperty,
|
||||
ApiPropertySignature,
|
||||
} from '@microsoft/api-extractor-model';
|
||||
import { ApiItemKind } from '@microsoft/api-extractor-model';
|
||||
import type { ItemRouteParams } from './page';
|
||||
import { fetchModelJSON } from '~/app/docAPI';
|
||||
import { OVERLOAD_SEPARATOR } from '~/util/constants';
|
||||
import { findMember } from '~/util/model.server';
|
||||
|
||||
async function fetchMember({ package: packageName, version, item }: ItemRouteParams): Promise<ApiItem | undefined> {
|
||||
const modelJSON = await fetchModelJSON(packageName, version);
|
||||
const model = createApiModel(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): URLSearchParams {
|
||||
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 default async function Head({ params }: { params: ItemRouteParams }) {
|
||||
const member = (await fetchMember(params))!;
|
||||
const name = `discord.js${member?.displayName ? ` | ${member.displayName}` : ''}`;
|
||||
const ogTitle = `${params.package ?? 'discord.js'}${member?.displayName ? ` | ${member.displayName}` : ''}`;
|
||||
const searchParams = resolveMemberSearchParams(params.package, member);
|
||||
const url = new URL('https://discordjs.dev/api/og_model');
|
||||
url.search = searchParams.toString();
|
||||
const ogImage = url.toString();
|
||||
const description = tryResolveSummaryText(member as ApiDeclaredItem);
|
||||
|
||||
return (
|
||||
<>
|
||||
<title key="title">{name}</title>
|
||||
<meta content={description ?? ''} key="description" name="description" />
|
||||
<meta content={ogTitle} key="og_title" property="og:title" />
|
||||
<meta content={description ?? ''} key="og_description" property="og:description" />
|
||||
<meta content={ogImage} key="og_image" property="og:image" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,10 @@
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { Providers } from './providers';
|
||||
import { CmdKDialog } from '~/components/CmdK';
|
||||
import { Header } from '~/components/Header';
|
||||
|
||||
export default function SidebarLayout({ children }: PropsWithChildren) {
|
||||
export default function ItemLayout({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<Providers>
|
||||
<Header />
|
||||
<>{children}</>
|
||||
<CmdKDialog />
|
||||
</Providers>
|
||||
@@ -0,0 +1,114 @@
|
||||
/* eslint-disable no-case-declarations */
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
// eslint-disable-next-line n/prefer-global/process
|
||||
import process, { cwd } from 'node:process';
|
||||
import { createApiModel } from '@discordjs/scripts';
|
||||
import type {
|
||||
ApiClass,
|
||||
ApiEnum,
|
||||
ApiInterface,
|
||||
ApiItem,
|
||||
ApiTypeAlias,
|
||||
ApiVariable,
|
||||
} from '@microsoft/api-extractor-model';
|
||||
import { ApiFunction } from '@microsoft/api-extractor-model';
|
||||
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, PACKAGES } from '~/util/constants';
|
||||
import { findMember, findMemberByKey } from '~/util/model.server';
|
||||
|
||||
export interface ItemRouteParams {
|
||||
item: string;
|
||||
package: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
export async function generateStaticParams({ params: { package: packageName, version } }: { params: ItemRouteParams }) {
|
||||
const modelJSON = await fetchModelJSON(packageName, version);
|
||||
const model = createApiModel(modelJSON);
|
||||
|
||||
const pkg = model.tryGetPackageByName(packageName);
|
||||
const entry = pkg?.entryPoints[0];
|
||||
|
||||
if (!entry) {
|
||||
return notFound();
|
||||
}
|
||||
|
||||
return entry.members.map((member) => ({
|
||||
item: member.displayName,
|
||||
}));
|
||||
}
|
||||
|
||||
async function fetchMember({ package: packageName, version: branchName = 'main', item }: ItemRouteParams) {
|
||||
if (!PACKAGES.includes(packageName)) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
let data;
|
||||
try {
|
||||
if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
|
||||
const res = await readFile(join(cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'), 'utf8');
|
||||
data = JSON.parse(res);
|
||||
} else {
|
||||
const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${branchName}.api.json`);
|
||||
data = await res.json();
|
||||
}
|
||||
} catch {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const [memberName, overloadIndex] = decodeURIComponent(item).split(OVERLOAD_SEPARATOR);
|
||||
const model = createApiModel(data);
|
||||
|
||||
// eslint-disable-next-line prefer-const
|
||||
let { containerKey, displayName: name } = findMember(model, packageName, memberName) ?? {};
|
||||
if (name && overloadIndex && !Number.isNaN(Number.parseInt(overloadIndex, 10))) {
|
||||
containerKey = ApiFunction.getContainerKey(name, Number.parseInt(overloadIndex, 10));
|
||||
}
|
||||
|
||||
return memberName && containerKey ? findMemberByKey(model, packageName, containerKey) ?? null : null;
|
||||
}
|
||||
|
||||
function Member({ member }: { member?: ApiItem }) {
|
||||
switch (member?.kind) {
|
||||
case 'Class':
|
||||
return <Class clazz={member as ApiClass} />;
|
||||
case 'Function':
|
||||
return <Function item={member as ApiFunction} key={member.containerKey} />;
|
||||
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);
|
||||
|
||||
return (
|
||||
<main
|
||||
className={
|
||||
(member?.kind === 'Class' || member?.kind === 'Interface') && (member as ApiClass | ApiInterface).members.length
|
||||
? 'xl:pr-64'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
<article className="dark:bg-dark-600 bg-light-600">
|
||||
<div className="dark:bg-dark-800 bg-white p-6 pb-20 shadow">{member ? <Member member={member} /> : null}</div>
|
||||
</article>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import { createApiModel } from '@discordjs/scripts';
|
||||
import type { ApiFunction, ApiItem } from '@microsoft/api-extractor-model';
|
||||
import Image from 'next/image';
|
||||
import { notFound } from 'next/navigation';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
|
||||
import vercelLogo from '~/assets/powered-by-vercel.svg';
|
||||
import { Header } from '~/components/Header';
|
||||
import { Nav } from '~/components/Nav';
|
||||
import type { SidebarSectionItemData } from '~/components/Sidebar';
|
||||
import { resolveItemURI } from '~/components/documentation/util';
|
||||
import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
|
||||
|
||||
export interface VersionRouteParams {
|
||||
package: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const params: VersionRouteParams[] = [];
|
||||
|
||||
await Promise.all(
|
||||
PACKAGES.map(async (packageName) => {
|
||||
const versions = (await fetchVersions(packageName)).slice(-N_RECENT_VERSIONS);
|
||||
|
||||
params.push(...versions.map((version) => ({ package: packageName, version })));
|
||||
}),
|
||||
);
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
function serializeIntoSidebarItemData(item: ApiItem): SidebarSectionItemData {
|
||||
return {
|
||||
kind: item.kind,
|
||||
name: item.displayName,
|
||||
href: resolveItemURI(item),
|
||||
overloadIndex: 'overloadIndex' in item ? (item.overloadIndex as number) : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function PackageLayout({ children, params }: PropsWithChildren<{ params: VersionRouteParams }>) {
|
||||
const modelJSON = await fetchModelJSON(params.package, params.version);
|
||||
const model = createApiModel(modelJSON);
|
||||
|
||||
const pkg = model.tryGetPackageByName(params.package);
|
||||
|
||||
if (!pkg) {
|
||||
return notFound();
|
||||
}
|
||||
|
||||
const entry = pkg.entryPoints[0];
|
||||
|
||||
if (!entry) {
|
||||
return notFound();
|
||||
}
|
||||
|
||||
const members = entry.members.filter((member) => {
|
||||
if (member.kind !== 'Function') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (member as ApiFunction).overloadIndex === 1;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
|
||||
<article className="pt-18 lg:pl-76">
|
||||
<div className="relative z-10 min-h-[calc(100vh_-_70px)]">{children}</div>
|
||||
<div className="h-76 md:h-52" />
|
||||
<footer className="dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16">
|
||||
<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
|
||||
<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Vercel"
|
||||
>
|
||||
<Image alt="Vercel" src={vercelLogo} />
|
||||
</a>
|
||||
<div className="flex flex-row gap-6 md:gap-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="text-lg font-semibold">Community</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://discord.gg/djs"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://github.com/discordjs/discord.js/discussions"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
GitHub discussions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="text-lg font-semibold">Project</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://github.com/discordjs/discord.js"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
discord.js
|
||||
</a>
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://discordjs.guide"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
discord.js guide
|
||||
</a>
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
|
||||
href="https://discord-api-types.dev"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
discord-api-types
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
import { serialize } from 'next-mdx-remote/serialize';
|
||||
import rehypeIgnore from 'rehype-ignore';
|
||||
import rehypePrettyCode, { type Options } from 'rehype-pretty-code';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import rehypeSlug from 'rehype-slug';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { getHighlighter } from 'shiki';
|
||||
import shikiLangJavascript from 'shiki/languages/javascript.tmLanguage.json';
|
||||
import shikiLangTypescript from 'shiki/languages/typescript.tmLanguage.json';
|
||||
import shikiThemeDarkPlus from 'shiki/themes/dark-plus.json';
|
||||
import shikiThemeLightPlus from 'shiki/themes/light-plus.json';
|
||||
import type { VersionRouteParams } from './layout';
|
||||
import { MDXRemote } from '~/components/MDXRemote';
|
||||
|
||||
async function loadREADME(packageName: string) {
|
||||
return readFile(join(process.cwd(), 'src', 'assets', 'readme', packageName, 'home-README.md'), 'utf8');
|
||||
}
|
||||
|
||||
async function generateMDX(readme: string) {
|
||||
return serialize(readme, {
|
||||
mdxOptions: {
|
||||
remarkPlugins: [remarkGfm],
|
||||
remarkRehypeOptions: { allowDangerousHtml: true },
|
||||
rehypePlugins: [
|
||||
rehypeRaw,
|
||||
rehypeIgnore,
|
||||
rehypeSlug,
|
||||
[
|
||||
rehypePrettyCode,
|
||||
{
|
||||
theme: {
|
||||
dark: shikiThemeDarkPlus,
|
||||
light: shikiThemeLightPlus,
|
||||
},
|
||||
getHighlighter: async (options?: Partial<Options>) =>
|
||||
getHighlighter({
|
||||
...options,
|
||||
langs: [
|
||||
// @ts-expect-error: Working as intended
|
||||
{ id: 'javascript', aliases: ['js'], scopeName: 'source.js', grammar: shikiLangJavascript },
|
||||
// @ts-expect-error: Working as intended
|
||||
{ id: 'typescript', aliases: ['ts'], scopeName: 'source.ts', grammar: shikiLangTypescript },
|
||||
],
|
||||
}),
|
||||
},
|
||||
],
|
||||
],
|
||||
format: 'md',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default async function Page({ params }: { params: VersionRouteParams }) {
|
||||
const { package: packageName } = params;
|
||||
const readmeSource = await loadREADME(packageName);
|
||||
const mdxSource = await generateMDX(readmeSource);
|
||||
|
||||
return (
|
||||
<article className="dark:bg-dark-600 bg-white p-10">
|
||||
<div className="prose max-w-none">
|
||||
<MDXRemote {...mdxSource} />
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { PACKAGES } from '~/util/constants';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return PACKAGES.map((packageName) => ({ package: packageName }));
|
||||
}
|
||||
|
||||
export default function PackageLayout({ children }: PropsWithChildren) {
|
||||
return children;
|
||||
}
|
||||
@@ -5,24 +5,7 @@ import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
|
||||
import Link from 'next/link';
|
||||
import { PACKAGES } from '~/util/constants';
|
||||
|
||||
async function getData() {
|
||||
return Promise.all(
|
||||
PACKAGES.map(async (pkg) => {
|
||||
const response = await fetch(`https://docs.discordjs.dev/api/info?package=${pkg}`, {
|
||||
next: { revalidate: 3_600 },
|
||||
});
|
||||
const versions = await response.json();
|
||||
const latestVersion = versions.at(-2) ?? 'main';
|
||||
return { packageName: pkg, version: latestVersion };
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
export default async function Page() {
|
||||
const data = await getData();
|
||||
|
||||
const findLatestVersion = (pkg: string) => data.find((version) => version.packageName === pkg);
|
||||
|
||||
return (
|
||||
<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
|
||||
<div className="flex grow flex-col place-content-center gap-4">
|
||||
@@ -44,7 +27,7 @@ export default async function Page() {
|
||||
{PACKAGES.map((pkg) => (
|
||||
<Link
|
||||
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
|
||||
href={`/docs/packages/${pkg}/${findLatestVersion(pkg)?.version ?? 'main'}`}
|
||||
href={`/docs/packages/${pkg}`}
|
||||
key={pkg}
|
||||
>
|
||||
<div className="flex grow flex-row place-content-between place-items-center gap-4">
|
||||
|
||||
Reference in New Issue
Block a user