mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-15 02:53:31 +01:00
feat(website): add app dir (#8869)
Co-authored-by: iCrawl <buechler.noel@outlook.com>
This commit is contained in:
Suneet Tipirneni
14
apps/website/src/app/docs/[...slug]/layout.tsx
Normal file
14
apps/website/src/app/docs/[...slug]/layout.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
23
apps/website/src/app/docs/[...slug]/not-found.tsx
Normal file
23
apps/website/src/app/docs/[...slug]/not-found.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
// import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<>
|
||||
{/* <Head>
|
||||
<title key="title">discord.js | 404</title>
|
||||
<meta content="discord.js | 404" key="og_title" property="og:title" />
|
||||
</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">
|
||||
<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="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"
|
||||
>
|
||||
Take me back
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
394
apps/website/src/app/docs/[...slug]/page.tsx
Normal file
394
apps/website/src/app/docs/[...slug]/page.tsx
Normal 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
13
apps/website/src/app/docs/[...slug]/providers.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
58
apps/website/src/app/docs/packages/[package]/page.tsx
Normal file
58
apps/website/src/app/docs/packages/[package]/page.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { VscArrowLeft, VscArrowRight, VscVersions } from 'react-icons/vsc';
|
||||
import { PACKAGES } from '~/util/constants';
|
||||
|
||||
export const dynamicParams = false;
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return PACKAGES.map((packageName) => ({ package: packageName }));
|
||||
}
|
||||
|
||||
async function getData(pkg: string) {
|
||||
if (!PACKAGES.includes(pkg)) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const res = await fetch(`https://docs.discordjs.dev/api/info?package=${pkg}`, { next: { revalidate: 3_600 } });
|
||||
const data: string[] = await res.json();
|
||||
|
||||
if (!data.length) {
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
|
||||
return data.reverse();
|
||||
}
|
||||
|
||||
export default async function Page({ params }: { params: { package: string } }) {
|
||||
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="flex grow flex-col place-content-center gap-4">
|
||||
<h1 className="text-2xl font-semibold">Select a version:</h1>
|
||||
{data.map((version) => (
|
||||
<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"
|
||||
href={`/docs/packages/${params.package}/${version}`}
|
||||
key={version}
|
||||
>
|
||||
<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">
|
||||
<VscVersions size={25} />
|
||||
<h2 className="font-semibold">{version}</h2>
|
||||
</div>
|
||||
<VscArrowRight size={20} />
|
||||
</div>
|
||||
</Link>
|
||||
)) ?? null}
|
||||
<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"
|
||||
href="/docs/packages"
|
||||
>
|
||||
<VscArrowLeft size={20} /> Go back
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
75
apps/website/src/app/docs/packages/page.tsx
Normal file
75
apps/website/src/app/docs/packages/page.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import Link from 'next/link';
|
||||
import { VscArrowLeft, VscArrowRight, VscPackage } from 'react-icons/vsc';
|
||||
import { PACKAGES } from '~/util/constants';
|
||||
|
||||
async function getData() {
|
||||
return Promise.all(
|
||||
PACKAGES.map(async (pkg) => {
|
||||
const response = await fetch(`https://docs.discordjs.dev/api/info?package=${pkg}`, {
|
||||
next: { revalidate: 3_600 },
|
||||
});
|
||||
const versions = await response.json();
|
||||
const latestVersion = versions.at(-2) ?? 'main';
|
||||
return { packageName: pkg, version: latestVersion };
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
export default async function Page() {
|
||||
const data = await getData();
|
||||
|
||||
const findLatestVersion = (pkg: string) => data.find((version) => version.packageName === pkg);
|
||||
|
||||
return (
|
||||
<div className="min-w-xs sm:w-md mx-auto flex 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">
|
||||
<h1 className="text-2xl font-semibold">Select a package:</h1>
|
||||
<a
|
||||
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 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="https://discord.js.org/#/docs/discord.js"
|
||||
>
|
||||
<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 flex-row place-content-between place-items-center gap-4">
|
||||
<VscPackage size={25} />
|
||||
<h2 className="font-semibold">discord.js</h2>
|
||||
</div>
|
||||
</div>
|
||||
<VscArrowRight size={20} />
|
||||
</div>
|
||||
</a>
|
||||
{PACKAGES.map((pkg) => (
|
||||
<Link
|
||||
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
|
||||
href={`/docs/packages/${pkg}/${findLatestVersion(pkg)?.version ?? 'main'}`}
|
||||
key={pkg}
|
||||
>
|
||||
<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 flex-row place-content-between place-items-center gap-4">
|
||||
<VscPackage size={25} />
|
||||
<h2 className="font-semibold">{pkg}</h2>
|
||||
</div>
|
||||
{/* <Link href={`/docs/packages/${pkg}`}>
|
||||
<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"
|
||||
role="link"
|
||||
>
|
||||
Select version
|
||||
</div>
|
||||
</Link> */}
|
||||
</div>
|
||||
<VscArrowRight size={20} />
|
||||
</div>
|
||||
</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"
|
||||
href="/"
|
||||
>
|
||||
<VscArrowLeft size={20} /> Go back
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
apps/website/src/app/head.tsx
Normal file
28
apps/website/src/app/head.tsx
Normal 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
19
apps/website/src/app/layout.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
62
apps/website/src/app/page.tsx
Normal file
62
apps/website/src/app/page.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { FiExternalLink } from 'react-icons/fi';
|
||||
import vercelLogo from '../assets/powered-by-vercel.svg';
|
||||
import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
|
||||
import { CODE_EXAMPLE } from '~/util/constants';
|
||||
|
||||
export default function Page() {
|
||||
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="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
|
||||
<div className="flex max-w-lg flex-col gap-3 lg:mr-8">
|
||||
<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
|
||||
The <span className="bg-blurple relative rounded py-1 px-3 text-white">most popular</span> way to build
|
||||
Discord <br /> bots.
|
||||
</h1>
|
||||
<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">
|
||||
discord.js is a powerful node.js module that allows you to interact with the Discord API very easily. It
|
||||
takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code
|
||||
significantly tidier and easier to comprehend.
|
||||
</p>
|
||||
<div className="flex flex-row gap-4">
|
||||
<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"
|
||||
href="/docs"
|
||||
>
|
||||
Docs
|
||||
</Link>
|
||||
<a
|
||||
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
|
||||
href="https://discordjs.guide"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Guide <FiExternalLink />
|
||||
</a>
|
||||
<a
|
||||
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none appearance-none flex-row place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
|
||||
href="https://github.com/discordjs/discord.js"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
GitHub <FiExternalLink />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<SyntaxHighlighter code={CODE_EXAMPLE} />
|
||||
</div>
|
||||
<div className="flex flex-row place-content-center">
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
apps/website/src/app/providers.tsx
Normal file
20
apps/website/src/app/providers.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user