# Prompt: DevCore Knowledge Base

Zkopíruj celý následující prompt do Lovable (nebo jiného AI nástroje pro tvorbu webů) a vznikne ti interaktivní firemní knowledge base velmi podobná referenční verzi.

---

## 📋 Prompt ke zkopírování

> Vytvoř interaktivní firemní **knowledge base** pro tým softwarové firmy **"DevCore"**.
>
> ### 🧱 Struktura a layout
> - **Levý sidebar** (tmavý, fixní) s ikonami a kategoriemi:
>   - Onboarding
>   - Development Standards
>   - DevOps & CI/CD
>   - Architektura
>   - Bezpečnost
>   - HR & Procesy
>   - FAQ
> - V sidebaru zobraz u každé kategorie **počet článků**.
> - Nahoře logo / název "DevCore KB".
> - **Hlavní obsah vpravo** je světlý (bílé pozadí, černý text).
> - **Sticky top bar** s vyhledávacím polem a přepínačem **dark/light mode** (s perzistencí v localStorage).
>
> ### 🔍 Vyhledávání
> - Vyhledávací pole v top baru, které **filtruje články v reálném čase** (fulltext přes nadpis, perex, tagy i jméno autora).
> - Při psaní se zobrazí stránka s výsledky a počtem nálezů.
> - Prázdný stav: "Nic nenalezeno. Zkus jiný dotaz."
>
> ### 📰 Články
> Každý článek obsahuje:
> - nadpis (h1)
> - perex (krátký úvod)
> - hlavní obsah (markdown-like, s nadpisy a odstavci)
> - **tagy** (např. `#backend`, `#python`, `#security`) – barevné chipy
> - datum poslední aktualizace
> - jméno autora + **avatar**
> - počet zobrazení
> - badge **"Aktualizováno"** pokud byl článek změněn za posledních 14 dní
> - sekce **"Byl tento článek užitečný?"** s tlačítky 👍 / 👎
>
> ### 🧭 Navigace
> - **Breadcrumb** navigace nahoře (Knowledge Base → Kategorie → Článek)
> - **Code bloky** s tlačítkem **"Kopírovat kód"** a jednoduchým syntax highlightingem (vlastní lehký tokenizer, žádné externí knihovny).
>
> ### 🏠 Homepage
> - Hero nadpis: "Vítej v DevCore Knowledge Base"
> - Sekce **"Nejčastěji navštěvované"** (top 5 článků podle počtu zobrazení, číslované 01–05)
> - Mřížka **kategorií** jako karty
> - Sekce **"Nedávno aktualizováno"** (mřížka karet článků)
>
> ### 📚 Obsah – naplň realistickými články (minimálně 10):
> 1. Jak nastavit lokální vývojové prostředí
> 2. Git workflow a naming conventions
> 3. Code review checklist
> 4. Jak deployovat na produkci
> 5. Security best practices
> 6. Onboarding checklist pro nové vývojáře
> 7. API dokumentace šablona
> 8. Jak psát unit testy
> 9. Incident response postup
> 10. Remote work guidelines
>
> Každý článek by měl mít aspoň 3–5 odstavců reálného obsahu v češtině, ukázky kódu (Bash, TypeScript, Python, YAML…) a relevantní tagy.
>
> ### 🎨 Design
> - Čistý, **minimalistický** styl (inspirace Notion / Linear / Vercel docs).
> - **Tmavý sidebar**, světlý obsah.
> - Akcentové barvy: **modrá** (#3b82f6) a **zelená** (#10b981) – používané na tagy, badge, hover stavy a čísla v top listu.
> - Sans-serif typografie (Inter nebo podobné), výrazné nadpisy, vzdušné spacing.
> - Hover stavy na kartách (jemný shadow + posun nahoru).
> - Plně responzivní.
> - Přidej **favicon** s "DC" monogramem v brand barvách.
>
> ### 🛠️ Technické požadavky
> - Vše jako **frontend-only**, žádný backend.
> - Data článků v samostatném souboru (např. `src/lib/kb-data.ts`) jako pole objektů.
> - Komponenty rozděl logicky (Sidebar, ArticleCard, ArticleView, CodeBlock, ThemeToggle).
> - Použij semantické design tokeny (CSS proměnné) místo hardcodovaných barev v komponentách.
> - Texty UI v češtině.

---

## 💡 Tipy pro studenty

- **Iteruj** – nemusíš dostat výsledek napoprvé. Po vygenerování zkus říct: *"přidej víc článků do kategorie Bezpečnost"* nebo *"zvětši kontrast tagů v dark módu"*.
- **Změň branding** – nahraď "DevCore" jménem vlastní fiktivní firmy a uprav barvy.
- **Rozšiř** – zkuste přidat: filtraci podle tagu, oblíbené články, export do PDF, komentáře.