Footer

Ein Footer ist ein Raster aus Spalten, das sich selbst einpasst, plus eine optionale Schlusszeile, die immer die volle Breite einnimmt, wie viele Spalten es auch gibt.

Er wird sowohl als footer als auch als siteFooter exportiert, denn footer ist auch das <footer>-Element von javascript-to-html, und beides unter einem Namen zu importieren ist ein Syntaxfehler.

footer(
  footerColumn({ title: 'Doku' },
    '<a href="/de/docs">Erste Schritte</a>',
    '<a href="/de/docs/routing">Routing</a>',
    '<a href="/de/docs/data">Daten laden</a>',
  ),
  footerColumn({ title: 'Komponenten' },
    '<a href="/de/ui">Überblick</a>',
    '<a href="/de/ui/button">Button</a>',
    '<a href="/de/ui/card">Karte</a>',
  ),
  footerColumn({ title: 'Projekt' },
    '<a href="https://github.com/paul-browne/sitelo">GitHub</a>',
    '<a href="https://www.npmjs.com/package/sitelo">npm</a>',
  ),
)

Mit Schlusszeile

footerBottom() reicht über alle Spalten und bleibt damit eine Zeile über die volle Breite, was auch immer das Raster darüber tut.

footer(
  footerColumn({ title: 'Doku' }, '<a href="/de/docs">Anleitung</a>', '<a href="/de/ui">Komponenten</a>'),
  footerColumn({ title: 'Beispiele' }, '<a href="/de/examples">Alle Beispiele</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 erfolgreich'),
    ),
  ),
)

Eine Markenspalte

Eine Spalte muss nicht aus Links bestehen. Alles, was du als Kind von footer() statt einer Spalte übergibst, bekommt im Raster seine eigene Zelle.

footer(
  div(
    stack({ gap: 'sm' },
      text({ variant: 'h5', as: 'div' }, 'sitelo'),
      text({ variant: 'small', tone: 'muted' }, 'Statische Website-Generierung ohne Konfiguration, angetrieben von Vite.'),
    ),
  ),
  footerColumn({ title: 'Doku' }, '<a href="/de/docs">Anleitung</a>', '<a href="/de/ui">Komponenten</a>'),
  footerColumn({ title: 'Projekt' }, '<a href="#">GitHub</a>', '<a href="#">npm</a>'),
)

Feste Spalten

Standardmäßig passen sich die Spalten selbst ein. columns nimmt jeden grid-template-columns-Wert, wenn du eine bestimmte Form willst — etwa eine breite Markenspalte und zwei schmale Linkspalten.

footer({ columns: '2fr 1fr 1fr' },
  div(text({ variant: 'small', tone: 'muted' }, 'Eine breitere erste Spalte für die Marke und einen Satz dazu.')),
  footerColumn({ title: 'Doku' }, '<a href="/de/docs">Anleitung</a>'),
  footerColumn({ title: 'Mehr' }, '<a href="/de/examples">Beispiele</a>'),
)

Nur die Schlusszeile

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

Props

footer():

Prop	Typ	Standard	Beschreibung
`columns`	`string`	—	Ein grid-template-columns-Wert. Passt sich selbst ein, wenn weggelassen.
`as`	`string`	`'footer'`	Element, das gerendert wird.

Teil	Props	Standard	Beschreibung
`footerColumn`	`title`	—	Eine Spalte mit Titel; Kinder werden zu einer Linkliste.
`footerBottom`		—	Zeile über die volle Breite unter den Spalten.