Vibekit

Wie Fumadocs verdrahtet ist

Routen, Source-Loader, Suche und LLM-Endpunkte in diesem Template

Fumadocs hat drei Schichten: Core (Quelle, Suche, Page Tree), UI (Docs-Layout und MDX-Komponenten) und MDX (der Content-Compiler). VibeKit nutzt alle drei in apps/web. Die Framework-Sicht steht in der Fumadocs-Einführung.

Pakete

apps/web/package.json pinnt:

  • fumadocs-core und fumadocs-ui (Runtime)
  • fumadocs-mdx (Compiler, über createMDX() in apps/web/next.config.mjs)

Die Next-Config bindet die App sauber über withNextIntl(withMdx(nextConfig)) ein. Fumadocs MDX kompiliert content/docs (Dokumentation), content/blog (Blogartikel) und content/legal (Rechtliches), wodurch alle Markdown-Quellen unter einer einzigen Engine vereint sind.

Source-Loader

apps/web/modules/docs/source.ts stellt Loader für alle Inhalte bereit:

  1. defineDocs({ dir: "content/docs" }) liest die Produktdokumentation.
  2. defineDocs({ dir: "content/blog" }) liest Blogartikel mit Frontmatter-Validierung.
  3. defineDocs({ dir: "content/legal" }) liest Nutzungsbedingungen und Datenschutzhinweise.
  4. defineI18n nutzt die Locales aus config.ts, blendet die Standardsprache in URLs aus und parst Locale-Dateien mit Punkt-Suffix (page.de.md).
  5. docsSource, blogSource und legalSource stellen getPage, getPageTree und generateParams bereit.

Die öffentliche Route ist ein Catch-all in einer eigenen Route-Gruppe (ohne Marketing-Navigation): apps/web/app/(docs)/docs/[[...path]]/.

  • layout.tsx rendert DocsLayout mit docsSource.getPageTree(locale) und dem Produktlogo.
  • page.tsx ruft docsSource.getPage(path, locale) auf und danach page.data.load() für den MDX-Body und das Inhaltsverzeichnis.

Die Locale steht nicht in der URL. getLocale() liest den Cookie NEXT_LOCALE. Das entspricht dem Rest der App (localePrefix: "never").

MDX-Komponenten

apps/web/modules/docs/mdx-components.tsx übernimmt die Defaults aus fumadocs-ui/mdx (Überschriften, Codeblöcke, Callout, Tabs und den Rest). Produktspezifische Komponenten gehören dorthin. Siehe Fumadocs-UI-Komponenten.

Das Docs-Catch-all-Layout verwendet den Fumadocs-RootProvider für die Suche. Seine Theme-Verwaltung ist deaktiviert, da die App bereits einen Theme-Provider besitzt.

Suche

GET /api/search nutzt createFromSource(docsSource). Jeder Index-Eintrag enthält Locale, Titel, Untertitel, URL und Structured Data der kompilierten Seite. Details: Fumadocs-Suche.

LLM-Endpunkte

VibeKit folgt der Fumadocs-LLM-Integration:

URLInhalt
/llms.txtIndex der Docs-Seiten
/llms-full.txtVollständiges Markdown aller Seiten
/docs.md oder /docs/getting-started/quickstart.mdEine Seite als Markdown (Rewrite nach /llms.mdx/docs/...)

Rewrites stehen in apps/web/next.config.mjs. Hilfsfunktionen stehen in apps/web/modules/docs/get-llm-text.ts.

Statische Params

generateStaticParams auf der Docs-Seite nutzt docsSource.generateParams("path"), um bekannte Slugs aufzulisten. Das Rendering liest weiterhin das Sprach-Cookie und den aufgelösten Modulzustand pro Anfrage; dadurch werden nicht alle Docs-Routen statisch. Fehlende Slugs rufen notFound() auf.

On this page