Projekty

MDX systém na mieru

Michal Maslík - MDX systém na mieru
1
Časť I — Hlavička článku
Navigátor obsahu (TOC)
2
Časť II — Štandardný Markdown
3
Časť III — Vlastné MDX Komponenty
Spoločné princípy — prop type a background
Zvýraznené bloky a upozornenia
Formátovanie textu a oddeľovače
Akademické a študijné karty
Procesy, taxonómia a časové osi
Interaktivita a učiace pomôcky
Tabuľky, dáta a kód
Multimédiá
Špeciálne komponenty pre recenzie
Tlačidlá a navigácia
1. mája 2025
Táto príručka dokumentuje celý MDX systém tohto webu. Každá stránka a každý článok je písaný vo formáte MDX — Markdown s vlastnými React komponentmi. Nemusíš vedieť programovať; stačí poznať správnu syntax — táto príručka ti ju ukáže pre každý komponent s živou ukážkou.
Ako čítať túto príručku
Pre každý komponent nájdeš stručný popis, zoznam vlastností a blok Vzorový kód so syntaxou. Hneď pod ním je živá ukážka — presne tak sa komponent zobrazí v článku.

Časť I — Hlavička článku

Každý .mdx súbor musí začínať frontmatter blokom ohraničeným tromi pomlčkami ---. Tento blok je neviditeľný v texte článku, ale nastavuje jeho metadáta.
PoleTypPovinnéPopis
titlestringNázov článku zobrazený v záhlaví a v zoznamoch
publishedAtstringDátum publikácie vo formáte YYYY-MM-DD
subtitlestringPodnadpis zobrazený pod hlavným názvom
summarystringKrátky popis pre kartičku v zozname a pre SEO
imagesstring[]Zoznam ciest k obrázkom pre karusel záhlavia (sekcia /projekty)
imagesRatiostringPomer strán obrázkov v karuseli, napr. 16/9 (predvolené)
tagsstring[]Zoznam tématických štítkov
tocbooleanVypne bočný navigátor obsahu. Predvolené true
visiblebooleanSkryje celý článok vrátane zoznamu. Predvolene true
listedbooleanSkryje z listu, ale článok je dostupný cez URL. Predvolene true
ordernumberPoradie v zozname — nižšie číslo = vyššie. Predvolene 999
showHeroImagebooleanZobrazí prvý obrázok ako veľký hero banner. Predvolene true
Cesty k obrázkom: vždy píš absolútnu cestu od koreňa priečinka /public, napr. /images/psychologie/uvod.jpg. Nikdy nepoužívaj relatívnu cestu ./obrazok.jpg.
Vzorový kód — štandardný článok
---
title: "Kognitívna psychológia — úvod"
publishedAt: "2026-04-13"
subtitle: "Prehľad základných pojmov a princípov"
summary: "Stručný úvod do kognitívnej psychológie."
tags: ["Psychológia", "Kognitívna veda"]
toc: false
---
Vzorový kód — projektový záznam (/projekty)
---
title: "Ergonomická klávesnica Logitech MX Keys"
publishedAt: "2026-02-20"
subtitle: "Prémiová kompaktná klávesnica"
summary: "Podrobná recenzia: haptický dojem, batéria, kompatibilita."
images:
  - "/images/projekty/klavesnica/01.jpg"
  - "/images/projekty/klavesnica/02.jpg"
imagesRatio: "16/9"
tags: ["Hardware", "Recenzia"]
---
Navigátor sa deaktivuje poľom toc: false. Zobrazí sa ako bočný panel na desktope; na mobile ho nahradí tlačidlo v pravom rohu. Rozpoznáva nadpisy ##, ### a komponent <SectionHeader> (pokiaľ nemá noToc). Nadpis # (H1) je ignorovaný — titul článku sa berie z frontmatter title.
PrvokV TOC?Poznámka
# Nadpis (H1)Ignorovaný — titul sa berie z frontmatter
## Nadpis (H2)Hlavná sekcia, číslovaná
### Nadpis (H3)Podsekcia (odsadená pod H2)
<SectionHeader title="..."/>Ekvivalent H2 — vizuálne štylizovaná sekcia
<SectionHeader title="..." noToc/>Prop noToc vylúči sekciu z TOC

Časť II — Štandardný Markdown

Základná syntax Markdownu

SyntaxVýsledokPoznámka
# Nadpis 1H1 — ignorovanýTitul sa berie z frontmatter; # v MDX sa nezobrazí
## Nadpis 2H2 — hlavná sekciaZárezy odzrkadľujú hierarchiu
### Nadpis 3H3 — podsekcia
tučnýtučný textDva hviezdičky z oboch strán
*kurzíva**kurzíva*Jedna hviezdička
kódinline kódSpätné úvodzovky
[text](url)OdkazExterné URL sa otvoria v novom okne
- položkaNečíslovaný zoznamPomlčka a medzera
- vnorenáVnorený zoznamDve medzery pred pomlčkou, nie tabulátor
1. položkaČíslovaný zoznamČíslo, bodka, medzera
---Vodorovná čiaraTri pomlčky
> citátBlockquotePre citáty s farbou použi <Note>
Vnorené zoznamy: vždy používaj dve medzery pred pomlčkou ( - vnorená), nie tabulátor. Tabulátor môže spôsobiť nesprávne renderovanie.
Nadpisy v akademických textoch: namiesto ## a ### odporúčam <SectionHeader> a <SubSection> — vizuálne bohatší štýl ladíci s akademickými kartami.

