WIP: Documentation website (#52)

Author: tonyfromundefined

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/assets/logo-dark.png

@@ -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/assets/logo-light.png

@@ -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/components/search.tsx

@@ -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/docs/page.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/docs/search.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",
+});