Ilustračný obrázok kreatívneho procesu písania

Vitajte pri ultimátnom manuáli pre môj blogový systém!

Tento projekt je výsledkom snahy o vytvorenie nástroja, ktorý je pre mňa ako autora maximálne jednoduchý, no zároveň produkuje profesionálne a robustné výsledky. Dôraz na detail a prevencia chýb boli pri jeho návrhu kľúčové.

V tomto článku vás prevediem všetkými funkciami, ktoré som do systému implementoval, často s pomocou AI. Každú funkciu predstavím formou "Ukážka syntaxe" (ako to napísať) a "Výsledok" (ako to bude vyzerať), aby bol tento manuál maximálne prehľadný a užitočný aj pre mňa do budúcna.

Filozofia systému: Rýchlosť a poriadok

Pracovný stôl s notebookom a kávou, symbol organizácie

Hlavnou myšlienkou tohto systému je odstrániť technický chaos a umožniť mi sústrediť sa na to najdôležitejšie – na písanie.

  • Prehľadná štruktúra: Každý článok má vlastný priečinok pre obrázky (blog/img/nazov-clanku/) a texty sú roztriedené podľa jazyka (blog/posts/sk/).
  • Jednoduché písanie: V Markdown sa obrázky vkladajú len menom (clanok-1), systém sa postará o zvyšok.
  • Flexibilita formátov: Systém si sám nájde najlepší formát obrázka (preferuje .webp, ale funguje aj s .png či .jpg).

Ako funguje priorita metadát (Titulok a Perex)

