API-referentie

Volledige referentie voor alle exports uit het pakket onedocs.

Ingangspunten

Indelingen

DocsLayout

Baselayoutwrapper voor documentatiepagina's. Biedt navigatie in de zijbalk, zoeken en een themawisselaar.

import { DocsLayout } from "onedocs";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <DocsLayout config={config} pageTree={source.pageTree}>
      {children}
    </DocsLayout>
  );
}

Props:

• config - Uw OnedocsConfig-object
• pageTree - Paginaboom uit uw bron (e.g., source.pageTree)
• children - Pagina-inhoud

DocsPage

Wrapper voor afzonderlijke documentatiepagina's. Omhult de Fumadocs UI DocsPage en plaatst de inhoud in DocsBody.

import { DocsPage, mdxComponents } from "onedocs";
import { notFound } from "next/navigation";

export default async function Page(props: {
  params: Promise<{ slug?: string[] }>;
}) {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();
  const MDX = page.data.body;

  return (
    <DocsPage toc={page.data.toc}>
      <MDX components={mdxComponents} />
    </DocsPage>
  );
}

Props:

• toc - Inhoudsopgave uit de paginagegevens
• children - Inhoud van MDX
• Elke andere prop van de Fumadocs UI DocsPage, zoals full

DocsBody

Innerlijke body-wrapper voor documentatie-inhoud. Wordt intern gebruikt door DocsPage.

import { DocsBody } from "onedocs";

<DocsBody>
  <MDX components={mdxComponents} />
</DocsBody>

HomePage

Volledig onderdeel voor de landingspagina met hero, functies en voettekst.

import { HomePage, CTASection } from "onedocs";

export default function Home() {
  return (
    <HomePage config={config} packageName="my-package">
      <CTASection
        title="Ready to get started?"
        cta={{ label: "Read the Docs", href: "/docs" }}
      />
    </HomePage>
  );
}

Props:

• config - Uw OnedocsConfig-object
• packageName - Pakketnaam voor het installatieblok (optioneel)
• children - Inhoud tussen functies en voettekst (optioneel)

Zie de startpagina en de voettekst voor wat de configuratie bepaalt.

HomeLayout

Basislayout voor de startpagina (intern gebruikt door HomePage).

import { HomeLayout } from "onedocs";

<HomeLayout config={config}>
  {/* Custom homepage content */}
</HomeLayout>

createBaseOptions

Bouwt vanuit uw configuratie de Fumadocs-layoutopties van UI op (navigatietitel of logo, nav.links en de GitHub-link). DocsLayout en HomeLayout gebruiken dit; roep het zelf aan wanneer u rechtstreeks een Fumadocs-layout van UI rendert.

import { DocsLayout } from "fumadocs-ui/layouts/docs";
import { createBaseOptions } from "onedocs";

<DocsLayout {...createBaseOptions(config)} tree={source.pageTree}>
  {children}
</DocsLayout>

Componenten

InstallBlock

Tabbladen voor pakketbeheerders met installatieopdrachten voor npm, yarn, pnpm en bun (npm i, yarn add, pnpm add, bun add). Het is een asynchrone servercomponent.

import { InstallBlock } from "onedocs";

<InstallBlock packageName="onedocs" />

Props:

• packageName - De pakketnaam van npm die moet worden geïnstalleerd
• title - Kop boven de tabbladen (optioneel)
• description - Tekst boven de tabbladen (optioneel)
• children - Inhoud onder de tabbladen (optioneel)

Button

Afgeronde link in de stijl van een primaire knop. Er is één stijl.

import { Button } from "onedocs";

<Button href="/docs">Get Started</Button>

Props:

• href - Linkbestemming
• children - Knoptekst
• className - Extra klassen (optioneel)

Logo

Rendert een lichte en een donkere afbeelding en toont de afbeelding die bij het huidige thema past. DocsLayout en HomePage gebruiken dit voor een logo met lichte en donkere varianten.

import { Logo } from "onedocs";

<Logo light="/logo-light.svg" dark="/logo-dark.svg" alt="My Project" className="h-6" />

Props:

• light - Bestandspad voor de lichte modus
• dark - Bestandspad voor de donkere modus
• alt - Alternatieve tekst (standaard: "Logo")
• className - Klassen voor beide afbeeldingen (optioneel)

CTASection

Oproep-tot-actie-gedeelte voor de startpagina.

import { CTASection } from "onedocs";

<CTASection
  title="Ready to get started?"
  description="Optional description text"
  cta={{ label: "Get Started", href: "/docs" }}
/>

Props:

• title - Kop van het gedeelte
• description - Tekst onder de kop (optioneel)
• cta - Knopconfiguratie met label en href
• children - Inhoud onder de knop (optioneel)

FontHead

Laadt vooraf het Inter Variable-lettertype, declareert de @font-face en stelt het in als lettertype voor de pagina. Voeg het toe aan de <head> van uw rootlayout.

import { FontHead } from "onedocs";

<html>
  <head>
    <FontHead />
  </head>
  <body>{children}</body>
