API Reference

Komplet reference for alle eksporter fra pakken onedocs.

Indgangspunkter

Layouts

DocsLayout

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

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.

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.

import { DocsBody } from "onedocs";

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

HomePage

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

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 og footeren for at se, hvad konfigurationen styrer.

HomeLayout

Grundlayout til forsiden (bruges internt af HomePage).

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.

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.

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.

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.

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.

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

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:

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

GitHubIcon

GitHub-ikonkomponent (bruges internt i navigationen).

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.

import { CodeBlock } from "onedocs";

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

Konfiguration

defineConfig

Typesikker konfigurationshjælper.

import { defineConfig } from "onedocs/config";

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

OnedocsConfig

TypeScript-type til konfiguration.

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

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

Se Konfiguration for alle indstillinger.

Kildehjælpere

loader

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

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.

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). Brug loader som vist ovenfor, indtil det er rettet.

Metadata

createMetadata

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

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.

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 for et Open Graph-billede pr. side.

OpenGraph-billeder

createRootOGImage

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

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

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

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

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.

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

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

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

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

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

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

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.

Se Komponenter for eksempler på brug.