Подвал

Подвал — это самоподстраивающаяся сетка колонок плюс необязательная нижняя строка, которая всегда занимает всю ширину, сколько бы колонок ни было.

Он экспортируется и как footer, и как siteFooter, потому что footer — это ещё и элемент <footer> из javascript-to-html, а импортировать оба под одним именем — синтаксическая ошибка.

Простой подвал

footer(
  footerColumn({ title: 'Документация' },
    '<a href="/ru/docs">Начало работы</a>',
    '<a href="/ru/docs/routing">Маршрутизация</a>',
    '<a href="/ru/docs/data">Загрузка данных</a>',
  ),
  footerColumn({ title: 'Компоненты' },
    '<a href="/ru/ui">Обзор</a>',
    '<a href="/ru/ui/button">Кнопка</a>',
    '<a href="/ru/ui/card">Карточка</a>',
  ),
  footerColumn({ title: 'Проект' },
    '<a href="https://github.com/paul-browne/sitelo">GitHub</a>',
    '<a href="https://www.npmjs.com/package/sitelo">npm</a>',
  ),
)

С нижней строкой

footerBottom() растягивается на все колонки, поэтому остаётся строкой во всю ширину, что бы ни делала сетка над ней.

footer(
  footerColumn({ title: 'Документация' }, '<a href="/ru/docs">Руководство</a>', '<a href="/ru/ui">Компоненты</a>'),
  footerColumn({ title: 'Примеры' }, '<a href="/ru/examples">Все примеры</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 }, 'Сборка проходит'),
    ),
  ),
)

Колонка с маркой

Колонка не обязана состоять из ссылок. Всё, что вы передаёте потомком самого footer(), а не колонки, занимает в сетке собственную ячейку.

footer(
  div(
    stack({ gap: 'sm' },
      text({ variant: 'h5', as: 'div' }, 'sitelo'),
      text({ variant: 'small', tone: 'muted' }, 'Генерация статических сайтов без настройки, на Vite.'),
    ),
  ),
  footerColumn({ title: 'Документация' }, '<a href="/ru/docs">Руководство</a>', '<a href="/ru/ui">Компоненты</a>'),
  footerColumn({ title: 'Проект' }, '<a href="#">GitHub</a>', '<a href="#">npm</a>'),
)

Фиксированные колонки

По умолчанию колонки подстраиваются сами. columns принимает любое значение grid-template-columns, когда вам нужна конкретная форма — скажем, широкая колонка марки и две узкие колонки ссылок.

footer({ columns: '2fr 1fr 1fr' },
  div(text({ variant: 'small', tone: 'muted' }, 'Более широкая первая колонка для марки и фразы о ней.')),
  footerColumn({ title: 'Документация' }, '<a href="/ru/docs">Руководство</a>'),
  footerColumn({ title: 'Ещё' }, '<a href="/ru/examples">Примеры</a>'),
)

Только нижняя строка

footer(
  footerBottom(text({ variant: 'caption' }, '© 2026 · Сделано на sitelo')),
)

Пропсы

footer():

Проп	Тип	По умолчанию	Описание
`columns`	`string`	—	Значение grid-template-columns. Без него колонки подстраиваются сами.
`as`	`string`	`'footer'`	Какой элемент рендерить.

Часть	Пропсы	По умолчанию	Описание
`footerColumn`	`title`	—	Колонка с заголовком; потомки становятся списком ссылок.
`footerBottom`		—	Строка во всю ширину под колонками.