Editor MDX: jak používat panel nástrojů a komponenty

Jak formátovat text pomocí Markdownu – nadpisy, tučné písmo a seznamy

• Nadpis 2. úrovně – vloží ## pro nadpis hlavní sekce.
• Nadpis 3. úrovně – vloží ### pro nadpis podsekce.
• Tučné písmo – vloží **text**; slovo „text“ přepište vlastním.
• Kurzíva – vloží *text*; slovo „text“ přepište vlastním.
• Odrážkový seznam – vloží - pro nečíslovaný výčet.
• Číslovaný seznam – vloží 1. pro postup krok za krokem.
• Vyčistit – nic nevkládá. Projde celý text a smaže nadbytečné prázdné řádky (tři a více po sobě nahradí jedním). Hodí se po vložení textu odjinud nebo po smazání delšího bloku.

Jak vložit odkaz, kód a citaci

Jak vytvořit tabulku

| Sloupec1 | Sloupec2 | Sloupec3 |
| --- | --- | --- |
| buňka | buňka | buňka |
| buňka | buňka | buňka |

Jak vložit obrázek nebo galerii do textu

• src – adresa obrázku, doplní se sama po výběru fotky
• alt – popis obrázku pro čtečky, doplní se z fotky
• caption – popisek zobrazený pod obrázkem (volitelný)
• maxWidth – maximální šířka v px, obrázek se vycentruje – nastavte u úzkých výřezů, jinak se rozmažou

<BlogImage
  src="https://pub-xxx.r2.dev/AB12CD34/photos/foto.webp"
  alt="Detail rezervačního formuláře"
  caption="Rezervační formulář s vybraným termínem"
  maxWidth={500}
/>

• columns – počet sloupců (1 až 4)

<ImageGrid columns={2}>
  <BlogImage src="https://pub-xxx.r2.dev/AB12CD34/photos/foto1.webp" alt="Interiér restaurace" />
  <BlogImage src="https://pub-xxx.r2.dev/AB12CD34/photos/foto2.webp" alt="Terasa restaurace" />
</ImageGrid>

<ImageRow>
  <BlogImage src="https://pub-xxx.r2.dev/AB12CD34/photos/foto1.webp" alt="Předkrm" />
  <BlogImage src="https://pub-xxx.r2.dev/AB12CD34/photos/foto2.webp" alt="Hlavní chod" />
</ImageRow>

• before / after – adresy levého a pravého obrázku
• beforeLabel / afterLabel – popisky nad posuvníkem (výchozí „Before" a „After")

<ImageCompare
  before="https://pub-xxx.r2.dev/AB12CD34/photos/pred.webp"
  after="https://pub-xxx.r2.dev/AB12CD34/photos/po.webp"
  beforeLabel="Před"
  afterLabel="Po"
  alt="Porovnání vzhledu webu"
/>

• columns – počet sloupců (výchozí 3)
• images – seznam obrázků se zdrojem a popisem ke každému

<Gallery
  columns={3}
  images={[
    { src: "https://pub-xxx.r2.dev/AB12CD34/photos/foto1.webp", alt: "Salonek" },
    { src: "https://pub-xxx.r2.dev/AB12CD34/photos/foto2.webp", alt: "Bar" },
    { src: "https://pub-xxx.r2.dev/AB12CD34/photos/foto3.webp", alt: "Terasa" }
  ]}
/>

• imagePosition – strana, na které je obrázek: left (výchozí) nebo right

<TextImage
  src="https://pub-xxx.r2.dev/AB12CD34/photos/foto.webp"
  alt="Ukázka rezervačního widgetu"
  caption="Widget vložený na webu"
  imagePosition="left"
>

Text, který obtéká obrázek zprava.

</TextImage>

Jak vložit graf

• title – nadpis grafu
• xKey / yKey – které jméno z dat patří na vodorovnou a které na svislou osu (výchozí name a value)
• data – seznam dvojic, které se do grafu vykreslí