Časť III — Vlastné MDX Komponenty

Dôležité pravidlo
Každý JSX tag musí byť správne uzavretý — buď párovým tagom <Komponent>...</Komponent>, alebo samouzatváracím <Komponent />. Nikdy nenechávaj tag otvorený.
Väčšina komponentov zdieľa prop type (farebná téma) a background (intenzita pozadia). Farebné témy sa automaticky prispôsobujú svetlému aj tmavému režimu.
typeFarbaTypické použitie
infoModrá (brand)Informácie, poznámky, všeobecné bloky
warningOranžová / jantárováUpozornenia, rizikové informácie
successZelenáOsvedčené postupy, kľúčové body, zhrnutia
errorČervenáKritické chyby, zakázané postupy
codeModrá (#007ACC)Kódové ukážky a technické bloky
info-2RužováOsobné komentáre, alternatívne poznámky
highlightZlatá / žltáKľúčové pojmy, najdôležitejšie pasáže
neutralSiváVšeobecné informácie bez emočného zafarbenia
backgroundEfekt
tinted (predvolené)Slabší priehľadný tón — jemné farebné podfarbenie
solidSýtejší tón — výraznejšie farebné pozadie
Zvýraznený blok dostupný vo všetkých ôsmich farebných variantách. Má hlavičku, ikonu a telo textu. Variant "code" je ideálny pre vzorové kódy — týmto typom sú obalené aj všetky vzorové kódy v tejto príručke.
  • title — nadpis bloku (povinné)
  • type — farebná téma (predvolené: "info")
  • background"tinted" / "solid" (predvolené: "tinted")
  • children — obsah bloku (povinné)
Blok s type="code" je automaticky horizontálne scrollovateľný, ak obsah (napr. dlhý riadok kódu) preteká šírku bloku. Nie je potrebný žiadny ďalší atribút.
Vzorový kód
<Callout title="Dôležitá poznámka" type="info">
  Tu je obsah bloku. Môže obsahovať **tučný text** alebo `kód`.
</Callout>
type=info — Informácia
Základný informačný blok. Vhodný pre všeobecné poznámky a doplňujúce informácie.
type=warning — Pozor
Upozornenie na potenciálne riziká alebo dôležitú podmienku, ktorú treba splniť.
type=success — Osvedčený postup
Odporúčaný alebo overený postup, ktorý zaručuje správny výsledok.
type=error — Kritická chyba
Zakázaný postup alebo kritická chyba, ktorá spôsobí problémy pri renderovaní.
type=code — Vzorový kód
Blok pre ukážky syntaxe a kódu.
type=info-2 — Alternatívna poznámka
Osobný komentár alebo tematicky odlíšená poznámka — vhodné pre autorský hlas.
type=highlight — Kľúčový obsah
Najdôležitejšia pasáž alebo kľúčový poznaток, ktorý si čitateľ nesmie nechať ujsť.
type=neutral — Neutrálny blok
Všeobecná poznámka bez farebnej sémantiky.
Ľahšia alternatíva k <Callout> bez hlavičky a ikony. Pozadie je vždy priehľadné — zvýrazní sa len ľavý okraj farbou podľa type. Vhodné pre krátke komentáre a okrajové poznámky priamo v toku textu.
  • type — farebná téma (predvolené: "info")
  • children — obsah bloku (povinné)
Vzorový kód
<Note type="warning">
  Cesty k obrázkom nikdy nezadávaj relatívne — vždy absolutne od /public.
</Note>
Doplňujúca informácia alebo editorský komentár v toku textu.
Upozornenie na bežnú chybu alebo dôležitú podmienku.
Osvedčený postup alebo pozitívna poznámka.
Zakázaný postup — spôsobí chybu alebo nesprávny výsledok.
Kľúčový poznaток dostupný priamo v texte — bez rámčeka.
Technická poznámka alebo odkaz na kód v texte.
Osobná poznámka alebo alternatívny pohľad autora.
Neutrálna poznámka bez emočného zafarbenia.
Karta s farebnou hlavičkou a telom textu. Ideálna pre zavedenie nového pojmu alebo definovanie kľúčového konceptu na začiatku sekcie.
  • title — názov definovaného pojmu (povinné)
  • type — farebná téma (predvolené: "info")
  • children — definičný text (povinné)
Vzorový kód
<Definition title="Pracovná pamäť" type="info">
  Krátkodobý systém na dočasné uchovávanie a manipuláciu s informáciami počas kognitívneho spracovania.
</Definition>
Kognitívna záťaž
Množstvo mentálneho úsilia vynaloženého na spracovanie informácií v pracovnej pamäti. Vysoká kognitívna záťaž znižuje efektivitu učenia a bráni prenosu do dlhodobej pamäti.
Prominentnejší ako <Callout> — má väčšiu hlavičku, farebnú lištu navrchu a ikonu záložky. Odporúča sa umiestniť na koniec dlhšej sekcie alebo celého článku ako zhrnutie poznatkov.
  • title — nadpis bloku (predvolené: "Zhrnutie")
  • type — farebná téma (predvolené: "success")
  • children — obsah bloku (povinné)
Vzorový kód
<Summary title="Kľúčové body" type="success">
  - Pracovná pamäť má obmedzenú kapacitu (7 ± 2 prvkov)
  - Aktívne opakovanie posilňuje dlhodobé zapamätanie
  - Rozdelenie pozornosti znižuje retenciu
</Summary>
Kľúčové body
  • Pracovná pamäť má obmedzenú kapacitu — podľa Millera (1956) circa 7 ± 2 prvkov
  • Aktívne opakovanie (retrieval practice) posilňuje dlhodobé zapamätanie
  • Rozdelenie pozornosti medzi viacero stimulov znižuje retenciu informácií
Malý farebný pill priamo v texte — zvýrazňuje odborné pojmy, názvy teórií alebo kľúčové koncepty. Voliteľný prop note zobrazí vysvetlivku v tooltipe po prejdení kurzorom.
  • type — farebná téma (predvolené: "info")
  • note — text tooltipu pri hover (nepovinné)
  • children — text štítku (povinné)
Vzorový kód
Teória <Concept>kognitívnej disonancie</Concept> predpokladá, že nesúlad medzi
<Concept note="Festinger, 1957 — prvý opísal fenomén kognitívnej disonancie.">disonantnými kogníciami</Concept>
motivuje zmenu správania.
Teória kognitívnej disonancie predpokladá, že nesúlad medzi
disonantnými kogníciami
motivuje zmenu správania alebo presvedčení.
Obalí text do interaktívneho tooltipu. Vizuálne diskrétnejší ako <Concept> — text je len podčiarknutý bodkovanou čiarou, bez farebného pozadia. Vhodné pre výkladový slovník priamo v texte.
  • definition — text definície zobrazený v tooltipe (povinné)
  • children — obalený text s podčiarknutím (povinné)
Vzorový kód
Podľa <GlossaryTooltip definition="Behaviorizmus — smer zameriavajúci sa výlučne na pozorovateľné správanie.">behaviorizmu</GlossaryTooltip> možno psychologické javy vysvetliť podmieňovaním.
Podľa behaviorizmuBehaviorizmus — smer v psychológii, ktorý sa zameriava výlučne na pozorovateľné správanie, nie na vnútorné duševné procesy. možno psychologické javy vysvetliť podmieňovaním.
Tri farebné bodky — vizuálne oddelí dve tématické sekcie. Prop type mení farbu bodiek. Nemá žiadny viditeľný text; children sú ignorované. Typicky sa umiestňuje za každou sekciou pred nasledujúcim nadpisom.
  • type — farebná téma (predvolené: "info")
Vzorový kód
<Sub />

<Sub type="highlight" />
Univerzálna karta pre akúkoľvek akademickú tému — autora, psychologickú školu, anatomickú štruktúru, experiment alebo výskumnú metódu. Prop iconType vyberá tematickú ikonu v záhlaví. Je to vylepšená a generická verzia staršieho <AuthorHighlight>.
  • title — hlavný nadpis karty (povinné)
  • subtitle — vedľajší text — rok narodenia/smrti, oblasť, ... (nepovinné)
  • badge — farebný štítok v záhlaví (napr. odbor) (nepovinné)
  • iconType — ikona: "person" "theory" "anatomy" "experiment" "pathology" "method" (predvolené: "theory")
  • type — farebná téma (predvolené: "info")
  • children — telo karty (nepovinné)
Vzorový kód — karta autora
<TopicHighlight title="Jean Piaget" subtitle="1896–1980" badge="Vývinová psychológia" iconType="person" type="info">

  Švajčiarský psychológ, zakladateľ teórie kognitívneho vývinu. Rozdelil vývoj
  do štyroch štádií: senzomotorické, predoperačné, konkrétne operačné a formálne operačné.

</TopicHighlight>
Jean Piaget1896–1980Vývinová psychológia
Švajčiarský psychológ, zakladateľ teórie kognitívneho vývinu. Rozdelil vývoj do štyroch štádií: senzomotorické, predoperačné, konkrétne operačné a formálne operačné.
Vzorový kód — karta anatomickej štruktúry
<TopicHighlight title="Hipokampus" subtitle="Limbický systém" badge="Anatómia" iconType="anatomy" type="success">

  Kľúčová štruktúra pre tvorbu dlhodobých spomienok a priestorovú navigáciu.

</TopicHighlight>
HipokampusLimbický systémAnatómia
Kľúčová štruktúra pre tvorbu dlhodobých spomienok a priestorovú navigáciu. Poškodenie hipokampu vedie k anterográdnej amnézii.
Prehľad hodnôt iconType
iconTypeOdporúčané použitie
personAutori, psychológovia, filozofi, historické osobnosti
theoryTeórie, koncepty, myšlienkové smery (predvolené)
anatomyAnatomické štruktúry, biologické systémy
experimentExperimenty, výskumné štúdie
pathologyPoruchy, patologické stavy, riziká
methodVýskumné metódy, diagnostické nástroje
Starší alias pre <TopicHighlight> s automaticky nastaveným iconType="person". Pre nové články odporúčam používať priamo <TopicHighlight>. Props sú mapované: nametitle, yearssubtitle, directionbadge.
Vzorový kód (starší zápis)
<AuthorHighlight name="Sigmund Freud" years="1856–1939" direction="Psychoanalýza" type="info-2">

  Rakúsky psychiater, zakladateľ psychoanalýzy a teórie nevedomia.

</AuthorHighlight>
Sigmund Freud1856–1939Psychoanalýza
Rakúsky psychiater, zakladateľ psychoanalýzy a teórie nevedomia. Jeho práce o snoch a obranných mechanizmoch zmenili modernú psychiatriu.
Sémantický zoznam pre párovú terminológiu — pojem + definícia. Pre krátke definície použi prop definition="...". Pre dlhší text alebo formátovanie použi obsah vnútri tagu <Term>. <TerminologyList> props:
  • type — farebná téma (predvolené: "info")
<Term> props:
  • name — názov pojmu (povinné)
  • definition — krátka definícia ako text (nepovinné — alternatíva k children)
  • children — dlhší obsah s formátovaním (nepovinné)
Vzorový kód
<TerminologyList type="info">
  <Term name="Kódovanie" definition="Premena informácie do pamäťovej stopy." />
  <Term name="Konsolidácia" definition="Stabilizácia pamäťovej stopy — prebieha najmä počas spánku." />
  <Term name="Vybavenie">
    Reaktivácia uloženej informácie. Rozlišujeme **rozoznávanie** (recognition)
    a **voľnú reprodukciu** (free recall).
  </Term>
</TerminologyList>
Kódovanie
Premena senzorických vstupov do pamäťovej stopy.
Konsolidácia
Stabilizácia pamäťovej stopy po počiatočnom kódovaní — prebieha najmä počas spánku.
Vybavenie
Reaktivácia uloženej informácie. Rozlišujeme rozoznávanie (recognition) a voľnú reprodukciu (free recall).
Blok pre akronymy a pamäťové pomôcky. Zobrazí veľké, letter-spaced slovo a popis v záhlaví s farebnou akcentom. Pod záhlavím sa zobrazí obsah — zvyčajne zoznam mapujúci každé písmeno na pojem.
  • word — akronym alebo mnemotechnická skratka (povinné)
  • title — popis skratky (povinné)
  • type — farebná téma (predvolené: "info")
  • children — obsah (zvyčajne zoznam) (nepovinné)
Vzorový kód
<Mnemonic word="OCEAN" title="Big Five model osobnosti" type="info">
- **O**penness to experience — otvorenosť skúsenostiam
- **C**onscientiousness — svedomitosť
- **E**xtraversion — extraverzia
- **A**greeableness — prívetivosť
- **N**euroticism — neurotizmus
</Mnemonic>
OCEANBig Five model osobnosti
  • Openness to experience — otvorenosť skúsenostiam
  • Conscientiousness — svedomitosť
  • Extraversion — extraverzia
  • Agreeableness — prívetivosť
  • Neuroticism — neurotizmus
Existuje v dvoch režimoch. Citát (prop quote) zobrazí štylizovaný blockquote s atribúciou. Bibliografický záznam (bez quote) zobrazí kompaktnú citačnú linku pre koniec článku.
  • quote — text citátu alebo parafrázy (ak prítomný, zobrazí sa citát blok)
  • direct{true} = priamy citát (kurzíva + „Citát"), {false} = parafrázovanie (predvolené: false)
  • author — autor
  • page — číslo stránky
  • citationIndex — číslo citácie [N]
  • year — rok vydania (bibliografický záznam)
  • book — názov knihy (bibliografický záznam)
  • edition — vydanie (bibliografický záznam)
  • publisher — vydavateľ (bibliografický záznam)
  • isbn — ISBN (bibliografický záznam)
  • type — farebná téma (predvolené: "info")
Vzorový kód — priamy citát
<Reference
  author="Miller, G. A."
  page="81"
  citationIndex="1"
  direct={true}
  quote="The magical number seven, plus or minus two: some limits on our capacity for processing information."
/>
The magical number seven, plus or minus two: some limits on our capacity for processing information.
ParafrázaMiller, G. A. • s. 81[1]
Vzorový kód — bibliografický záznam (koniec článku)
<Reference
  author="Miller, G. A."
  year="1956"
  book="Psychological Review"
  publisher="APA"
  page="81–97"
  citationIndex="1"
/>

Miller, G. A.1956Psychological ReviewAPAs. 81–97[1]

Vertikálna číslovaná sekvencia krokov s prepojovaciou líniou. <StepList> nastavuje tému pre všetky kroky; <Step> je jedna položka s nadpisom a voliteľným popisom. <StepList> props:
  • type — farebná téma (predvolené: "info")
<Step> props:
  • title — nadpis kroku (povinné)
  • children — popis, kód alebo iný obsah (nepovinné)
Vzorový kód
<StepList type="info-2">
  <Step title="Vytvor súbor">Pridaj nový .mdx súbor do správneho priečinka.</Step>
  <Step title="Doplň frontmatter">Vyplň povinné polia: title a publishedAt.</Step>
  <Step title="Napíš obsah">Použi Markdown a vlastné MDX komponenty.</Step>
</StepList>
Vytvor súbor
Pridaj nový .mdx súbor do správneho priečinka sekcie.
Doplň frontmatter
Vyplň povinné polia: title a publishedAt. Ostatné sú voliteľné.
Napíš obsah
Použi štandardný Markdown a vlastné MDX komponenty podľa tejto príručky.
Skontroluj výsledok
Otvor stránku v prehliadači a skontroluj zobrazenie.
Vizualizuje chronologické udalosti ako vertikálny zoznam s farebnými bodkami a prepojovaciou líniou. Prop items sa zadáva ako JSON reťazec — vonkajšie úvodzovky jednoduché, vnútorné dvojité.
  • type — farebná téma (predvolené: "info")
  • items — JSON pole objektov {"date": "...", "text": "..."} (povinné)
Vzorový kód
<Timeline type="info"
  items='[
    {"date": "1879", "text": "Wundt zakladá prvé psychologické laboratórium v Lipsku"},
    {"date": "1900", "text": "Freud publikuje Výklad snov — vznik psychoanalýzy"},
    {"date": "1913", "text": "Watson vyhlasuje behaviorizmus za vedeckú psychológiu"},
    {"date": "1954", "text": "Maslow publikuje Motiváciu a osobnosť"}
  ]'
/>
1879Wundt zakladá prvé psychologické laboratórium v Lipsku
1900Freud publikuje Výklad snov — vznik psychoanalýzy
1913Watson vyhlasuje behaviorizmus za vedeckú psychológiu
1954Maslow publikuje Motiváciu a osobnosť — humanistická psychológia
Premení štandardný vnorený Markdown zoznam na vizuálny strom s L-tvarovanými spojovacími čiarami. Ideálne pre taxonómie, mindmapy alebo hierarchické klasifikácie. Obsah sa píše ako bežný Markdown zoznam vnútri tagu — odsazenie vytvárae hierarchiu.
  • type — farebná téma (predvolené: "info")
  • children — vnorený Markdown zoznam (povinné)
Vzorový kód
<TreeList type="success">
- Pamäť
  - Senzorická
    - Ikonická (zraková)
    - Echoická (sluchová)
  - Krátkodobá
    - Pracovná pamäť
  - Dlhodobá
    - Explicitná
      - Epizodická
      - Sémantická
    - Implicitná
</TreeList>
  • Pamäť
    • Senzorická
      • Ikonická (zraková)
      • Echoická (sluchová)
    • Krátkodobá
      • Pracovná pamäť
    • Dlhodobá
      • Explicitná
        • Epizodická
        • Sémantická
      • Implicitná (procedurálna)
Natívny <details> element — otázka je vždy viditeľná, odpoveď sa odkryje po kliknutí. Ideálne pre skúškové otázky a aktívne opakovanie (retrieval practice).
  • question — text otázky (povinné)
  • type — farebná téma (predvolené: "info")
  • children — text odpovede (nepovinné)
Vzorový kód
<QuizCard question="Čo je pracovná pamäť a akú má kapacitu?" type="highlight">
  Pracovná pamäť je systém na dočasné uchovávanie a manipuláciu s informáciami.
  Podľa Millera (1956) má kapacitu 7 ± 2 prvkov. Baddeley neskôr rozšíril model
  o centrálnu výkonnú funkciu, fonologickú slučku a vizuálno-priestorovú notesnicu.
</QuizCard>
Čo je pracovná pamäť a akú má kapacitu?
Pracovná pamäť je systém na dočasné uchovávanie a manipuláciu s informáciami počas myslenia. Podľa Millera (1956) má kapacitu 7 ± 2 prvkov. Baddeley neskôr rozšíril model o centrálnu výkonnú funkciu, fonologickú slučku a vizuálno-priestorovú notesnicu.
Interaktívny záložkový panel — každá záložka zobrazí iný obsah. <Tabs> je obal, <Tab> je jedna záložka. Stav aktívnej záložky je klientsky (JavaScript). <Tabs> props:
  • type — farebná téma (predvolené: "info")
<Tab> props:
  • title — text záložky (povinné)
  • children — obsah záložky (nepovinné)
Vzorový kód
<Tabs type="info">
  <Tab title="Prehľad">
    Stručný úvod do témy.
  </Tab>
  <Tab title="Detaily">
    Podrobnejší popis a príklady.
  </Tab>
</Tabs>
Krátkodobá pamäť (short-term memory) uchováva informácie po dobu niekoľkých sekúnd až minút. Kapacita je obmedzená — Miller (1956) hovorí o 7 ± 2 prvkoch.
Obsah zobrazený až po kliknutí na nadpis. Vhodné pre FAQ, doplňujúci obsah alebo skúšateľné otázky, ktoré nechceš hneď odhaľovať. <AccordionGroup> props:
  • type — farebná téma (predvolené: "info")
<AccordionItem> props:
  • title — viditeľný nadpis položky (povinné)
  • children — obsah po rozbalení (povinné)
Vzorový kód
<AccordionGroup type="info">
  <AccordionItem title="Čo je retrográdna amnézia?">
    Strata spomienok na udalosti **pred** poškodením mozgu.
  </AccordionItem>
  <AccordionItem title="Čo je anterográdna amnézia?">
    Neschopnosť tvoriť **nové** spomienky po poškodení mozgu.
  </AccordionItem>
</AccordionGroup>
Čo je retrográdna amnézia?
Strata spomienok na udalosti pred poškodením mozgu. Pacient si nepamätá minulosť, ale nové spomienky tvorí normálne.
Čo je anterográdna amnézia?
Neschopnosť tvoriť nové spomienky po poškodení mozgu. Typicky spôsobená poranením hipokampu (prípad H. M.).
Aký je rozdiel medzi explicitnou a implicitnou pamäťou?
Explicitná (deklaratívna) — vedomé, zámerné vybavenie faktov a udalostí. Implicitná (procedurálna) — nevedomá pamäť zručností a návykov.
Dvojstĺpcový blok pre kontrastívne porovnanie dvoch pozícií, teórií alebo prístupov. Stĺpce sú oddelené centrovým odznakom „vs". leftContent a rightContent sa zadávajú ako JSON reťazce — vonkajšie úvodzovky jednoduché, vnútorné dvojité.
  • type — farebná téma (predvolené: "info")
  • leftTitle — nadpis ľavého stĺpca (povinné)
  • rightTitle — nadpis pravého stĺpca (povinné)
  • leftContent — JSON pole bodiek ľavého stĺpca (nepovinné)
  • rightContent — JSON pole bodiek pravého stĺpca (nepovinné)
Vzorový kód
<Versus type="highlight"
  leftTitle="Nativizmus (Descartes)"
  rightTitle="Empirizmus (Locke)"
  leftContent='["Vrodené idey a poznanie", "Rozum ako zdroj poznania", "Myseľ nie je prázdna pri narodení"]'
  rightContent='["Tabula rasa — myseľ je prázdna", "Poznanie zo zmyslovej skúsenosti", "Neexistujú vrodené idey"]'
/>
Nativizmus (Descartes)
  • Vrodené idey a poznanie
  • Rozum ako hlavný zdroj poznania
  • Myseľ nie je prázdna pri narodení
Empirizmus (Locke)
  • Tabula rasa — myseľ je prázdna
  • Poznanie pochádza zo zmyslovej skúsenosti
  • Neexistujú vrodené idey
Vlastná dátová tabuľka s plne prispôsobiteľnou farebnou témou. Vonkajšie úvodzovky props musia byť jednoduché ', vnútorné JSON musí byť dvojité ". Bunky s hodnotami true/false, /× apod. sa automaticky zobrazujú ako farebné ikony.
  • headers — JSON pole reťazcov záhlaví (nepovinné)
  • rows — JSON pole polí hodnôt riadkov (povinné)
  • type — farebná téma (predvolené: "info")
  • caption — pruhový popis nad záhlavím (nepovinné)
  • background"tinted" (predvolené) / "solid" (nepovinné)
  • colored{true} (predvolené, farebné riadky) / {false} (sivé odtiene) (nepovinné)
Vzorový kód
<Table
  type="success"
  caption="Prehľad štádií podľa Piageta"
  headers='["Štádium", "Vek", "Kľúčová schopnosť"]'
  rows='[
    ["Senzomotorické", "0–2 roky", "Trvalosť objektu"],
    ["Predoperačné", "2–7 rokov", "Symbolické myslenie"],
    ["Konkrétne operačné", "7–11 rokov", "Konzervačný princíp"],
    ["Formálne operačné", "12+ rokov", "Abstraktné myslenie"]
  ]'
