# API-referentie

Volledige referentie voor alle exports uit het pakket `onedocs`.

## Ingangspunten

| Import | Beschrijving |
|--------|-------------|
| `onedocs` | Hoofdingang - layouts, componenten, `mdxComponents`, `defineConfig` en bronhelpers |
| `onedocs/components` | Fumadocs-componenten naast UI, `InstallBlock`, `CodeBlock` en `Button` en `Logo` |
| `onedocs/config` | Configuratiehelpers |
| `onedocs/source` | Hulpmiddelen voor contentbronnen |
| `onedocs/metadata` | Metadatageneratie |
| `onedocs/og` | OpenGraph-afbeeldingsgeneratie |
| `onedocs/llms` | Generatie van LLMs.txt |
| `onedocs/seo` | Sitemap en robots.txt |
| `onedocs/css/preset.css` | Tailwind CSS-preset |

## Indelingen

### DocsLayout

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

```tsx
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`.

```tsx
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`.

```tsx
import { DocsBody } from "onedocs";

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

### HomePage

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

```tsx
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](https://onedocs.inline0.dev/nl/docs/configuration#homepage) en [de voettekst](https://onedocs.inline0.dev/nl/docs/configuration#footer) voor wat de configuratie bepaalt.

### HomeLayout

Basislayout voor de startpagina (intern gebruikt door `HomePage`).

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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`:

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

### GitHubIcon

GitHub-pictogramcomponent (intern gebruikt in de navigatie).

```tsx
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.

```tsx
import { CodeBlock } from "onedocs";

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

## Configuratie

### defineConfig

Typeveilige configuratiehelper.

```tsx
import { defineConfig } from "onedocs/config";

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

### OnedocsConfig

TypeScript-type voor configuratie.

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

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

Zie [Configuratie](https://onedocs.inline0.dev/nl/docs/configuration) voor alle opties.

## Bronhulpmiddelen

### loader

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

```tsx
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`.

```tsx
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](https://github.com/inline0/onedocs/issues/4)). Gebruik `loader` zoals hierboven getoond totdat dit is opgelost.

## Metadata

### createMetadata

Genereert Next.js-metadata voor uw rootlayout.

```tsx
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`.

```tsx
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](#dynamic-og-images) voor een Open Graph-afbeelding per pagina.

## OpenGraph-afbeeldingen

### createRootOGImage

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

```tsx
// 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.

```tsx
// 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`.

```tsx
// 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

| Functie | Beschrijving |
|----------|-------------|
| `loadPublicFile(path)` | Laadt een bestand van `public/` als data-URL en buffer; voor SVG's leest ook de `width`- en `height`-attributen |
| `loadInterFont(path?)` | Laadt een lettertype van `public/` voor OG-afbeeldingen, standaard `fonts/Inter-Medium.ttf` |
| `ogImageSize` | Standaardafmetingen voor OG-afbeeldingen `{ width: 1200, height: 630 }` |
| `ogImageContentType` | Type MIME voor `"image/png"` |

**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.

```tsx
// 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.

```tsx
// 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](https://onedocs.inline0.dev/nl/docs/seo-search#full-content-version).

### 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`).

```tsx
// 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](https://onedocs.inline0.dev/nl/docs/seo-search#sitemap) 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`.

```tsx
// 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`:

```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:

```tsx
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](https://onedocs.inline0.dev/nl/docs/components#more-components).

Zie [Componenten](https://onedocs.inline0.dev/nl/docs/components) voor gebruiksvoorbeelden.