Pre maximálnu flexibilitu som navrhol 4-úrovňový systém zisťovania titulku a perexu článku, ktorý zaručuje, že sa vždy zobrazí ten najrelevantnejší obsah:

  1. Priorita č. 1: Priamo v .md súbore. Ak na začiatku súboru uvediem _title: a _perex:, majú absolútnu prednosť.
  2. Priorita č. 2: V jazykovom súbore. Ak v .md nič nie je, systém hľadá preklady v lang/blog/{jazyk}.php. To je ideálne pre viacjazyčné verzie, kde sa obsah nemení, len titulok a perex.
  3. Priorita č. 3: Automaticky z obsahu. Ak zlyhajú prvé dve možnosti, systém je dosť inteligentný na to, aby použil prvý nadpis (# Nadpis) ako titulok a prvý odsek textu ako perex.
  4. Priorita č. 4: Posledná záchrana. Ak zlyhá všetko ostatné (napr. v článku nie je ani nadpis), ako titulok sa použije názov súboru (slug), aby pole nikdy nezostalo prázdne.

Práca s obrázkami: Inteligentný a odolný systém

Toto je časť, na ktorej som si dal obzvlášť záležať. Každý typ obrázka má presne definovanú a poistenú logiku.

Titulný obrázok (titulka)

Tento obrázok je špeciálny, pretože plní dve úlohy: je prvým obrázkom v článku a zároveň slúži ako náhľad v zozname článkov.

  1. V detaile článku (clanok.php): Je to prvý obrázok v texte, automaticky zarovnaný vpravo.
  2. V zozname článkov (blog.php): Slúži ako hlavný náhľadový obrázok karty.

Pre maximálnu odolnosť voči chybám má systém pre náhľadový obrázok viacúrovňovú poistku:

  1. Primárne hľadá: blog/img/slug-clanku/titulka.webp (alebo .png, .jpg).
  2. Ak nenájde (záloha): Hľadá v staršej štruktúre blog/posts/img/slug-clanku_titulka.webp pre spätnú kompatibilitu.
  3. Ak nenájde (inteligentný fallback): Systém začne hľadať univerzálny predvolený obrázok v priečinku blog/img/defaults/. Najprv skúsi blog_default.webp, potom blog_default.png a nakoniec blog_default.jpg.
  4. Absolútna istota: Ak by z nejakého dôvodu neexistoval ani jeden z predvolených obrázkov, kód napevno priradí cestu k blog/img/defaults/blog_default.png.

Vďaka tomuto viacúrovňovému zabezpečeniu karta článku v zobrazení blog nikdy nezostane bez obrázka.

Bežné obrázky (clanok-1, clanok-2, atď.)

Tieto obrázky sa automaticky zarovnávajú striedavo vpravo a vľavo, aby dynamicky obtekali text.

Ako to funguje?

  • Automatické zarovnanie: Systém ich automaticky strieda – prvý je vpravo, druhý vľavo, tretí vpravo atď.
  • Záleží na poradí, nie na názve: Zarovnanie sa neriadi číslom v názve (napr. clanok-25 vs clanok-34), ale výhradne poradím, v akom sa objavia v .md súbore. Môžete ich teda pomenovať akokoľvek, napríklad uvodna-schema, a systém si poradie ustráži.
  • Názvy: clanok-1, clanok-2 sú len moja osobná konvencia pre poriadok v súboroch.

Ukážka syntaxe:

![Obrázok k článku 1](clanok-1)
![Obrázok k článku 2](clanok-2)

Výsledok:

Obrázok k článku 1
Obrázok k článku 2

Širokouhlý záber (wide)

Pre dôležitý obrázok, ktorý má vizuálne prerušiť text a upútať pozornosť na celú šírku obsahu, stačí do popisu pridať kľúčové slovo wide. Je to ideálne pre panorámy, infografiky alebo dôležité vizuály.

Ukážka syntaxe:

![wide - Panoramatický záber na mesto pri západe slnka](full)

Výsledok:

wide - Panoramatický záber na mesto pri západe slnka

Interaktívna galéria (gallery)

Prezentácia viacerých obrázkov naraz je vyriešená na mieru vytvorenou galériou s lightboxom.

  • Ako na to: Ku každému obrázku, ktorý chcem v galérii, pridám do popisu kľúčové slovo gallery alebo galeria.
  • Vlastné popisky: Text za kľúčovým slovom gallery - sa automaticky použije ako popisok fotky v lightoboxe.
  • Neobmedzený počet: Neexistuje žiadny limit na počet fotiek v jednej galérii.
  • Funkcionalita: Celá galéria vrátane lightboxu, navigácie šípkami a zatvárania je naprogramovaná na mieru.

Ukážka syntaxe:

![gallery - Krajina 1](galeria-1)
![gallery - Krajina 2](galeria-2)
![galeria - Krajina 3](galeria-3)
![galeria - Krajina 4](galeria-4)

Výsledok:

gallery - Krajina 1gallery - Krajina 2galeria - Krajina 3galeria - Krajina 4

Formátovanie textu s Parsedown

V pozadí všetko spracováva knižnica Parsedown. Tu sú ukážky najčastejšieho formátovania.

Zvýraznenie textu

  • Pre tučný text použite syntax: **tučný text** - tučný text
  • Pre kurzívu použite syntax: *kurzíva* - kurzíva
  • Pre prečiarknutý text použite syntax: ~~prečiarknutý text~~ - prečiarknutý text

Zoznamy:

  • Ukážka syntaxe:

      1. Prvá položka
  2. Druhá položka

  - Odsek jedna
  - Odsek dva

  • Výsledok:

    1. Prvá položka
    2. Druhá položka
    • Odsek jedna
    • Odsek dva

Citácie:

Ukážka syntaxe:

> Toto je dôležitá poznámka alebo citát. Zvýrazní sa a oddelí od zvyšku textu.

Výsledok:

Toto je dôležitá poznámka alebo citát. Zvýrazní sa a oddelí od zvyšku textu.

Horizontal rule:

Horizontálna čiara alebo horizontálny oddeľovač (v angličtine "horizontal rule"). Jej hlavným účelom je vizuálne oddeliť od seba rôzne sekcie alebo témy v texte. Vytvoríte ju jednoducho napísaním troch alebo viacerých pomlčiek (---) alebo hviezdičiek (***) na samostatný riadok.

Ukážka syntaxe:

---

Výsledok:

Bloky kódu:

Pre farebné zvýraznenie syntaxe a tlačidlo na kopírovanie stačí použiť značku jazyka (napr. php).

Ukážka syntaxe: - v mojom príklade som musel ešte obaliť kód do "" aby sa dal zobraziť kód so správnym ukončením "```" 3x "option + 1(na macu)". Miesto php môžeme dať napr. css / markdown / plaintext, čo nám príspôsobý vzhľad konkrétnemu kódu.

    "```php
    /*** Inteligentné hľadanie obrázka v článku.*/
    function findImageWithFormat($slug, $imageName) {
    $formats = ['webp', 'png', 'jpg', 'jpeg'];
    // ... zvyšok kódu ...
    return $path;
    }
    ```"

Výsledok:

/*** Inteligentné hľadanie obrázka v článku.*/
  function findImageWithFormat($slug, $imageName) {
  $formats = ['webp', 'png', 'jpg', 'jpeg'];
  // ... zvyšok kódu ...
  return $path;
  }

Multijazyčnosť bez námahy

Systém je od základu postavený na viacjazyčnosti.

  • Každý článok má svoje miesto v priečinku podľa jazyka (/posts/sk/, /posts/en/).
  • Ak si prepnete jazyk v hlavičke, systém automaticky načíta preložený obsah.
  • Inteligentný Fallback: Ak si prepnete na jazyk, v ktorom preklad neexistuje, systém zobrazí najlepšiu dostupnú verziu (prioritne SK) a hore zobrazí informačnú lištu.
  • Prehľad v zozname: V zozname článkov sú nepreložené články vizuálne odlíšené, stmavené a ponúkajú klikateľné vlajky pre jazyky, v ktorých sú dostupné. Tieto karty nie sú klikateľné, aby sa predišlo zmätočnému preklikávaniu.
  • Prehľad v detaile: V detaile článku je hneď pod nadpisom sekcia s vlajkami, ktorá umožňuje priame prepnutie na existujúce preklady.

Pro Tip: Váš osobný AI asistent

Tento prompt je výsledkom dlhého ladenia a je navrhnutý tak, aby AI vygenerovala text presne podľa pravidiel tohto systému.

Správaj sa ako expert na tvorbu obsahu a technický redaktor pre osobný blog. Tvojou úlohou je vygenerovať kompletný blogový článok v surovom Markdown formáte, ktorý bude pripravený na skopírovanie a vloženie do súboru.

Výstup musí byť **jeden jediný blok surového textu** bez akýchkoľvek tvojich sprievodných komentárov na začiatku či na konci.

**PRÍSNE PRAVIDLÁ FORMÁTOVANIA PRE MÔJ SYSTÉM:**

1.  **Front Matter:** Každý článok musí začať presne dvoma riadkami v tomto formáte:
    `_title: [Titulok článku]`
    `_perex: [Krátky úvod (max. 2-3 vety)]`

2.  **Syntax obrázkov:** VŠETKY obrázky sa vkladajú zjednodušenou syntaxou: `![Alt text](nazov_obrazka)`. NIKDY nepridávaj cestu ani príponu.

3.  **Špeciálne typy obrázkov:**
    -   **Široký obrázok:** V alt texte musí byť kľúčové slovo `wide`. Príklad: `![wide - Popis obrázka](nazov_obrazka_full)`.
    -   **Galéria:** V alt texte musí byť kľúčové slovo `gallery`. Príklad: `![gallery - Fotka z galérie 1](obrazok_galeria_1)`.

4.  **Kódové bloky:** Vždy použi špecifikáciu jazyka (napr. ` ```php `).