/>
Prehľad štádií kognitívneho vývinu podľa Piageta
ŠtádiumVekKľúčová schopnosť
Senzomotorické0–2 rokyTrvalosť objektu, základná príčinnosť
Predoperačné2–7 rokovSymbolické myslenie, egocentrizmus
Konkrétne operačné7–11 rokovKonzervačný princíp, logické operácie
Formálne operačné12+ rokovAbstraktné myslenie, hypoteticko-deduktívne uvažovanie
Vonkajšie úvodzovky props (rows='...') musia byť jednoduché. Vnútri JSON musia byť dvojité. Zámiena spôsobí chybu pri parsovaní.
Bunky s hodnotami ako true, false, áno, nie, , × sa automaticky premenia na farebné ikony:
FunkciaDostupné?
Tmavý režim
Export PDF
RSS feed
Komentáre
Blok so zvýraznením syntaxe a tlačidlom na skopírovanie. Pre viacero záložiek pridaj ďalšie objekty do poľa codeInstances. Vhodné pre technické články. Podporované jazyky: "javascript" "jsx" "typescript" "tsx" "css" "yaml" "bash"
  • codeInstances — JSON pole objektov {"code": "...", "language": "...", "label": "..."} (povinné)
  • copyButton — tlačidlo kopírovania: {true} (predvolené) / {false} (nepovinné)
  • compact — bez záhlavia: {false} (predvolené) / {true} (nepovinné)
