# API Reference

Komplet reference for alle eksporter fra pakken `onedocs`.

## Indgangspunkter

| Import | Beskrivelse |
|--------|-------------|
| `onedocs` | Hovedindgang - layouts, komponenter, `mdxComponents`, `defineConfig`, kildehjælpere |
| `onedocs/components` | Fumadocs UI-komponenter samt `InstallBlock`, `CodeBlock`, `Button` og `Logo` |
| `onedocs/config` | Konfigurationshjælpere |
| `onedocs/source` | Hjælpeværktøjer til indholdskilder |
| `onedocs/metadata` | Generering af metadata |
| `onedocs/og` | Generering af OpenGraph-billeder |
| `onedocs/llms` | Generering af LLMs.txt |
| `onedocs/seo` | Sitemap og robots.txt |
| `onedocs/css/preset.css` | Forudindstilling af Tailwind CSS |

## Layouts

### DocsLayout

Overordnet layout-wrapper til dokumentationssider. Indeholder sidebar-navigation, søgning og skift af tema.

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

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

**Egenskaber:**
- `config` - Dit `OnedocsConfig`-objekt
- `pageTree` - Sidetræ fra din kilde (e.g., `source.pageTree`)
- `children` - Sideindhold

### DocsPage

Wrapper til individuelle dokumentationssider. Omslutter Fumadocs UI `DocsPage` og placerer indholdet i `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>
  );
}
```

**Egenskaber:**
- `toc` - Indholdsfortegnelse fra sidedata
- `children` - MDX-indhold
- Alle øvrige egenskaber fra Fumadocs UI `DocsPage`, såsom `full`

### DocsBody

Indre body-wrapper til dokumentationsindhold. Bruges internt af `DocsPage`.

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

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

### HomePage

Komplet landing page-komponent med hero, funktioner og footer.

```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>
  );
}
```

**Egenskaber:**
- `config` - Dit `OnedocsConfig`-objekt
- `packageName` - Pakkenavn til installationsblokken (valgfrit)
- `children` - Indhold mellem funktioner og footer (valgfrit)

