Komponen

Lihat sebagai Markdown Edit di GitHub Dokumentasi di 7b38e05

Onedocs mendaftarkan sekumpulan komponen Fumadocs UI untuk file MDX Anda, sehingga Anda dapat menggunakannya tanpa mengimpor komponen tersebut.

Menggunakan komponen

Teruskan mdxComponents ke konten MDX Anda:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents berisi default Fumadocs UI (judul dengan tautan anchor, blok kode, tautan, gambar, tabel, Card, Cards, dan Callout) serta Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom, dan TypeTable. Semua contoh di bawah dapat langsung digunakan.

Kotak Info

Sorot informasi penting. type adalah salah satu dari info (default), warn, error, success, atau 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>

Tambahkan judul dengan title:

Mdx

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

Tab

Susun konten dalam tab. Setiap Tab value cocok dengan entri di 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>

Kartu

Tautkan ke halaman lain dengan kisi kartu:

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>

Langkah

Tampilkan langkah bernomor:

Mdx

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

Accordion

Konten yang dapat dilipat untuk FAQ dan detail opsional. Hanya satu item yang terbuka pada satu waktu:

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>

File

Tampilkan pohon file:

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>

Zoom gambar

Gambar yang terbuka dalam ukuran penuh saat diklik. width dan height wajib ada untuk gambar dari public/:

Mdx

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

Tabel Tipe

Dokumentasikan props atau opsi dari 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",
    },
  }}
/>

Komponen lainnya

InstallBlock dan CodeBlock dari onedocs tidak ada di mdxComponents. Untuk menggunakannya di MDX, tambahkan ke objek yang Anda teruskan:

TSX

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

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

Untuk hal lainnya, impor dari Fumadocs UI di file MDX Anda atau tambahkan dengan cara yang sama:

TypeScript

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

Lihat dokumentasi Fumadocs untuk daftar lengkap.