</html>

Onedocs levert het lettertype niet mee. Standaard laadt FontHead /fonts/InterVariable.woff2, dus plaats het bestand in public/fonts/ of geef een andere URL door met fontPath:

<FontHead fontPath="/assets/Inter.woff2" />

GitHubIcon

GitHub-pictogramcomponent (intern gebruikt in de navigatie).

import { GitHubIcon } from "onedocs";

<GitHubIcon className="size-5" />

CodeBlock

Codeblok met syntaxkleuring, op de server gemarkeerd met Shiki via Fumadocs. Het is een asynchrone servercomponent.

import { CodeBlock } from "onedocs";

<CodeBlock lang="tsx" code="const x = 1;" />

Configuratie

defineConfig

Typeveilige configuratiehelper.

import { defineConfig } from "onedocs/config";

export default defineConfig({
  title: "My Docs",
  // ... other options
});

OnedocsConfig

TypeScript-type voor configuratie.

import type { OnedocsConfig } from "onedocs/config";

const config: OnedocsConfig = {
  title: "My Docs",
};

Zie Configuratie voor alle opties.

Bronhulpmiddelen

loader

Herexport van de fumadocs-core/source-loader voor het maken van contentbronnen.

import { loader } from "onedocs/source";

export const source = loader({
  baseUrl: "/docs",
  source: docs.toFumadocsSource(),
});

createSource

Helper voor het maken van een contentbron (wrapper rond een loader). De basis-URL is standaard /docs.

import { createSource } from "onedocs/source";
import { docs } from "../../.source/server";

export const source = createSource(docs);
// export const source = createSource(docs, { baseUrl: "/guide" });