Vzorový kód — dve záložky
<CodeBlock
  codeInstances='[
    {"code": "npm install next-mdx-remote gray-matter", "language": "bash", "label": "npm"},
    {"code": "yarn add next-mdx-remote gray-matter", "language": "bash", "label": "yarn"}
  ]'
/>
npm install next-mdx-remote gray-matter
Komponent pre vkladanie jedného obrázka s plnou kontrolou nad pomerom strán. Na rozdiel od štandardnej Markdown syntaxe umožňuje zmeniť pomer strán a pridať gradientové pozadie pre obrázky s priehľadným podkladom.
  • src — cesta k obrázku (povinné)
  • alt — textový popis (povinné — prístupnosť)
  • aspectRatio — pomer strán: "16 / 9" (predvolené), "4 / 3", "1 / 1", "3 / 2" (nepovinné)
  • background={true} — tmavé gradientové pozadie pre obrázky s transparentným podkladom (nepovinné)
  • nozoom={true} — zakáže zväčšenie po kliknutí (nepovinné)
Vzorový kód
<ImageSection
  src="/images/projekty/mdx-na-miru/mdx-na-miru.jpg"
  alt="Ukážka MDX systému na mieru"
  aspectRatio="16 / 9"
/>
Ukážka MDX systému na mieru
Vzorový kód — s tmavým pozadím (pre logá a ikony s priehľadným pozadím)
<ImageSection
  src="/images/ikona.png"
  alt="Logo aplikácie"
  aspectRatio="1 / 1"
  background={true}
  nozoom={true}
