WIP: Documentation website

biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "includes": ["src/**/*.ts", "test/**/*.ts"]
+    "includes": ["src/**/*.ts", "test/**/*.ts", "docs/**/*.tsx", "docs/**/*.ts", "docs/**/*.mdx"]
   },
   "formatter": {
     "enabled": true,

docs/.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
+.source

docs/app/app.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/black.css';
+@import 'fumadocs-ui/css/preset.css';

docs/app/components/search.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { create } from "@orama/orama";
+import { useDocsSearch } from "fumadocs-core/search/client";
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+} from "fumadocs-ui/components/dialog/search";
+import { useI18n } from "fumadocs-ui/contexts/i18n";
+
+function initOrama() {
+  return create({
+    schema: { _: "string" },
+    language: "english",
+  });
+}
+
+export default function DefaultSearchDialog(props: SharedProps) {
+  const { locale } = useI18n();
+  const { search, setSearch, query } = useDocsSearch({
+    type: "static",
+    initOrama,
+    locale,
+  });
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+        <SearchDialogList items={query.data !== "empty" ? query.data : null} />
+      </SearchDialogContent>
+    </SearchDialog>
+  );
+}

docs/app/docs/page.tsx

@@ -0,0 +1,52 @@
+import browserCollections from "fumadocs-mdx:collections/browser";
+import type * as PageTree from "fumadocs-core/page-tree";
+import * as TabsComponents from "fumadocs-ui/components/tabs";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+} from "fumadocs-ui/page";
+import { baseOptions } from "@/lib/layout.shared";
+import { source } from "@/lib/source";
+import type { Route } from "./+types/page";
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const slugs = params["*"].split("/").filter((v) => v.length > 0);
+  const page = source.getPage(slugs);
+  if (!page) throw new Response("Not found", { status: 404 });
+
+  return {
+    path: page.path,
+    tree: source.getPageTree(),
+  };
+}
+
+const clientLoader = browserCollections.docs.createClientLoader({
+  component({ toc, default: Mdx, frontmatter }) {
+    return (
+      <DocsPage toc={toc}>
+        <title>{frontmatter.title}</title>
+        <meta name="description" content={frontmatter.description} />
+        <DocsTitle>{frontmatter.title}</DocsTitle>
+        <DocsDescription>{frontmatter.description}</DocsDescription>
+        <DocsBody>
+          <Mdx components={{ ...defaultMdxComponents, ...TabsComponents }} />
+        </DocsBody>
+      </DocsPage>
+    );
+  },
+});
+
+export default function Page({ loaderData }: Route.ComponentProps) {
+  const { tree, path } = loaderData;
+  const Content = clientLoader.getComponent(path);
+
+  return (
+    <DocsLayout {...baseOptions()} tree={tree as PageTree.Root}>
+      <Content />
+    </DocsLayout>
+  );
+}

docs/app/docs/search.ts

@@ -0,0 +1,10 @@
+import { createFromSource } from "fumadocs-core/search/server";
+import { source } from "@/lib/source";
+
+const server = createFromSource(source, {
+  language: "english",
+});
+
+export async function loader() {
+  return server.staticGET();
+}

docs/app/lib/layout.shared.tsx

@@ -0,0 +1,21 @@
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import logoDark from "@/assets/logo-dark.png";
+export function baseOptions(): BaseLayoutProps {
+  return {
+    nav: {
+      title: (
+        <>
+          <img
+            src={logoDark}
+            alt="Ventyd Logo"
+            style={{ height: "28px", marginBottom: "4px" }}
+          />
+        </>
+      ),
+      url: "/docs",
+    },
+    themeSwitch: {
+      enabled: false,
+    },
+  };
+}

docs/app/lib/source.ts

@@ -0,0 +1,7 @@
+import { docs } from "fumadocs-mdx:collections/server";
+import { loader } from "fumadocs-core/source";
+
+export const source = loader({
+  source: docs.toFumadocsSource(),
+  baseUrl: "/docs",
+});

docs/app/root.tsx

@@ -0,0 +1,78 @@
+import { RootProvider } from "fumadocs-ui/provider/react-router";
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
+import type { Route } from "./+types/root";
+import "./app.css";
+import SearchDialog from "@/components/search";
+
+export const links: Route.LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider search={{ SearchDialog }} theme={{ forcedTheme: "dark" }}>
+          {children}
+        </RootProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

docs/app/routes.ts

@@ -0,0 +1,7 @@
+import { index, type RouteConfig, route } from "@react-router/dev/routes";
+
+export default [
+  index("routes/home.tsx"),
+  route("docs/*", "docs/page.tsx"),
+  route("api/search", "docs/search.ts"),
+] satisfies RouteConfig;

docs/app/routes/home.tsx

@@ -0,0 +1,7 @@
+export function clientLoader() {
+  return new Response(null, { status: 302, headers: { Location: "/docs" } });
+}
+
+export default function Home() {
+  return <div />;
+}