Pátý týden s Astro
Týden 5: AstroWind - instalace a struktura
10-16. listopadu 2025
Velká změna tento týden - přestal jsem stavět od nuly a začal pracovat s reálnou šablonou. Nainstaloval jsem AstroWind a celý týden jsem se snažil pochopit, jak to funguje.
Instalace a první dojem
Naklonoval jsem repo, spustil npm install a najednou mi lokálně běžel kompletní profesionální web. Mnohem komplexnější než cokoliv, co jsem dosud postavil.
První dojem: “jak tohle sakra všechno funguje?”
Struktura adresářů
AstroWind má jiné uspořádání než moje jednoduché portfolio. Rozděluji komponenty na ui/ (tlačítka, formuláře) a widgets/ (header, hero, features). UI komponenty jsou malé znovupoužitelné kousky, widgety jsou kompletní sekce.
Hierarchie komponent
Zjistil jsem jasnou hierarchii: UI komponenty → Widgety → Layouty → Stránky.
Typický flow stránky vypadá tak, že index.astro používá PageLayout, který obsahuje Header, obsah stránky a Footer. Mnohem organizovanější než můj “components” folder, kam jsem házel všechno.
Dokumentace
Udělal jsem dvě věci - vizuální mapu v Excalidraw s krabičkami a šipkami a písemnou dokumentaci každého adresáře a hlavní komponenty. Trvalo to déle, než jsem čekal, ale teď se v kódu nevztrácím.
Co jsem si všiml
Všechno používá Tailwind CSS třídy, hodně se používají props, spousta abstrakcí a obsah je oddělený od kódu v /content složce.
Co nefungovalo
Zpočátku jsem byl zahlcený počtem souborů (50+ komponent), pletl jsem si ui a widgets a moje první Excalidraw diagram byl bordel.