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

refactor: switch to next.js

Browse Source
This commit is contained in:
iCrawl
2022-07-22 21:46:11 +02:00
parent 0d687b5606
commit ee455c812e
13 changed files with 493 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/website/.gitignore vendored
View File

@@ -21,6 +21,7 @@ typings/
build/
api/
src/styles/unocss.css
.next/
# Miscellaneous
.tmp/

5
packages/website/next-env.d.ts vendored Normal file
View File

@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

34
packages/website/next.config.js Normal file
View File

@@ -0,0 +1,34 @@
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
const UnoCSS = require('@unocss/webpack').default;
/**
* @type {import('next').NextConfig}
*/
module.exports = {
reactStrictMode: true,
swcMinify: true,
experimental: {
images: {
allowFutureImage: true,
},
},
images: {
dangerouslyAllowSVG: true,
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
},
webpack(config, context) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
config.plugins.push(UnoCSS());
if (context.buildId !== 'development') {
// * disable filesystem cache for build
// * https://github.com/unocss/unocss/issues/419
// * https://webpack.js.org/configuration/cache/
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
config.cache = false;
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return config;
},
};

4
packages/website/package.json
View File

@@ -7,9 +7,11 @@
"test": "vitest run",
"build": "yarn build:css && yarn build:remix",
"build:css": "yarn generate:css",
"build:next": "next build",
"build:remix": "remix build",
"dev": "concurrently 'yarn dev:css' 'yarn dev:remix'",
"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",
@@ -55,6 +57,7 @@
"@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",
@@ -76,6 +79,7 @@
"@unocss/cli": "^0.44.5",
"@unocss/preset-web-fonts": "^0.44.5",
"@unocss/reset": "^0.44.5",
"@unocss/webpack": "^0.44.5",
"@vitejs/plugin-react": "^2.0.0",
"c8": "^7.12.0",
"concurrently": "^7.3.0",

0
packages/website/remix.env.d.ts → packages/website/remix-env.d.ts vendored
View File

8
packages/website/src/pages/_app.tsx Normal file
View File

@@ -0,0 +1,8 @@
import type { AppProps } from 'next/app';
import '@unocss/reset/normalize.css';
import 'uno.css';
import '../styles/main.css';
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}

24
packages/website/src/pages/_document.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<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);
}
})();`,
}}
/>
<Main />
<NextScript />
</body>
</Html>
);
}

89
packages/website/src/pages/docs/[...slug].tsx Normal file
View File

@@ -0,0 +1,89 @@
/* eslint-disable @typescript-eslint/no-throw-literal */
import type { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } 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 { 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';
import { findPackage, getMembers } from '~/util/parse.server';
export const getStaticPaths: GetStaticPaths = () => {
const packages = ['builders', 'collection', 'proxy', 'rest', 'voice'];
return {
paths: packages.map((pkg) => ({
params: { slug: [pkg] },
})),
fallback: 'blocking',
};
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const [branchName, , packageName, memberName] = params!.slug as string[];
const UnknownResponse = new Response('Not Found', {
status: 404,
});
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
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;
});
const model = createApiModel(data);
const pkg = findPackage(model, packageName!);
if (!pkg) {
throw UnknownResponse;
}
return {
props: {
members: getMembers(pkg),
member: findMember(model, packageName!, memberName!)!.toJSON(),
},
};
};
const member = (props: any) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
switch (props.kind) {
case 'Class':
return <Class data={props as ReturnType<DocClass['toJSON']>} />;
case 'Function':
return <Function data={props as ReturnType<DocFunction['toJSON']>} />;
case 'Interface':
return <Interface data={props as ReturnType<DocInterface['toJSON']>} />;
case 'TypeAlias':
return <TypeAlias data={props as ReturnType<DocTypeAlias['toJSON']>} />;
case 'Variable':
return <Variable data={props as ReturnType<DocVariable['toJSON']>} />;
case 'Enum':
return <Enum data={props as ReturnType<DocEnum['toJSON']>} />;
default:
return <div>Cannot render that item type</div>;
}
};
export default function Slug(props: InferGetStaticPropsType<typeof getStaticProps>) {
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} />
</div>
<div className="max-h-full grow overflow-auto">{props.member ? member(props.member) : null}</div>
</div>
);
}

3
packages/website/src/pages/docs/index.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function DocsLanding() {
return <div>Documentation</div>;
}

61
packages/website/src/pages/index.tsx Normal file
View File

@@ -0,0 +1,61 @@
import Image from 'next/future/image';
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 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">
<Image 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">
<Image
src={vercelLogo}
width={110}
height={110}
alt="Vercel"
className="max-w-[250px] shadow-md overflow-hidden"
/>
</a>
</div>
</div>
</main>
);
}

2
packages/website/src/styles/main.css
View File

@@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
html,
body {
height: 100vh;

5
packages/website/tsconfig.json
View File

@@ -7,9 +7,12 @@
"baseUrl": ".",
"noEmit": true,
"allowJs": false,
"incremental": true,
"skipLibCheck": true,
"paths": {
"~/*": ["./src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.tsx", "remix.env.d.ts", "types.d.ts"]
"include": ["src/**/*.ts", "src/**/*.tsx", "next-env.d.ts", "remix-env.d.ts", "types.d.ts"],
"exclude": ["node_modules"]
}