O projekcie

Demo możliwości frameworka Astro — bez zewnętrznych bibliotek UI

Named Slots

Ta strona demonstruje named slots. Oprócz domyślnego <slot />, Layout.astro posiada <slot name="head" /> — zawartość tego slotu jest wstrzykiwana do sekcji <head> dokumentu HTML. Możesz sprawdzić to w devtools przeglądarki. 

<Layout title="O projekcie">
  <Fragment slot="head">
    <!-- Trafia do <head> -->
    <meta name="keywords" content="astro" />
  </Fragment>

  <!-- Domyślny slot — treść strony -->
  <h1>O projekcie</h1>
</Layout>

Pliki w tym projekcie

  • src/layouts/Layout.astro — główny layout z nawigacją, stopką i slotem name="head"
  • src/components/FeatureCard.astro — karta z typowanymi props (interface Props), domyślnym slotem i scoped CSS
  • src/components/Counter.astro — interaktywny licznik z <script> bundlowanym przez Vite; obsługuje wiele instancji
  • src/pages/blog/index.astro — listing postów z import.meta.glob('./*.md', { eager: true })
  • src/pages/blog/*.md — trzy posty Markdown z frontmatterem i layoutem

Kluczowe koncepty Astro

🏝️
Islands Architecture

Domyślnie zero JS. Interaktywne "wyspy" hydratyzowane są tylko tam, gdzie potrzeba.

⚡
Vite pod spodem

Błyskawiczny dev server, HMR, bundlowanie skryptów i optymalizacja zasobów.

🔌
Integracje

React, Vue, Svelte, Solid, Tailwind, MDX i wiele innych przez astro add.

☁️
SSR i adaptery

Możliwy rendering serwerowy przez adaptery: Node.js, Cloudflare, Vercel, Netlify.

← Powrót do strony głównej