1. května 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.
| Pole | Typ | Povinné | Popis |
|---|---|---|---|
| title | string | Názov článku zobrazený v záhlaví a v zoznamoch | |
| publishedAt | string | Dátum publikácie vo formáte YYYY-MM-DD | |
| subtitle | string | Podnadpis zobrazený pod hlavným názvom | |
| summary | string | Krátky popis pre kartičku v zozname a pre SEO | |
| images | string[] | Zoznam ciest k obrázkom pre karusel záhlavia (sekcia /projekty) | |
| imagesRatio | string | Pomer strán obrázkov v karuseli, napr. 16/9 (predvolené) | |
| tags | string[] | Zoznam tématických štítkov | |
| toc | boolean | Vypne bočný navigátor obsahu. Predvolené true | |
| visible | boolean | Skryje celý článok vrátane zoznamu. Predvolene true | |
| listed | boolean | Skryje z listu, ale článok je dostupný cez URL. Predvolene true | |
| order | number | Poradie v zozname — nižšie číslo = vyššie. Predvolene 999 | |
| showHeroImage | boolean | Zobrazí 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 obsahu (TOC)
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.
| Prvok | V 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
| Syntax | Výsledok | Poznámka |
|---|---|---|
| # Nadpis 1 | H1 — ignorovaný | Titul sa berie z frontmatter; # v MDX sa nezobrazí |
| ## Nadpis 2 | H2 — hlavná sekcia | Zárezy odzrkadľujú hierarchiu |
| ### Nadpis 3 | H3 — podsekcia | |
| tučný | tučný text | Dva hviezdičky z oboch strán |
| *kurzíva* | *kurzíva* | Jedna hviezdička |
kód | inline kód | Spätné úvodzovky |
| [text](url) | Odkaz | Externé URL sa otvoria v novom okne |
| - položka | Nečíslovaný zoznam | Pomlčka a medzera |
| - vnorená | Vnorený zoznam | Dve medzery pred pomlčkou, nie tabulátor |
| 1. položka | Číslovaný zoznam | Číslo, bodka, medzera |
| --- | Vodorovná čiara | Tri pomlčky |
| > citát | Blockquote | Pre 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ý.Spoločné princípy — prop type a background
type (farebná téma) a background (intenzita pozadia). Farebné témy sa automaticky prispôsobujú svetlému aj tmavému režimu.
| type | Farba | Typické použitie |
|---|---|---|
| info | Modrá (brand) | Informácie, poznámky, všeobecné bloky |
| warning | Oranžová / jantárová | Upozornenia, rizikové informácie |
| success | Zelená | Osvedčené postupy, kľúčové body, zhrnutia |
| error | Červená | Kritické chyby, zakázané postupy |
| code | Modrá (#007ACC) | Kódové ukážky a technické bloky |
| info-2 | Ružová | Osobné komentáre, alternatívne poznámky |
| highlight | Zlatá / žltá | Kľúčové pojmy, najdôležitejšie pasáže |
| neutral | Sivá | Všeobecné informácie bez emočného zafarbenia |
| background | Efekt |
|---|---|
| tinted (predvolené) | Slabší priehľadný tón — jemné farebné podfarbenie |
| solid | Sýtejší tón — výraznejšie farebné pozadie |
Zvýraznené bloky a upozornenia
<Callout> — Informačný blok s ikonou
"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.
<Note> — Odsadený blok s farebným okrajom
<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.
<Definition> — Karta definície pojmu
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>
<Summary> — Záverečný blok kľúčových bodov
<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>
Formátovanie textu a oddeľovače
<Concept> — Inline pill-štítok odborného pojmu
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.
disonantnými kogníciami
motivuje zmenu správania alebo presvedčení.
<GlossaryTooltip> — Tooltip s vysvetlením pojmu
<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.
<Sub> — Dekoratívny oddeľovač sekcií
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" />
Akademické a študijné karty
<TopicHighlight> — Karta akademickej témy
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>
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>
Prehľad hodnôt iconType
| iconType | Odporúčané použitie |
|---|---|
| person | Autori, psychológovia, filozofi, historické osobnosti |
| theory | Teórie, koncepty, myšlienkové smery (predvolené) |
| anatomy | Anatomické štruktúry, biologické systémy |
| experiment | Experimenty, výskumné štúdie |
| pathology | Poruchy, patologické stavy, riziká |
| method | Výskumné metódy, diagnostické nástroje |
<AuthorHighlight> — Karta autora (spätne kompatibilný alias)
<TopicHighlight> s automaticky nastaveným iconType="person". Pre nové články odporúčam používať priamo <TopicHighlight>. Props sú mapované: name → title, years → subtitle, direction → badge.
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>
<TerminologyList> + <Term> — Slovník pojmov
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).
<Mnemonic> — Skratka a mnemotechnická pomôcka
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>
<Reference> — Akademická citácia
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— autorpage— číslo stránkycitationIndex— čí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.
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.•1956•Psychological Review•APA•s. 81–97[1]
Procesy, taxonómia a časové osi
<StepList> + <Step> — Očíslované kroky
<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.
<Timeline> — Vertikálna časová os
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
<TreeList> — Vizuálny strom / taxonómia
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)
- Explicitná
- Senzorická
Interaktivita a učiace pomôcky
<QuizCard> — Kartička pre aktívne opakovanie
<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>
<Tabs> + <Tab> — Záložkový 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>
<AccordionGroup> + <AccordionItem> — Skladacie sekcie
<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.
<Versus> — Porovnanie dvoch konceptov
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"]'
/>
Tabuľky, dáta a kód
<Table> — Dátová tabuľka s farebnou témou
', 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ádium | Vek | Kľúčová schopnosť |
|---|---|---|
| Senzomotorické | 0–2 roky | Trvalosť objektu, základná príčinnosť |
| Predoperačné | 2–7 rokov | Symbolické myslenie, egocentrizmus |
| Konkrétne operačné | 7–11 rokov | Konzervačný princíp, logické operácie |
| Formálne operačné | 12+ rokov | Abstraktné myslenie, hypoteticko-deduktívne uvažovanie |
Vonkajšie úvodzovky props (
Bunky s hodnotami ako rows='...') musia byť jednoduché. Vnútri JSON musia byť dvojité. Zámiena spôsobí chybu pri parsovaní.true, false, áno, nie, ✓, × sa automaticky premenia na farebné ikony:
| Funkcia | Dostupné? |
|---|---|
| Tmavý režim | |
| Export PDF | |
| RSS feed | |
| Komentáre |
<CodeBlock> — Blok kódu so zvýraznením syntaxe
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-matterMultimédiá
<ImageSection> — Jeden obrázok s nastaviteľným vzhľadom
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"
/>
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}
/>
<ImagesSection> — Interaktívny karusel
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"
/>
Špeciálne komponenty pre recenzie
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.<SpecGrid> + <SpecItem> — Technické parametre
<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éhotype(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 €
<ProsCons> — Klady a zápory
"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
<BarChart> — Horizontálny porovnávací graf
"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
RTX 4080
RX 7900 XTX
RTX 4070 Ti
<RatingBars> — Hodnotenie podľa kategórií
"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
<ScoreRing> — Celkové hodnotenie (SVG kruh)
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
Tlačidlá a navigácia
<Button> — Tlačidlo / odkazový prvok
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
<ResourceLink> — Vizuálny odkaz na externý zdroj
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" />