**ÚLOHA NA VYGENEROVANIE ČLÁNKU:**

-   **Téma článku:** [Zadajte presnú tému]
-   **Cieľové publikum:** [Napr. Začínajúci programátori]
-   **Tón komunikácie:** Profesionálny, ale zároveň priateľský a osobný (písaný v prvej osobe - "ja").
-   **Slug pre URL:** [zadajte-url-friendly-slug]
-   **Zoznam názvov obrázkov na použitie (bez prípon):** [napr. titulka, clanok-1, clanok-2, galeria-1, galeria-2]

**Požiadavky na obsah:**
-   Na základe témy vytvor pútavý titulok a perex pre Front Matter.
-   Použi 2-4 hlavné nadpisy (`##`).
-   Vlož obrázky podľa zoznamu.
-   Použi aspoň jeden číslovaný a jeden nečíslovaný zoznam, citát a inline kód.
-   Rozsah: 800 - 1200 slov.

Vygeneruj mi kompletný, surový Markdown kód pre článok.

Kompletný checklist pred publikovaním

Na záver, môj osobný checklist, ktorým sa riadim:

  • [✓] Priečinok pre obrázky: Existuje blog/img/moj-slug/?
  • [✓] Obrázky: Sú všetky obrázky (titulka, clanok-1...) nahraté v tomto priečinku a ideálne vo formáte .webp?
  • [✓] .md súbor: Je súbor RRRR-MM-DD-moj-slug.md uložený v správnom jazykovom priečinku (napr. blog/posts/sk/)?
  • [✓] Front Matter: Sú na začiatku .md súboru vyplnené _title: a _perex:?
  • [✓] Syntax obrázkov: Sú všetky obrázky v texte vložené správne, len pomocou názvu?
  • [ ] Preklady: (Voliteľné) Ak existuje preklad, je vytvorená aj en verzia súboru v blog/posts/en/?

Verím, že tento detailný pohľad do zákulisia bol užitočný. Systém je navrhnutý tak, aby bol radosť ho používať, a aby som sa mohol plne venovať tomu, čo je dôležité – tvorbe kvalitného obsahu.