In 0.1.27 geeft createSource een bron zonder type terug, waardoor TypeScript fouten meldt, zoals Property 'data' does not exist on type 'unknown', wanneer u page.data leest (#4). Gebruik loader zoals hierboven getoond totdat dit is opgelost.

Metadata

createMetadata

Genereert Next.js-metadata voor uw rootlayout.

import { createMetadata } from "onedocs/metadata";

export const metadata = createMetadata(config, {
  baseUrl: "https://example.com",
});

Opties:

• baseUrl - De basis-URL van uw site (optioneel)
• additional - Extra Metadata-velden, als laatste samengevoegd (optioneel)

Geeft terug: een Next.js-Metadata-object met:

• Titel (config.title) en titelsjabloon (%s | Site Name)
• Beschrijving
• Favicon van config.icon, indien ingesteld
• Wanneer baseUrl is ingesteld: metadataBase, OpenGraph-metadata en een Twitter-summary_large_image-kaart

createDocsPageMetadata

Genereert de titel- en beschrijvingsmetadata voor een documentatiepagina. Neemt één object met title en optioneel description.

import { createDocsPageMetadata } from "onedocs/metadata";
import { notFound } from "next/navigation";

export async function generateMetadata(props: {
  params: Promise<{ slug?: string[] }>;
}) {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();

  return createDocsPageMetadata({
    title: page.data.title,
    description: page.data.description,
  });
}

Zie Dynamische OG-afbeeldingen voor een Open Graph-afbeelding per pagina.

OpenGraph-afbeeldingen

createRootOGImage

Maakt een OG-afbeelding voor de startpagina: uw logo gecentreerd op een zwarte achtergrond.

// src/app/opengraph-image.tsx
import {
  createRootOGImage,
  loadPublicFile,
  ogImageSize,
  ogImageContentType,
  type OGImageLogo,
} from "onedocs/og";

export const size = ogImageSize;
export const contentType = ogImageContentType;

export default async function Image() {
  const logo = await loadPublicFile("logo-dark.svg");
  return createRootOGImage(logo as OGImageLogo);
}

createDocsOGImage

Maakt een OG-afbeelding voor documentatiepagina's: het logo linksboven en de titel in wit op zwart. Het lettertypeargument is optioneel; zonder dit argument gebruikt de titel het systeemlettertype.

// src/app/docs/opengraph-image.tsx
import {
  createDocsOGImage,
  loadPublicFile,
  loadInterFont,
  ogImageSize,
  ogImageContentType,
  type OGImageLogo,
} from "onedocs/og";

export const size = ogImageSize;
export const contentType = ogImageContentType;

export default async function Image() {
  const [logo, font] = await Promise.all([
    loadPublicFile("logo-dark.svg"),
    loadInterFont(),
  ]);
  return createDocsOGImage("Documentation", logo as OGImageLogo, font);
}

Dynamische OG-afbeeldingen

Serveer OG-afbeeldingen per pagina via een route. Pagina's verwijzen niet automatisch naar deze route: voeg deze zelf toe aan de metadata van elke pagina, bijvoorbeeld met openGraph: { images: "/docs/og/getting-started" } naast de velden van createDocsPageMetadata.

// src/app/docs/og/[...slug]/route.tsx
import {
  createDocsOGImage,
  loadPublicFile,
  loadInterFont,
  type OGImageLogo,
} from "onedocs/og";
import { source } from "@/lib/source";

export async function GET(
  _request: Request,
  { params }: { params: Promise<{ slug: string[] }> }
) {
  const { slug } = await params;
  const page = source.getPage(slug);
  const title = page?.data.title ?? "Documentation";

  const [logo, font] = await Promise.all([
    loadPublicFile("logo-dark.svg"),
    loadInterFont(),
  ]);

  return createDocsOGImage(title, logo as OGImageLogo, font);
}

Helperfuncties

Vereiste bestanden:

• public/logo-dark.svg - Logo voor OG-afbeeldingen. De OG-helpers bepalen de grootte op basis van de attributen width en height; de <svg>-tag moet daarom beide als gewone getallen bevatten.
• public/fonts/Inter-Medium.ttf - Lettertype voor titels. Onedocs levert dit niet mee.

LLMs.txt

Genereer LLMs.txt-bestanden voor AI-assistenten.

generateLLMsText

Genereert beknopte LLMs.txt-inhoud. Neemt een bron die is ingepakt met createLLMsSource en { title, description? } en geeft een promise terug.

// src/app/llms.txt/route.ts
import { createLLMsSource, generateLLMsText } from "onedocs/llms";
import { source } from "@/lib/source";

export async function GET() {
  const content = await generateLLMsText(createLLMsSource(source), {
    title: "My Project",
    description: "Project description",
  });

  return new Response(content, {
    headers: { "Content-Type": "text/plain; charset=utf-8" },
  });
}

Pagina-URL's worden overgenomen uit de bron, bijvoorbeeld /docs/getting-started, zonder domein.

generateLLMsFullText

Genereert volledige LLMs.txt met complete pagina-inhoud. Neemt alleen de ingepakte bron en geeft een promise terug.

// src/app/llms-full.txt/route.ts
import { createLLMsSource, generateLLMsFullText } from "onedocs/llms";
import { source } from "@/lib/source";

export async function GET() {
  const content = await generateLLMsFullText(createLLMsSource(source));

  return new Response(content, {
    headers: { "Content-Type": "text/plain; charset=utf-8" },
  });
}

Paginainhoud wordt alleen opgenomen wanneer Fumadocs MDX's includeProcessedMarkdown is ingeschakeld; zie SEO en zoeken.

createLLMsSource

Pakt een Fumadocs-bron in (resultaat van loader() of createSource()) in de vorm die de twee bovenstaande functies verwachten: voor elke pagina URL, titel, beschrijving en tekstloaders.

SEO

generateSitemap

Genereert een sitemap voor uw documentatie. Neemt één object: baseUrl, de lijst met pages (meestal van meta.json) en optioneel docsPath (standaard /docs).

// src/app/sitemap.ts
import { generateSitemap } from "onedocs/seo";
import meta from "../../content/docs/meta.json";

export default function sitemap() {
  return generateSitemap({
    baseUrl: "https://example.com",
    pages: meta.pages ?? [],
  });
}

Zie SEO en Zoeken om te zien hoe vermeldingen URL's worden.

generateRobots

Genereert robots.txt-inhoud: alles toestaan, plus Host- en Sitemap-regels. sitemapPath is standaard /sitemap.xml.

// src/app/robots.ts
import { generateRobots } from "onedocs/seo";

export default function robots() {
  return generateRobots({
    baseUrl: "https://example.com",
  });
}

CSS-preset

Importeer de CSS-preset in uw globals.css:

@import "onedocs/css/preset.css";

@source "./**/*.tsx";
@source "../../content/**/*.mdx";

De paden van @source zijn relatief aan src/app/globals.css.

De preset bevat:

• Tailwind CSS v4 (installeer tailwindcss en @tailwindcss/postcss zelf)
• Fumadocs-neutraal thema
• Fumadocs-presetstijlen
• --font-sans ingesteld op de variabele --font-inter die FontHead definieert
• Inter OpenType-functies voor hoofdtekst en koppen
• Stijlen voor een layout op volledige hoogte en de Onedocs-layoutaanpassingen

MDX-componenten

De export van mdxComponents verspreidt de standaardcomponenten Fumadocs UI MDX en voegt de onderstaande componenten toe:

import { mdxComponents } from "onedocs";

<MDX components={mdxComponents} />

Inbegrepen componenten:

• Standaardcomponenten van Fumadocs UI: pre (codeblokken), a, img, h1 tot h6 (koppen met ankers), table, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, CalloutContainer, CalloutTitle, CalloutDescription
• Callout - Meldingen voor informatie, waarschuwingen en fouten
• Card, Cards - Kaartindelingen
• Tab, Tabs - Inhoud met tabbladen
• Step, Steps - Genummerde stappen
• Accordion, Accordions - Inklapbare secties
• File, Folder, Files - Bestandsbomen
• ImageZoom - Inzoomafbeeldingen
• TypeTable - Typetabellen voor documentatie

InstallBlock en CodeBlock zijn niet inbegrepen; voeg ze zelf toe zoals beschreven in Componenten.

Zie Componenten voor gebruiksvoorbeelden.