Piè di pagina

Un piè di pagina è una griglia di colonne che si adattano automaticamente, più una riga finale facoltativa che occupa sempre tutta la larghezza, qualunque sia il numero di colonne.

È esportato sia come footer sia come siteFooter, perché footer è anche l’elemento <footer> di javascript-to-html e importarli entrambi con lo stesso nome è un errore di sintassi.

Piè di pagina di base

footer(
  footerColumn({ title: 'Documentazione' },
    '<a href="/docs">Primi passi</a>',
    '<a href="/docs/routing">Routing</a>',
    '<a href="/docs/data">Caricamento dati</a>',
  ),
  footerColumn({ title: 'Componenti' },
    '<a href="/ui">Panoramica</a>',
    '<a href="/ui/button">Pulsante</a>',
    '<a href="/ui/card">Scheda</a>',
  ),
  footerColumn({ title: 'Progetto' },
    '<a href="https://github.com/paul-browne/sitelo">GitHub</a>',
    '<a href="https://www.npmjs.com/package/sitelo">npm</a>',
  ),
)

Con una riga finale

footerBottom() attraversa tutte le colonne, quindi resta una riga a piena larghezza qualunque cosa stia facendo la griglia sopra di essa.

footer(
  footerColumn({ title: 'Documentazione' }, '<a href="/docs">Guida</a>', '<a href="/ui">Componenti</a>'),
  footerColumn({ title: 'Esempi' }, '<a href="/examples">Tutti gli esempi</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 superata'),
    ),
  ),
)

Una colonna di marca

Una colonna non deve per forza essere fatta di link. Qualunque cosa passi come figlio di footer() invece che di una colonna sta nella griglia come cella a sé.

footer(
  div(
    stack({ gap: 'sm' },
      text({ variant: 'h5', as: 'div' }, 'sitelo'),
      text({ variant: 'small', tone: 'muted' }, 'Generazione di siti statici senza configurazione, mossa da Vite.'),
    ),
  ),
  footerColumn({ title: 'Documentazione' }, '<a href="/docs">Guida</a>', '<a href="/ui">Componenti</a>'),
  footerColumn({ title: 'Progetto' }, '<a href="#">GitHub</a>', '<a href="#">npm</a>'),
)

Colonne fisse

Per impostazione predefinita le colonne si adattano da sole. columns accetta qualunque valore di grid-template-columns quando vuoi una forma precisa — una colonna di marca larga e due colonne di link strette, per esempio.

footer({ columns: '2fr 1fr 1fr' },
  div(text({ variant: 'small', tone: 'muted' }, 'Una prima colonna più larga per la marca e una frase che la descrive.')),
  footerColumn({ title: 'Documentazione' }, '<a href="/docs">Guida</a>'),
  footerColumn({ title: 'Altro' }, '<a href="/examples">Esempi</a>'),
)

Solo la riga finale

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

Props

footer():

Prop	Tipo	Predefinito	Descrizione
`columns`	`string`	—	Un valore di grid-template-columns. Si adatta da sola se omessa.
`as`	`string`	`'footer'`	Elemento da renderizzare.

Parte	Props	Predefinito	Descrizione
`footerColumn`	`title`	—	Una colonna con titolo; i figli diventano un elenco di link.
`footerBottom`		—	Riga a piena larghezza sotto le colonne.