refactor: switch to next.js

2026-03-12 17:43:30 +01:00 · 2022-07-22 21:46:11 +02:00
parent 0d687b5606
commit ee455c812e
13 changed files with 493 additions and 5 deletions
--- a/packages/website/src/pages/_app.tsx
+++ b/packages/website/src/pages/_app.tsx
@@ -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} />;
+}
--- a/packages/website/src/pages/_document.tsx
+++ b/packages/website/src/pages/_document.tsx
@@ -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>
+	);
+}
--- a/packages/website/src/pages/docs/[...slug].tsx
+++ b/packages/website/src/pages/docs/[...slug].tsx
@@ -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>
+	);
+}
--- a/packages/website/src/pages/docs/index.tsx
+++ b/packages/website/src/pages/docs/index.tsx
@@ -0,0 +1,3 @@
+export default function DocsLanding() {
+	return <div>Documentation</div>;
+}
--- a/packages/website/src/pages/index.tsx
+++ b/packages/website/src/pages/index.tsx
@@ -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>
+	);
+}
--- a/packages/website/src/styles/main.css
+++ b/packages/website/src/styles/main.css
@@ -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;