Se [forsiden](https://onedocs.inline0.dev/da/docs/configuration#homepage) og [footeren](https://onedocs.inline0.dev/da/docs/configuration#footer) for at se, hvad konfigurationen styrer.

### HomeLayout

Grundlayout til forsiden (bruges internt af `HomePage`).

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

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

### createBaseOptions

Opretter Fumadocs UI-layoutindstillingerne (navbar-titel eller logo, `nav.links` og GitHub-linket) ud fra din konfiguration. `DocsLayout` og `HomeLayout` bruger det; kald det selv, når du renderer et Fumadocs UI-layout direkte.

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

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

## Komponenter

### InstallBlock

Faner til pakkehåndtering, der viser installationskommandoer for npm, yarn, pnpm og bun (`npm i`, `yarn add`, `pnpm add`, `bun add`). Det er en asynkron serverkomponent.

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

<InstallBlock packageName="onedocs" />
```

**Egenskaber:**
- `packageName` - Pakkenavnet npm, der skal installeres
- `title` - Overskrift over fanerne (valgfrit)
- `description` - Tekst over fanerne (valgfrit)
- `children` - Indhold under fanerne (valgfrit)

### Button

Afrundet link udformet som en primærknap. Der er én typografi.

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

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

**Egenskaber:**
- `href` - Linkdestination
- `children` - Knaptekst
- `className` - Ekstra klasser (valgfrit)

### Logo

Viser et lyst og et mørkt billede og viser det, der passer til det aktuelle tema. `DocsLayout` og `HomePage` bruger det til et `logo` med lyse og mørke varianter.

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

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

**Egenskaber:**
- `light` - Billedsti til lyst tema
- `dark` - Billedsti til mørkt tema
- `alt` - Alternativ tekst (standard: `"Logo"`)
- `className` - Klasser for begge billeder (valgfrit)

### CTASection

Opfordringssektion til forsiden.

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

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

**Egenskaber:**
- `title` - Sektionsoverskrift
- `description` - Tekst under overskriften (valgfrit)
- `cta` - Knapkonfiguration med `label` og `href`
- `children` - Indhold under knappen (valgfrit)

### FontHead

Forudindlæser skrifttypen Inter Variable, angiver dens `@font-face` og sætter den som sidens skrifttype. Tilføj den til din root-layouts `<head>`.

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

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

Onedocs leverer ikke skrifttypen. Som standard indlæser `FontHead` `/fonts/InterVariable.woff2`, så placér filen i `public/fonts/`, eller videregiv en anden URL med `fontPath`:

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

### GitHubIcon

GitHub-ikonkomponent (bruges internt i navigationen).

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

<GitHubIcon className="size-5" />
```

### CodeBlock

Kodeblok med syntaksfremhævning, fremhævet på serveren med Shiki via Fumadocs. Det er en asynkron serverkomponent.

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

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

## Konfiguration

### defineConfig

Typesikker konfigurationshjælper.

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

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

### OnedocsConfig

TypeScript-type til konfiguration.

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

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

Se [Konfiguration](https://onedocs.inline0.dev/da/docs/configuration) for alle indstillinger.

## Kildehjælpere

### loader

Genværksport af `fumadocs-core/source`-loader til oprettelse af indholdskilder.

```tsx
import { loader } from "onedocs/source";

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

### createSource

Hjælper til oprettelse af en indholdskilde (wrapper omkring loader). Grundlaget URL er som standard `/docs`.

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

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

I 0.1.27 returnerer `createSource` en utypet kilde, så TypeScript rapporterer fejl som `Property 'data' does not exist on type 'unknown'`, når du læser `page.data` ([#4](https://github.com/inline0/onedocs/issues/4)). Brug `loader` som vist ovenfor, indtil det er rettet.

## Metadata

### createMetadata

Genererer Next.js-metadata til dit root-layout.

```tsx
import { createMetadata } from "onedocs/metadata";

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

**Indstillinger:**
- `baseUrl` - Dit websteds grundlæggende URL (valgfrit)
- `additional` - Ekstra `Metadata`-felter, flettet ind til sidst (valgfrit)

**Returnerer:** Next.js `Metadata`-objekt med:
- Titel (`config.title`) og titelskabelon (`%s | Site Name`)
- Beskrivelse
- Favicon fra `config.icon`, hvis angivet
- Når `baseUrl` er angivet: `metadataBase`, OpenGraph-metadata og et Twitter `summary_large_image`-kort

### createDocsPageMetadata

Genererer titel- og beskrivelsesmetadata til en dokumentationsside. Den tager ét objekt med `title` og en valgfri `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,
  });
}
```

Se [Dynamiske OG-billeder](#dynamic-og-images) for et Open Graph-billede pr. side.

## OpenGraph-billeder

### createRootOGImage

Opretter et OG-billede til forsiden: dit logo centreret på en sort baggrund.

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

Opretter et OG-billede til dokumentationssider: logoet øverst til venstre og titlen i hvidt på sort. Skrifttypeargumentet er valgfrit; uden det bruger titlen systemets skrifttype.

```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);
}
```

### Dynamiske OG-billeder

For OG-billeder pr. side skal du servere dem fra en route. Sider peger ikke automatisk på denne route: tilføj den selv til hver sides metadata, for eksempel med `openGraph: { images: "/docs/og/getting-started" }` ved siden af felterne fra `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);
}
```

### Hjælpefunktioner

| Funktion | Beskrivelse |
|----------|-------------|
| `loadPublicFile(path)` | Indlæser en fil fra `public/` som data-URL og buffer; for SVG-filer læser den også attributterne `width` og `height` |
| `loadInterFont(path?)` | Indlæser en skrifttype fra `public/` til OG-billeder, `fonts/Inter-Medium.ttf` som standard |
| `ogImageSize` | Standarddimensioner for OG-billeder `{ width: 1200, height: 630 }` |
| `ogImageContentType` | MIME-type `"image/png"` |

**Påkrævede filer:**
- `public/logo-dark.svg` - Logo til OG-billeder. OG-hjælperne beregner størrelsen ud fra attributterne `width` og `height`, så `<svg>`-tagget skal have begge som almindelige tal.
- `public/fonts/Inter-Medium.ttf` - Skrifttype til titler. Onedocs leverer den ikke.

## LLMs.txt

Generér LLMs.txt-filer til AI-assistenter.

### generateLLMsText

Genererer kortfattet LLMs.txt-indhold. Tager en kilde indpakket med `createLLMsSource` og `{ title, description? }` og returnerer et promise.

```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" },
  });
}
```

Side-URL'er angives, som de kommer fra kilden, for eksempel `/docs/getting-started`, uden domæne.

### generateLLMsFullText

Genererer komplet LLMs.txt med fuldt sideindhold. Tager kun den indpakkede kilde og returnerer et promise.

```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" },
  });
}
```

Sideindhold medtages kun, når Fumadocs MDXs `includeProcessedMarkdown` er slået til; se [SEO og søgning](https://onedocs.inline0.dev/da/docs/seo-search#full-content-version).

### createLLMsSource

Indpakker en Fumadocs-kilde (resultat fra `loader()` eller `createSource()`) i den struktur, som de to funktioner ovenfor læser: hver sides URL, titel, beskrivelse og tekstindlæsere.

## SEO

### generateSitemap

Genererer et sitemap til din dokumentation. Tager ét objekt: `baseUrl`, listen over `pages` (normalt fra `meta.json`) og en valgfri `docsPath` (standard `/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 ?? [],
  });
}
```

Se [SEO og søgning](https://onedocs.inline0.dev/da/docs/seo-search#sitemap) for at se, hvordan poster bliver til URL'er.

### generateRobots

Genererer robots.txt-indhold: tillad alt samt linjer med `Host` og `Sitemap`. `sitemapPath` er som standard `/sitemap.xml`.

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

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

## Forudindstilling for CSS

Importér forudindstillingen CSS i din `globals.css`:

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

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

Stierne `@source` er relative til `src/app/globals.css`.

Forudindstillingen indeholder:
- Tailwind CSS v4 (installér selv `tailwindcss` og `@tailwindcss/postcss`)
- Fumadocs neutralt tema
- Fumadocs-typografiindstillinger
- `--font-sans` sat til den `--font-inter`-variabel, som `FontHead` definerer
- Inter OpenType-funktioner til brødtekst og overskrifter
- Layouttypografi med fuld højde og Onedocs-layoutjusteringer

## MDX-komponenter

Eksporten `mdxComponents` spreder standardkomponenterne Fumadocs UI MDX og tilføjer komponenterne nedenfor:

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

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

**Medfølgende komponenter:**
- Standardkomponenter fra Fumadocs UI: `pre` (kodeblokke), `a`, `img`, `h1` til `h6` (overskrifter med ankerlinks), `table`, `CodeBlockTab`, `CodeBlockTabs`, `CodeBlockTabsList`, `CodeBlockTabsTrigger`, `CalloutContainer`, `CalloutTitle`, `CalloutDescription`
- `Callout` - Infobokse til information, advarsler og fejl
- `Card`, `Cards` - Kortlayouts
- `Tab`, `Tabs` - Indhold med faner
- `Step`, `Steps` - Nummererede trin
- `Accordion`, `Accordions` - Sammenklappelige sektioner
- `File`, `Folder`, `Files` - Filtræer
- `ImageZoom` - Billeder med zoom
- `TypeTable` - Typetabeller til dokumentation

`InstallBlock` og `CodeBlock` er ikke inkluderet; tilføj dem selv som vist i [Komponenter](https://onedocs.inline0.dev/da/docs/components#more-components).

Se [Komponenter](https://onedocs.inline0.dev/da/docs/components) for eksempler på brug.