mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-14 10:33:30 +01:00
refactor: docs (#10126)
This commit is contained in:
Noel
@@ -1,28 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Analytics } from '@vercel/analytics/react';
|
||||
import { inter } from '~/util/fonts';
|
||||
import { Providers } from './providers';
|
||||
|
||||
import '~/styles/cmdk.css';
|
||||
import '~/styles/main.css';
|
||||
|
||||
export default function GlobalError({ error }: { readonly error: Error }) {
|
||||
console.error(error);
|
||||
|
||||
return (
|
||||
<html className={inter.variable} lang="en" suppressHydrationWarning>
|
||||
<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
|
||||
<Providers>
|
||||
<main className="mx-auto max-w-2xl min-h-screen">
|
||||
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
|
||||
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
|
||||
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
|
||||
</div>
|
||||
</main>
|
||||
</Providers>
|
||||
<Analytics />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import type { NextRequest } from 'next/server';
|
||||
import { NextResponse } from 'next/server';
|
||||
import { fetchVersions } from '~/app/docAPI';
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const packageName = req.nextUrl.pathname.split('/').slice(2, 3)[0] ?? 'discord.js';
|
||||
return NextResponse.json(await fetchVersions(packageName));
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
|
||||
import type { ApiItemKind } from '@discordjs/api-extractor-model';
|
||||
import { ImageResponse } from '@vercel/og';
|
||||
import type { NextRequest } from 'next/server';
|
||||
import { resolvePackageName } from '~/util/resolvePackageName';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
const fonts = Promise.all([
|
||||
fetch(new URL('../../../assets/fonts/Inter-Regular.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
|
||||
fetch(new URL('../../../assets/fonts/Inter-Bold.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
|
||||
]);
|
||||
|
||||
function resolveIcon(icon: keyof typeof ApiItemKind, size = 88) {
|
||||
switch (icon) {
|
||||
case 'Class':
|
||||
return (
|
||||
<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.34 9.71h.71l2.67-2.67v-.71L13.38 5h-.7l-1.82 1.81h-5V5.56l1.86-1.85V3l-2-2H5L1 5v.71l2 2h.71l1.14-1.15v5.79l.5.5H10v.52l1.33 1.34h.71l2.67-2.67v-.71L13.37 10h-.7l-1.86 1.85h-5v-4H10v.48l1.34 1.38zm1.69-3.65l.63.63-2 2-.63-.63 2-2zm0 5l.63.63-2 2-.63-.63 2-2zM3.35 6.65l-1.29-1.3 3.29-3.29 1.3 1.29-3.3 3.3z" />
|
||||
</svg>
|
||||
);
|
||||
case 'Enum':
|
||||
return (
|
||||
<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M14 2H8L7 3v3h1V3h6v5h-4v1h4l1-1V3l-1-1zM9 6h4v1H9.41L9 6.59V6zM7 7H2L1 8v5l1 1h6l1-1V8L8 7H7zm1 6H2V8h6v5zM3 9h4v1H3V9zm0 2h4v1H3v-1zm6-7h4v1H9V4z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
case 'EnumMember':
|
||||
return (
|
||||
<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M7 3l1-1h6l1 1v5l-1 1h-4V8h4V3H8v3H7V3zm2 6V8L8 7H2L1 8v5l1 1h6l1-1V9zM8 8v5H2V8h6zm1.414-1L9 6.586V6h4v1H9.414zM9 4h4v1H9V4zm-2 6H3v1h4v-1z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
case 'Interface':
|
||||
return (
|
||||
<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.496 4a3.49 3.49 0 0 0-3.46 3h-3.1a2 2 0 1 0 0 1h3.1a3.5 3.5 0 1 0 3.46-4zm0 6a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" />
|
||||
</svg>
|
||||
);
|
||||
case 'TypeAlias':
|
||||
return (
|
||||
<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.45 4.5l-5-2.5h-.9l-7 3.5-.55.89v4.5l.55.9 5 2.5h.9l7-3.5.55-.9v-4.5l-.55-.89zm-8 8.64l-4.5-2.25V7.17l4.5 2v3.97zm.5-4.8L2.29 6.23l6.66-3.34 4.67 2.34-6.67 3.11zm7 1.55l-6.5 3.25V9.21l6.5-3v3.68z" />
|
||||
</svg>
|
||||
);
|
||||
case 'Variable':
|
||||
return (
|
||||
<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M2 5h2V4H1.5l-.5.5v8l.5.5H4v-1H2V5zm12.5-1H12v1h2v7h-2v1h2.5l.5-.5v-8l-.5-.5zm-2.74 2.57L12 7v2.51l-.3.45-4.5 2h-.46l-2.5-1.5-.24-.43v-2.5l.3-.46 4.5-2h.46l2.5 1.5zM5 9.71l1.5.9V9.28L5 8.38v1.33zm.58-2.15l1.45.87 3.39-1.5-1.45-.87-3.39 1.5zm1.95 3.17l3.5-1.56v-1.4l-3.5 1.55v1.41z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
case 'Property':
|
||||
return (
|
||||
<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.807 14.975a1.75 1.75 0 0 1-1.255-.556 1.684 1.684 0 0 1-.544-1.1A1.72 1.72 0 0 1 1.36 12.1c1.208-1.27 3.587-3.65 5.318-5.345a4.257 4.257 0 0 1 .048-3.078 4.095 4.095 0 0 1 1.665-1.969 4.259 4.259 0 0 1 4.04-.36l.617.268-2.866 2.951 1.255 1.259 2.944-2.877.267.619a4.295 4.295 0 0 1 .04 3.311 4.198 4.198 0 0 1-.923 1.392 4.27 4.27 0 0 1-.743.581 4.217 4.217 0 0 1-3.812.446c-1.098 1.112-3.84 3.872-5.32 5.254a1.63 1.63 0 0 1-1.084.423zm7.938-13.047a3.32 3.32 0 0 0-1.849.557c-.213.13-.412.284-.591.458a3.321 3.321 0 0 0-.657 3.733l.135.297-.233.227c-1.738 1.697-4.269 4.22-5.485 5.504a.805.805 0 0 0 .132 1.05.911.911 0 0 0 .298.22c.1.044.209.069.319.072a.694.694 0 0 0 .45-.181c1.573-1.469 4.612-4.539 5.504-5.44l.23-.232.294.135a3.286 3.286 0 0 0 3.225-.254 3.33 3.33 0 0 0 .591-.464 3.28 3.28 0 0 0 .964-2.358c0-.215-.021-.43-.064-.642L11.43 7.125 8.879 4.578l2.515-2.59a3.286 3.286 0 0 0-.65-.06z" />
|
||||
</svg>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.51 4l-5-3h-1l-5 3-.49.86v6l.49.85 5 3h1l5-3 .49-.85v-6L13.51 4zm-6 9.56l-4.5-2.7V5.7l4.5 2.45v5.41zM3.27 4.7l4.74-2.84 4.74 2.84-4.74 2.59L3.27 4.7zm9.74 6.16l-4.5 2.7V8.15l4.5-2.45v5.16z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const fontData = await fonts;
|
||||
|
||||
const { searchParams } = new URL(request.url);
|
||||
|
||||
const hasPkg = searchParams.has('pkg');
|
||||
const hasKind = searchParams.has('kind');
|
||||
const hasName = searchParams.has('name');
|
||||
const hasMethods = searchParams.has('methods');
|
||||
const hasProps = searchParams.has('props');
|
||||
const hasMembers = searchParams.has('members');
|
||||
const pkg = hasPkg ? resolvePackageName(searchParams.get('pkg')!) : '';
|
||||
const kind = hasKind ? searchParams.get('kind')! : 'Method';
|
||||
const name = hasName ? searchParams.get('name')!.slice(0, 100) : 'My default name which is super long to overflow';
|
||||
const methods = hasMethods ? searchParams.get('methods') : '';
|
||||
const props = hasProps ? searchParams.get('props') : '';
|
||||
const members = hasMembers ? searchParams.get('members') : '';
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'Inter',
|
||||
}}
|
||||
tw="flex flex-row bg-[#181818] h-full w-full p-24"
|
||||
>
|
||||
<div tw="flex flex-col mx-auto h-full text-white">
|
||||
<div tw="flex flex-row text-4xl text-gray-400">{pkg}</div>
|
||||
<div tw="flex flex-col justify-between h-full w-full pt-14">
|
||||
<div tw="flex flex-row items-center max-w-full">
|
||||
<span tw="mr-6">{resolveIcon(kind as keyof typeof ApiItemKind)}</span>
|
||||
<h2
|
||||
style={{
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
tw="text-[5.5rem] font-bold w-full"
|
||||
>
|
||||
{name}
|
||||
</h2>
|
||||
</div>
|
||||
<div tw="flex flex-row w-full justify-between">
|
||||
<div tw="flex flex-row">
|
||||
{props ? (
|
||||
<div tw="flex flex-row mr-12">
|
||||
<span tw="mr-4">{resolveIcon('Property', 36)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{props}</span>
|
||||
<span>Properties</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{methods ? (
|
||||
<div tw="flex flex-row mr-12">
|
||||
<span tw="mr-4">{resolveIcon('Method', 36)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{methods}</span>
|
||||
<span>Methods</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{members ? (
|
||||
<div tw="flex flex-row">
|
||||
<span tw="mr-4">{resolveIcon('EnumMember', 36)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{members}</span>
|
||||
<span>Members</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div tw="flex h-full items-end">
|
||||
<span tw="bg-[#5865f2] text-4xl font-black relative rounded-lg py-4 px-8">discord.js</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{
|
||||
width: 1_200,
|
||||
height: 630,
|
||||
fonts: [
|
||||
{ name: 'Inter', data: fontData[0], weight: 500, style: 'normal' },
|
||||
{ name: 'Inter', data: fontData[1], weight: 700, style: 'normal' },
|
||||
],
|
||||
debug: false,
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
|
||||
import { ImageResponse } from '@vercel/og';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
const fonts = fetch(new URL('../../../assets/fonts/Inter-Black.ttf', import.meta.url)).then(async (res) =>
|
||||
res.arrayBuffer(),
|
||||
);
|
||||
|
||||
export async function GET() {
|
||||
const fontData = await fonts;
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'Inter',
|
||||
}}
|
||||
tw="flex flex-row bg-[#181818] h-full w-full"
|
||||
>
|
||||
<div tw="mx-auto flex flex-row items-center h-full">
|
||||
<div tw="flex flex-row">
|
||||
<div tw="flex flex-row">
|
||||
<div tw="flex flex-col font-black text-[5.5rem] text-white">
|
||||
<div tw="flex flex-row">
|
||||
The <span tw="bg-[#5865f2] rounded-lg py-1 px-6 ml-4">most popular</span>
|
||||
</div>
|
||||
<span>way to build Discord</span>
|
||||
<span>bots.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{
|
||||
width: 1_200,
|
||||
height: 630,
|
||||
fonts: [{ name: 'Inter', data: fontData, weight: 900, style: 'normal' }],
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
import { sql } from '@vercel/postgres';
|
||||
|
||||
export const fetchVersions = async (packageName: string): Promise<string[]> => {
|
||||
if (process.env.NEXT_PUBLIC_LOCAL_DEV === 'true' || process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
|
||||
return ['main'];
|
||||
}
|
||||
|
||||
try {
|
||||
const { rows } = await sql`select version from documentation where name = ${packageName} order by version desc`;
|
||||
|
||||
return rows.map((row) => row.version);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchModelJSON = async (packageName: string, version: string) => {
|
||||
if (process.env.NEXT_PUBLIC_LOCAL_DEV === 'true') {
|
||||
try {
|
||||
const res = await readFile(
|
||||
join(process.cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'),
|
||||
'utf8',
|
||||
);
|
||||
|
||||
return JSON.parse(res);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
|
||||
try {
|
||||
const { rows } = await sql`select url from documentation where name = ${packageName} and version = ${'main'}`;
|
||||
const res = await fetch(rows[0]?.url ?? '');
|
||||
|
||||
return await res.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const { rows } = await sql`select url from documentation where name = ${packageName} and version = ${version}`;
|
||||
const res = await fetch(rows[0]?.url ?? '');
|
||||
|
||||
return await res.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,98 @@
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
import { ImageResponse } from 'next/og';
|
||||
import { resolveKind } from '~/util/resolveNodeKind';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
export const size = {
|
||||
width: 1_200,
|
||||
height: 630,
|
||||
};
|
||||
|
||||
export const contentType = 'image/png';
|
||||
|
||||
export default async function Image({
|
||||
params,
|
||||
}: {
|
||||
readonly params: { readonly item: string; readonly packageName: string; readonly version: string };
|
||||
}) {
|
||||
const normalizeItem = params.item.split(encodeURIComponent(':')).join('.').toLowerCase();
|
||||
|
||||
const isMainVersion = params.version === 'main';
|
||||
const fileContent = await fetch(
|
||||
`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.${normalizeItem}.api.json`,
|
||||
{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
|
||||
);
|
||||
const node = await fileContent.json();
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div tw="flex bg-[#121212] h-full w-full p-14">
|
||||
<div tw="flex flex-col mx-auto h-full text-white">
|
||||
<div tw="flex text-4xl text-gray-400">{params.packageName}</div>
|
||||
<div tw="flex flex-col justify-between h-full w-full pt-14">
|
||||
<div tw="flex items-center max-w-full">
|
||||
<span tw="mr-6">{resolveKind(node.kind, 94)}</span>
|
||||
<h2
|
||||
style={{
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
tw="text-[5.5rem] font-bold w-full"
|
||||
>
|
||||
{node.displayName}
|
||||
</h2>
|
||||
</div>
|
||||
<div tw="flex flex-row w-full justify-between">
|
||||
<div tw="flex flex-row">
|
||||
{node.members?.properties?.length ? (
|
||||
<div tw="flex mr-12">
|
||||
<span tw="mr-4">{resolveKind('Property', 42)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{node.members.properties.length}</span>
|
||||
<span>Properties</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{node.members?.events?.length ? (
|
||||
<div tw="flex mr-12">
|
||||
<span tw="mr-4">{resolveKind('Method', 42)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{node.members.events.length}</span>
|
||||
<span>Events</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{node.members?.methods?.length ? (
|
||||
<div tw="flex mr-12">
|
||||
<span tw="mr-4">{resolveKind('Method', 42)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{node.members.methods.length}</span>
|
||||
<span>Methods</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{node.members?.length ? (
|
||||
<div tw="flex">
|
||||
<span tw="mr-4">{resolveKind('EnumMember', 42)}</span>
|
||||
<div tw="flex flex-col text-4xl">
|
||||
<span tw="mb-4">{node.members.length}</span>
|
||||
<span>Members</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div tw="flex h-full items-end">
|
||||
<span tw="bg-[#5865f2] text-4xl font-black relative rounded-lg py-4 px-8">discord.js</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{
|
||||
...size,
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
// import { readFile } from 'node:fs/promises';
|
||||
// import { join } from 'node:path';
|
||||
// import { inspect } from 'node:util';
|
||||
import type { Metadata } from 'next';
|
||||
import { DocItem } from '~/components/DocItem';
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
readonly params: {
|
||||
readonly item: string;
|
||||
readonly packageName: string;
|
||||
readonly version: string;
|
||||
};
|
||||
}): Promise<Metadata> {
|
||||
const normalizeItem = params.item.split(encodeURIComponent(':'))[0];
|
||||
|
||||
return {
|
||||
title: `${normalizeItem} (${params.packageName} - ${params.version})`,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
}: {
|
||||
readonly params: { readonly item: string; readonly packageName: string; readonly version: string };
|
||||
}) {
|
||||
const normalizeItem = params.item.split(encodeURIComponent(':')).join('.').toLowerCase();
|
||||
|
||||
// const fileContent = await readFile(
|
||||
// join(process.cwd(), `../../packages/${params.packageName}/docs/split/${params.version}.${normalizeItem}.api.json`),
|
||||
// 'utf8',
|
||||
// );
|
||||
// const node = JSON.parse(fileContent);
|
||||
|
||||
const isMainVersion = params.version === 'main';
|
||||
const fileContent = await fetch(
|
||||
`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.${normalizeItem}.api.json`,
|
||||
{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
|
||||
);
|
||||
const node = await fileContent.json();
|
||||
|
||||
// console.log(inspect(node, { depth: 0 }));
|
||||
|
||||
return (
|
||||
<main className="flex w-full flex-col gap-8 pb-12 md:pb-0">
|
||||
<DocItem node={node} packageName={params.packageName} version={params.version} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
// import { readFile } from 'node:fs/promises';
|
||||
// import { join } from 'node:path';
|
||||
// import { inspect } from 'node:util';
|
||||
import type { Metadata } from 'next';
|
||||
import dynamic from 'next/dynamic';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { Navigation } from '~/components/Navigation';
|
||||
import { OverlayScrollbarsComponent } from '~/components/OverlayScrollbars';
|
||||
import { Drawer } from '~/components/ui/Drawer';
|
||||
import { Footer } from '~/components/ui/Footer';
|
||||
|
||||
// eslint-disable-next-line promise/prefer-await-to-then
|
||||
const CmdK = dynamic(async () => import('~/components/ui/CmdK').then((mod) => mod.CmdK), { ssr: false });
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
readonly params: { readonly packageName: string; readonly version: string };
|
||||
}): Promise<Metadata> {
|
||||
return {
|
||||
title: {
|
||||
template: '%s | discord.js',
|
||||
default: `${params.packageName} (${params.version})`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function Layout({
|
||||
params,
|
||||
children,
|
||||
}: PropsWithChildren<{ readonly params: { readonly packageName: string; readonly version: string } }>) {
|
||||
// const fileContent = await readFile(
|
||||
// join(process.cwd(), `../../packages/${params.packageName}/docs/split/${params.version}.dependencies.api.json`),
|
||||
// 'utf8',
|
||||
// );
|
||||
// const dependencies = JSON.parse(fileContent);
|
||||
|
||||
const isMainVersion = params.version === 'main';
|
||||
const fileContent = await fetch(
|
||||
`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.dependencies.api.json`,
|
||||
{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
|
||||
);
|
||||
const parsedDependencies = await fileContent.json();
|
||||
const dependencies = Object.entries<string>(parsedDependencies)
|
||||
.filter(([key]) => key.startsWith('@discordjs/') && !key.includes('api-extractor'))
|
||||
.map(([key, value]) => `${key.replace('@discordjs/', '').replaceAll('.', '-')}-${value.replaceAll('.', '-')}`);
|
||||
|
||||
// console.log(inspect(dependencies, { depth: 0 }));
|
||||
|
||||
return (
|
||||
// eslint-disable-next-line react/no-unknown-property
|
||||
<div vaul-drawer-wrapper="" className="mx-auto flex max-w-screen-xl flex-col gap-12 p-6 md:flex-row">
|
||||
<div className="sticky top-6 hidden flex-shrink-0 self-start md:block">
|
||||
<OverlayScrollbarsComponent
|
||||
className="max-h-[calc(100dvh-48px)]"
|
||||
defer
|
||||
options={{
|
||||
overflow: { x: 'hidden' },
|
||||
scrollbars: {
|
||||
autoHide: 'scroll',
|
||||
autoHideDelay: 500,
|
||||
autoHideSuspend: true,
|
||||
clickScroll: true,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Navigation className="pr-4" packageName={params.packageName} version={params.version} />
|
||||
</OverlayScrollbarsComponent>
|
||||
</div>
|
||||
<div className="pb-12">
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
<div className="fixed bottom-0 left-0 right-0 md:hidden">
|
||||
<Drawer>
|
||||
<Navigation
|
||||
className="max-w-none overflow-auto p-0 lg:max-w-none"
|
||||
packageName={params.packageName}
|
||||
version={params.version}
|
||||
drawer
|
||||
/>
|
||||
</Drawer>
|
||||
</div>
|
||||
<CmdK dependencies={dependencies} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
import rehypeShikiFromHighlighter from '@shikijs/rehype/core';
|
||||
import { MDXRemote } from 'next-mdx-remote/rsc';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { getHighlighterCore } from 'shiki/core';
|
||||
import getWasm from 'shiki/wasm';
|
||||
|
||||
const highlighter = await getHighlighterCore({
|
||||
themes: [import('shiki/themes/vitesse-light.mjs'), import('shiki/themes/vitesse-dark.mjs')],
|
||||
langs: [
|
||||
import('shiki/langs/typescript.mjs'),
|
||||
import('shiki/langs/javascript.mjs'),
|
||||
import('shiki/langs/shellscript.mjs'),
|
||||
],
|
||||
loadWasm: getWasm,
|
||||
});
|
||||
|
||||
export default async function Page({ params }: { readonly params: { readonly packageName: string } }) {
|
||||
const fileContent = await readFile(
|
||||
join(process.cwd(), `src/assets/readme/${params.packageName}/home-README.md`),
|
||||
'utf8',
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="prose prose-neutral mx-auto max-w-screen-lg dark:prose-invert">
|
||||
<MDXRemote
|
||||
options={{
|
||||
mdxOptions: {
|
||||
remarkPlugins: [remarkGfm],
|
||||
rehypePlugins: [
|
||||
[
|
||||
rehypeShikiFromHighlighter as any,
|
||||
highlighter,
|
||||
{
|
||||
themes: {
|
||||
light: 'vitesse-light',
|
||||
dark: 'vitesse-dark',
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
}}
|
||||
source={fileContent}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="relative top-6 mx-4 min-h-xl flex flex-col items-center justify-center gap-4">
|
||||
<svg
|
||||
className="h-9 w-9 animate-spin text-black dark:text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path
|
||||
className="opacity-75 dark:opacity-100"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<div className="text-lg font-medium">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import type { Route } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
export default function NotFound() {
|
||||
const pathname = usePathname();
|
||||
const href = pathname.split('/').slice(0, -1).join('/');
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
|
||||
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
|
||||
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
|
||||
<Link
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base text-white font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
|
||||
href={href as Route}
|
||||
>
|
||||
Take me back
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,180 +0,0 @@
|
||||
import type {
|
||||
ApiClass,
|
||||
ApiDeclaredItem,
|
||||
ApiEnum,
|
||||
ApiInterface,
|
||||
ApiItem,
|
||||
ApiItemContainerMixin,
|
||||
ApiMethod,
|
||||
ApiMethodSignature,
|
||||
ApiProperty,
|
||||
ApiPropertySignature,
|
||||
ApiTypeAlias,
|
||||
ApiVariable,
|
||||
ApiFunction,
|
||||
} from '@discordjs/api-extractor-model';
|
||||
import { ApiItemKind, ApiModel, ApiPackage } from '@discordjs/api-extractor-model';
|
||||
import { tryResolveSummaryText } from '@discordjs/scripts';
|
||||
import type { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { fetchModelJSON } from '~/app/docAPI';
|
||||
import { Class } from '~/components/model/Class';
|
||||
import { Interface } from '~/components/model/Interface';
|
||||
import { TypeAlias } from '~/components/model/TypeAlias';
|
||||
import { Variable } from '~/components/model/Variable';
|
||||
import { Enum } from '~/components/model/enum/Enum';
|
||||
import { Function } from '~/components/model/function/Function';
|
||||
import { OVERLOAD_SEPARATOR } from '~/util/constants';
|
||||
import { fetchMember } from '~/util/fetchMember';
|
||||
import { findMember } from '~/util/model';
|
||||
|
||||
export const revalidate = 86_400;
|
||||
|
||||
export interface ItemRouteParams {
|
||||
item: string;
|
||||
package: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
async function fetchHeadMember({ package: packageName, version, item }: ItemRouteParams) {
|
||||
const modelJSON = await fetchModelJSON(packageName, version);
|
||||
|
||||
if (!modelJSON) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const model = new ApiModel();
|
||||
model.addMember(ApiPackage.loadFromJson(modelJSON));
|
||||
const pkg = model.tryGetPackageByName(packageName);
|
||||
const entry = pkg?.entryPoints[0];
|
||||
|
||||
if (!entry) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const [memberName] = decodeURIComponent(item).split(OVERLOAD_SEPARATOR);
|
||||
return findMember(model, packageName, memberName);
|
||||
}
|
||||
|
||||
function resolveMemberSearchParams(packageName: string, member?: ApiItem) {
|
||||
const params = new URLSearchParams({
|
||||
pkg: packageName,
|
||||
kind: member?.kind ?? '',
|
||||
name: member?.displayName ?? '',
|
||||
});
|
||||
|
||||
switch (member?.kind) {
|
||||
case ApiItemKind.Interface:
|
||||
case ApiItemKind.Class: {
|
||||
const typedMember = member as ApiItemContainerMixin;
|
||||
|
||||
const properties = typedMember.members.filter((member) =>
|
||||
[ApiItemKind.Property, ApiItemKind.PropertySignature].includes(member.kind),
|
||||
) as (ApiProperty | ApiPropertySignature)[];
|
||||
const methods = typedMember.members.filter((member) =>
|
||||
[ApiItemKind.Method, ApiItemKind.Method].includes(member.kind),
|
||||
) as (ApiMethod | ApiMethodSignature)[];
|
||||
|
||||
params.append('methods', methods.length.toString());
|
||||
params.append('props', properties.length.toString());
|
||||
break;
|
||||
}
|
||||
|
||||
case ApiItemKind.Enum: {
|
||||
const typedMember = member as ApiEnum;
|
||||
params.append('members', typedMember.members.length.toString());
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: ItemRouteParams }) {
|
||||
const member = await fetchHeadMember(params);
|
||||
const name = `discord.js${member?.displayName ? ` | ${member.displayName}` : ''}`;
|
||||
const ogTitle = `${params.package ?? 'discord.js'}${member?.displayName ? ` | ${member.displayName}` : ''}`;
|
||||
const url = new URL('https://discordjs.dev/api/dynamic-open-graph.png');
|
||||
const searchParams = resolveMemberSearchParams(params.package, member);
|
||||
url.search = searchParams.toString();
|
||||
const ogImage = url.toString();
|
||||
let description;
|
||||
|
||||
if (member) {
|
||||
description = tryResolveSummaryText(member as ApiDeclaredItem);
|
||||
}
|
||||
|
||||
return {
|
||||
title: name,
|
||||
description: description ?? 'Discord.js API Documentation',
|
||||
openGraph: {
|
||||
title: ogTitle,
|
||||
description: description ?? 'Discord.js API Documentation',
|
||||
images: ogImage,
|
||||
},
|
||||
} satisfies Metadata;
|
||||
}
|
||||
|
||||
export async function generateStaticParams({ params: { package: packageName, version } }: { params: ItemRouteParams }) {
|
||||
if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
|
||||
return [];
|
||||
}
|
||||
|
||||
const modelJSON = await fetchModelJSON(packageName, version);
|
||||
|
||||
if (!modelJSON) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const model = new ApiModel();
|
||||
model.addMember(ApiPackage.loadFromJson(modelJSON));
|
||||
|
||||
const pkg = model.tryGetPackageByName(packageName);
|
||||
const entry = pkg?.entryPoints[0];
|
||||
|
||||
if (!entry) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return entry.members.map((member: ApiItem) => ({
|
||||
package: packageName,
|
||||
version,
|
||||
item: `${member.displayName}${OVERLOAD_SEPARATOR}${member.kind}`,
|
||||
}));
|
||||
}
|
||||
|
||||
function Member({ member }: { readonly member?: ApiItem }) {
|
||||
switch (member?.kind) {
|
||||
case 'Class':
|
||||
return <Class clazz={member as ApiClass} />;
|
||||
case 'Function':
|
||||
return <Function item={member as ApiFunction} />;
|
||||
case 'Interface':
|
||||
return <Interface item={member as ApiInterface} />;
|
||||
case 'TypeAlias':
|
||||
return <TypeAlias item={member as ApiTypeAlias} />;
|
||||
case 'Variable':
|
||||
return <Variable item={member as ApiVariable} />;
|
||||
case 'Enum':
|
||||
return <Enum item={member as ApiEnum} />;
|
||||
default:
|
||||
return <div>Cannot render that item type</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default async function Page({ params }: { params: ItemRouteParams }) {
|
||||
const member = await fetchMember(params.package, params.version ?? 'main', params.item);
|
||||
|
||||
if (!member) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Member member={member} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
'use client';
|
||||
|
||||
export default function Error({ error }: { readonly error: Error }) {
|
||||
console.error(error);
|
||||
|
||||
return (
|
||||
<div className="mx-auto h-full max-w-lg flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
|
||||
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
|
||||
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
import type { ApiFunction, ApiItem } from '@discordjs/api-extractor-model';
|
||||
import { ApiModel, ApiPackage } from '@discordjs/api-extractor-model';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { notFound } from 'next/navigation';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
|
||||
import { CmdKDialog } from '~/components/CmdK';
|
||||
import { Nav } from '~/components/Nav';
|
||||
import { Outline } from '~/components/Outline';
|
||||
import type { SidebarSectionItemData } from '~/components/Sidebar';
|
||||
import { resolveItemURI } from '~/components/documentation/util';
|
||||
import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
|
||||
import { Providers } from './providers';
|
||||
|
||||
const Header = dynamic(async () => import('~/components/Header'));
|
||||
const Footer = dynamic(async () => import('~/components/Footer'));
|
||||
|
||||
interface VersionRouteParams {
|
||||
package: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
export const generateStaticParams = async () => {
|
||||
if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
|
||||
return [];
|
||||
}
|
||||
|
||||
const params: VersionRouteParams[] = [];
|
||||
|
||||
await Promise.all(
|
||||
PACKAGES.map(async (packageName) => {
|
||||
const versions = (await fetchVersions(packageName)).slice(1, N_RECENT_VERSIONS);
|
||||
|
||||
params.push(...versions.map((version) => ({ package: packageName, version })));
|
||||
}),
|
||||
);
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
const serializeIntoSidebarItemData = (item: ApiItem) => {
|
||||
return {
|
||||
kind: item.kind,
|
||||
name: item.displayName,
|
||||
href: resolveItemURI(item),
|
||||
overloadIndex: 'overloadIndex' in item ? (item.overloadIndex as number) : undefined,
|
||||
} as SidebarSectionItemData;
|
||||
};
|
||||
|
||||
export default async function PackageLayout({ children, params }: PropsWithChildren<{ params: VersionRouteParams }>) {
|
||||
const modelJSON = await fetchModelJSON(params.package, params.version);
|
||||
|
||||
if (!modelJSON) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const model = new ApiModel();
|
||||
model.addMember(ApiPackage.loadFromJson(modelJSON));
|
||||
|
||||
const pkg = model.tryGetPackageByName(params.package);
|
||||
|
||||
if (!pkg) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const entry = pkg.entryPoints[0];
|
||||
|
||||
if (!entry) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const members = entry.members.filter((member) => {
|
||||
if (member.kind !== 'Function') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (member as ApiFunction).overloadIndex === 1;
|
||||
});
|
||||
|
||||
const versions = await fetchVersions(params.package);
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
|
||||
<Header />
|
||||
<div className="relative top-6.5 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
|
||||
<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
|
||||
<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} versions={versions} />
|
||||
</div>
|
||||
|
||||
<div className="relative top-4.5 mx-auto max-w-5xl min-w-xs w-full pb-10">
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<Outline />
|
||||
</div>
|
||||
</main>
|
||||
<CmdKDialog />
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
import { compileMDX } from 'next-mdx-remote/rsc';
|
||||
import { cache } from 'react';
|
||||
import rehypeSlug from 'rehype-slug';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
|
||||
|
||||
interface VersionRouteParams {
|
||||
package: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
const loadREADME = cache(async (packageName: string) => {
|
||||
return readFile(join(process.cwd(), 'src', 'assets', 'readme', packageName, 'home-README.md'), 'utf8');
|
||||
});
|
||||
|
||||
export default async function Page({ params }: { params: VersionRouteParams }) {
|
||||
const readmeSource = await loadREADME(params.package);
|
||||
const { content } = await compileMDX({
|
||||
source: readmeSource,
|
||||
// @ts-expect-error SyntaxHighlighter is assignable
|
||||
components: { pre: SyntaxHighlighter },
|
||||
options: {
|
||||
mdxOptions: {
|
||||
remarkPlugins: [remarkGfm],
|
||||
rehypePlugins: [rehypeSlug],
|
||||
format: 'mdx',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return <div className="relative top-4 max-w-none prose">{content}</div>;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { CmdKProvider } from '~/contexts/cmdK';
|
||||
import { MemberProvider } from '~/contexts/member';
|
||||
import { NavProvider } from '~/contexts/nav';
|
||||
import { OutlineProvider } from '~/contexts/outline';
|
||||
|
||||
export function Providers({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<NavProvider>
|
||||
<OutlineProvider>
|
||||
<MemberProvider>
|
||||
<CmdKProvider>{children}</CmdKProvider>
|
||||
</MemberProvider>
|
||||
</OutlineProvider>
|
||||
</NavProvider>
|
||||
);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from '~/app/loading';
|
||||
@@ -1,44 +0,0 @@
|
||||
import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
|
||||
import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
|
||||
import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { fetchVersions } from '~/app/docAPI';
|
||||
import { buttonVariants } from '~/styles/Button';
|
||||
import { PACKAGES } from '~/util/constants';
|
||||
|
||||
export const revalidate = 86_400;
|
||||
|
||||
export default async function Page({ params }: { params: { package: string } }) {
|
||||
if (!PACKAGES.includes(params.package)) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const data = await fetchVersions(params.package);
|
||||
|
||||
return (
|
||||
<div className="mx-auto min-h-screen min-w-xs flex flex-col gap-8 px-4 py-6 sm:w-md lg:px-6 lg:py-6">
|
||||
<h1 className="text-2xl font-semibold">Select a version:</h1>
|
||||
<div className="flex flex-col gap-4">
|
||||
{data.map((version, idx) => (
|
||||
<Link
|
||||
className={buttonVariants({ variant: 'secondary' })}
|
||||
href={`/docs/packages/${params.package}/${version}`}
|
||||
key={`${version}-${idx}`}
|
||||
>
|
||||
<div className="flex grow flex-row place-content-between place-items-center gap-4">
|
||||
<div className="flex flex-row place-content-between place-items-center gap-4">
|
||||
<VscVersions size={25} />
|
||||
<h2 className="font-semibold">{version}</h2>
|
||||
</div>
|
||||
<VscArrowRight size={20} />
|
||||
</div>
|
||||
</Link>
|
||||
)) ?? null}
|
||||
</div>
|
||||
<Link className={buttonVariants({ className: 'place-self-center' })} href="/docs/packages">
|
||||
<VscArrowLeft size={20} /> Go back
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from '~/app/loading';
|
||||
@@ -1,44 +0,0 @@
|
||||
import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
|
||||
import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
|
||||
import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
|
||||
import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
|
||||
import Link from 'next/link';
|
||||
import { buttonVariants } from '~/styles/Button';
|
||||
import { PACKAGES } from '~/util/constants';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="mx-auto min-h-screen min-w-xs flex flex-col gap-8 px-4 py-6 sm:w-md lg:px-6 lg:py-6">
|
||||
<h1 className="text-2xl font-semibold">Select a package:</h1>
|
||||
<div className="flex flex-col gap-4">
|
||||
{PACKAGES.map((pkg, idx) => (
|
||||
<Link
|
||||
className={buttonVariants({ variant: 'secondary' })}
|
||||
href={`/docs/packages/${pkg}`}
|
||||
key={`${pkg}-${idx}`}
|
||||
>
|
||||
<div className="flex grow flex-row place-content-between place-items-center gap-4">
|
||||
<div className="flex flex-row place-content-between place-items-center gap-4">
|
||||
<VscPackage size={25} />
|
||||
<h2 className="font-semibold">{pkg}</h2>
|
||||
</div>
|
||||
<VscArrowRight size={20} />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
<a className={buttonVariants({ variant: 'secondary' })} href="https://discord-api-types.dev/">
|
||||
<div className="flex grow flex-row place-content-between place-items-center gap-4">
|
||||
<div className="flex flex-row place-content-between place-items-center gap-4">
|
||||
<VscPackage size={25} />
|
||||
<h2 className="font-semibold">discord-api-types</h2>
|
||||
</div>
|
||||
<FiExternalLink size={20} />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<Link className={buttonVariants({ className: 'place-self-center' })} href="/">
|
||||
<VscArrowLeft size={20} /> Go back
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
'use client';
|
||||
|
||||
export default function Error({ error }: { readonly error: Error }) {
|
||||
console.error(error);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
|
||||
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
|
||||
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +1,33 @@
|
||||
import { Analytics } from '@vercel/analytics/react';
|
||||
import { GeistMono } from 'geist/font/mono';
|
||||
import { GeistSans } from 'geist/font/sans';
|
||||
import type { Metadata, Viewport } from 'next';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { LocalizedStringProvider } from 'react-aria-components/i18n';
|
||||
import { DESCRIPTION } from '~/util/constants';
|
||||
import { inter, jetBrainsMono } from '~/util/fonts';
|
||||
import { Providers } from './providers';
|
||||
|
||||
import '~/styles/cmdk.css';
|
||||
import '~/styles/main.css';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
|
||||
export const viewport: Viewport = {
|
||||
themeColor: [
|
||||
{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
|
||||
{ media: '(prefers-color-scheme: dark)', color: '#1c1c1e' },
|
||||
{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
|
||||
{ media: '(prefers-color-scheme: dark)', color: '#121212' },
|
||||
],
|
||||
colorScheme: 'light dark',
|
||||
};
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(
|
||||
process.env.METADATA_BASE_URL ? process.env.METADATA_BASE_URL : `http://localhost:${process.env.PORT ?? 3_000}`,
|
||||
process.env.NEXT_PUBLIC_LOCAL_DEV === 'true'
|
||||
? `http://localhost:${process.env.PORT ?? 3_000}`
|
||||
: 'https://discord.js.org',
|
||||
),
|
||||
title: 'discord.js',
|
||||
title: {
|
||||
template: '%s | discord.js',
|
||||
default: 'discord.js',
|
||||
},
|
||||
description: DESCRIPTION,
|
||||
icons: {
|
||||
other: [
|
||||
@@ -66,14 +73,15 @@ export const metadata: Metadata = {
|
||||
},
|
||||
|
||||
other: {
|
||||
'msapplication-TileColor': '#1c1c1e',
|
||||
'msapplication-TileColor': '#121212',
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: PropsWithChildren) {
|
||||
export default async function RootLayout({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
|
||||
<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
|
||||
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable} antialiased`} suppressHydrationWarning>
|
||||
<body className="bg-white dark:bg-[#121212]">
|
||||
<LocalizedStringProvider locale="en-US" />
|
||||
<Providers>{children}</Providers>
|
||||
<Analytics />
|
||||
</body>
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="mx-4 min-h-screen flex flex-col items-center justify-center gap-4">
|
||||
<svg
|
||||
className="h-9 w-9 animate-spin text-black dark:text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path
|
||||
className="opacity-75 dark:opacity-100"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<div className="text-lg font-medium">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import type { Route } from 'next';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
|
||||
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
|
||||
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
|
||||
<Link
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base text-white font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
|
||||
href={'/docs' as Route}
|
||||
>
|
||||
Take me back
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
apps/website/src/app/opengraph-image.tsx
Normal file
36
apps/website/src/app/opengraph-image.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
import { ImageResponse } from 'next/og';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
export const size = {
|
||||
width: 1_200,
|
||||
height: 630,
|
||||
};
|
||||
|
||||
export const contentType = 'image/png';
|
||||
|
||||
export default async function Image() {
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div tw="flex bg-[#121212] h-full w-full">
|
||||
<div tw="mx-auto flex items-center h-full">
|
||||
<div tw="flex">
|
||||
<div tw="flex">
|
||||
<div tw="flex flex-col font-black text-[5.5rem] text-white">
|
||||
<div tw="flex flex-row">
|
||||
The <span tw="bg-[#5865f2] rounded-lg py-1 px-6 ml-4">most popular</span>
|
||||
</div>
|
||||
<span>way to build Discord</span>
|
||||
<span>bots.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{
|
||||
...size,
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -1,83 +1,81 @@
|
||||
import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
|
||||
import type { Route } from 'next';
|
||||
import { ExternalLink } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import vercelLogo from '~/assets/powered-by-vercel.svg';
|
||||
import workersLogo from '~/assets/powered-by-workers.png';
|
||||
import { InstallButton } from '~/components/InstallButton';
|
||||
import { buttonVariants } from '~/styles/Button';
|
||||
import { InstallButton } from '~/components/ui/InstallButton';
|
||||
import { DESCRIPTION } from '~/util/constants';
|
||||
|
||||
export default function Page() {
|
||||
export default async function Page() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-24 px-8 pb-16 pt-12 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-10">
|
||||
<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 text-center">
|
||||
<h1 className="text-3xl font-black leading-tight sm:text-7xl sm:leading-tight">
|
||||
The <span className="relative rounded bg-blurple px-3 py-1 text-white">most popular</span> way to build
|
||||
Discord bots.
|
||||
</h1>
|
||||
<p className="my-6 text-neutral-700 leading-normal dark:text-neutral-300">{DESCRIPTION}</p>
|
||||
<div className="flex flex-wrap place-content-center gap-4 md:flex-row">
|
||||
<Link className={buttonVariants()} href={'/docs' as Route}>
|
||||
Docs
|
||||
</Link>
|
||||
<a
|
||||
className={buttonVariants({ variant: 'secondary' })}
|
||||
href="https://discordjs.guide"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Guide <FiExternalLink />
|
||||
</a>
|
||||
<a
|
||||
className={buttonVariants({ variant: 'secondary' })}
|
||||
href="https://github.com/discordjs/discord.js"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
GitHub <FiExternalLink />
|
||||
</a>
|
||||
</div>
|
||||
<InstallButton />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 md:flex-row">
|
||||
<a
|
||||
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
|
||||
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Vercel"
|
||||
<div className="mx-auto flex min-h-screen w-full max-w-screen-lg flex-col place-content-center place-items-center gap-24 px-8 pb-16 pt-12">
|
||||
<div className="flex flex-col gap-10 text-center">
|
||||
<h1 className="z-10 text-3xl font-black leading-tight sm:text-7xl sm:leading-tight">
|
||||
The <span className="relative rounded bg-blurple px-3 py-1 text-white">most popular</span> way to build
|
||||
Discord bots.
|
||||
</h1>
|
||||
<p className="z-10 leading-normal text-neutral-700 dark:text-neutral-300 md:my-6">{DESCRIPTION}</p>
|
||||
|
||||
<div className="flex flex-wrap place-content-center gap-4 sm:flex-wrap md:flex-row">
|
||||
<Link
|
||||
className="inline-flex rounded-md border border-transparent bg-blurple px-6 py-2 font-medium text-white"
|
||||
href="/docs"
|
||||
>
|
||||
<Image
|
||||
alt="Vercel"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
|
||||
height={44}
|
||||
placeholder="blur"
|
||||
priority
|
||||
src={vercelLogo}
|
||||
width={212}
|
||||
/>
|
||||
Docs
|
||||
</Link>
|
||||
<a
|
||||
className="inline-flex gap-2 rounded-md border border-neutral-300 bg-white px-6 py-2 font-medium hover:bg-neutral-200 dark:border-neutral-700 dark:bg-transparent dark:hover:bg-neutral-800"
|
||||
href="https://discordjs.guide"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Guide <ExternalLink aria-hidden size={20} />
|
||||
</a>
|
||||
<a
|
||||
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
|
||||
href="https://www.cloudflare.com"
|
||||
className="inline-flex gap-2 rounded-md border border-neutral-300 bg-white px-6 py-2 font-medium hover:bg-neutral-200 dark:border-neutral-700 dark:bg-transparent dark:hover:bg-neutral-800"
|
||||
href="https://github.com/discordjs/discord.js"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Cloudflare Workers"
|
||||
>
|
||||
<Image
|
||||
alt="Cloudflare"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
|
||||
height={44}
|
||||
placeholder="blur"
|
||||
priority
|
||||
src={workersLogo}
|
||||
/>
|
||||
GitHub <ExternalLink aria-hidden size={20} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<InstallButton className="place-self-center" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 md:flex-row">
|
||||
<a
|
||||
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Vercel"
|
||||
>
|
||||
<Image
|
||||
alt="Vercel"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
|
||||
height={44}
|
||||
placeholder="blur"
|
||||
priority
|
||||
src={vercelLogo}
|
||||
width={212}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.cloudflare.com"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Cloudflare Workers"
|
||||
>
|
||||
<Image
|
||||
alt="Cloudflare"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
|
||||
height={44}
|
||||
placeholder="blur"
|
||||
priority
|
||||
src={workersLogo}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,13 +1,24 @@
|
||||
'use client';
|
||||
|
||||
import { Provider as JotaiProvider } from 'jotai';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ThemeProvider } from 'next-themes';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { RouterProvider } from 'react-aria-components';
|
||||
import { useSystemThemeFallback } from '~/hooks/useSystemThemeFallback';
|
||||
import { useUnregisterServiceWorker } from '~/hooks/useUnregisterServiceWorker';
|
||||
|
||||
export function Providers({ children }: PropsWithChildren) {
|
||||
const router = useRouter();
|
||||
useUnregisterServiceWorker();
|
||||
useSystemThemeFallback();
|
||||
|
||||
return <ThemeProvider attribute="class">{children}</ThemeProvider>;
|
||||
return (
|
||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
<RouterProvider navigate={router.push}>
|
||||
<JotaiProvider>
|
||||
<ThemeProvider attribute="class">{children}</ThemeProvider>
|
||||
</JotaiProvider>
|
||||
</RouterProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user