refactor: switch to next.js

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

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.

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;
},
};

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",

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} />;
}

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>
);
}

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>
);
}

View File

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

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>
);
}

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;

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"]
}

262
yarn.lock
View File

@@ -2002,6 +2002,7 @@ __metadata:
"@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
"@vscode/codicons": ^0.0.31
c8: ^7.12.0
@@ -2016,6 +2017,7 @@ __metadata:
eslint-plugin-react-hooks: ^4.6.0
happy-dom: ^6.0.4
msw: ^0.44.2
next: ^12.2.3
prettier: ^2.7.1
react: ^18.2.0
react-dom: ^18.2.0
@@ -2570,6 +2572,104 @@ __metadata:
languageName: node
linkType: hard
"@next/env@npm:12.2.3":
version: 12.2.3
resolution: "@next/env@npm:12.2.3"
checksum: e96dcbea3fbb3d6b6a0799fe2e41c4929ded383659709f5bd00b6479b0711b89891b72fb28753b428933871d5fd91792fa54bc64a74a038c704b5862d40821ec
languageName: node
linkType: hard
"@next/swc-android-arm-eabi@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-android-arm-eabi@npm:12.2.3"
conditions: os=android & cpu=arm
languageName: node
linkType: hard
"@next/swc-android-arm64@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-android-arm64@npm:12.2.3"
conditions: os=android & cpu=arm64
languageName: node
linkType: hard
"@next/swc-darwin-arm64@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-darwin-arm64@npm:12.2.3"
conditions: os=darwin & cpu=arm64
languageName: node
linkType: hard
"@next/swc-darwin-x64@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-darwin-x64@npm:12.2.3"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard
"@next/swc-freebsd-x64@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-freebsd-x64@npm:12.2.3"
conditions: os=freebsd & cpu=x64
languageName: node
linkType: hard
"@next/swc-linux-arm-gnueabihf@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-linux-arm-gnueabihf@npm:12.2.3"
conditions: os=linux & cpu=arm
languageName: node
linkType: hard
"@next/swc-linux-arm64-gnu@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-linux-arm64-gnu@npm:12.2.3"
conditions: os=linux & cpu=arm64 & libc=glibc
languageName: node
linkType: hard
"@next/swc-linux-arm64-musl@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-linux-arm64-musl@npm:12.2.3"
conditions: os=linux & cpu=arm64 & libc=musl
languageName: node
linkType: hard
"@next/swc-linux-x64-gnu@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-linux-x64-gnu@npm:12.2.3"
conditions: os=linux & cpu=x64 & libc=glibc
languageName: node
linkType: hard
"@next/swc-linux-x64-musl@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-linux-x64-musl@npm:12.2.3"
conditions: os=linux & cpu=x64 & libc=musl
languageName: node
linkType: hard
"@next/swc-win32-arm64-msvc@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-win32-arm64-msvc@npm:12.2.3"
conditions: os=win32 & cpu=arm64
languageName: node
linkType: hard
"@next/swc-win32-ia32-msvc@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-win32-ia32-msvc@npm:12.2.3"
conditions: os=win32 & cpu=ia32
languageName: node
linkType: hard
"@next/swc-win32-x64-msvc@npm:12.2.3":
version: 12.2.3
resolution: "@next/swc-win32-x64-msvc@npm:12.2.3"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard
"@nodelib/fs.scandir@npm:2.1.5":
version: 2.1.5
resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -3094,6 +3194,15 @@ __metadata:
languageName: node
linkType: hard
"@swc/helpers@npm:0.4.3":
version: 0.4.3
resolution: "@swc/helpers@npm:0.4.3"
dependencies:
tslib: ^2.4.0
checksum: 5c2f173e950dd3929d84ae48b3586a274d5a874e7cf2013b3d8081e4f8c723fa3a4d4e63b263e84bb7f06431f87b640e91a12655410463c81a3dc2bbc15eceda
languageName: node
linkType: hard
"@szmarczak/http-timer@npm:^4.0.5":
version: 4.0.6
resolution: "@szmarczak/http-timer@npm:4.0.6"
@@ -4110,6 +4219,23 @@ __metadata:
languageName: node
linkType: hard
"@unocss/webpack@npm:^0.44.5":
version: 0.44.5
resolution: "@unocss/webpack@npm:0.44.5"
dependencies:
"@ampproject/remapping": ^2.2.0
"@rollup/pluginutils": ^4.2.1
"@unocss/config": 0.44.5
"@unocss/core": 0.44.5
magic-string: ^0.26.2
unplugin: ^0.7.0
webpack-sources: ^3.2.3
peerDependencies:
webpack: ^4 || ^5
checksum: 1051c03a582f73ecc99f86d08fee03645a648fbd55c1bc4c68c458edcf610d485845750aab8c2a773f70966db1c72f3987197ca4b64ea4407109a75d6ad40b58
languageName: node
linkType: hard
"@vitejs/plugin-react@npm:^2.0.0":
version: 2.0.0
resolution: "@vitejs/plugin-react@npm:2.0.0"
@@ -5320,7 +5446,7 @@ __metadata:
languageName: node
linkType: hard
"caniuse-lite@npm:^1.0.30001366":
"caniuse-lite@npm:^1.0.30001332, caniuse-lite@npm:^1.0.30001366":
version: 1.0.30001368
resolution: "caniuse-lite@npm:1.0.30001368"
checksum: e2a763e7bca8f7a2494f752d0e1a5c0cd1c70ebd18df2eda2bdcf2f908901bbff14f78961ad1cada3eb7af32120ce95aa93f06c5a093d721e787816dc7f5bfaa
@@ -12981,6 +13107,75 @@ __metadata:
languageName: node
linkType: hard
"next@npm:^12.2.3":
version: 12.2.3
resolution: "next@npm:12.2.3"
dependencies:
"@next/env": 12.2.3
"@next/swc-android-arm-eabi": 12.2.3
"@next/swc-android-arm64": 12.2.3
"@next/swc-darwin-arm64": 12.2.3
"@next/swc-darwin-x64": 12.2.3
"@next/swc-freebsd-x64": 12.2.3
"@next/swc-linux-arm-gnueabihf": 12.2.3
"@next/swc-linux-arm64-gnu": 12.2.3
"@next/swc-linux-arm64-musl": 12.2.3
"@next/swc-linux-x64-gnu": 12.2.3
"@next/swc-linux-x64-musl": 12.2.3
"@next/swc-win32-arm64-msvc": 12.2.3
"@next/swc-win32-ia32-msvc": 12.2.3
"@next/swc-win32-x64-msvc": 12.2.3
"@swc/helpers": 0.4.3
caniuse-lite: ^1.0.30001332
postcss: 8.4.14
styled-jsx: 5.0.2
use-sync-external-store: 1.2.0
peerDependencies:
fibers: ">= 3.1.0"
node-sass: ^6.0.0 || ^7.0.0
react: ^17.0.2 || ^18.0.0-0
react-dom: ^17.0.2 || ^18.0.0-0
sass: ^1.3.0
dependenciesMeta:
"@next/swc-android-arm-eabi":
optional: true
"@next/swc-android-arm64":
optional: true
"@next/swc-darwin-arm64":
optional: true
"@next/swc-darwin-x64":
optional: true
"@next/swc-freebsd-x64":
optional: true
"@next/swc-linux-arm-gnueabihf":
optional: true
"@next/swc-linux-arm64-gnu":
optional: true
"@next/swc-linux-arm64-musl":
optional: true
"@next/swc-linux-x64-gnu":
optional: true
"@next/swc-linux-x64-musl":
optional: true
"@next/swc-win32-arm64-msvc":
optional: true
"@next/swc-win32-ia32-msvc":
optional: true
"@next/swc-win32-x64-msvc":
optional: true
peerDependenciesMeta:
fibers:
optional: true
node-sass:
optional: true
sass:
optional: true
bin:
next: dist/bin/next
checksum: b13b42fbb327adca51abeef68aca4b31c82297f07eb3a12d31a3bf2c1aa9ca34cf1ab41bc2b9f4d3162623e70a1ddf230da39fd3ce241b1eea113a4a010a11fd
languageName: node
linkType: hard
"node-addon-api@npm:^1.7.1":
version: 1.7.2
resolution: "node-addon-api@npm:1.7.2"
@@ -13882,7 +14077,7 @@ __metadata:
languageName: node
linkType: hard
"postcss@npm:^8.4.14":
"postcss@npm:8.4.14, postcss@npm:^8.4.14":
version: 8.4.14
resolution: "postcss@npm:8.4.14"
dependencies:
@@ -15961,6 +16156,20 @@ __metadata:
languageName: node
linkType: hard
"styled-jsx@npm:5.0.2":
version: 5.0.2
resolution: "styled-jsx@npm:5.0.2"
peerDependencies:
react: ">= 16.8.0 || 17.x.x || ^18.0.0-0"
peerDependenciesMeta:
"@babel/core":
optional: true
babel-plugin-macros:
optional: true
checksum: 86d55819ebeabd283a574d2f44f7d3f8fa6b8c28fa41687ece161bf1e910e04965611618921d8f5cd33dc6dae1033b926a70421ae5ea045440a9861edc3e0d87
languageName: node
linkType: hard
"sucrase@npm:^3.20.3":
version: 3.24.0
resolution: "sucrase@npm:3.24.0"
@@ -17223,6 +17432,32 @@ __metadata:
languageName: node
linkType: hard
"unplugin@npm:^0.7.0":
version: 0.7.2
resolution: "unplugin@npm:0.7.2"
dependencies:
acorn: ^8.7.1
chokidar: ^3.5.3
webpack-sources: ^3.2.3
webpack-virtual-modules: ^0.4.4
peerDependencies:
esbuild: ">=0.13"
rollup: ^2.50.0
vite: ^2.3.0 || ^3.0.0-0
webpack: 4 || 5
peerDependenciesMeta:
esbuild:
optional: true
rollup:
optional: true
vite:
optional: true
webpack:
optional: true
checksum: 5449e8cff143b3c8a47f91a9274e2c9d42bdaa7ab5c95a0ea10db87d8bbde9cd85fca9c63d3c319c5b8730e8a490ce49706620151b69b9566172283c980f44bd
languageName: node
linkType: hard
"unset-value@npm:^1.0.0":
version: 1.0.0
resolution: "unset-value@npm:1.0.0"
@@ -17282,6 +17517,15 @@ __metadata:
languageName: node
linkType: hard
"use-sync-external-store@npm:1.2.0":
version: 1.2.0
resolution: "use-sync-external-store@npm:1.2.0"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a
languageName: node
linkType: hard
"use@npm:^3.1.0":
version: 3.1.1
resolution: "use@npm:3.1.1"
@@ -17605,6 +17849,20 @@ __metadata:
languageName: node
linkType: hard
"webpack-sources@npm:^3.2.3":
version: 3.2.3
resolution: "webpack-sources@npm:3.2.3"
checksum: 989e401b9fe3536529e2a99dac8c1bdc50e3a0a2c8669cbafad31271eadd994bc9405f88a3039cd2e29db5e6d9d0926ceb7a1a4e7409ece021fe79c37d9c4607
languageName: node
linkType: hard
"webpack-virtual-modules@npm:^0.4.4":
version: 0.4.4
resolution: "webpack-virtual-modules@npm:0.4.4"
checksum: 6720b4c47d76dc9cbaff557562506c192da7560a90395e9918a418e257a0c0cda9f5e3ac92107ec0789f8f23ad942313bd8cdebc95031d0adef1032bf6142bc7
languageName: node
linkType: hard
"whatwg-encoding@npm:^2.0.0":
version: 2.0.0
resolution: "whatwg-encoding@npm:2.0.0"