mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-10 16:43:31 +01:00
feat(IRS): next IRS
This commit is contained in:
@@ -5,14 +5,10 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"test": "vitest run",
|
||||
"build": "yarn build:css && yarn build:remix",
|
||||
"build": "next build",
|
||||
"build:css": "yarn generate:css",
|
||||
"build:next": "next build",
|
||||
"build:remix": "remix build",
|
||||
"dev": "concurrently 'yarn dev:css' 'yarn dev:remix'",
|
||||
"dev": "next dev",
|
||||
"dev:css": "yarn generate:css --watch",
|
||||
"dev:next": "next dev",
|
||||
"dev:remix": "remix dev",
|
||||
"generate:css": "unocss 'src/**/*.tsx' --out-file ./src/styles/unocss.css",
|
||||
"lint": "prettier --check . && eslint src --ext mjs,js,ts,tsx",
|
||||
"format": "prettier --write . && eslint src --ext mjs,js,ts,tsx --fix"
|
||||
@@ -51,21 +47,15 @@
|
||||
"dependencies": {
|
||||
"@microsoft/api-extractor-model": "^7.22.1",
|
||||
"@microsoft/tsdoc": "^0.14.1",
|
||||
"@remix-run/node": "^1.6.5",
|
||||
"@remix-run/react": "^1.6.5",
|
||||
"@remix-run/serve": "^1.6.5",
|
||||
"@remix-run/server-runtime": "^1.6.5",
|
||||
"@remix-run/vercel": "^1.6.5",
|
||||
"@vscode/codicons": "^0.0.31",
|
||||
"next": "^12.2.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.4.0",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"remix": "^1.6.5"
|
||||
"sharp": "^0.30.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@remix-run/dev": "^1.6.5",
|
||||
"@testing-library/cypress": "^8.0.3",
|
||||
"@testing-library/dom": "^8.16.0",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
@@ -82,7 +72,6 @@
|
||||
"@unocss/webpack": "^0.44.5",
|
||||
"@vitejs/plugin-react": "^2.0.0",
|
||||
"c8": "^7.12.0",
|
||||
"concurrently": "^7.3.0",
|
||||
"cypress": "^10.3.1",
|
||||
"eslint": "^8.20.0",
|
||||
"eslint-config-marine": "^9.4.1",
|
||||
|
||||
3
packages/website/remix-env.d.ts
vendored
3
packages/website/remix-env.d.ts
vendored
@@ -1,3 +0,0 @@
|
||||
/* eslint-disable spaced-comment */
|
||||
/// <reference types="@remix-run/dev" />
|
||||
/// <reference types="@remix-run/node/globals" />
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* @type {import('@remix-run/dev').AppConfig}
|
||||
*/
|
||||
module.exports = {
|
||||
serverBuildTarget: 'vercel',
|
||||
server: process.env.NODE_ENV === 'development' ? undefined : './src/server.ts',
|
||||
appDirectory: 'src',
|
||||
ignoredRouteFiles: ['**/.*', '**/*.css', '**/*.test.{js,jsx,ts,tsx}'],
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
import { RemixBrowser } from '@remix-run/react';
|
||||
import { hydrateRoot } from 'react-dom/client';
|
||||
|
||||
hydrateRoot(document, <RemixBrowser />);
|
||||
@@ -1,19 +0,0 @@
|
||||
import type { EntryContext } from '@remix-run/node';
|
||||
import { RemixServer } from '@remix-run/react';
|
||||
import { renderToString } from 'react-dom/server';
|
||||
|
||||
export default function handleRequest(
|
||||
request: Request,
|
||||
responseStatusCode: number,
|
||||
responseHeaders: Headers,
|
||||
remixContext: EntryContext,
|
||||
) {
|
||||
const markup = renderToString(<RemixServer context={remixContext} url={request.url} />);
|
||||
|
||||
responseHeaders.set('Content-Type', 'text/html');
|
||||
|
||||
return new Response(`<!DOCTYPE html>${markup}`, {
|
||||
status: responseStatusCode,
|
||||
headers: responseHeaders,
|
||||
});
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
/* eslint-disable @typescript-eslint/no-throw-literal */
|
||||
import type { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next/types';
|
||||
import type { GetStaticPaths, GetStaticProps } from 'next/types';
|
||||
import type { DocClass } from '~/DocModel/DocClass';
|
||||
import type { DocEnum } from '~/DocModel/DocEnum';
|
||||
import type { DocFunction } from '~/DocModel/DocFunction';
|
||||
import type { DocInterface } from '~/DocModel/DocInterface';
|
||||
import type { DocTypeAlias } from '~/DocModel/DocTypeAlias';
|
||||
import type { DocVariable } from '~/DocModel/DocVariable';
|
||||
import { ItemSidebar } from '~/components/ItemSidebar';
|
||||
import { ItemSidebar, type ItemListProps } from '~/components/ItemSidebar';
|
||||
import { Class } from '~/components/model/Class';
|
||||
import { Enum } from '~/components/model/Enum';
|
||||
import { Function } from '~/components/model/Function';
|
||||
@@ -17,14 +17,31 @@ import { findMember } from '~/model.server';
|
||||
import { createApiModel } from '~/util/api-model.server';
|
||||
import { findPackage, getMembers } from '~/util/parse.server';
|
||||
|
||||
export const getStaticPaths: GetStaticPaths = () => {
|
||||
export const getStaticPaths: GetStaticPaths = async () => {
|
||||
const packages = ['builders', 'collection', 'proxy', 'rest', 'voice'];
|
||||
|
||||
const pkgs = (
|
||||
await Promise.all(
|
||||
packages.map(async (packageName) => {
|
||||
if (packageName === 'rest') {
|
||||
return { params: { slug: ['main', 'packages', packageName, ''] } };
|
||||
}
|
||||
|
||||
const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/main.api.json`);
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
const data = await res.json();
|
||||
|
||||
const model = createApiModel(data);
|
||||
const pkg = findPackage(model, packageName);
|
||||
|
||||
return getMembers(pkg!).map((member) => ({ params: { slug: ['main', 'packages', packageName, member.name] } }));
|
||||
}),
|
||||
)
|
||||
).flat();
|
||||
|
||||
return {
|
||||
paths: packages.map((pkg) => ({
|
||||
params: { slug: [pkg] },
|
||||
})),
|
||||
fallback: 'blocking',
|
||||
paths: pkgs,
|
||||
fallback: true,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -35,8 +52,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
|
||||
status: 404,
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
|
||||
const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${branchName}.api.json`);
|
||||
const res = await fetch(`https://docs.discordjs.dev/docs/${packageName!}/${branchName!}.api.json`);
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
const data = await res.json().catch(() => {
|
||||
throw UnknownResponse;
|
||||
@@ -51,8 +67,11 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
|
||||
|
||||
return {
|
||||
props: {
|
||||
members: getMembers(pkg),
|
||||
member: findMember(model, packageName!, memberName!)!.toJSON(),
|
||||
packageName,
|
||||
data: {
|
||||
members: getMembers(pkg),
|
||||
member: memberName ? findMember(model, packageName!, memberName)!.toJSON() : null,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@@ -77,13 +96,13 @@ const member = (props: any) => {
|
||||
}
|
||||
};
|
||||
|
||||
export default function Slug(props: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||
export default function Slug(props: Partial<ItemListProps & { data: { member: ReturnType<typeof findMember> } }>) {
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full bg-white dark:bg-dark">
|
||||
<div className="w-full lg:min-w-1/4 lg:max-w-1/4">
|
||||
<ItemSidebar packageName={props.packageName} data={props} />
|
||||
{props.packageName && props.data ? <ItemSidebar packageName={props.packageName} data={props.data} /> : null}
|
||||
</div>
|
||||
<div className="max-h-full grow overflow-auto">{props.member ? member(props.member) : null}</div>
|
||||
<div className="max-h-full grow overflow-auto">{props.data?.member ? member(props.data.member) : null}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -41,15 +41,14 @@ export default function IndexRoute() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:flex sm:grow sm:shrink h-full sm:align-center xl:items-center hidden">
|
||||
<img src={codeSample} className="max-w-[600px] rounded-xl shadow-md overflow-hidden" />
|
||||
<Image src={codeSample} className="max-w-[600px] h-full rounded-xl shadow-md overflow-hidden" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex place-content-center">
|
||||
<a href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss">
|
||||
<Image
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
src={vercelLogo}
|
||||
width={110}
|
||||
height={110}
|
||||
alt="Vercel"
|
||||
className="max-w-[250px] shadow-md overflow-hidden"
|
||||
/>
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
import type { MetaFunction, LinksFunction } from '@remix-run/node';
|
||||
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
|
||||
import unocssReset from '@unocss/reset/normalize.css';
|
||||
import maincss from './styles/main.css';
|
||||
import unocss from './styles/unocss.css';
|
||||
|
||||
export const links: LinksFunction = () => [
|
||||
{ rel: 'stylesheet', href: unocssReset },
|
||||
{ rel: 'stylesheet', href: maincss },
|
||||
{ rel: 'stylesheet', href: unocss },
|
||||
];
|
||||
|
||||
export const meta: MetaFunction = () => ({
|
||||
charset: 'utf-8',
|
||||
title: 'discord.js',
|
||||
viewport: 'width=device-width,initial-scale=1',
|
||||
});
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `(() => {
|
||||
const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const persistedColorPreference = localStorage.getItem('theme') || 'auto';
|
||||
if (persistedColorPreference === 'dark' || (prefersDarkMode && persistedColorPreference !== 'light')) {
|
||||
document.documentElement.classList.toggle('dark', true);
|
||||
}
|
||||
})();`,
|
||||
}}
|
||||
/>
|
||||
<Outlet />
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
<LiveReload />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default function BranchesLanding() {
|
||||
return <div>Branches</div>;
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-throw-literal */
|
||||
import { json } from '@remix-run/node';
|
||||
import { Outlet, Params, useLoaderData, useParams } from '@remix-run/react';
|
||||
import { ItemSidebar } from '~/components/ItemSidebar';
|
||||
import { createApiModel } from '~/util/api-model.server';
|
||||
import { findPackage, getMembers } from '~/util/parse.server';
|
||||
|
||||
export async function loader({ params }: { params: Params }) {
|
||||
const UnknownResponse = new Response('Not Found', {
|
||||
status: 404,
|
||||
});
|
||||
|
||||
const res = await fetch(
|
||||
`https://raw.githubusercontent.com/discordjs/docs/main/${params.packageName!}/${params.branchName!}.api.json`,
|
||||
);
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
const data = await res.json().catch(() => {
|
||||
throw UnknownResponse;
|
||||
});
|
||||
|
||||
const model = createApiModel(data);
|
||||
const pkg = findPackage(model, params.packageName!);
|
||||
|
||||
if (!pkg) {
|
||||
throw UnknownResponse;
|
||||
}
|
||||
|
||||
return json({
|
||||
members: getMembers(pkg),
|
||||
});
|
||||
}
|
||||
|
||||
interface LoaderData {
|
||||
members: ReturnType<typeof getMembers>;
|
||||
}
|
||||
|
||||
export default function Package() {
|
||||
const data = useLoaderData<LoaderData>();
|
||||
const { packageName } = useParams();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full bg-white dark:bg-dark">
|
||||
<div className="w-full lg:min-w-1/4 lg:max-w-1/4">
|
||||
<ItemSidebar packageName={packageName!} data={data} />
|
||||
</div>
|
||||
<div className="max-h-full grow overflow-auto">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
||||
import { json } from '@remix-run/node';
|
||||
import { Params, useLoaderData } from '@remix-run/react';
|
||||
import type { DocClass } from '~/DocModel/DocClass';
|
||||
import type { DocEnum } from '~/DocModel/DocEnum';
|
||||
import type { DocFunction } from '~/DocModel/DocFunction';
|
||||
import type { DocInterface } from '~/DocModel/DocInterface';
|
||||
import type { DocTypeAlias } from '~/DocModel/DocTypeAlias';
|
||||
import type { DocVariable } from '~/DocModel/DocVariable';
|
||||
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 { findMember } from '~/model.server';
|
||||
import { createApiModel } from '~/util/api-model.server';
|
||||
|
||||
export async function loader({ params }: { params: Params }) {
|
||||
const res = await fetch(
|
||||
`https://raw.githubusercontent.com/discordjs/docs/main/${params.packageName!}/${params.branchName!}.api.json`,
|
||||
);
|
||||
const data = await res.json();
|
||||
const model = createApiModel(data);
|
||||
|
||||
return json(findMember(model, params.packageName!, params.memberName!)?.toJSON());
|
||||
}
|
||||
|
||||
export default function Member() {
|
||||
const data = useLoaderData();
|
||||
|
||||
switch (data.kind) {
|
||||
case 'Class':
|
||||
return <Class data={data as ReturnType<DocClass['toJSON']>} />;
|
||||
case 'Function':
|
||||
return <Function data={data as ReturnType<DocFunction['toJSON']>} />;
|
||||
case 'Interface':
|
||||
return <Interface data={data as ReturnType<DocInterface['toJSON']>} />;
|
||||
case 'TypeAlias':
|
||||
return <TypeAlias data={data as ReturnType<DocTypeAlias['toJSON']>} />;
|
||||
case 'Variable':
|
||||
return <Variable data={data as ReturnType<DocVariable['toJSON']>} />;
|
||||
case 'Enum':
|
||||
return <Enum data={data as ReturnType<DocEnum['toJSON']>} />;
|
||||
default:
|
||||
return <div>Cannot render that item type</div>;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default function DocsLanding() {
|
||||
return <div>Documentation</div>;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import codeSample from '../assets/code-sample.png';
|
||||
import logo from '../assets/djs_logo_rainbow_400x400.png';
|
||||
import vercelLogo from '../assets/powered-by-vercel.svg';
|
||||
import * as text from '../text.json';
|
||||
|
||||
interface ButtonProps {
|
||||
title: string;
|
||||
}
|
||||
|
||||
function Button({ title }: ButtonProps) {
|
||||
return (
|
||||
<div className="max-h-[70px] bg-blurple px-3 py-4 rounded-lg">
|
||||
<p className="font-semibold text-white m-0">{title}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function IndexRoute() {
|
||||
return (
|
||||
<main className="w-full max-w-full max-h-full h-full flex-col bg-white dark:bg-dark overflow-y-auto">
|
||||
<div className="flex h-[65px] sticky top-0 border-b border-slate-300 justify-center px-10 bg-white dark:bg-dark">
|
||||
<div className="flex align-center items-center w-full max-w-[1100px] justify-between">
|
||||
<div className="h-[50px] w-[50px] rounded-lg overflow-hidden">
|
||||
<img className="h-[50px] w-[50px]" src={logo} />
|
||||
</div>
|
||||
<div className="flex flex-row space-x-8">
|
||||
<a className="text-blurple font-semibold">Docs</a>
|
||||
<a className="text-blurple font-semibold">Guide</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:flex xl:flex-col xl:justify-center w-full max-w-full box-border p-10">
|
||||
<div className="flex flex-col xl:flex-row grow max-w-[1100px] pb-10 space-y-10 xl:space-x-20 place-items-center place-self-center">
|
||||
<div className="flex flex-col max-w-[800px] lt-xl:items-center">
|
||||
<h1 className="font-bold text-6xl text-blurple my-2">{text.heroTitle}</h1>
|
||||
<p className="text-xl text-dark-100 dark:text-gray-400">{text.heroDescription}</p>
|
||||
<div className="flex flew-row space-x-4">
|
||||
<Button title="Read the guide" />
|
||||
<Button title="Check out the docs" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:flex sm:grow sm:shrink h-full sm:align-center xl:items-center hidden">
|
||||
<img src={codeSample} className="max-w-[600px] rounded-xl shadow-md overflow-hidden" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex place-content-center">
|
||||
<a href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss">
|
||||
<img src={vercelLogo} alt="Vercel" className="max-w-[250px] shadow-md overflow-hidden" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import * as build from '@remix-run/dev/server-build';
|
||||
import { createRequestHandler } from '@remix-run/vercel';
|
||||
|
||||
export default createRequestHandler({ build });
|
||||
@@ -6,6 +6,13 @@ body {
|
||||
Noto Sans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
|
||||
}
|
||||
|
||||
#__next {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'JetBrains Mono';
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"lib": ["ESNext", "DOM", "DOM.Iterable"],
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsx": "preserve",
|
||||
"baseUrl": ".",
|
||||
"noEmit": true,
|
||||
"allowJs": false,
|
||||
@@ -13,6 +13,6 @@
|
||||
"~/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "next-env.d.ts", "remix-env.d.ts", "types.d.ts"],
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "next-env.d.ts", "types.d.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user