/>
Karusel pre viacero obrázkov s podporou swipe na mobile. Obrázky sa zadávajú ako JSON reťazec — vonkajšie úvodzovky jednoduché, vnútorné dvojité.
  • images — JSON pole objektov {"src": "...", "alt": "..."} (povinné)
  • height — výška karuselu: napr. "50vh" alebo "400px" (nepovinné, predvolené: "60vh")
Vzorový kód
<ImagesSection
  images='[
    {"src": "/images/projekty/bakalarska-prace/cover.jpg", "alt": "Titulná strana"},
    {"src": "/images/projekty/mdx-na-miru/mdx-na-miru.jpg", "alt": "MDX systém"}
  ]'
  height="50vh"
/>
MDX systém na mieru
Tieto komponenty sú navrhnuté primárne pre recenzie hardvéru a produktov. <SpecGrid> a <SpecItem> sú však univerzálne — výborne sa hodia aj pre filozofické profily, anatomické prehľady alebo akékoľvek kľúč-hodnota dáta.
Responzívna mriežka pre prehľadné zobrazenie parametrov. <SpecGrid> je kontajner s voliteľnou témou; <SpecItem> je jedna karta. Každý <SpecItem> môže mať vlastný type, ktorý prepisuje tému griду. <SpecGrid> props:
  • type — predvolená farebná téma pre všetky <SpecItem> bez vlastného type (nepovinné)
