Integrate TypeDoc output into new docs site (#140)

.gitignore

@@ -1,8 +1,7 @@
 node_modules
 .turbo
 /packages/*/dist
-/packages/*/public
-/packages/*/docs.json
+/packages/*/docs
 /lib/*/lib
 /lib/*/debug
 /lib/*/release

docs/.gitignore

@@ -4,6 +4,7 @@
 # generated content
 .map.ts
 .contentlayer
+/content/*/api
 
 # test & build
 /coverage
@@ -24,4 +25,4 @@ yarn-error.log*
 # others
 .env*.local
 .vercel
-next-env.d.ts
+next-env.d.ts

docs/app/[...slug]/page.tsx

@@ -0,0 +1,88 @@
+import Logo from '@/app/logo';
+import { loaders } from '@/app/source';
+import { Toggle } from '@/app/toggle';
+import { DocsPage, DocsBody } from 'fumadocs-ui/page';
+import { notFound } from 'next/navigation';
+import { DocsLayout } from 'fumadocs-ui/layout';
+import type { Metadata } from 'next';
+
+export default async function Page({
+	params,
+}: {
+	params: { slug?: string[] };
+}) {
+	if (!params.slug) {
+		notFound();
+	}
+
+	const root = params.slug[0];
+	const loader = loaders.get(root);
+	if (!loader) {
+		notFound();
+	}
+
+	const page = loader.getPage(params.slug.slice(1));
+
+	if (page == null) {
+		notFound();
+	}
+
+	const MDX = page.data.exports.default;
+
+	return (
+		<DocsLayout
+			tree={loader.pageTree}
+			githubUrl={'https://github.com/TooTallNate/nx.js'}
+			nav={{
+				transparentMode: 'top',
+				title: (
+					<>
+						<Logo className='w-5 md:w-6 drop-shadow' /> nx.js
+					</>
+				),
+			}}
+			sidebar={{
+				banner: <Toggle />,
+			}}
+		>
+			<DocsPage toc={page.data.exports.toc}>
+				<DocsBody>
+					<h1>{page.data.title}</h1>
+					<p className='mb-8 text-lg text-muted-foreground'>
+						{page.data.description}
+					</p>
+					<MDX />
+				</DocsBody>
+			</DocsPage>
+		</DocsLayout>
+	);
+}
+
+export async function generateStaticParams() {
+	return Array.from(loaders.entries()).flatMap(([root, loader]) =>
+		loader.getPages().map((page) => ({
+			slug: [root].concat(page.slugs),
+		})),
+	);
+}
+
+export function generateMetadata({ params }: { params: { slug?: string[] } }) {
+	if (!params.slug) {
+		notFound();
+	}
+
+	const root = params.slug[0];
+	const loader = loaders.get(root);
+	if (!loader) {
+		notFound();
+	}
+
+	const page = loader.getPage(params.slug.slice(1));
+
+	if (page == null) notFound();
+
+	return {
+		title: page.data.title,
+		description: page.data.description,
+	} satisfies Metadata;
+}

docs/app/api/search/route.ts

@@ -1,11 +1,13 @@
-import { getPages } from '@/app/source';
+import { loaders } from '@/app/source';
 import { createSearchAPI } from 'fumadocs-core/search/server';
 
 export const { GET } = createSearchAPI('advanced', {
-	indexes: getPages().map((page) => ({
-		title: page.data.title,
-		structuredData: page.data.exports.structuredData,
-		id: page.url,
-		url: page.url,
-	})),
+	indexes: Array.from(loaders.values()).flatMap((loader) =>
+		loader.getPages().map((page) => ({
+			title: page.data.title,
+			structuredData: page.data.exports.structuredData,
+			id: page.url,
+			url: page.url,
+		})),
+	),
 });

docs/app/page.tsx

@@ -15,11 +15,14 @@ export default function HomePage() {
 				</h2>
 			</div>
 			<p className='text-muted-foreground'>
-				Go to{' '}
-				<Link href='/docs' className='text-foreground font-semibold underline'>
-					/docs
+				Go to the{' '}
+				<Link
+					href='/runtime'
+					className='text-foreground font-semibold underline'
+				>
+					Getting Started
 				</Link>{' '}
-				to read the documentation.
+				page to jump into the documentation.
 			</p>
 			<div className='flex text-5xl gap-8'>
 				<a

docs/app/source.ts

@@ -1,9 +1,22 @@
+import { join } from 'node:path';
+import { readdirSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
 import { map } from '@/.map';
 import { createMDXSource } from 'fumadocs-mdx';
 import { loader } from 'fumadocs-core/source';
 
-export const { getPage, getPages, pageTree } = loader({
-	baseUrl: '/docs',
-	rootDir: 'docs',
-	source: createMDXSource(map),
-});
+const contentDir = join(fileURLToPath(import.meta.url), '../../content');
+
+export const loaders: Map<
+	string,
+	ReturnType<typeof loader<{ source: ReturnType<typeof createMDXSource> }>>
+> = new Map(
+	readdirSync(contentDir).map((name) => [
+		name,
+		loader({
+			baseUrl: `/${name}`,
+			rootDir: name,
+			source: createMDXSource(map),
+		}),
+	]),
+);

docs/app/toggle.tsx

@@ -0,0 +1,29 @@
+import { TbGlobe, TbBrowser, TbBrandPowershell } from 'react-icons/tb';
+import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
+
+export function Toggle() {
+	return (
+		<RootToggle
+			options={[
+				{
+					title: 'Runtime',
+					description: 'Global APIs',
+					url: '/runtime',
+					icon: <TbGlobe size={24} />,
+				},
+				{
+					title: '@nx.js/http',
+					description: 'HTTP server for nx.js',
+					url: '/http',
+					icon: <TbBrowser size={24} />,
+				},
+				{
+					title: '@nx.js/repl',
+					description: 'Read-Eval-Print Loop for nx.js',
+					url: '/repl',
+					icon: <TbBrandPowershell size={24} />,
+				},
+			]}
+		/>
+	);
+}

docs/content/http/index.mdx

@@ -0,0 +1,35 @@
+---
+title: Installation
+---
+
+<InstallTabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+    <Tab value='npm'>
+
+```bash
+npm install @nx.js/http
+```
+
+    </Tab>
+    <Tab value="pnpm">
+
+```bash
+pnpm add @nx.js/http
+```
+
+    </Tab>
+    <Tab value='yarn'>
+
+```bash
+yarn add @nx.js/http
+```
+
+    </Tab>
+    <Tab value='bun'>
+
+```bash
+bun add @nx.js/http
+```
+
+    </Tab>
+
+</InstallTabs>

docs/content/http/meta.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "pages": ["--- Usage ---", "index", "--- API Reference ---", "...api"]
+}

docs/content/repl/index.mdx

@@ -0,0 +1,35 @@
+---
+title: Installation
+---
+
+<InstallTabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+    <Tab value='npm'>
+
+```bash
+npm install @nx.js/repl
+```
+
+    </Tab>
+    <Tab value="pnpm">
+
+```bash
+pnpm add @nx.js/repl
+```
+
+    </Tab>
+    <Tab value='yarn'>
+
+```bash
+yarn add @nx.js/repl
+```
+
+    </Tab>
+    <Tab value='bun'>
+
+```bash
+bun add @nx.js/repl
+```
+
+    </Tab>
+
+</InstallTabs>

docs/content/repl/meta.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "pages": ["--- Usage ---", "index", "--- API Reference ---", "...api"]
+}

docs/content/docs/index.mdx → docs/content/runtime/index.mdx

@@ -4,7 +4,7 @@ description: Bootstraping your nx.js app
 ---
 
 > This guide assumes that you have a homebrew enabled Switch. If you don't,
-> you can follow the [Switch Homebrew Guide](https://nh-server.github.io/switch-guide/)
+> you can follow the [NH Switch Guide](https://nh-server.github.io/switch-guide/)
 > to get started.
 >
 > It is also assumes that you have [Node.js](https://nodejs.org) installed on your
@@ -95,8 +95,8 @@ this file to Switch via FTP or directly copy it to the SD card, and then launch
 ## More information
 
 <Cards>
-  <Card title="Customizing package metadata and icon" href="/docs/metadata" />
-  <Card title="Learn about the available rendering mode APIs" href="/docs/rendering" />
+  <Card title="Customizing package metadata and icon" href="/runtime/metadata" />
+  <Card title="Learn about the available rendering mode APIs" href="/runtime/rendering" />
 </Cards>
 
-[`esbuild`]: https://esbuild.github.io
+[`esbuild`]: https://esbuild.github.io