✨ add docs

apps/web/package.json

@@ -20,6 +20,7 @@
     "@onruntime/next-sitemap": "workspace:*",
     "@onruntime/translations": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.14",
@@ -43,16 +44,21 @@
     "react-hook-form": "^7.54.2",
     "react-wrap-balancer": "^1.1.1",
     "reflect-metadata": "^0.2.2",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "resend": "^4.1.2",
     "server-only": "^0.0.1",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",
+    "unist-util-visit": "^5.0.0",
     "usehooks-ts": "^3.1.1",
     "zod": "^3.24.2"
   },
   "devDependencies": {
     "@ai-sdk/openai": "^3.0.2",
     "@tailwindcss/postcss": "^4.1.18",
+    "@types/mdast": "^4.0.4",
     "@types/node": "^22.0.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -62,6 +68,7 @@
     "postcss": "^8.5.1",
     "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vfile": "^6.0.3"
   }
 }

apps/web/public/plugins/.claude-plugin/marketplace.json

@@ -0,0 +1,17 @@
+{
+  "name": "onruntime",
+  "description": "Official plugins by onRuntime Studio",
+  "plugins": [
+    {
+      "name": "gitmoji",
+      "source": "../gitmoji",
+      "description": "Generate git commits following the gitmoji conventional commits convention",
+      "version": "1.0.0",
+      "author": {
+        "name": "onRuntime Studio",
+        "url": "https://onruntime.com"
+      },
+      "keywords": ["gitmoji", "git", "commit", "conventional-commits"]
+    }
+  ]
+}

apps/web/public/plugins/gitmoji/.claude-plugin/plugin.json

@@ -0,0 +1,13 @@
+{
+  "name": "gitmoji",
+  "version": "1.0.0",
+  "description": "Generate git commits following the gitmoji conventional commits convention",
+  "author": {
+    "name": "onRuntime Studio",
+    "url": "https://onruntime.com"
+  },
+  "homepage": "https://onruntime.com/docs/gitmoji",
+  "repository": "https://github.com/onruntime/gitmoji-plugin",
+  "license": "MIT",
+  "keywords": ["gitmoji", "git", "commit", "conventional-commits"]
+}

apps/web/public/plugins/gitmoji/commands/commit.md

@@ -0,0 +1,73 @@
+---
+allowed-tools: Bash(git add:*), Bash(git status:*), Bash(git commit:*), Bash(git diff:*), Bash(git log:*), Bash(curl:*)
+description: Create a git commit following the gitmoji convention
+argument-hint: [optional commit message hint]
+---
+
+# Gitmoji Conventional Commits
+
+Generate commit messages following the gitmoji convention by onRuntime Studio.
+
+## Git Context
+
+- Current git status: !`git status`
+- Staged changes: !`git diff --staged`
+- Unstaged changes: !`git diff`
+- Current branch: !`git branch --show-current`
+- Recent commits for style reference: !`git log --oneline -5`
+
+## Available Gitmojis
+
+!`curl -s https://raw.githubusercontent.com/carloscuesta/gitmoji/master/packages/gitmojis/src/gitmojis.json | jq -r '.gitmojis[] | "\(.emoji) | \(.description)"'`
+
+## Commit Structure
+
+```
+<gitmoji> <type> <description> [(#<issue number>)]
+
+[optional body]
+
+[optional footer(s)]
+```
+
+## Rules
+
+1. Write in **lowercase**
+2. Use **imperative mood** ("add" not "added")
+3. One logical change per commit
+4. Keep description concise
+
+## Types
+
+| Type | Description |
+| --- | --- |
+| `add` | Add a new feature |
+| `fix` | Fix a bug |
+| `improve` | Improve something |
+| `update` | Update something |
+| `remove` | Remove something |
+| `refactor` | Refactor something |
+| `rename` | Rename something |
+| `move` | Move a file or folder |
+| `upgrade` | Upgrade dependencies |
+| `downgrade` | Downgrade dependencies |
+
+## Your Task
+
+Based on the git status and diff above, create commits following the gitmoji convention.
+
+If the user provided a hint: $ARGUMENTS
+
+**Important**:
+- Use the gitmoji list above to select the correct emoji.
+- Look at the recent commits for style reference.
+- Split changes into multiple commits if needed. One commit = one logical change.
+- Do NOT sign commits. No "Generated with Claude Code", no "Co-Authored-By", no footer.
+
+1. Analyze the changes and group them by logical units
+2. For each group:
+   - Stage only the relevant files
+   - Choose the correct gitmoji from the list above based on the type of change
+   - Write a concise commit message
+   - Create the commit
+3. Repeat for each logical group of changes

