docs, react: wip new docs

apps/docs-2/.gitignore

@@ -0,0 +1,28 @@
+# deps
+/node_modules
+
+# generated content
+.map.ts
+.contentlayer
+.content-collections
+
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# others
+.env*.local
+.vercel
+next-env.d.ts

apps/docs-2/.source/index.d.ts

@@ -0,0 +1,3 @@
+import type { GetOutput } from "fumadocs-mdx/config"
+export declare const docs: GetOutput<typeof import("../source.config.ts").docs>
+export declare const meta: GetOutput<typeof import("../source.config.ts").meta>

apps/docs-2/.source/source.config.mjs

@@ -0,0 +1,24 @@
+// source.config.ts
+import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
+import { defineConfig, defineDocs } from "fumadocs-mdx/config";
+import { transformerTwoslash } from "fumadocs-twoslash";
+var { docs, meta } = defineDocs();
+var source_config_default = defineConfig({
+  generateManifest: true,
+  lastModifiedTime: "git",
+  mdxOptions: {
+    rehypeCodeOptions: {
+      inline: "tailing-curly-colon",
+      themes: {
+        light: "catppuccin-latte",
+        dark: "catppuccin-mocha"
+      },
+      transformers: [...rehypeCodeDefaultOptions.transformers ?? [], transformerTwoslash()]
+    }
+  }
+});
+export {
+  source_config_default as default,
+  docs,
+  meta
+};

apps/docs-2/README.md

