Šestý týden s Astro
Týden 6: Detailní pohled na hlavní komponenty
17-23. listopadu 2025
Tento týden jsem se konečně podíval do komponent a snažil se pochopit, jak fungují. Vybral jsem si 5 hlavních (Header, Hero, Footer, Features, CallToAction) a všechno zdokumentoval.
Profesionální vzory komponent
Strávil jsem hodně času analýzou Header komponenty. Uvědomil jsem si, jak moc se liší od mé navigace z týdne 2.
Moje navigace měla pole odkazů a ~30 řádků kódu. AstroWind Header má 7+ props, používá sub-komponenty, zvládá sticky pozicování, mobilní menu, přepínání motivů a má ~150+ řádků. Mnohem složitější, ale taky mnohem flexibilnější.
Vzor je jasný - profesionální komponenty přijímají spoustu konfigurace přes props s rozumnými výchozími hodnotami.
Props a sloty
Hero komponenta mě dostala - můžeš předávat data jako props NEBO jako sloty NEBO obojí. Sloty ti umožňují předat HTML/komponenty, props jsou pro jednoduchá data.
Naučil jsem se taky komplexní struktury props - pole objektů, vnořená data. Footer to používá pro organizaci skupin odkazů.
Tailwind CSS
Všechno používá Tailwind utility třídy místo vlastního CSS. Zpočátku to vypadalo jako náhodná hatlanina, ale jakmile se naučíš systém, je to vlastně rychlejší.
Responzivní design je jen přidání prefixů (sm:, md:, lg:). Tmavý režim taky (dark:bg-gray-900). Žádné media queries.
Pořád si nejsem jistý, jestli to preferuju před scoped CSS, ale chápu, proč to šablony používají - konzistence a rychlost.
Přizpůsobení komponent
Přizpůsobil jsem celou homepage vlastním obsahem - změnil Hero text a tlačítka, napsal 6 funkcí pro Feature