Komponenter

Vis som Markdown Rediger på GitHub Dokumentation hos 7b38e05

Onedocs registrerer et sæt Fumadocs UI-komponenter til dine MDX-filer, så du kan bruge dem uden at importere dem.

Brug af komponenter

Videregiv mdxComponents til dit MDX-indhold:

TSX

import { DocsPage, mdxComponents } from "onedocs";

// In your page component:
<MDX components={mdxComponents} />

mdxComponents indeholder standardkomponenterne Fumadocs UI (overskrifter med ankerlinks, kodeblokke, links, billeder, tabeller, Card, Cards og Callout) samt Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom og TypeTable. Alle eksempler nedenfor fungerer uden ændringer med den.

Infoboks

Fremhæv vigtige oplysninger. type er en af info (standard), warn, error, success eller idea:

Mdx

<Callout type="info">
  This is an informational callout.
</Callout>

<Callout type="warn">
  This is a warning callout.
</Callout>

<Callout type="error">
  This is an error callout.
</Callout>

Tilføj en overskrift med title:

Mdx

<Callout type="warn" title="Breaking change">
  The `docs` option was removed in version 2.
</Callout>

Faner

Organisér indhold i faner. Hvert Tab value svarer til en post i items:

Mdx

<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
  <Tab value="npm">npm install onedocs</Tab>
  <Tab value="yarn">yarn add onedocs</Tab>
  <Tab value="pnpm">pnpm add onedocs</Tab>
  <Tab value="bun">bun add onedocs</Tab>
</Tabs>

Kort

Link til andre sider med kortgitter:

Mdx

<Cards>
  <Card title="Getting Started" href="/docs/getting-started">
    Learn how to set up Onedocs
  </Card>
  <Card title="Configuration" href="/docs/configuration">
    Configure your documentation
  </Card>
</Cards>

Trin

Vis nummererede trin:

Mdx

<Steps>
  <Step>Install Onedocs</Step>
  <Step>Create configuration</Step>
  <Step>Write documentation</Step>
</Steps>

Harmonika

Sammenklappeligt indhold til ofte stillede spørgsmål og valgfrie detaljer. Kun ét element er åbent ad gangen:

Mdx

<Accordions>
  <Accordion title="What is Onedocs?">
    Layouts, components and SEO helpers for documentation sites built with Next.js and Fumadocs.
  </Accordion>
  <Accordion title="How do I install it?">
    Follow the install step in Getting Started.
  </Accordion>
</Accordions>

Filer

Vis filtræer:

Mdx

<Files>
  <Folder name="content" defaultOpen>
    <Folder name="docs" defaultOpen>
      <File name="index.mdx" />
      <File name="getting-started.mdx" />
    </Folder>
  </Folder>
  <File name="onedocs.config.ts" />
</Files>

Billedzoom

Et billede, der åbnes i fuld størrelse, når der klikkes på det. width og height er påkrævet for billeder fra public/:

Mdx

<ImageZoom src="/screenshot.png" alt="Dashboard" width={1200} height={800} />

Typetabel

Dokumentér egenskaber eller indstillinger for en API:

Mdx

<TypeTable
  type={{
    title: {
      type: "string",
      description: "Site name shown in the navbar.",
    },
    description: {
      type: "string",
      description: "Used for meta tags and the home page.",
      default: "undefined",
    },
  }}
/>

Flere komponenter

InstallBlock og CodeBlock fra onedocs findes ikke i mdxComponents. Hvis du vil bruge dem i MDX, skal du føje dem til det objekt, du videregiver:

TSX

import { CodeBlock, DocsPage, InstallBlock, mdxComponents } from "onedocs";

// In your page component:
<MDX components={{ ...mdxComponents, InstallBlock, CodeBlock }} />

For alt andet kan du importere det fra Fumadocs UI i din MDX-fil eller tilføje det på samme måde:

TypeScript

import { Banner } from "fumadocs-ui/components/banner";
import { InlineTOC } from "fumadocs-ui/components/inline-toc";

Se den fulde liste i Fumadocs-dokumentationen.