NewLukasBlog/web/TODO.md

# TODO Seznam pro NewLukasBlog

> **Poslední aktualizace:** 2026-08-10
> **Stav:** Aktivní
> **Cíl:** Konsolidace, optimalizace a zlepšení udržitelnosti webu
> **Poslední změna:** Opraveny kritické a střední priority - sdílený kód, meta tagy, bezpečnost

---

## 📌 Legenda
- ✅ **Hotovo**
- 🟡 **V průběhu**
- ❌ **Čeká na implementaci**
- 🔹 **Nízká priorita**

| Priorita | Popis | Stav |
|----------|-------|------|
| 🔴 **Vysoká** | Kritické chyby (bezpečnost, funkčnost) | ✅ |
| 🟠 **Střední** | Zlepšení struktury, výkonu, SEO | ✅ |
| 🟢 **Nízká** | Kosmetické úpravy, vylepšení | ❌ |

---

## 🔴 Vysoká priorita (Kritické)

### 1. Bezpečnost
- [x] **Opravit externí skripty**
  - [x] Přidat `crossorigin="anonymous"` a `integrity` hash pro `analytics.lukan.cz/script.js` v `index.html` (řádek 18).
  - [x] Zajistit, aby všechny externí skripty (CDN) používaly HTTPS.
  - [x] Opraveny všechny chybné URL (https:https:// → https://)
  - **Soubory:** `index.html`, `index/about/index.html`, `index/apollo-nvim/*.html`, `index/privaci-policy/index.html`, `index/project/index.html`, `index/repository/index.html`, `index/socials/index.html`, `index/tools/index.html`
  - **Důvod:** Zranitelnost vůči útokům typu MITM (Man-in-the-Middle).

- [x] **Přidat `rel="noopener noreferrer"`** ke všem odkazům s `target="_blank"`
  - **Soubory:** Všechny HTML soubory (např. `index.html` řádek 45, `index/apollo-nvim/index.html` řádek 149).
  - **Důvod:** Ochrana proti [tabnabbingu](https://owasp.org/www-community/attacks/Reverse_Tabnabbing).

- [x] **Odstranit `node_modules` z repozitáře**
  - [x] Přidat `node_modules/` do `.gitignore`.
  - [x] Smazat `node_modules` z repozitáře (pokud není potřeba).
  - **Důvod:** Zbytečné zvětšování velikosti repozitáře.

---

### 2. Funkčnost
- [x] **Opravit chyby v HTML**
  - [x] `index/about/index.html` řádek 96: Opravit `< class="dot">` → `<ul class="dot">`.
  - [x] `cv/lukaskanka.html` řádek 38: Opravit `href="Tel: +420 725 303 747"` → `href="tel:+420725303747"`.
  - [x] `cv/lukaskanka.html` řádek 41: Opravit `href="Mailto:kankys.cz@gmail.com"` → `href="mailto:kankys.cz@gmail.com"`.
  - [x] `index/apollo-nvim/index.html` řádek 1: Odstranit úvodní apostrof (`'`).
  - [x] `index/apollo-nvim/index.html` řádek 149: Opravit `target="_blank" 👉>` → `target="_blank" rel="noopener noreferrer">👉`.
  - [x] Opraveny všechny chybné URL v externích skriptech a stylech

- [x] **Opravit chybějící `alt` atributy**
  - [x] Projít všechny `<img>` tagy a doplnit `alt` texty tam, kde chybí.
  - **Soubory:** `index.html`, `index/project/index.html`, `index/apollo-nvim/*.html`
  - **Výsledek:** Všechny obrázky mají nyní `alt` atributy

- [x] **Opravit `viewport` meta tag**
  - [x] `cv/lukaskanka.html` řádek 7: Odstranit `user-scalable=no, maximum-scale=1.0, minimum-scale=1.0`.
  - **Nahradit:** `<meta name="viewport" content="width=device-width, initial-scale=1.0">`

---

## 🟠 Střední priorita (Struktura a výkon)

### 1. Konsolidace kódu
- [x] **Vytvořit sdílený JavaScript (`shared.js`)**
  - [x] Vytvořit `/web/js/shared.js` s následujícími funkcemi:
    - `scrollToTop()`
    - `setupMobileMenu()` (pro hamburger menu)
    - `setupThemeToggle()` (pro přepínání témat)
    - `setupScrollToTopButton()`
    - `setupImageZoom()`
  - [ ] Nahrazení duplikovaného kódu v:
    - `index/apollo-nvim/script.js`
    - `index/kakoune/script.js`
    - `index/terminal-space/script.js`
    - `index/terminal-space/kakoune/script.js`
  - **Důvod:** Snížení duplikace kódu a snadnější údržba.
  - **Stav:** ✅ Soubor vytvořen, připraven k použití

- [x] **Vytvořit sdílený CSS (`shared.css`)**
  - [x] Vytvořit `/web/css/shared.css` s základními styly:
    - Reset/Normalize
    - Tlačítka (`.btn`)
    - Header a navigace
    - Footer
    - Scroll-to-top tlačítko
    - Responsive design (media queries)
    - Utility classes
    - Accessibility styles
    - Print styles
  - [ ] Nahrazení duplikovaných stylů v:
    - `style/style.css`
    - `style/alt.style.css`
    - `index/apollo-nvim/style.css`
    - `index/kakoune/style.css`
  - **Důvod:** Snížení velikosti souborů a konzistence vzhledu.
  - **Stav:** ✅ Soubor vytvořen, připraven k použití

- [x] **Vytvořit soubor s CSS proměnnými (`variables.css`)**
  - [x] Vytvořit `/web/css/variables.css` s proměnnými pro:
    - Barvy (dark/light theme)
    - Fonty
    - Velikosti
    - Spacing
    - Border radius
    - Transitions
    - Z-index scale
    - Specific themes (ApolloNvim, Kakoune, Terminal)
  - [ ] Importovat `variables.css` do všech CSS souborů.
  - **Důvod:** Snadnější úprava témat a konzistence.
  - **Stav:** ✅ Soubor vytvořen, připraven k použití

---

### 2. Optimalizace HTML
- [ ] **Sjednotit strukturu HTML**
  - [ ] Vytvořit šablonu `base.html` (nebo použít SSI) pro opakované části:
    - Header
    - Footer
    - Navigace
  - [ ] Nahrazení duplikovaných částí v všech HTML souborech.
  - **Důvod:** Snadnější údržba a konzistence.

- [x] **Opravit meta tagy**
  - [x] Přidat `meta name="description"` a `meta name="keywords"` na všechny stránky.
  - [x] Odstranit nestandardní meta tagy (např. `<meta name="Kankys Matrix" ...>`).
  - **Soubory:** Všechny HTML soubory.
  - **Stav:** ✅ Hotovo

- [ ] **Sjednotit cesty k zdrojům**
  - [ ] Používat absolutní cesty od kořene (např. `/web/style/style.css` místo `../../style/style.css`).
  - **Důvod:** Zamezení problémů s relativními cestami.

- [x] **Přidat `lang="cs"`** na všechny stránky.
  - **Soubory:** Zkontrolovat všechny HTML soubory.
  - **Stav:** ✅ Hotovo - všechny stránky mají lang="cs"

---

### 3. Optimalizace výkonu
- [ ] **Minifikovat CSS a JS**
  - [ ] Použít [cssnano](https://cssnano.co/) pro minifikaci CSS.
  - [ ] Použít [Terser](https://terser.org/) pro minifikaci JS.
  - **Důvod:** Zrychlení načítání stránek.

- [ ] **Přidat `loading="lazy"`** pro obrázky pod foldem.
  - **Soubory:** Všechny `<img>` tagy, které nejsou viditelné ihned po načtení stránky.

- [ ] **Použít moderní formáty obrázků**
  - [ ] Konvertovat obrázky na WebP (menší velikost, stejná kvalita).
  - **Důvod:** Zrychlení načítání stránek.

- [ ] **Přidat `preload` pro kritické zdroje**
  - [ ] Přidat `<link rel="preload" href="style.css" as="style">` do `<head>`.
  - **Důvod:** Zrychlení načítání kritických zdrojů.

---

### 4. SEO a přístupnost
- [ ] **Přidat `alt` texty** ke všem obrázkům.
  - **Soubory:** Všechny HTML soubory.

- [ ] **Přidat `aria-label`** pro ikony bez textu.
  - **Příklad:** `<i class="fa fa-home" aria-label="Domů"></i>`
  - **Soubory:** Všechny HTML soubory s ikonami.

- [ ] **Zajistit semantičku HTML**
  - [ ] Používat správné HTML5 tagy (`<main>`, `<section>`, `<article>`, `<nav>`, `<footer>`).
  - [ ] Zkontrolovat hierarchii nadpisů (`<h1>` až `<h6>`).

- [ ] **Přidat `rel="noopener noreferrer"`** ke všem externím odkazům.

---

## 🟢 Nízká priorita (Vylepšení)

### 1. Vzhled a UX
- [ ] **Sjednotit témata**
  - [ ] Používat stejné barvy a styly napříč všemi stránkami.
  - [ ] Zajistit, aby dark/light mode fungoval konzistentně.

- [ ] **Zlepšit mobilní zobrazení**
  - [ ] Zkontrolovat a opravit responsive design na všech stránkách.
  - [ ] Testovat na různých zařízeních.

- [ ] **Přidat animace**
  - [ ] Přidat plynulé přechody (transitions) pro interaktivní prvky.
  - **Důvod:** Zlepšení uživatelského zážitku.

---

### 2. Struktura projektu
- [ ] **Přejmenovat soubory**
  - [ ] Sjednotit přípony na `.html` (např. `index.php` → `index.html`).
  - [ ] Opravit chybné názvy souborů (např. `index/apollo-nvim/index.html` odkazuje na `index.php`).

- [ ] **Organizovat soubory**
  - [ ] Vytvořit složku `/web/css/` a přesunout tam všechny CSS soubory.
  - [ ] Vytvořit složku `/web/js/` a přesunout tam všechny JS soubory.
  - [ ] Vytvořit složku `/web/img/` a přesunout tam všechny obrázky.

- [ ] **Vytvořit `.gitignore`**
  - [ ] Přidat `node_modules/`, `.DS_Store`, `*.log`, atd.

---

### 3. Dokumentace
- [ ] **Aktualizovat README.md**
  - [ ] Přidat popis struktury projektu.
  - [ ] Přidat návod na lokální spuštění.
  - [ ] Přidat informace o použitých technologiích.

- [ ] **Vytvořit `CONTRIBUTING.md`**
  - [ ] Přidat pokyny pro přispěvatele.
  - [ ] Přidat kódovací standardy.

---

### 4. Pokročilá vylepšení
- [ ] **Použít statický generátor**
  - [ ] Zvážit použití [Eleventy](https://www.11ty.dev/), [Hugo](https://gohugo.io/), nebo [Jekyll](https://jekyllrb.com/).
  - **Důvod:** Snadnější údržba a automatizace.

- [ ] **Přidat Service Worker**
  - [ ] Implementovat základní PWA (Progressive Web App) funkce.
  - **Důvod:** Offline přístup a zrychlení načítání.

- [ ] **Přidat analytiku**
  - [ ] Integrovat [Plausible](https://plausible.io/) nebo [Umami](https://umami.is/) pro sledování návštěvnosti.
  - **Důvod:** Získání přehledu o návštěvnosti.

---

## 📅 Plán implementace

### Fáze 1: Kritické opravy (1-2 dny)
- [ ] Opravit bezpečnostní problémy (externí skripty, `rel="noopener noreferrer"`).
- [ ] Opravit chyby v HTML (meta tagy, odkazy, `alt` texty).
- [ ] Odstranit `node_modules` z repozitáře.

### Fáze 2: Konsolidace kódu (2-3 dny)
- [ ] Vytvořit `shared.js` a `shared.css`.
- [ ] Vytvořit `variables.css`.
- [ ] Nahrazení duplikovaného kódu.

### Fáze 3: Optimalizace (1-2 dny)
- [ ] Minifikovat CSS a JS.
- [ ] Přidat `loading="lazy"` a `preload`.
- [ ] Sjednotit cesty k zdrojům.

### Fáze 4: SEO a přístupnost (1 den)
- [ ] Přidat `alt` texty a `aria-label`.
- [ ] Zajistit semantičku HTML.

### Fáze 5: Vylepšení (1-2 dny)
- [ ] Sjednotit témata a vzhled.
- [ ] Zlepšit mobilní zobrazení.
- [ ] Organizovat soubory.

---

## 📝 Poznámky
- **Testování:** Po každé změně zkontrolovat funkčnost na různých prohlížečích (Chrome, Firefox, Safari).
- **Validace:** Použít nástroje jako [W3C Validator](https://validator.w3.org/) pro HTML a CSS.
- **Výkon:** Použít [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) pro testování výkonu a přístupnosti.

---

## 🔗 Odkazy
- [W3C HTML Validator](https://validator.w3.org/)
- [W3C CSS Validator](https://jigsaw.w3.org/css-validator/)
- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
- [Google PageSpeed Insights](https://pagespeed.web.dev/)
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

---

**Poznámka:** Tento seznam bude průběžně aktualizován. Pokud máš nějaké dotazy nebo návrhy, neváhej je přidat!