<SpecItem> props:
  • label — popis parametra (povinné)
  • value — hodnota parametra (povinné)
  • type — farebná téma (predvolené: "neutral")
Vzorový kód
<SpecGrid type="info">
  <SpecItem label="Procesor" value="AMD Ryzen 9 7950X" />
  <SpecItem label="RAM" value="64 GB DDR5-4800" />
  <SpecItem label="GPU" value="RTX 4090 24 GB" type="success" />
  <SpecItem label="Cena" value="≈ 4 500 €" type="warning" />
</SpecGrid>
ProcesorAMD Ryzen 9 7950X
RAM64 GB DDR5-4800
GPURTX 4090 24 GB
Úložisko2 TB NVMe Gen4
Chladenie240mm All-in-One
Cena≈ 4 500 €
Dvojstĺpcový blok pre súhrn kladov a záporov. Variant "hardware" (predvolené) používa zelené/červené farby so symbolmi zaškrtnutia/x. Variant "theory" používa modré/oranžové farby s ikonami žiarovky/trojuholníka — vhodné pre akademické texty (prínosy/kritika teórie).
  • pros — JSON pole textu kladov (nepovinné)
  • cons — JSON pole textu záporov (nepovinné)
  • prosLabel — nadpis kladov (predvolené: "Pros")
  • consLabel — nadpis záporov (predvolené: "Cons")
  • variant"hardware" (predvolené) / "theory" (nepovinné)
  • background"tinted" (predvolené) / "solid" (nepovinné)
