Stopka

Stopka to siatka kolumn dopasowujących się automatycznie plus opcjonalny wiersz na dole, który zawsze rozciąga się na pełną szerokość, niezależnie od liczby kolumn.

Eksportowana jest i jako footer, i jako siteFooter, bo footer to także element <footer> z javascript-to-html, a zaimportowanie obu pod jedną nazwą to błąd składni.

Podstawowa stopka

footer(
  footerColumn({ title: 'Dokumentacja' },
    '<a href="/docs">Pierwsze kroki</a>',
    '<a href="/docs/routing">Routing</a>',
    '<a href="/docs/data">Wczytywanie danych</a>',
  ),
  footerColumn({ title: 'Komponenty' },
    '<a href="/ui">Przegląd</a>',
    '<a href="/ui/button">Przycisk</a>',
    '<a href="/ui/card">Karta</a>',
  ),
  footerColumn({ title: 'Projekt' },
    '<a href="https://github.com/paul-browne/sitelo">GitHub</a>',
    '<a href="https://www.npmjs.com/package/sitelo">npm</a>',
  ),
)

Z wierszem na dole

footerBottom() rozciąga się na wszystkie kolumny, więc zostaje wierszem pełnej szerokości niezależnie od tego, co robi siatka nad nim.

footer(
  footerColumn({ title: 'Dokumentacja' }, '<a href="/docs">Przewodnik</a>', '<a href="/ui">Komponenty</a>'),
  footerColumn({ title: 'Przykłady' }, '<a href="/examples">Wszystkie przykłady</a>'),
  footerBottom(
    text({ variant: 'caption' }, '© 2026 Paul Browne · MIT'),
    stack({ direction: 'row', gap: 'sm' },
      chip({ size: 'sm', color: 'neutral' }, 'v2.7'),
      chip({ size: 'sm', color: 'success', dot: true }, 'Build zaliczony'),
    ),
  ),
)

Kolumna z marką

Kolumna nie musi składać się z odnośników. Cokolwiek podasz jako dziecko footer(), a nie kolumny, siada w siatce jako własna komórka.

footer(
  div(
    stack({ gap: 'sm' },
      text({ variant: 'h5', as: 'div' }, 'sitelo'),
      text({ variant: 'small', tone: 'muted' }, 'Generowanie stron statycznych bez konfiguracji, napędzane przez Vite.'),
    ),
  ),
  footerColumn({ title: 'Dokumentacja' }, '<a href="/docs">Przewodnik</a>', '<a href="/ui">Komponenty</a>'),
  footerColumn({ title: 'Projekt' }, '<a href="#">GitHub</a>', '<a href="#">npm</a>'),
)

Stałe kolumny

Domyślnie kolumny dopasowują się same. columns przyjmuje dowolną wartość grid-template-columns, gdy chcesz konkretnego kształtu — powiedzmy szerokiej kolumny z marką i dwóch wąskich z odnośnikami.

footer({ columns: '2fr 1fr 1fr' },
  div(text({ variant: 'small', tone: 'muted' }, 'Szersza pierwsza kolumna na markę i zdanie o niej.')),
  footerColumn({ title: 'Dokumentacja' }, '<a href="/docs">Przewodnik</a>'),
  footerColumn({ title: 'Więcej' }, '<a href="/examples">Przykłady</a>'),
)

Sam wiersz na dole

footer(
  footerBottom(text({ variant: 'caption' }, '© 2026 · Zbudowane w sitelo')),
)

Propsy

footer():

Prop	Typ	Domyślnie	Opis
`columns`	`string`	—	Wartość grid-template-columns. Pominięta — dopasowuje się sama.
`as`	`string`	`'footer'`	Element do wyrenderowania.

Część	Propsy	Domyślnie	Opis
`footerColumn`	`title`	—	Kolumna z tytułem; dzieci stają się listą odnośników.
`footerBottom`		—	Wiersz pełnej szerokości pod kolumnami.