<LineChart
  title="Návštěvnost webu"
  xKey="month"
  yKey="value"
  data={[
    { month: "Leden", value: 120 },
    { month: "Únor", value: 180 },
    { month: "Březen", value: 210 }
  ]}
/>

<BarChart
  title="Rezervace podle dne v týdnu"
  xKey="day"
  yKey="value"
  data={[
    { day: "Pá", value: 32 },
    { day: "So", value: 45 },
    { day: "Ne", value: 28 }
  ]}
/>

• title – nadpis grafu
• data – seznam výsečí, každá s názvem a hodnotou

<PieChart
  title="Podíl objednávek podle typu"
  data={[
    { name: "Na místě", value: 60 },
    { name: "S sebou", value: 40 }
  ]}
/>

Jaké prvky nabízí nabídka Obsah?

• type – barva podle závažnosti: info (modrá, výchozí), warning (oranžová), error (červená), success (zelená)

<Alert type="warning">Před smazáním kategorie se ujistěte, že v ní nejsou žádné příspěvky.</Alert>

• title – nadpis jednotlivé otázky, zapisuje se na bloku AccordionItem

<Accordion>
<AccordionItem title="Jak dlouho trvá zpracování rezervace?">
Potvrzení přijde e-mailem obvykle do několika minut.
</AccordionItem>
<AccordionItem title="Můžu rezervaci zrušit?">
Ano, odkaz na zrušení najdete přímo v potvrzovacím e-mailu.
</AccordionItem>
</Accordion>

• text – text na tlačítku
• href – cílový odkaz
• variant – vzhled: primary nebo secondary
• showArrow – zobrazí šipku za textem (true / false)

<CTAButton
  text="Otevřít rezervační systém"
  href="https://cms.puretech-dev.cz/app/rezervace"
  variant="primary"
  showArrow={true}
/>

• url – odkaz na YouTube video
• title – volitelný nadpis nad videem

<YoutubeVideo
  url="https://youtu.be/xyz123"
  title="Jak funguje rezervační systém"
/>

Jak upravit rozložení stránky

• columns – počet sloupců (2 a více)
• gap – mezera mezi sloupci: sm, md nebo lg
• align – zarovnání obsahu: left, center nebo right

<Columns columns={2} gap="md" align="left">
<Column>

Levý sloupec s textem.

</Column>
<Column align="center">

Pravý sloupec s textem.

</Column>
</Columns>

• size – velikost: sm (16 px), md (32 px, výchozí), lg (64 px), xl (96 px)

<Spacer size="lg" />

• level – úroveň odsazení: 1 (malé), 2 (střední), 3 (velké)

<Odsazeni level={2}>

Odsazený obsah, například poznámka nebo citace.

</Odsazeni>

Jak textu pomůže AI korektura a obohacení

• Korektura – opraví gramatiku, pravopis, překlepy a interpunkci. Styl, délku ani obsah textu neupravuje a MDX komponenty (<BlogImage>, <Alert> a další) nechává beze změny.
• Obohatit text – přepíše text do zvoleného stylu z nabídky vedle tlačítka: Marketingový, Přátelský, Neformální, Formální, Žertovný, Vyprávěčský, Inspirativní, Odborný nebo Novinářský. Zároveň ho rozvine do plných odstavců a rozepsaných vět – stačí proto napsat jen kostru nebo heslovité poznámky a nechat AI, ať z nich udělá hotový text. MDX komponenty přitom nemění.

• SEO – klíčová slova nebo slovní spojení, která má text obsahovat. AI je zapracuje přirozeně do vět, ne jako mechanický výčet.
• Navrhnout obrázky – doplní do textu na 1 až 3 vhodná místa návrh obrázku nebo fotogalerie i s popisem, co by na nich mělo být. Reálnou fotku pak nahrajete sami přes nabídku Obrázky.

Časté otázky