Vzorový kód — recenzia hardvéru
<ProsCons
  pros='["Excelentný výkon", "Tichý chod", "5-ročná záruka"]'
  cons='["Vysoká cena", "Veľké rozmery", "Vyžaduje 850W PSU"]'
  prosLabel="Klady"
  consLabel="Zápory"
/>
Klady
  • Excelentný výkon v renderovaní
  • Tichý chod aj pri záťaži
  • 5-ročná záruka výrobcu
Zápory
  • Vysoká cena (700 €)
  • Veľké rozmery — nie do každej skrinky
  • Vyžaduje 850W napájací zdroj
Vzorový kód — variant=theory (prínosy / kritika teórie)
<ProsCons
  variant="theory"
  prosLabel="Prínosy"
  consLabel="Kritika"
  pros='["Priekopnícky dôraz na nevedomie", "Klinická relevanсia"]'
  cons='["Nedostatočná vedecká falsifikovateľnosť", "Androcentrizmus"]'
/>
Prínosy Freudovej teórie
  • Priekopnícky dôraz na nevedomé procesy
  • Klinická relevancia pre terapiu
  • Inšpirácia pre neskoršiu psychodynamickú terapiu
Kritika
  • Nedostatočná vedecká falsifikovateľnosť
  • Androcentrizmus a kultúrna zaujatosť
  • Prehnaný dôraz na sexualitu