apps/web/src/app/[locale]/(docs)/docs/[[...slug]]/page.tsx

@@ -0,0 +1,209 @@
+import { notFound, redirect } from "next/navigation";
+import { Metadata } from "next";
+import { Clock } from "lucide-react";
+
+import { localeCodes } from "@/lib/translations";
+import {
+  getAllDocsSlugs,
+  getDocsPageBySlugs,
+  getProjectMetadata,
+  getDocsBreadcrumbs,
+  DOCS_PROJECTS,
+} from "@/lib/docs";
+import { processMDX } from "@/lib/mdx-processor";
+import {
+  DocsSidebar,
+  TableOfContents,
+  PageNavigation,
+  DocsBreadcrumb,
+  getProjectFromSlug,
+  projects,
+} from "@/components/docs";
+import type { DocsProject } from "@/components/docs";
+
+interface DocsPageProps {
+  params: Promise<{
+    locale: string;
+    slug?: string[];
+  }>;
+}
+
+export async function generateStaticParams() {
+  const params: { locale: string; slug?: string[] }[] = [];
+
+  for (const locale of localeCodes) {
+    // Add index page (redirects to default project)
+    params.push({ locale, slug: undefined });
+
+    // Add all doc pages
+    const slugs = getAllDocsSlugs(locale);
+    for (const slug of slugs) {
+      if (slug.length > 0) {
+        params.push({ locale, slug });
+      }
+    }
+  }
+
+  return params;
+}
+
+export async function generateMetadata({
+  params,
+}: DocsPageProps): Promise<Metadata> {
+  const { locale, slug } = await params;
+
+  if (!slug || slug.length === 0) {
+    return {
+      title: "Documentation | onRuntime Studio",
+      description:
+        "Explore our documentation for guides, conventions, and package references.",
+    };
+  }
+
+  const page = await getDocsPageBySlugs(slug, locale);
+
+  if (!page) {
+    return {
+      title: "Documentation | onRuntime Studio",
+    };
+  }
+
+  const project = projects.find((p) => p.id === page.project);
+
+  return {
+    title: `${page.title} | ${project?.label || "Docs"} | onRuntime Studio`,
+    description: page.description,
+  };
+}
+
+export default async function DocsPage({ params }: DocsPageProps) {
+  const { locale, slug } = await params;
+
+  // If no slug, redirect to default project (gitmoji)
+  if (!slug || slug.length === 0) {
+    redirect(`/${locale}/docs/gitmoji`);
+  }
+
+  // Get current project from slug
+  const currentProject = getProjectFromSlug(slug);
+
+  // Validate project exists
+  if (!DOCS_PROJECTS.includes(currentProject)) {
+    notFound();
+  }
+
+  const metadata = getProjectMetadata(currentProject, locale);
+
+  // Project index page (e.g., /docs/gitmoji)
+  if (slug.length === 1 && DOCS_PROJECTS.includes(slug[0] as DocsProject)) {
+    const project = projects.find((p) => p.id === currentProject);
+
+    return (
+      <div className="flex w-full" data-docs-page>
+        <DocsSidebar metadata={metadata} currentProject={currentProject} />
+
+        <main className="flex-1 min-w-0 px-6 py-8 md:px-12">
+          <DocsBreadcrumb
+            items={[
+              { title: "Docs", href: "/docs" },
+              { title: project?.label || currentProject, href: `/docs/${currentProject}` },
+            ]}
+            className="mb-6"
+          />
+
+          <header className="mb-12">
+            <h1 className="text-4xl font-bold mb-4 text-foreground">
+              {project?.label || currentProject}
+            </h1>
+            <p className="text-lg text-muted-foreground">
+              {project?.description}
+            </p>
+          </header>
+
+          {metadata?.sections.map((section, sectionIndex) => (
+            <div key={sectionIndex} className="mb-12">
+              <h2 className="text-2xl font-semibold mb-4 text-foreground">
+                {section.title}
+              </h2>
+              <div className="grid sm:grid-cols-2 gap-4">
+                {section.pages.map((page, pageIndex) => (
+                  <a
+                    key={pageIndex}
+                    href={`/docs/${page.slug}`}
+                    className="group block p-4 rounded-lg border bg-card hover:border-primary transition-colors"
+                  >
+                    <h3 className="font-medium text-foreground group-hover:text-primary transition-colors mb-1">
+                      {page.title}
+                    </h3>
+                    {page.description && (
+                      <p className="text-sm text-muted-foreground">
+                        {page.description}
+                      </p>
+                    )}
+                  </a>
+                ))}
+              </div>
+            </div>
+          ))}
+        </main>
+      </div>
+    );
+  }
+
+  // Doc page
+  const page = await getDocsPageBySlugs(slug, locale);
+
+  if (!page) {
+    notFound();
+  }
+
+  const { content, readingTime } = await processMDX(page.content, locale);
+  const breadcrumbs = getDocsBreadcrumbs(slug, locale);
+
+  return (
+    <div className="flex w-full" data-docs-page>
+      <DocsSidebar metadata={metadata} currentProject={currentProject} />
+
+      <main className="flex-1 min-w-0 px-6 py-8 md:px-12">
+        <DocsBreadcrumb items={breadcrumbs} className="mb-6" />
+
+        <article>
+          {/* Header */}
+          <header className="pb-6 mb-8 border-b">
+            <h1 className="mb-4 text-4xl font-bold text-foreground">{page.title}</h1>
+
+            {page.description && (
+              <p className="mb-4 text-lg text-muted-foreground">
+                {page.description}
+              </p>
+            )}
+
+            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+              <div className="flex items-center gap-1">
+                <Clock className="size-4" />
+                <span>{readingTime.text}</span>
+              </div>
+              <span>•</span>
+              <span>{readingTime.words} words</span>
+            </div>
+          </header>
+
+          {/* Content */}
+          <div className="prose prose-lg max-w-none">{content}</div>
+
+          {/* Footer Navigation */}
+          <PageNavigation
+            metadata={metadata}
+            currentSlug={page.slug}
+            lastModified={page.lastModified}
+          />
+        </article>
+      </main>
+
+      {/* Table of Contents */}
+      <aside className="hidden xl:block w-64 shrink-0 px-6 py-8">
+        <TableOfContents />
+      </aside>
+    </div>
+  );
+}

apps/web/src/app/[locale]/(docs)/layout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+import "@/styles/docs.css";
+
+type DocsLayoutProps = {
+  children: ReactNode;
+};
+
+export default function DocsLayout({ children }: DocsLayoutProps) {
+  return <>{children}</>;
+}

apps/web/src/app/[locale]/layout.tsx

@@ -13,6 +13,7 @@ import Navbar from "@/components/marketing/navbar";
 import Footer from "@/components/layout/footer/footer";
 import { Toaster } from "@/components/ui/toaster";
 import { OrganizationSchema } from "@/components/json-ld/organization-schema";
+import { ConditionalLayout } from "@/components/layout/conditional-layout";
 
 import { Providers } from "./providers";
 
@@ -44,11 +45,15 @@ export default async function LocaleLayout({ children, params }: LayoutProps) {
 
         <Providers locale={locale}>
           <Provider>
-            <Navbar />
+            <ConditionalLayout hideOnDocs>
+              <Navbar />
+            </ConditionalLayout>
 
             {children}
 
-            <Footer />
+            <ConditionalLayout hideOnDocs>
+              <Footer />
+            </ConditionalLayout>
           </Provider>
         </Providers>