Kompletní MDX ukázka
Kitchen sink stránka pro testování Markdownu, MDX a Fumadocs komponent.
# Kompletní MDX ukázka
Tento soubor ukazuje běžné prvky Markdownu, MDX a Fumadocs komponent: text, odkazy, seznamy, tabulky, callouty, karty, grid, kroky, taby, accordion, file tree, typové tabulky a code blocky.
<Callout title="Poznámka">
Některé komponenty mohou záviset na tom, jak máš nastavené
`mdx-components.tsx`. Pokud používáš defaultní Fumadocs konfiguraci, část
komponent může být dostupná bez ručních importů.
</Callout>
## Obsah stránky
<InlineTOC items={toc}>Obsah</InlineTOC>
---
## Základní Markdown
Toto je běžný odstavec s **tučným textem**, _kurzívou_, ~~přeškrtnutím~~ a `inline kódem`.
[Oficiální web Fumadocs](https://fumadocs.dev)
[Relativní odkaz na další stránku](./getting-started.mdx)
> Dokumentace by měla být stručná, přehledná a zaměřená na uživatele.
---
## Nadpisy
# H1 Nadpis
## H2 Nadpis
### H3 Nadpis
#### H4 Nadpis
##### H5 Nadpis
###### H6 Nadpis
---
## Seznamy
### Nečíslovaný seznam
- Instalace
- Konfigurace
- Použití
- Základní scénář
- Pokročilý scénář
- Nasazení
### Číslovaný seznam
1. Vytvoř projekt.
2. Přidej Fumadocs.
3. Napiš obsah.
4. Publikuj dokumentaci.
### Task list
- [x] Připravit projekt
- [x] Nastavit MDX
- [ ] Přidat vyhledávání
- [ ] Nasadit na produkci
---
## Callouty
<Callout title="Info">Toto je běžný informační callout.</Callout>
<Callout type="warn" title="Pozor">
Tady můžeš upozornit na riziko, breaking change nebo důležitou poznámku.
</Callout>
<Callout type="error" title="Chyba">
Tento blok se hodí pro časté chyby, omezení nebo nekompatibilní nastavení.
</Callout>
<Callout type="success" title="Hotovo">
Tento krok je úspěšně dokončený.
</Callout>
---
## Karty a grid
<Cards>
<Card
title="Začínáme"
description="Rychlý úvod do projektu a prvního nastavení."
href="/docs/getting-started"
/>
<Card
title="Konfigurace"
description="Nastavení Fumadocs, MDX a zdrojů obsahu."
href="/docs/configuration"
/>
<Card
title="Komponenty"
description="Ukázky calloutů, tabů, kroků, tabulek a dalších prvků."
href="/docs/components"
/>
<Card
title="API reference"
description="Technická dokumentace funkcí, props a typů."
href="/docs/api"
/>
</Cards>
### Stažení souboru
<DownloadCard
title="Vzor žádosti"
fileName="zadost-o-studijni-pobyt.pdf"
fileSize="248 kB"
href="/files/zadost-o-studijni-pobyt.pdf"
/>
<DownloadCard
title="Vzor žádosti"
fileName="zadost-o-studijni-pobyt.xlsx"
fileSize="248 kB"
href="/files/zadost-o-studijni-pobyt.xlsx"
/>
<DownloadCard
title="Vzor žádosti"
fileName="zadost-o-studijni-pobyt.docx"
fileSize="248 kB"
href="/files/zadost-o-studijni-pobyt.docx"
/>
<DownloadCard
title="Vzor žádosti"
fileName="zadost-o-studijni-pobyt.png"
fileSize="248 kB"
href="/files/zadost-o-studijni-pobyt.png"
/>
<DownloadCard
title="Vzor žádosti"
fileName="zadost-o-studijni-pobyt.pdf"
fileSize=""
fileType="is"
href="/files/zadost-o-studijni-pobyt.pdf"
/>
---
## Kroky
<Steps>
<Step title="Nainstaluj závislosti">
### Nainstaluj závislosti
Použij svůj oblíbený package manager.
```bash
npm install fumadocs-ui fumadocs-core
```
</Step>
<Step title="Přidej zdroj obsahu">
### Přidej zdroj obsahu
Vytvoř například soubor `source.config.ts`.
```ts
import { defineDocs } from 'fumadocs-mdx/config';
export const docs = defineDocs({
dir: 'content/docs',
});
```
</Step>
<Step title="Vytvoř MDX stránku">
### Vytvoř MDX stránku
Soubor může být například:
```txt
content/docs/index.mdx
```
</Step>
<Step title="Spusť projekt">
### Spusť projekt
```bash
npm run dev
```
</Step>
</Steps>
## Taby
<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
<Tab value="npm">
```bash
npm install fumadocs-ui fumadocs-core
```
</Tab>
<Tab value="pnpm">
```bash
pnpm add fumadocs-ui fumadocs-core
```
</Tab>
<Tab value="yarn">
```bash
yarn add fumadocs-ui fumadocs-core
```
</Tab>
<Tab value="bun">
```bash
bun add fumadocs-ui fumadocs-core
```
</Tab>
</Tabs>
---
## Accordion
<Accordions>
<Accordion title="Co je Fumadocs?">
Fumadocs je sada nástrojů pro tvorbu dokumentačních webů v React/Next.js prostředí.
</Accordion>
<Accordion title="Můžu používat běžný Markdown?">
Ano. MDX kombinuje Markdown s React komponentami, takže můžeš psát běžný text
a zároveň vkládat interaktivní komponenty.
</Accordion>
<Accordion title="Kdy použít vlastní komponentu?">
Vlastní komponentu použij tehdy, když potřebuješ opakovat složitější blok obsahu, například pricing box, demo, srovnávací kartu nebo vizualizaci.
</Accordion>
</Accordions>
---
## Tabulky
| Funkce | Popis | Stav |
| --------- | ----------------------------------- | ---------- |
| Markdown | Základní syntaxe pro textový obsah | Hotovo |
| MDX | React komponenty uvnitř dokumentace | Hotovo |
| Search | Vyhledávání v dokumentaci | Volitelné |
| Dark mode | Podpora světlého a tmavého režimu | Doporučeno |
### Zarovnání v tabulce
| Položka | Vlevo | Na střed | Vpravo |
| :------ | :---- | :------: | -----: |
| A | text | text | 100 |
| B | text | text | 250 |
| C | text | text | 1 000 |
---
## Code blocky
### JavaScript
```js
export function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Fumadocs"));
```
### TypeScript
```ts
type User = {
id: string;
name: string;
role: "admin" | "editor" | "viewer";
};
export function canEdit(user: User) {
return user.role === "admin" || user.role === "editor";
}
```
### React komponenta
```tsx
type BadgeProps = {
children: React.ReactNode;
};
export function Badge({ children }: BadgeProps) {
return (
<span className="rounded-md border px-2 py-1 text-sm">{children}</span>
);
}
```
### JSON
```json
{
"name": "docs",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build"
}
}
```
### Bash
```bash
npm run dev
```
---
## Diagramy (Mermaid)
Vykreslí se živý diagram v barvách webu. Lze psát jako blok ` ```mermaid ` nebo
vložit komponentu **Diagram (Mermaid)** v editoru.
```mermaid
flowchart TD
A[Podání přihlášky] --> B{Splněny podmínky?}
B -- Ano --> C[Schválení]
B -- Ne --> D[Doplnění údajů]
D --> B
C --> E[Výjezd na pobyt]
```
```mermaid
sequenceDiagram
participant S as Student
participant C as CZS
participant U as Univerzita
S->>C: Odeslání Learning Agreement
C->>U: Potvrzení
U-->>S: Akceptace
```
---
## Inline MDX výraz
Aktuální rok můžeš vypsat přímo v MDX:
{new Date().getFullYear()}
---
## Souborová struktura
<Files>
<Folder name="content" defaultOpen>
<Folder name="docs" defaultOpen>
<File name="index.mdx" />
<File name="getting-started.mdx" />
<File name="components.mdx" />
<File name="api.mdx" />
</Folder>
</Folder>
<Folder name="app">
<Folder name="docs">
<File name="page.tsx" />
<File name="layout.tsx" />
</Folder>
</Folder>
<File name="source.config.ts" />
<File name="mdx-components.tsx" />
<File name="package.json" />
</Files>
---
## Typová tabulka
<TypeTable
type={{
title: {
description: "Nadpis stránky nebo komponenty.",
type: "string",
required: true,
},
description: {
description:
"Krátký popis zobrazovaný v náhledech, metadatech nebo kartách.",
type: "string",
required: false,
},
href: {
description: "Cílová URL adresa.",
type: "string",
required: false,
},
disabled: {
description: "Zakáže interakci s komponentou.",
type: "boolean",
default: "false",
},
}}
/>
---
## Obrázky
Markdown obrázek:
---
## Vlastní HTML / JSX
<div className="rounded-xl border p-4">
<p>
Toto je vlastní HTML/JSX blok uvnitř MDX. Hodí se pro jednoduché layouty,
které nechceš vytvářet jako samostatnou komponentu.
</p>
</div>
---
## Definiční ukázka
### Příklad frontmatteru
```mdx
---
title: Getting Started
description: Rychlý úvod do projektu.
---
# Getting Started
Vítej v dokumentaci.
```
### Příklad `mdx-components.tsx`
```tsx
import defaultMdxComponents from "fumadocs-ui/mdx";
import type { MDXComponents } from "mdx/types";
export function getMDXComponents(components?: MDXComponents): MDXComponents {
return {
...defaultMdxComponents,
...components,
};
}
```
---
## Matematika, pokud ji máš zapnutou
Inline zápis:
`E = mc^2`
Blokový zápis jako text:
```txt
a^2 + b^2 = c^2
```
<Callout type="warn" title="Poznámka k matematice">
Skutečné renderování LaTeXu závisí na tom, jestli máš v MDX pipeline zapnuté
příslušné remark/rehype pluginy.
</Callout>
---
## Escaping znaků
Pokud chceš zobrazit JSX jako text, použij code block:
```tsx
<Card title="Ukázka" href="/docs/example" />
```
Nebo inline zápis: `<Card />`.
---
## Kombinace komponent
<Callout title="Doporučený postup">
Níže je ukázka, jak můžeš spojit karty, kroky a taby do jedné dokumentační
sekce.
</Callout>
<Cards>
<Card title="Instalace" href="#kroky" />
<Card title="Package manager" href="#taby" />
<Card title="Struktura projektu" href="#souborová-struktura" />
</Cards>
---
## FAQ
<Accordions type="single">
<Accordion title="Musím importovat všechny komponenty v každém MDX souboru?">
Nemusíš. Často je lepší je registrovat globálně v `mdx-components.tsx`.
Importy přímo v MDX se ale hodí pro ukázkový nebo izolovaný soubor.
</Accordion>
<Accordion title="Můžu kombinovat Markdown a React?">
Ano. To je hlavní výhoda MDX.
</Accordion>
<Accordion title="Je tento soubor vhodný pro produkci?">
Spíš jako referenční ukázka. V reálné dokumentaci by stránka měla být kratší a zaměřená na konkrétní téma.
</Accordion>
</Accordions>
---
## Závěr
Tento soubor můžeš použít jako testovací stránku pro ověření, že ti fungují:
- frontmatter metadata,
- běžný Markdown,
- MDX výrazy,
- importované React komponenty,
- Fumadocs komponenty,
- code blocky,
- tabulky,
- callouty,
- karty,
- taby,
- kroky,
- accordion,
- file tree,
- typové tabulky.