Vizualizuje hodnoty ako horizontálne pruhy. Zvýraznený pruh ("highlight": true) sa zobrazí brand farbou — použi ho pre recenzovaný produkt. Prop suffix pridá jednotky za hodnotu.
  • title — nadpis grafu (nepovinné)
  • suffix — text za hodnotou, napr. " fps" alebo " bodov" (nepovinné)
  • data — JSON pole objektov {"label": "...", "value": N, "highlight": true/false} (povinné)
Vzorový kód
<BarChart
  title="Výkon v hrách pri 1440p Ultra"
  suffix=" fps"
  data='[
    {"label": "RTX 4090", "value": 142, "highlight": true},
    {"label": "RTX 4080", "value": 117},
    {"label": "RX 7900 XTX", "value": 109},
    {"label": "RTX 4070 Ti", "value": 88}
  ]'
/>
Výkon v hrách pri 1440p Ultra
RTX 4090
142 fps
RTX 4080
117 fps
RX 7900 XTX
109 fps
RTX 4070 Ti
88 fps
Progress bary pre hodnotenie jednotlivých aspektov. Škála je predvolene 0–10; môžeš ju zmeniť cez "max" v každej položke. Každá položka má "label" a "score".
  • title — nadpis bloku (nepovinné)
  • ratings — JSON pole objektov {"label": "...", "score": N, "max": N} (povinné)
Vzorový kód
<RatingBars
  title="Hodnotenie GPU"
  ratings='[
    {"label": "Herný výkon", "score": 9.5},
    {"label": "Renderovanie", "score": 9.8},
    {"label": "Hlučnosť", "score": 8.2},
    {"label": "Spotreba", "score": 5.5},
    {"label": "Cena/výkon", "score": 6.5}
  ]'
/>
Hodnotenie GPU
Herný výkon9.5/10
Výkon v renderovaní9.8/10
Hlučnosť8.2/10
Spotreba energie5.5/10
Cena/výkon6.5/10
SVG donut graf pre zobrazenie finálneho skóre recenzie. Props score a max sa bezpečne parsujú — možno zadať ako číslo ({8.8}) alebo reťazec ("8.8").
  • score — dosiahnuté skóre (povinné)
  • max — maximálne skóre (predvolené: 10)
  • label — popis pod kruhom (nepovinné)
Vzorový kód
<ScoreRing score={8.8} max={10} label="Celkové hodnotenie" />
8.8/10
Celkové hodnotenie
Vizuálne tlačidlo fungujúce ako odkaz — interný aj externý. Vhodné pre výzvu k akcii (CTA) v texte článku.
  • label — text tlačidla (povinné)
  • href — cieľová URL — interná (/sekcia/clanok) alebo externá (https://...) (povinné)
  • variant"primary" (predvolené) / "secondary" / "tertiary" / "danger" (nepovinné)
  • size"s" / "m" (predvolené) / "l" (nepovinné)
  • prefixIcon — ikona pred textom, napr. "openLink" (nepovinné)
  • suffixIcon — ikona za textom, napr. "arrowRight" (nepovinné)
Vzorový kód
<Button label="Zobraziť projekt" href="/sk/projekty/bakalarska-prace" variant="secondary" suffixIcon="arrowRight" />
<Button label="Externý odkaz" href="https://nextjs.org" variant="tertiary" prefixIcon="openLink" />
Zobraziť projekt
Zvýraznený odkaz na externú stránku, dokumentáciu alebo zdroj. Vhodné na koniec sekcie alebo celého článku.
  • href — URL zdroja (povinné)
  • title — popis odkazu (povinné)
  • type — farebná téma (predvolené: "info")
Vzorový kód
<ResourceLink href="https://www.markdownguide.org" title="Markdown Guide — kompletná referencia syntaxe" />
Markdown Guide — kompletná referencia syntaxe
Zhrnutie — všetky dostupné komponenty
Celkovo je k dispozícii 30+ vlastných komponentov v 9 kategóriách:
  • Zvýraznené bloky: <Callout>, <Note>, <Definition>, <Summary>
  • Formátovanie textu: <Concept>, <GlossaryTooltip>, <Sub>
  • Akad. karty: <TopicHighlight>, <AuthorHighlight>, <TerminologyList> + <Term>, <Mnemonic>, <Reference>
  • Procesy a osi: <StepList> + <Step>, <Timeline>, <TreeList>
  • Interaktivita: <QuizCard>, <Tabs> + <Tab>, <AccordionGroup> + <AccordionItem>, <Versus>
  • Dáta a kód: <Table>, <CodeBlock>
  • Médiá: <ImageSection>, <ImagesSection>
  • Recenzie: <SpecGrid> + <SpecItem>, <ProsCons>, <BarChart>, <RatingBars>, <ScoreRing>
  • Navigácia: <Button>, <ResourceLink>