Footer

Footer adalah kisi kolom yang menyesuaikan diri, plus satu baris bawah opsional yang selalu membentang selebar penuh, berapa pun jumlah kolomnya.

Ia diekspor sebagai footer sekaligus siteFooter, karena footer juga merupakan elemen <footer> milik javascript-to-html dan mengimpor keduanya dengan satu nama adalah galat sintaks.

footer(
  footerColumn({ title: 'Dokumentasi' },
    '<a href="/docs">Memulai</a>',
    '<a href="/docs/routing">Perutean</a>',
    '<a href="/docs/data">Memuat data</a>',
  ),
  footerColumn({ title: 'Komponen' },
    '<a href="/ui">Ringkasan</a>',
    '<a href="/ui/button">Tombol</a>',
    '<a href="/ui/card">Kartu</a>',
  ),
  footerColumn({ title: 'Proyek' },
    '<a href="https://github.com/paul-browne/sitelo">GitHub</a>',
    '<a href="https://www.npmjs.com/package/sitelo">npm</a>',
  ),
)

Dengan baris bawah

footerBottom() membentang di seluruh kolom, jadi ia tetap menjadi baris selebar penuh apa pun yang dilakukan kisi di atasnya.

footer(
  footerColumn({ title: 'Dokumentasi' }, '<a href="/docs">Panduan</a>', '<a href="/ui">Komponen</a>'),
  footerColumn({ title: 'Contoh' }, '<a href="/examples">Semua contoh</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 lulus'),
    ),
  ),
)

Kolom merek

Sebuah kolom tidak harus berisi tautan. Apa pun yang Anda berikan sebagai anak footer() alih-alih anak sebuah kolom akan duduk di kisinya sebagai selnya sendiri.

footer(
  div(
    stack({ gap: 'sm' },
      text({ variant: 'h5', as: 'div' }, 'sitelo'),
      text({ variant: 'small', tone: 'muted' }, 'Pembuatan situs statis tanpa konfigurasi, ditenagai Vite.'),
    ),
  ),
  footerColumn({ title: 'Dokumentasi' }, '<a href="/docs">Panduan</a>', '<a href="/ui">Komponen</a>'),
  footerColumn({ title: 'Proyek' }, '<a href="#">GitHub</a>', '<a href="#">npm</a>'),
)

Kolom tetap

Secara bawaan kolomnya menyesuaikan diri. columns menerima nilai grid-template-columns apa pun ketika Anda menginginkan bentuk tertentu — katakanlah satu kolom merek yang lebar dan dua kolom tautan yang sempit.

footer({ columns: '2fr 1fr 1fr' },
  div(text({ variant: 'small', tone: 'muted' }, 'Kolom pertama yang lebih lebar untuk mereknya dan satu kalimat tentangnya.')),
  footerColumn({ title: 'Dokumentasi' }, '<a href="/docs">Panduan</a>'),
  footerColumn({ title: 'Lainnya' }, '<a href="/examples">Contoh</a>'),
)

Hanya baris bawah

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

Props

footer():

Prop	Tipe	Bawaan	Deskripsi
`columns`	`string`	—	Nilai grid-template-columns. Menyesuaikan diri bila dilewati.
`as`	`string`	`'footer'`	Elemen yang dirender.

Bagian	Props	Bawaan	Deskripsi
`footerColumn`	`title`	—	Kolom berjudul; anaknya menjadi daftar tautan.
`footerBottom`		—	Baris selebar penuh di bawah kolomnya.