feat: add website documentation early mvp (#8183)

Co-authored-by: iCrawl <buechler.noel@outlook.com>

packages/website/src/routes/docs/$branchName/index.tsx

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

packages/website/src/routes/docs/$branchName/packages/$packageName/$memberName/index.tsx

@@ -0,0 +1,59 @@
+/* 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 { ApiItem, ApiModel, ApiPackage } from '~/api-extractor.server';
+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 { TSDocConfiguration } from '~/tsdoc.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 = new ApiModel();
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+	const apiPackage = ApiItem.deserialize(data, {
+		apiJsonFilename: '',
+		toolPackage: data.metadata.toolPackage,
+		toolVersion: data.metadata.toolVersion,
+		versionToDeserialize: data.metadata.schemaVersion,
+		tsdocConfiguration: new TSDocConfiguration(),
+	}) as ApiPackage;
+	model.addMember(apiPackage);
+	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>;
+	}
+}

packages/website/src/routes/docs/$branchName/packages/$packageName/index.tsx

@@ -0,0 +1,48 @@
+/* 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 { ApiItem, ApiModel, ApiPackage } from '~/api-extractor.server';
+import { TSDocConfiguration } from '~/tsdoc.server';
+import { findPackage, getMembers } from '~/util/parse.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 = new ApiModel();
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+	const apiPackage = ApiItem.deserialize(data, {
+		apiJsonFilename: '',
+		toolPackage: data.metadata.toolPackage,
+		toolVersion: data.metadata.toolVersion,
+		versionToDeserialize: data.metadata.schemaVersion,
+		tsdocConfiguration: new TSDocConfiguration(),
+	}) as ApiPackage;
+	model.addMember(apiPackage);
+
+	const pkg = findPackage(model, params.packageName!);
+	return json({
+		members: getMembers(pkg!),
+	});
+}
+
+interface LoaderData {
+	members: ReturnType<typeof getMembers>;
+}
+
+export default function Package() {
+	const data = useLoaderData<LoaderData>();
+
+	return (
+		<ul>
+			{data.members.map((member, i) => (
+				<li key={i}>
+					<a href={member.path}>{member.name}</a>
+				</li>
+			))}
+		</ul>
+	);
+}

packages/website/src/routes/docs/index.tsx

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