This document describes the technical documentation infrastructure for the Sim platform, including the Fumadocs-based website, MDX content organization, and the automated internationalization system. The documentation app is a standalone Next.js application that serves as the central hub for user-facing technical content and API references.
The documentation system is built as a Next.js application within the monorepo, leveraging Fumadocs for content management and Lingo.dev for automated AI-powered translations.
| Component | Purpose | Technology |
|---|---|---|
| Documentation App | Web interface for docs and API reference | Next.js 15+, Fumadocs UI/Core |
| Content Layer | Source material for documentation | MDX (Markdown with JSX) |
| API Reference | Automated API documentation | Fumadocs OpenAPI, Swagger/OpenAPI spec |
| Internationalization | Multi-language support (6 languages) | Fumadocs i18n, Lingo.dev |
| Visual Assets | Dynamic OpenGraph and branding | Next.js OG (Satori), Tailwind CSS |
The documentation system is located in apps/docs/.
Sources: apps/docs/package.json1-20 apps/docs/app/layout.tsx1-26
The documentation app uses a catch-all route to serve content from MDX files and OpenAPI specifications. It bridges the "Natural Language Space" (written guides) with "Code Entity Space" (API endpoints and code blocks).
Sources: apps/docs/app/[lang]/layout.tsx:107-132, apps/docs/app/[lang]/[[...slug]]/page.tsx:57-70, apps/docs/lib/source.ts1-15
The Page component in apps/docs/app/[lang]/[[...slug]]/page.tsx is responsible for resolving the correct content based on the URL parameters.
resolveLangAndSlug function checks if the requested language is supported in SUPPORTED_LANGUAGES (derived from i18n.languages). If not, it defaults to English (en). apps/docs/app/[lang]/[[...slug]]/page.tsx:23-31source.getPage(slug, lang) from the Fumadocs source configuration to fetch MDX data. apps/docs/app/[lang]/[[...slug]]/page.tsx:60api-reference, it switches to the createAPIPage renderer provided by fumadocs-openapi. apps/docs/app/[lang]/[[...slug]]/page.tsx:33-55, apps/docs/app/[lang]/[[...slug]]/page.tsx:68findNeighbour from fumadocs-core/page-tree. apps/docs/app/[lang]/[[...slug]]/page.tsx:70-80Sources: apps/docs/app/[lang]/[[...slug]]/page.tsx:23-80
Sim supports six primary languages. The translation state is managed via i18n.lock and i18n.json to ensure consistency across the AI-translated content.
The system is configured in apps/docs/lib/i18n.ts and used in the defineI18nUI helper in the layout.
| Language | Code | Display Name |
|---|---|---|
| English | en | English |
| Spanish | es | Español |
| French | fr | Français |
| German | de | Deutsch |
| Japanese | ja | 日本語 |
| Chinese | zh | 简体中文 |
Sources: apps/docs/app/[lang]/layout.tsx:31-52, apps/docs/app/[lang]/[[...slug]]/page.tsx:23
The i18n.lock file tracks block-level checksums for content to identify when source English documentation has changed and requires a re-translation.
Sources: apps/docs/i18n.lock1-30
The Navbar component provides a unified experience between the documentation, API reference, and the main application ("Mothership"). It uses a two-row design:
SearchTrigger, LanguageDropdown, and ThemeToggle. apps/docs/components/navbar/navbar.tsx34-53NAV_TABS) that track active states based on the current pathname. apps/docs/components/navbar/navbar.tsx66-92Sources: apps/docs/components/navbar/navbar.tsx11-25 apps/docs/components/navbar/navbar.tsx27-96
The sidebar is customized via SidebarItem and SidebarFolder components to match the Sim Studio aesthetic (rounded corners, specific emerald-toned active states).
Sources: apps/docs/components/docs-layout/sidebar-components.tsx29-53 apps/docs/components/docs-layout/sidebar-components.tsx64-144
The system generates dynamic OG images using Next.js ImageResponse (Satori) at the /api/og route.
Geist font dynamically from Google Fonts using loadGoogleFont. apps/docs/app/api/og/route.tsx21-34SimLogoFull SVG directly into the image buffer to ensure high-fidelity branding on social platforms. apps/docs/app/api/og/route.tsx39-61getTitleFontSize). apps/docs/app/api/og/route.tsx12-16 apps/docs/app/api/og/route.tsx87-98Sources: apps/docs/app/api/og/route.tsx67-118
The documentation uses a custom Tailwind CSS configuration integrated with Fumadocs presets.
hsl(0, 0%, 10.6%)). apps/docs/app/global.css24-30--spacing-fd-container: 1400px) and offsets to center content while maintaining sidebar/TOC symmetry. apps/docs/app/global.css43-60Inter (aliased to geist-sans) and Geist_Mono via Next.js fonts. apps/docs/app/[lang]/layout.tsx:19-29, apps/docs/app/global.css33-41Sources: apps/docs/app/global.css1-60 apps/docs/app/[lang]/layout.tsx:93-104
Documentation content is categorized into folders within content/docs/[lang]/.
| Folder | Purpose |
|---|---|
triggers/ | Documentation for workflow entry points (Start, Webhook, Schedule, RSS). apps/docs/content/docs/ja/triggers/index.mdx19-39 |
blocks/ | Technical details for individual workflow blocks. apps/docs/content/docs/en/blocks/workflow.mdx1-10 |
execution/ | Details on the execution engine, deployment snapshots, and cost calculation. apps/docs/content/docs/fr/execution/costs.mdx1-10 |
Documentation in triggers/index.mdx explains the internal priority used when a user clicks Run in the editor:
Sources: apps/docs/content/docs/ja/triggers/index.mdx61-70 apps/docs/content/docs/fr/triggers/index.mdx61-70 apps/docs/content/docs/zh/triggers/index.mdx61-70
Refresh this wiki