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

feat(website): add app dir (#8869)

Browse Source 
Co-authored-by: iCrawl <buechler.noel@outlook.com>
This commit is contained in:
Suneet Tipirneni
2022-11-27 10:24:34 -05:00
committed by GitHub
parent decbce4010
commit 12553da135
49 changed files with 941 additions and 953 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/website/.gitignore vendored
View File

@@ -27,3 +27,4 @@ src/styles/unocss.css
coverage/ coverage/
.vercel .vercel
public/searchIndex public/searchIndex
.vscode

1
apps/website/next.config.js
View File

@@ -12,6 +12,7 @@ export default {
cleanDistDir: true, cleanDistDir: true,
experimental: { experimental: {
appDir: true, appDir: true,
serverComponentsExternalPackages: ['@microsoft/api-extractor-model', 'jju', 'shiki'],
outputFileTracingRoot: fileURLToPath(new URL('../../', import.meta.url)), outputFileTracingRoot: fileURLToPath(new URL('../../', import.meta.url)),
fallbackNodePolyfills: false, fallbackNodePolyfills: false,
}, },

14
apps/website/src/app/docs/[...slug]/layout.tsx Normal file
View File

@@ -0,0 +1,14 @@
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<any>) {
return (
<Providers>
<Header />
<>{children}</>
<CmdKDialog />
</Providers>
);
}

9
apps/website/src/pages/404.tsx → apps/website/src/app/docs/[...slug]/not-found.tsx
View File

@@ -1,20 +1,19 @@
import Head from 'next/head'; // import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
export default function FourOhFourPage() { export default function NotFound() {
return ( return (
<> <>
<Head> {/* <Head>
<title key="title">discord.js | 404</title> <title key="title">discord.js | 404</title>
<meta content="discord.js | 404" key="og_title" property="og:title" /> <meta content="discord.js | 404" key="og_title" property="og:title" />
</Head> </Head> */}
<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6"> <div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1> <h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2> <h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link <Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px" className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
href="/docs/packages" href="/docs/packages"
prefetch={false}
> >
Take me back Take me back
</Link> </Link>

394
apps/website/src/app/docs/[...slug]/page.tsx Normal file
View File

@@ -0,0 +1,394 @@
/* 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() {
return (
await Promise.all(
PACKAGES.map(async (packageName) => {
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}`);
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: ['packages', packageName, version] })),
...pkgs.flatMap((pkg, idx) =>
getMembers(pkg, versions[idx] ?? 'main').map((member) => {
if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
return {
slug: [
'packages',
packageName,
versions[idx] ?? 'main',
`${member.name}:${member.overloadIndex}:${member.kind}`,
],
};
}
return {
slug: ['packages', packageName, versions[idx] ?? 'main', `${member.name}:${member.kind}`],
};
}),
),
];
}
const model = createApiModel(data);
const pkg = findPackage(model, packageName)!;
return [
{ slug: ['packages', packageName, 'main'] },
...getMembers(pkg, 'main').map((member) => {
if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
return {
slug: ['packages', packageName, 'main', `${member.name}:${member.overloadIndex}:${member.kind}`],
};
}
return { slug: ['packages', packageName, 'main', `${member.name}:${member.kind}`] };
}),
];
} catch {
return { slug: [] };
}
}),
)
).flat();
}
async function getData(slug: string[]) {
const [path, packageName = 'builders', branchName = 'main', member] = slug;
if (path !== 'packages' || !PACKAGES.includes(packageName)) {
notFound();
}
const [memberName, overloadIndex] = member?.split('%3A') ?? [];
const readme = await readFile(join(cwd(), '..', '..', 'packages', packageName, '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',
},
});
let data;
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`, {
next: { revalidate: 3_600 },
});
data = await res.json();
}
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: { slug: string[] } }) {
const data = await getData(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>
);
}
export const config = {
unstable_includeFiles: [`../../packages/{brokers,builders,collection,proxy,rest,util,voice,ws}/README.md`],
};

13
apps/website/src/app/docs/[...slug]/providers.tsx Normal file
View File

@@ -0,0 +1,13 @@
'use client';
import type { PropsWithChildren } from 'react';
import { CmdKProvider } from '~/contexts/cmdK';
import { NavProvider } from '~/contexts/nav';
export function Providers({ children }: PropsWithChildren) {
return (
<NavProvider>
<CmdKProvider>{children}</CmdKProvider>
</NavProvider>
);
}

82
apps/website/src/pages/docs/packages/[package]/index.tsx → apps/website/src/app/docs/packages/[package]/page.tsx
View File

@@ -1,80 +1,41 @@
import Link from 'next/link'; import Link from 'next/link';
import type { GetStaticPaths, GetStaticProps } from 'next/types'; import { notFound } from 'next/navigation';
import { VscArrowLeft, VscArrowRight, VscVersions } from 'react-icons/vsc'; import { VscArrowLeft, VscArrowRight, VscVersions } from 'react-icons/vsc';
import { PACKAGES } from '~/util/constants'; import { PACKAGES } from '~/util/constants';
interface VersionProps { export const dynamicParams = false;
data: {
versions: string[]; export async function generateStaticParams() {
}; return PACKAGES.map((packageName) => ({ package: packageName }));
packageName: string;
} }
export const getStaticPaths: GetStaticPaths = () => { async function getData(pkg: string) {
const versions = PACKAGES.map((packageName) => ({ params: { package: packageName } })); if (!PACKAGES.includes(pkg)) {
notFound();
return {
paths: versions,
fallback: false,
};
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const packageName = params!.package as string;
if (!PACKAGES.includes(packageName)) {
return {
notFound: true,
};
} }
try { const res = await fetch(`https://docs.discordjs.dev/api/info?package=${pkg}`, { next: { revalidate: 3_600 } });
const res = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`); const data: string[] = await res.json();
const data: string[] = await res.json();
if (!data.length) { if (!data.length) {
return { throw new Error('Failed to fetch data');
notFound: true,
};
}
return {
props: {
packageName,
data: {
versions: data.reverse(),
},
},
revalidate: 3_600,
};
} catch (error_) {
const error = error_ as Error;
console.error(error);
return {
props: {
error: error.message,
},
revalidate: 1,
};
} }
};
export default function VersionsRoute(props: Partial<VersionProps> & { error?: string }) { return data.reverse();
return props.error ? ( }
<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
{props.error} export default async function Page({ params }: { params: { package: string } }) {
</div> const data = await getData(params.package);
) : (
return (
<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6"> <div className="min-w-xs sm:w-md mx-auto flex h-full 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"> <div className="flex grow flex-col place-content-center gap-4">
<h1 className="text-2xl font-semibold">Select a version:</h1> <h1 className="text-2xl font-semibold">Select a version:</h1>
{props.data?.versions.map((version) => ( {data.map((version) => (
<Link <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-col place-content-center 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" 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-col place-content-center 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/${props.packageName}/${version}`} href={`/docs/packages/${params.package}/${version}`}
key={version} key={version}
prefetch={false}
> >
<div className="flex flex-row place-content-between place-items-center gap-4"> <div className="flex flex-row place-content-between place-items-center gap-4">
<div className="flex flex-row place-content-between place-items-center gap-4"> <div className="flex flex-row place-content-between place-items-center gap-4">
@@ -88,7 +49,6 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
<Link <Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px" className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
href="/docs/packages" href="/docs/packages"
prefetch={false}
> >
<VscArrowLeft size={20} /> Go back <VscArrowLeft size={20} /> Go back
</Link> </Link>

81
apps/website/src/pages/docs/packages/index.tsx → apps/website/src/app/docs/packages/page.tsx
View File

@@ -1,65 +1,26 @@
import { Button } from 'ariakit/button';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router';
import type { GetStaticProps } from 'next/types';
import { useCallback, type MouseEvent } from 'react';
import { VscArrowLeft, VscArrowRight, VscPackage } from 'react-icons/vsc'; import { VscArrowLeft, VscArrowRight, VscPackage } from 'react-icons/vsc';
import { PACKAGES } from '~/util/constants'; import { PACKAGES } from '~/util/constants';
interface PackageProps { async function getData() {
data: { return Promise.all(
versions: { packageName: string; version: string }[]; 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 const getStaticProps: GetStaticProps = async () => { export default async function Page() {
try { const data = await getData();
const versions = await Promise.all(
PACKAGES.map(async (pkg) => {
const response = await fetch(`https://docs.discordjs.dev/api/info?package=${pkg}`);
const versions = await response.json();
const latestVersion = versions.at(-2) ?? 'main';
return { packageName: pkg, version: latestVersion };
}),
);
return { const findLatestVersion = (pkg: string) => data.find((version) => version.packageName === pkg);
props: {
versions,
},
revalidate: 3_600,
};
} catch (error_) {
const error = error_ as Error;
console.error(error);
return { return (
props: {
error: error.message,
},
revalidate: 1,
};
}
};
export default function PackagesRoute(props: Partial<PackageProps> & { error?: string }) {
const router = useRouter();
const findLatestVersion = useCallback(
(pkg: string) => props.data?.versions.find((version) => version.packageName === pkg),
[props.data?.versions],
);
const handleClick = async (ev: MouseEvent<HTMLDivElement>, packageName: string) => {
ev.stopPropagation();
void router.push(`/docs/packages/${packageName}`);
};
return props.error ? (
<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
{props.error}
</div>
) : (
<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6"> <div className="min-w-xs sm:w-md mx-auto flex h-full 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"> <div className="flex grow flex-col place-content-center gap-4">
<h1 className="text-2xl font-semibold">Select a package:</h1> <h1 className="text-2xl font-semibold">Select a package:</h1>
@@ -82,7 +43,6 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
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" 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}/${findLatestVersion(pkg)?.version ?? 'main'}`}
key={pkg} key={pkg}
prefetch={false}
> >
<div className="flex grow flex-row place-content-between place-items-center gap-4"> <div className="flex grow flex-row place-content-between place-items-center gap-4">
<div className="flex grow flex-row place-content-between place-items-center gap-4"> <div className="flex grow flex-row place-content-between place-items-center gap-4">
@@ -90,16 +50,14 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
<VscPackage size={25} /> <VscPackage size={25} />
<h2 className="font-semibold">{pkg}</h2> <h2 className="font-semibold">{pkg}</h2>
</div> </div>
<Link href={`/docs/packages/${pkg}`} prefetch={false}> {/* <Link href={`/docs/packages/${pkg}`}>
<Button <div
as="div"
className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-0 focus:ring focus:ring-white active:translate-y-px" className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-0 focus:ring focus:ring-white active:translate-y-px"
onClick={async (ev: MouseEvent<HTMLDivElement>) => handleClick(ev, pkg)}
role="link" role="link"
> >
Select version Select version
</Button> </div>
</Link> </Link> */}
</div> </div>
<VscArrowRight size={20} /> <VscArrowRight size={20} />
</div> </div>
@@ -108,7 +66,6 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
<Link <Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px" className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
href="/" href="/"
prefetch={false}
> >
<VscArrowLeft size={20} /> Go back <VscArrowLeft size={20} /> Go back
</Link> </Link>

28
apps/website/src/app/head.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { DESCRIPTION } from '~/util/constants';
export default function Head() {
return (
<>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<link href="/site.webmanifest" rel="manifest" />
<link color="#090a16" href="/safari-pinned-tab.svg" rel="mask-icon" />
<meta content="light dark" name="color-scheme" />
<meta content="discord.js" name="apple-mobile-web-app-title" />
<meta content="discord.js" name="application-name" />
<meta content="#090a16" name="msapplication-TileColor" />
<meta content={DESCRIPTION} key="description" name="description" />
<meta content="discord.js" property="og:site_name" />
<meta content="website" property="og:type" />
<meta content="discord.js" key="og_title" property="og:title" />
<meta content={DESCRIPTION} key="og_description" property="og:description" />
<meta content="https://discordjs.dev/api/og" key="og_image" property="og:image" />
<meta content="summary_large_image" name="twitter:card" />
<meta content="@iCrawlToGo" name="twitter:creator" />
<title key="title">discord.js</title>
<meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
<meta content="#5865f2" name="theme-color" />
</>
);
}

19
apps/website/src/app/layout.tsx Normal file
View File

@@ -0,0 +1,19 @@
import type { PropsWithChildren } from 'react';
import { Providers } from './providers';
import '@unocss/reset/tailwind.css';
import '../styles/inter.css';
import '../styles/unocss.css';
import '../styles/cmdk.css';
import '../styles/main.css';
export default function RootLayout({ children }: PropsWithChildren) {
return (
<html lang="en">
<head />
<body className="dark:bg-dark-800 bg-white">
<Providers>{children}</Providers>
</body>
</html>
);
}

3
apps/website/src/pages/index.tsx → apps/website/src/app/page.tsx
View File

@@ -5,7 +5,7 @@ import vercelLogo from '../assets/powered-by-vercel.svg';
import { SyntaxHighlighter } from '~/components/SyntaxHighlighter'; import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
import { CODE_EXAMPLE } from '~/util/constants'; import { CODE_EXAMPLE } from '~/util/constants';
export default function IndexRoute() { export default function Page() {
return ( return (
<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:h-full lg:place-content-center lg:py-0 lg:px-6"> <div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:h-full lg:place-content-center lg:py-0 lg:px-6">
<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6"> <div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
@@ -23,7 +23,6 @@ export default function IndexRoute() {
<Link <Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px" className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
href="/docs" href="/docs"
prefetch={false}
> >
Docs Docs
</Link> </Link>

20
apps/website/src/app/providers.tsx Normal file
View File

@@ -0,0 +1,20 @@
'use client';
import { ThemeProvider } from 'next-themes';
import type { PropsWithChildren } from 'react';
export function Providers({ children }: PropsWithChildren) {
return (
<ThemeProvider
attribute="class"
defaultTheme="system"
disableTransitionOnChange
value={{
light: 'light',
dark: 'dark',
}}
>
{children}
</ThemeProvider>
);
}

24
apps/website/src/components/CmdK.tsx
View File

@@ -1,7 +1,9 @@
'use client';
import type { ApiItemKind } from '@microsoft/api-extractor-model'; import type { ApiItemKind } from '@microsoft/api-extractor-model';
import { Dialog } from 'ariakit/dialog'; import { Dialog } from 'ariakit/dialog';
import { Command } from 'cmdk'; import { Command } from 'cmdk';
import { useRouter } from 'next/router'; import { usePathname, useRouter } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { import {
VscArrowRight, VscArrowRight,
@@ -36,18 +38,16 @@ function resolveIcon(item: keyof typeof ApiItemKind) {
} }
} }
export function CmdKDialog({ export function CmdKDialog() {
currentPackageName, const pathname = usePathname();
currentVersion,
}: {
currentPackageName?: string | undefined;
currentVersion?: string | undefined;
}) {
const router = useRouter(); const router = useRouter();
const dialog = useCmdK(); const dialog = useCmdK();
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [searchResults, setSearchResults] = useState<any[]>([]); const [searchResults, setSearchResults] = useState<any[]>([]);
const packageName = pathname?.split('/').slice(3, 4)[0];
const branchName = pathname?.split('/').slice(4, 5)[0];
const searchResultItems = useMemo( const searchResultItems = useMemo(
() => () =>
searchResults?.map((item) => ( searchResults?.map((item) => (
@@ -55,7 +55,7 @@ export function CmdKDialog({
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row 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" className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row 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"
key={item.id} key={item.id}
onSelect={() => { onSelect={() => {
void router.push(item.path); router.push(item.path);
dialog!.setOpen(false); dialog!.setOpen(false);
}} }}
> >
@@ -101,12 +101,12 @@ export function CmdKDialog({
useEffect(() => { useEffect(() => {
const searchDoc = async (searchString: string, version: string) => { const searchDoc = async (searchString: string, version: string) => {
const res = await client.index(`${currentPackageName}-${version}`).search(searchString, { limit: 5 }); const res = await client.index(`${packageName}-${version}`).search(searchString, { limit: 5 });
setSearchResults(res.hits); setSearchResults(res.hits);
}; };
if (search && currentPackageName) { if (search && packageName) {
void searchDoc(search, currentVersion?.replaceAll('.', '-') ?? 'main'); void searchDoc(search, branchName?.replaceAll('.', '-') ?? 'main');
} else { } else {
setSearchResults([]); setSearchResults([]);
} }

2
apps/website/src/components/CodeListing.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { TokenDocumentation, ApiItemJSON, AnyDocNodeJSON, InheritanceData } from '@discordjs/api-extractor-utils'; import type { TokenDocumentation, ApiItemJSON, AnyDocNodeJSON, InheritanceData } from '@discordjs/api-extractor-utils';
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
import { FiLink } from 'react-icons/fi'; import { FiLink } from 'react-icons/fi';

2
apps/website/src/components/DocContainer.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { import type {
ApiItemJSON, ApiItemJSON,
TokenDocumentation, TokenDocumentation,

123
apps/website/src/components/Header.tsx Normal file
View File

@@ -0,0 +1,123 @@
'use client';
import { Button } from 'ariakit/button';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTheme } from 'next-themes';
import { Fragment, useEffect, useMemo, useState } from 'react';
import { FiCommand } from 'react-icons/fi';
import { VscColorMode, VscGithubInverted, VscMenu, VscSearch } from 'react-icons/vsc';
import { useCmdK } from '~/contexts/cmdK';
import { useNav } from '~/contexts/nav';
export function Header() {
const pathname = usePathname();
// eslint-disable-next-line @typescript-eslint/unbound-method
const { setOpened } = useNav();
const { resolvedTheme, setTheme } = useTheme();
const dialog = useCmdK();
const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
useEffect(() => {
setAsPathWithoutQueryAndAnchor(pathname?.split('?')[0]?.split('#')[0] ?? '');
}, [pathname]);
const asPathWithoutContainerKey = useMemo(
() => asPathWithoutQueryAndAnchor?.split(':')[0] ?? '',
[asPathWithoutQueryAndAnchor],
);
const pathElements = useMemo(
() =>
asPathWithoutContainerKey
.split('/')
.slice(1)
.map((path, idx, original) => (
<Link
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
href={`/${original.slice(0, idx + 1).join('/')}`}
key={idx}
>
{path}
</Link>
)),
[asPathWithoutContainerKey],
);
const breadcrumbs = useMemo(
() =>
pathElements.flatMap((el, idx, array) => {
if (idx === 0) {
return (
<Fragment key={idx}>
<div className="mx-2">/</div>
{el}
<div className="mx-2">/</div>
</Fragment>
);
}
if (idx !== array.length - 1) {
return (
<Fragment key={idx}>
{el}
<div className="mx-2">/</div>
</Fragment>
);
}
return <Fragment key={idx}>{el}</Fragment>;
}),
[pathElements],
);
return (
<header className="dark:bg-dark-600 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
<div className="h-18 block px-6">
<div className="flex h-full flex-row place-content-between place-items-center">
<Button
aria-label="Menu"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
onClick={() => setOpened((open) => !open)}
>
<VscMenu size={24} />
</Button>
<div className="hidden md:flex md:flex-row md:overflow-hidden">{breadcrumbs}</div>
<div className="flex flex-row place-items-center gap-4">
<Button
as="div"
className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
onClick={() => dialog?.toggle()}
>
<div className="flex flex-row place-items-center gap-4">
<VscSearch size={18} />
<span className="opacity-65">Search...</span>
<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
<FiCommand size={18} /> K
</div>
</div>
</Button>
<Button
aria-label="GitHub"
as="a"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"
>
<VscGithubInverted size={24} />
</Button>
<Button
aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
onClick={() => toggleTheme()}
>
<VscColorMode size={24} />
</Button>
</div>
</div>
</div>
</header>
);
}

3
apps/website/src/components/HyperlinkedText.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { TokenDocumentation } from '@discordjs/api-extractor-utils'; import type { TokenDocumentation } from '@discordjs/api-extractor-utils';
import Link from 'next/link'; import Link from 'next/link';
@@ -11,7 +13,6 @@ export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) {
className="text-blurple focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring" className="text-blurple focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
href={token.path} href={token.path}
key={idx} key={idx}
prefetch={false}
> >
{token.text} {token.text}
</Link> </Link>

3
apps/website/src/components/InheritanceText.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { InheritanceData } from '@discordjs/api-extractor-utils'; import type { InheritanceData } from '@discordjs/api-extractor-utils';
import Link from 'next/link'; import Link from 'next/link';
@@ -8,7 +10,6 @@ export function InheritanceText({ data }: { data: InheritanceData }) {
<Link <Link
className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring" className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
href={data.path} href={data.path}
prefetch={false}
> >
{data.parentName} {data.parentName}
</Link> </Link>

3
apps/website/src/components/MDXRemote.tsx Normal file
View File

@@ -0,0 +1,3 @@
'use client';
export { MDXRemote } from 'next-mdx-remote';

4
apps/website/src/components/MethodItem.tsx
View File

@@ -1,5 +1,7 @@
'use client';
import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils'; import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils';
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit'; import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
import { useCallback, useMemo, useState } from 'react'; import { useCallback, useMemo, useState } from 'react';
import { FiLink } from 'react-icons/fi'; import { FiLink } from 'react-icons/fi';
import { VscChevronDown, VscVersions } from 'react-icons/vsc'; import { VscChevronDown, VscVersions } from 'react-icons/vsc';

2
apps/website/src/components/MethodList.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils'; import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils';
import { Fragment, useMemo } from 'react'; import { Fragment, useMemo } from 'react';
import { MethodItem } from './MethodItem'; import { MethodItem } from './MethodItem';

37
apps/website/src/components/Nav.tsx Normal file
View File

@@ -0,0 +1,37 @@
'use client';
import type { getMembers } from '@discordjs/api-extractor-utils';
import { Scrollbars } from 'react-custom-scrollbars-2';
import { PackageSelect } from './PackageSelect';
import { SidebarItems } from './SidebarItems';
import { VersionSelect } from './VersionSelect';
import { useNav } from '~/contexts/nav';
export function Nav({ members }: { members: ReturnType<typeof getMembers> }) {
// eslint-disable-next-line @typescript-eslint/unbound-method
const { opened } = useNav();
return (
<nav
className={`dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[73px] left-0 bottom-0 z-20 h-[calc(100vh_-_73px)] w-full border-r bg-white ${
opened ? 'block' : 'hidden'
} lg:w-76 lg:max-w-76 lg:block`}
>
<Scrollbars
autoHide
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
)}
universal
>
<div className="flex flex-col gap-3 px-3 pt-3">
<PackageSelect />
<VersionSelect />
</div>
<SidebarItems members={members} />
</Scrollbars>
</nav>
);
}

67
apps/website/src/components/PackageSelect.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useMemo } from 'react';
import { VscPackage, VscChevronDown } from 'react-icons/vsc';
import { PACKAGES } from '~/util/constants';
export function PackageSelect() {
const pathname = usePathname();
const packageName = pathname?.split('/').slice(3, 4)[0];
const packageMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
const packageMenuItems = useMemo(
() => [
<a href="https://discord.js.org/#/docs/discord.js" key="discord.js">
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
id="discord-js"
onClick={() => packageMenu.setOpen(false)}
state={packageMenu}
>
discord.js
</MenuItem>
</a>,
...PACKAGES.map((pkg) => (
<Link href={`/docs/packages/${pkg}/main`} key={pkg}>
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
id={pkg}
onClick={() => packageMenu.setOpen(false)}
state={packageMenu}
>
{pkg}
</MenuItem>
</Link>
)),
],
[packageMenu],
);
return (
<>
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={packageMenu}
>
<div className="flex flex-row place-content-between place-items-center">
<div className="flex flex-row place-items-center gap-3">
<VscPackage size={20} />
<span className="font-semibold">{packageName}</span>
</div>
<VscChevronDown
className={`transform transition duration-150 ease-in-out ${packageMenu.open ? 'rotate-180' : 'rotate-0'}`}
size={20}
/>
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
state={packageMenu}
>
{packageMenuItems}
</Menu>
</>
);
}

2
apps/website/src/components/ParameterTable.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { ParameterDocumentation } from '@discordjs/api-extractor-utils'; import type { ParameterDocumentation } from '@discordjs/api-extractor-utils';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { HyperlinkedText } from './HyperlinkedText'; import { HyperlinkedText } from './HyperlinkedText';

2
apps/website/src/components/PropertyList.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { ApiPropertyItemJSON } from '@discordjs/api-extractor-utils'; import type { ApiPropertyItemJSON } from '@discordjs/api-extractor-utils';
import { Fragment, useMemo } from 'react'; import { Fragment, useMemo } from 'react';
import { CodeListing } from './CodeListing'; import { CodeListing } from './CodeListing';

2
apps/website/src/components/Sections.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { import type {
ApiClassJSON, ApiClassJSON,
ApiInterfaceJSON, ApiInterfaceJSON,

40
apps/website/src/components/SidebarItems.tsx
View File

@@ -1,6 +1,10 @@
'use client';
import type { getMembers } from '@discordjs/api-extractor-utils';
import { Section } from '@discordjs/ui'; import { Section } from '@discordjs/ui';
import Link from 'next/link'; import Link from 'next/link';
import { type Dispatch, type SetStateAction, useMemo } from 'react'; import { usePathname } from 'next/navigation';
import { useMemo, useState, useEffect } from 'react';
import { import {
VscSymbolClass, VscSymbolClass,
VscSymbolEnum, VscSymbolEnum,
@@ -9,7 +13,18 @@ import {
VscSymbolVariable, VscSymbolVariable,
VscSymbolMethod, VscSymbolMethod,
} from 'react-icons/vsc'; } from 'react-icons/vsc';
import type { GroupedMembers, Members } from './SidebarLayout'; import { useNav } from '~/contexts/nav';
type Members = ReturnType<typeof getMembers>;
interface GroupedMembers {
Classes: Members;
Enums: Members;
Functions: Members;
Interfaces: Members;
Types: Members;
Variables: Members;
}
function groupMembers(members: Members): GroupedMembers { function groupMembers(members: Members): GroupedMembers {
const Classes: Members = []; const Classes: Members = [];
@@ -64,15 +79,15 @@ function resolveIcon(item: keyof GroupedMembers) {
} }
} }
export function SidebarItems({ export function SidebarItems({ members }: { members: Members }) {
members, const pathname = usePathname();
setOpened, const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
asPath, const { setOpened } = useNav();
}: {
asPath: string; useEffect(() => {
members: Members; setAsPathWithoutQueryAndAnchor(pathname?.split('?')[0]?.split('#')[0] ?? '');
setOpened: Dispatch<SetStateAction<boolean>>; }, [pathname]);
}) {
const groupItems = useMemo(() => groupMembers(members), [members]); const groupItems = useMemo(() => groupMembers(members), [members]);
return ( return (
@@ -84,14 +99,13 @@ export function SidebarItems({
{groupItems[group].map((member, index) => ( {groupItems[group].map((member, index) => (
<Link <Link
className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${ className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
asPath === member.path asPathWithoutQueryAndAnchor === member.path
? 'bg-blurple text-white' ? 'bg-blurple text-white'
: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800' : 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
}`} }`}
href={member.path} href={member.path}
key={index} key={index}
onClick={() => setOpened(false)} onClick={() => setOpened(false)}
prefetch={false}
title={member.name} title={member.name}
> >
<div className="flex flex-row place-items-center gap-2 lg:text-sm"> <div className="flex flex-row place-items-center gap-2 lg:text-sm">

376
apps/website/src/components/SidebarLayout.tsx
View File

@@ -1,376 +0,0 @@
import type { getMembers, ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
import { Button } from 'ariakit/button';
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
import Image from 'next/image';
import Link from 'next/link';
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 { 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 { 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';
export interface SidebarLayoutProps {
asPath: string;
branchName: string;
data: {
description: string;
member?: ReturnType<typeof findMember>;
members: ReturnType<typeof getMembers>;
source: MDXRemoteSerializeResult;
};
packageName: string;
}
export type Members = SidebarLayoutProps['data']['members'];
export interface GroupedMembers {
Classes: Members;
Enums: Members;
Functions: Members;
Interfaces: Members;
Types: Members;
Variables: Members;
}
export function SidebarLayout({
packageName,
branchName,
data,
asPath,
children,
}: PropsWithChildren<SidebarLayoutProps>) {
const dialog = useCmdK();
const { data: versions } = useSWR<string[]>(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher);
const { resolvedTheme, setTheme } = useTheme();
const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
const matches = useMedia('(min-width: 992px)', false);
const [opened, setOpened] = useState(false);
const packageMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
const versionMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
// useLockBodyScroll(opened);
useEffect(() => {
if (matches) {
setOpened(false);
}
}, [matches]);
const asPathWithoutContainerKey = useMemo(() => asPath?.split(':')[0] ?? '', [asPath]);
const packageMenuItems = useMemo(
() => [
<a href="https://discord.js.org/#/docs/discord.js" key="discord.js">
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
onClick={() => packageMenu.setOpen(false)}
state={packageMenu}
>
discord.js
</MenuItem>
</a>,
...PACKAGES.map((pkg) => (
<Link href={`/docs/packages/${pkg}/main`} key={pkg} passHref prefetch={false}>
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
onClick={() => packageMenu.setOpen(false)}
state={packageMenu}
>
{pkg}
</MenuItem>
</Link>
)),
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
);
const versionMenuItems = useMemo(
() =>
versions
?.map((item) => (
<Link href={`/docs/packages/${packageName}/${item}`} key={item} passHref prefetch={false}>
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
onClick={() => versionMenu.setOpen(false)}
state={versionMenu}
>
{item}
</MenuItem>
</Link>
))
.reverse() ?? [],
// eslint-disable-next-line react-hooks/exhaustive-deps
[versions, packageName],
);
const pathElements = useMemo(
() =>
asPathWithoutContainerKey
.split('/')
.slice(1)
.map((path, idx, original) => (
<Link
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
href={`/${original.slice(0, idx + 1).join('/')}`}
key={idx}
prefetch={false}
>
{path}
</Link>
)),
[asPathWithoutContainerKey],
);
const breadcrumbs = useMemo(
() =>
pathElements.flatMap((el, idx, array) => {
if (idx === 0) {
return (
<Fragment key={idx}>
<div className="mx-2">/</div>
{el}
<div className="mx-2">/</div>
</Fragment>
);
}
if (idx !== array.length - 1) {
return (
<Fragment key={idx}>
{el}
<div className="mx-2">/</div>
</Fragment>
);
}
return <Fragment key={idx}>{el}</Fragment>;
}),
[pathElements],
);
return (
<>
<header className="dark:bg-dark-600 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
<div className="h-18 block px-6">
<div className="flex h-full flex-row place-content-between place-items-center">
<Button
aria-label="Menu"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
onClick={() => setOpened((open) => !open)}
>
<VscMenu size={24} />
</Button>
<div className="hidden md:flex md:flex-row md:overflow-hidden">{breadcrumbs}</div>
<div className="flex flex-row place-items-center gap-4">
<Button
as="div"
className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
onClick={() => dialog?.toggle()}
>
<div className="flex flex-row place-items-center gap-4">
<VscSearch size={18} />
<span className="opacity-65">Search...</span>
<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
<FiCommand size={18} /> K
</div>
</div>
</Button>
<Button
aria-label="GitHub"
as="a"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"
>
<VscGithubInverted size={24} />
</Button>
<Button
aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
onClick={() => toggleTheme()}
>
<VscColorMode size={24} />
</Button>
</div>
</div>
</div>
</header>
<nav
className={`dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[73px] left-0 bottom-0 z-20 h-[calc(100vh_-_73px)] w-full border-r bg-white ${
opened ? 'block' : 'hidden'
} lg:w-76 lg:max-w-76 lg:block`}
>
<Scrollbars
autoHide
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
)}
universal
>
<div className="flex flex-col gap-3 px-3 pt-3">
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={packageMenu}
>
<div className="flex flex-row place-content-between place-items-center">
<div className="flex flex-row place-items-center gap-3">
<VscPackage size={20} />
<span className="font-semibold">{packageName}</span>
</div>
<VscChevronDown
className={`transform transition duration-150 ease-in-out ${
packageMenu.open ? 'rotate-180' : 'rotate-0'
}`}
size={20}
/>
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
state={packageMenu}
>
{packageMenuItems}
</Menu>
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={versionMenu}
>
<div className="flex flex-row place-content-between place-items-center">
<div className="flex flex-row place-items-center gap-3">
<VscVersions size={20} />
<span className="font-semibold">{branchName}</span>
</div>
<VscChevronDown
className={`transform transition duration-150 ease-in-out ${
versionMenu.open ? 'rotate-180' : 'rotate-0'
}`}
size={20}
/>
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
state={versionMenu}
>
{versionMenuItems}
</Menu>
</div>
<SidebarItems asPath={asPath} members={data?.members ?? []} setOpened={setOpened} />
</Scrollbars>
</nav>
<main
className={`pt-18 lg:pl-76 ${
(data?.member?.kind === 'Class' || data?.member?.kind === 'Interface') &&
((data.member as ApiClassJSON | ApiInterfaceJSON).methods?.length ||
(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">
{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 ${
(data?.member?.kind === 'Class' || data?.member?.kind === 'Interface') &&
((data.member as ApiClassJSON | ApiInterfaceJSON).methods?.length ||
(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>
<CmdKDialog currentPackageName={packageName} currentVersion={branchName} />
</>
);
}

2
apps/website/src/components/SyntaxHighlighter.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import { PrismAsyncLight } from 'react-syntax-highlighter'; import { PrismAsyncLight } from 'react-syntax-highlighter';
import { vscDarkPlus, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import { vscDarkPlus, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';

2
apps/website/src/components/Table.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import { useMemo, type ReactNode } from 'react'; import { useMemo, type ReactNode } from 'react';
export function Table({ export function Table({

2
apps/website/src/components/TableOfContentItems.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils'; import type { ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc'; import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';

2
apps/website/src/components/TypeParamTable.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { TypeParameterData } from '@discordjs/api-extractor-utils'; import type { TypeParameterData } from '@discordjs/api-extractor-utils';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { HyperlinkedText } from './HyperlinkedText'; import { HyperlinkedText } from './HyperlinkedText';

60
apps/website/src/components/VersionSelect.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useMemo } from 'react';
import { VscVersions, VscChevronDown } from 'react-icons/vsc';
import useSWR from 'swr';
import { fetcher } from '~/util/fetcher';
export function VersionSelect() {
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) => (
<Link href={`/docs/packages/${packageName}/${item}`} key={item}>
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
onClick={() => versionMenu.setOpen(false)}
state={versionMenu}
>
{item}
</MenuItem>
</Link>
))
.reverse() ?? [],
[versions, packageName, versionMenu],
);
return (
<>
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={versionMenu}
>
<div className="flex flex-row place-content-between place-items-center">
<div className="flex flex-row place-items-center gap-3">
<VscVersions size={20} />
<span className="font-semibold">{branchName}</span>
</div>
<VscChevronDown
className={`transform transition duration-150 ease-in-out ${versionMenu.open ? 'rotate-180' : 'rotate-0'}`}
size={20}
/>
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
state={versionMenu}
>
{versionMenuItems}
</Menu>
</>
);
}

2
apps/website/src/components/model/Class.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { ApiClassJSON } from '@discordjs/api-extractor-utils'; import type { ApiClassJSON } from '@discordjs/api-extractor-utils';
import { DocContainer } from '../DocContainer'; import { DocContainer } from '../DocContainer';
import { ConstructorSection, MethodsSection, PropertiesSection } from '../Sections'; import { ConstructorSection, MethodsSection, PropertiesSection } from '../Sections';

2
apps/website/src/components/model/Enum.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { ApiEnumJSON } from '@discordjs/api-extractor-utils'; import type { ApiEnumJSON } from '@discordjs/api-extractor-utils';
import { Section } from '@discordjs/ui'; import { Section } from '@discordjs/ui';
import { Fragment } from 'react'; import { Fragment } from 'react';

4
apps/website/src/components/model/Function.tsx
View File

@@ -1,5 +1,7 @@
'use client';
import type { ApiFunctionJSON } from '@discordjs/api-extractor-utils'; import type { ApiFunctionJSON } from '@discordjs/api-extractor-utils';
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit'; import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
import { useState } from 'react'; import { useState } from 'react';
import { VscChevronDown, VscVersions } from 'react-icons/vsc'; import { VscChevronDown, VscVersions } from 'react-icons/vsc';
import { DocContainer } from '../DocContainer'; import { DocContainer } from '../DocContainer';

2
apps/website/src/components/model/Interface.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { ApiInterfaceJSON } from '@discordjs/api-extractor-utils'; import type { ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
import { DocContainer } from '../DocContainer'; import { DocContainer } from '../DocContainer';
import { MethodsSection, PropertiesSection } from '../Sections'; import { MethodsSection, PropertiesSection } from '../Sections';

2
apps/website/src/components/model/TypeAlias.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { ApiTypeAliasJSON } from '@discordjs/api-extractor-utils'; import type { ApiTypeAliasJSON } from '@discordjs/api-extractor-utils';
import { DocContainer } from '../DocContainer'; import { DocContainer } from '../DocContainer';

2
apps/website/src/components/model/Variable.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { ApiVariableJSON } from '@discordjs/api-extractor-utils'; import type { ApiVariableJSON } from '@discordjs/api-extractor-utils';
import { DocContainer } from '../DocContainer'; import { DocContainer } from '../DocContainer';

2
apps/website/src/components/tsdoc/BlockComment.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import { Alert } from '@discordjs/ui'; import { Alert } from '@discordjs/ui';
import { StandardTags } from '@microsoft/tsdoc'; import { StandardTags } from '@microsoft/tsdoc';
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';

4
apps/website/src/components/tsdoc/TSDoc.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import type { import type {
AnyDocNodeJSON, AnyDocNodeJSON,
DocPlainTextJSON, DocPlainTextJSON,
@@ -42,7 +44,6 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring" className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
href={codeDestination.path} href={codeDestination.path}
key={idx} key={idx}
prefetch={false}
> >
{text ?? codeDestination.name} {text ?? codeDestination.name}
</Link> </Link>
@@ -55,7 +56,6 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring" className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
href={urlDestination} href={urlDestination}
key={idx} key={idx}
prefetch={false}
> >
{text ?? urlDestination} {text ?? urlDestination}
</Link> </Link>

8
apps/website/src/contexts/cmdK.tsx
View File

@@ -1,6 +1,8 @@
import { type DisclosureState, useDialogState } from 'ariakit'; 'use client';
import type { PropsWithChildren } from 'react';
import { createContext, useContext } from 'react'; import { useDialogState } from 'ariakit/dialog';
import type { DisclosureState } from 'ariakit/disclosure';
import { type PropsWithChildren, createContext, useContext } from 'react';
export const CmdKContext = createContext<DisclosureState | null>(null); export const CmdKContext = createContext<DisclosureState | null>(null);

6
apps/website/src/contexts/member.tsx
View File

@@ -1,14 +1,16 @@
'use client';
import type { ApiItemJSON } from '@discordjs/api-extractor-utils'; import type { ApiItemJSON } from '@discordjs/api-extractor-utils';
import { createContext, useContext, type ReactNode } from 'react'; import { createContext, useContext, type ReactNode } from 'react';
export const MemberContext = createContext<ApiItemJSON | undefined>(undefined); export const MemberContext = createContext<ApiItemJSON | null | undefined>(undefined);
export const MemberProvider = ({ export const MemberProvider = ({
member, member,
children, children,
}: { }: {
children?: ReactNode | undefined; children?: ReactNode | undefined;
member: ApiItemJSON | undefined; member: ApiItemJSON | null | undefined;
}) => <MemberContext.Provider value={member}>{children}</MemberContext.Provider>; }) => <MemberContext.Provider value={member}>{children}</MemberContext.Provider>;
export function useMember() { export function useMember() {

19
apps/website/src/contexts/nav.tsx Normal file
View File

@@ -0,0 +1,19 @@
'use client';
import { type PropsWithChildren, type Dispatch, type SetStateAction, createContext, useContext, useState } from 'react';
export const NavContext = createContext<{ opened: boolean; setOpened: Dispatch<SetStateAction<boolean>> }>({
opened: false,
setOpened: (_) => {},
});
export const NavProvider = ({ children }: PropsWithChildren) => {
const [opened, setOpened] = useState(false);
// eslint-disable-next-line react/jsx-no-constructed-context-values
return <NavContext.Provider value={{ opened, setOpened }}>{children}</NavContext.Provider>;
};
export function useNav() {
return useContext(NavContext);
}

33
apps/website/src/pages/_app.tsx
View File

@@ -1,33 +0,0 @@
import type { AppProps } from 'next/app';
import Head from 'next/head';
import NextProgress from 'next-progress';
import { ThemeProvider } from 'next-themes';
import '@unocss/reset/tailwind.css';
import '../styles/inter.css';
import '../styles/unocss.css';
import '../styles/cmdk.css';
import '../styles/main.css';
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<title key="title">discord.js</title>
<meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
<meta content="#5865f2" name="theme-color" />
</Head>
<ThemeProvider
attribute="class"
defaultTheme="system"
disableTransitionOnChange
value={{
light: 'light',
dark: 'dark',
}}
>
<NextProgress color="#5865f2" options={{ showSpinner: false }} />
<Component {...pageProps} />
</ThemeProvider>
</>
);
}

32
apps/website/src/pages/_document.tsx
View File

@@ -1,32 +0,0 @@
import { Html, Head, Main, NextScript } from 'next/document';
import { DESCRIPTION } from '~/util/constants';
export default function Document() {
return (
<Html lang="en">
<Head>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<link href="/site.webmanifest" rel="manifest" />
<link color="#090a16" href="/safari-pinned-tab.svg" rel="mask-icon" />
<meta content="light dark" name="color-scheme" />
<meta content="discord.js" name="apple-mobile-web-app-title" />
<meta content="discord.js" name="application-name" />
<meta content="#090a16" name="msapplication-TileColor" />
<meta content={DESCRIPTION} key="description" name="description" />
<meta content="discord.js" property="og:site_name" />
<meta content="website" property="og:type" />
<meta content="discord.js" key="og_title" property="og:title" />
<meta content={DESCRIPTION} key="og_description" property="og:description" />
<meta content="https://discordjs.dev/api/og" key="og_image" property="og:image" />
<meta content="summary_large_image" name="twitter:card" />
<meta content="@iCrawlToGo" name="twitter:creator" />
</Head>
<body className="dark:bg-dark-800 bg-white">
<Main />
<NextScript />
</body>
</Html>
);
}

345
apps/website/src/pages/docs/[...slug].tsx
View File

@@ -1,345 +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 Head from 'next/head';
import { useRouter } from 'next/router';
import type { GetStaticPaths, GetStaticProps } from 'next/types';
import { MDXRemote } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize';
import { useEffect, useMemo, useState } from 'react';
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 { SidebarLayout, type SidebarLayoutProps } from '~/components/SidebarLayout';
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 { CmdKProvider } from '~/contexts/cmdK';
import { MemberProvider } from '~/contexts/member';
import { DESCRIPTION, PACKAGES } from '~/util/constants';
import { findMember, findMemberByKey } from '~/util/model.server';
import { tryResolveDescription } from '~/util/summary';
export const getStaticPaths: GetStaticPaths = async () => {
const pkgs = (
await Promise.all(
PACKAGES.map(async (packageName) => {
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}`);
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) => ({ params: { slug: ['packages', packageName, version] } })),
...pkgs.flatMap((pkg, idx) =>
getMembers(pkg, versions[idx] ?? 'main').map((member) => {
if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
return {
params: {
slug: [
'packages',
packageName,
versions[idx] ?? 'main',
`${member.name}:${member.overloadIndex}:${member.kind}`,
],
},
};
}
return {
params: {
slug: ['packages', packageName, versions[idx] ?? 'main', `${member.name}:${member.kind}`],
},
};
}),
),
];
}
const model = createApiModel(data);
const pkg = findPackage(model, packageName)!;
return [
{ params: { slug: ['packages', packageName, 'main'] } },
...getMembers(pkg, 'main').map((member) => {
if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
return {
params: {
slug: ['packages', packageName, 'main', `${member.name}:${member.overloadIndex}:${member.kind}`],
},
};
}
return { params: { slug: ['packages', packageName, 'main', `${member.name}:${member.kind}`] } };
}),
];
} catch {
return { params: { slug: [] } };
}
}),
)
).flat();
return {
paths: pkgs,
fallback: true,
};
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const [path, packageName = 'builders', branchName = 'main', member] = params!.slug as string[];
if (path !== 'packages' || !PACKAGES.includes(packageName)) {
return {
notFound: true,
};
}
const [memberName, overloadIndex] = member?.split(':') ?? [];
try {
const readme = await readFile(join(cwd(), '..', '..', 'packages', packageName, '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',
},
});
let data;
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();
}
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 member =
memberName && containerKey ? findMemberByKey(model, packageName, containerKey, branchName) ?? null : null;
const description = member ? tryResolveDescription(member) ?? DESCRIPTION : DESCRIPTION;
return {
props: {
packageName,
branchName,
data: {
members,
member,
description,
source: mdxSource,
},
},
revalidate: 3_600,
};
} catch (error_) {
const error = error_ as Error;
console.error(error);
return {
props: {
error: error.message,
},
revalidate: 1,
};
}
};
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 function SlugPage(props: SidebarLayoutProps & { error?: string }) {
const router = useRouter();
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
const name = useMemo(
() => `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`,
[props.data?.member?.name],
);
const ogTitle = useMemo(
() => `${props.packageName ?? 'discord.js'}${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`,
[props.packageName, props.data?.member?.name],
);
const ogImage = useMemo(
() => resolveMember(props.packageName, props.data?.member),
[props.packageName, props.data?.member],
);
useEffect(() => {
setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');
}, [router.asPath]);
if (router.isFallback) {
return null;
}
// Just in case
// return <iframe src="https://discord.js.org" style={{ border: 0, height: '100%', width: '100%' }}></iframe>;
return props.error ? (
<div className="flex h-full max-h-full w-full max-w-full flex-row">{props.error}</div>
) : (
<CmdKProvider>
<MemberProvider member={props.data?.member}>
<SidebarLayout {...props} asPath={asPathWithoutQueryAndAnchor}>
{props.data?.member ? (
<>
<Head>
<title key="title">{name}</title>
<meta content={props.data.description} key="description" name="description" />
<meta content={ogTitle} key="og_title" property="og:title" />
<meta content={props.data.description} key="og_description" property="og:description" />
<meta content={`https://discordjs.dev/api/og_model${ogImage}`} key="og_image" property="og:image" />
</Head>
{member(props.data.member)}
</>
) : props.data?.source ? (
<div className="prose max-w-none">
<MDXRemote {...props.data.source} />
</div>
) : null}
</SidebarLayout>
</MemberProvider>
</CmdKProvider>
);
}
export const config = {
unstable_includeFiles: [`../../packages/{brokers,builders,collection,proxy,rest,util,voice,ws}/README.md`],
};

4
apps/website/src/styles/main.css
View File

@@ -23,6 +23,10 @@ body {
height: 100%; height: 100%;
} }
[data-nextjs-scroll-focus-boundary] {
height: 100%;
}
[data-theme='dark'] { [data-theme='dark'] {
display: none; display: none;
} }

2
apps/website/tsconfig.json
View File

@@ -18,6 +18,6 @@
"~/*": ["./src/*"] "~/*": ["./src/*"]
} }
}, },
"include": ["src/**/*.ts", "src/**/*.tsx", "next-env.d.ts", "types.d.ts"], "include": ["src/**/*.ts", "src/**/*.tsx", "next-env.d.ts", "types.d.ts", ".next/types/**/*.ts"],
"exclude": ["node_modules"] "exclude": ["node_modules"]
} }