@@ -0,0 +1,26 @@
+# docs-2
+
+This is a Next.js application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
+
+Run development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```
+
+Open http://localhost:3000 with your browser to see the result.
+
+## Learn More
+
+To learn more about Next.js and Fumadocs, take a look at the following
+resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Fumadocs](https://fumadocs.vercel.app) - learn about Fumadocs

apps/docs-2/app/api/search/route.ts

@@ -0,0 +1,12 @@
+import { source } from "@/app/source";
+import { createSearchAPI } from "fumadocs-core/search/server";
+
+export const { GET } = createSearchAPI("advanced", {
+	indexes: source.getPages().map((page) => ({
+		title: page.data.title,
+		description: page.data.description,
+		structuredData: page.data.structuredData,
+		id: page.url,
+		url: page.url,
+	})),
+});

apps/docs-2/app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,63 @@
+import { source } from "@/app/source";
+import { useMDXComponents } from "@/mdx-components";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+export default async function Page({
+	params,
+}: {
+	params: { slug?: string[] };
+}) {
+	const page = source.getPage(params.slug);
+	if (!page) {
+		notFound();
+	}
+
+	const MDX = page.data.body;
+
+	const components = useMDXComponents(defaultMdxComponents);
+
+	const path = `apps/docs/content/docs/${page.file.path}`;
+
+	return (
+		<DocsPage
+			toc={page.data.toc}
+			lastUpdate={page.data.lastModified}
+			full={page.data.full}
+			tableOfContent={{
+				style: "clerk",
+				single: false,
+			}}
+			editOnGithub={{
+				repo: "stepperize",
+				owner: "damianricobelli",
+				sha: "main",
+				path,
+			}}
+		>
+			<DocsTitle>{page.data.title}</DocsTitle>
+			<DocsDescription>{page.data.description}</DocsDescription>
+			<DocsBody>
+				<MDX components={{ ...components }} />
+			</DocsBody>
+		</DocsPage>
+	);
+}
+
+export async function generateStaticParams() {
+	return source.generateParams();
+}
+
+export function generateMetadata({ params }: { params: { slug?: string[] } }) {
+	const page = source.getPage(params.slug);
+	if (!page) {
+		notFound();
+	}
+
+	return {
+		title: page.data.title,
+		description: page.data.description,
+	} satisfies Metadata;
+}

apps/docs-2/app/docs/layout.tsx

@@ -0,0 +1,7 @@
+import { DocsLayout } from "fumadocs-ui/layout";
+import type { ReactNode } from "react";
+import { docsOptions } from "../layout.config";
+
+export default function Layout({ children }: { children: ReactNode }) {
+	return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
+}

apps/docs-2/app/global.css

@@ -0,0 +1,83 @@
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/white-alpha.css";
+
+@import "@radix-ui/colors/slate.css";
+@import "@radix-ui/colors/slate-dark.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/green-dark.css";
+@import "@radix-ui/colors/yellow.css";
+@import "@radix-ui/colors/yellow-dark.css";
+@import "@radix-ui/colors/red.css";
+@import "@radix-ui/colors/red-dark.css";
+@import "@radix-ui/colors/blue.css";
+@import "@radix-ui/colors/blue-dark.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

apps/docs-2/app/layout.client.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { modes } from "@/lib/modes";
+import { cn } from "@/lib/utils";
+import { cva } from "class-variance-authority";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import type { ReactNode } from "react";
+
+const itemVariants = cva("rounded-md px-2 py-1 transition-colors hover:text-fd-accent-foreground", {
+	variants: {
+		active: {
+			true: "bg-fd-accent text-fd-accent-foreground",
+		},
+	},
+});
+
+export function Body({
+	children,
+}: {
+	children: ReactNode;
+}): React.ReactElement {
+	const mode = useMode();
+
+	return <body className={cn(mode, "relative flex min-h-screen flex-col")}>{children}</body>;
+}
+
+export function NavChildren(): React.ReactElement {
+	const mode = useMode();
+
+	return (
+		<div className="rounded-md border bg-fd-muted/80 p-1 text-sm text-fd-muted-foreground max-md:absolute max-md:left-1/2 max-md:-translate-x-1/2">
+			{modes.map((m) => (
+				<Link key={m.param} href={`/docs/${m.param}`} className={itemVariants({ active: mode === m.param })}>
+					{m.name}
+				</Link>
+			))}
+		</div>
+	);
+}
+
+export function useMode(): string | undefined {
+	const { slug } = useParams();
+	return Array.isArray(slug) && slug.length > 0 ? slug[0] : undefined;
+}

apps/docs-2/app/layout.config.tsx

@@ -0,0 +1,57 @@
+import type { HomeLayoutProps } from "fumadocs-ui/home-layout";
+import type { DocsLayoutProps } from "fumadocs-ui/layout";
+
+import { NavChildren } from "@/app/layout.client";
+import { source } from "@/app/source";
+import { modes } from "@/lib/modes";
+import { RootToggle } from "fumadocs-ui/components/layout/root-toggle";
+import { BookIcon, Heart, Waypoints } from "lucide-react";
+
+export const baseOptions: HomeLayoutProps = {
+	githubUrl: "https://github.com/damianricobelli/stepperize",
+	nav: {
+		title: (
+			<div className="flex items-center gap-2 mb-2">
+				<Waypoints className="size-6" fill="currentColor" />
+				<span className="font-medium text-xl">Stepperize</span>
+			</div>
+		),
+		transparentMode: "top",
+		children: <NavChildren />,
+	},
+	links: [
+		{
+			icon: <BookIcon />,
+			text: "Blog",
+			url: "/blog",
+			active: "nested-url",
+		},
+		{
+			text: "Sponsors",
+			url: "/sponsors",
+			icon: <Heart />,
+		},
+	],
+};
+
+export const docsOptions: DocsLayoutProps = {
+	...baseOptions,
+	tree: source.pageTree,
+	nav: {
+		...baseOptions.nav,
+		transparentMode: "none",
+		children: undefined,
+	},
+	sidebar: {
+		banner: (
+			<RootToggle
+				options={modes.map((mode) => ({
+					url: `/docs/${mode.param}`,
+					icon: <mode.icon className="size-9 shrink-0 rounded-md p-1.5" />,
+					title: mode.name,
+					description: mode.description,
+				}))}
+			/>
+		),
+	},
+};

apps/docs-2/app/layout.tsx

@@ -0,0 +1,18 @@
+import "./global.css";
+import { RootProvider } from "fumadocs-ui/provider";
+import { Inter } from "next/font/google";
+import type { ReactNode } from "react";
+
+const inter = Inter({
+	subsets: ["latin"],
+});
+
+export default function Layout({ children }: { children: ReactNode }) {
+	return (
+		<html lang="en" className={inter.className} suppressHydrationWarning>
+			<body>
+				<RootProvider>{children}</RootProvider>
+			</body>
+		</html>
+	);
+}