Ресурсы и стили

sitelo построен на Vite, поэтому фронтенд-JavaScript и CSS собираются автоматически. Положите скрипты и стили в src/ (например, src/js и src/css), сошлитесь на них из HTML корневыми путями — и sitelo сделает остальное: TypeScript, импорты CSS, сборку и минификацию.

Структура проекта

Страницы и ресурсы живут вместе в src/. Папки вроде js/ и css/ — соглашение, а не требование: sitelo смотрит на то, что упоминает ваш HTML, а не на названия папок.

my-site/
  src/
    index.ht.js          # страница — возвращает HTML
    css/
      styles.css         # подключено из HTML → попадёт в бандл
    js/
      main.js            # подключено из HTML → попадёт в бандл
      counter.ts         # импортируется из main.js → тоже в бандле
    lib/
      posts.js           # используется только в data() → никогда не публикуется
  public/
    favicon.ico          # копируется как есть

Подключение ресурсов из HTML

Ссылайтесь на файлы корневыми путями. Именно <script type="module"> или <link rel="stylesheet"> говорит sitelo включить этот файл в сборку:

export default () => `
  <html lang="ru">
    <head>
      <title>Мой сайт</title>
      <link rel="stylesheet" href="/css/styles.css">
      <script type="module" src="/js/main.js"></script>
    </head>
    <body>
      <h1>Привет</h1>
      <button id="count">0</button>
    </body>
  </html>
`

import { html, head, title, link, script, body, h1, button } from 'javascript-to-html'

export default () =>
  html({ lang: 'ru' },
    head(
      title('Мой сайт'),
      link({ rel: 'stylesheet', href: '/css/styles.css' }),
      script({ type: 'module', src: '/js/main.js' }),
    ),
    body(
      h1('Привет'),
      button({ id: 'count' }, '0'),
    ),
  )

export default function Home() {
  return (
    <html lang="ru">
      <head>
        <title>Мой сайт</title>
        <link rel="stylesheet" href="/css/styles.css" />
        <script type="module" src="/js/main.js" />
      </head>
      <body>
        <h1>Привет</h1>
        <button id="count">0</button>
      </body>
    </html>
  )
}

import { createCounter } from './counter.ts'

const button = document.querySelector('#count')
const next = createCounter()

button.addEventListener('click', () => {
  button.textContent = String(next())
})

@import './tokens.css';

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 2rem;
}

Что собирает Vite

.js / .ts / .jsx / .tsx — собираются как ES-модули, TypeScript срезается, импорты подставляются
.css — обрабатывается и минифицируется; @import и относительные ссылки url() разрешаются
Всё, что импортируется из упомянутой точки входа (например, counter.ts выше), попадает в тот же бандл
В sitelo (dev) те же URL проходят через конвейер преобразований Vite — отдельная сборка, чтобы попробовать TypeScript или CSS, не нужна

Нужны PostCSS, Sass или другие плагины Vite? Добавьте их под ключом vite в sitelo.config.js.

Ноль JS по умолчанию

Код без ссылок не попадает в вывод. Помощник, импортируемый только из data() или generateStaticParams, остаётся за пределами dist/ — серверные секреты не публикуются по случайности.
Нет <script> на странице — значит, в сборке нет клиентского JavaScript. Большинству сайтов хватает статического HTML и CSS.
public/ копируется как есть (фавиконки, robots.txt, статические картинки без хэша в имени).
Остальные упомянутые файлы (изображения, шрифты, видео, …) копируются в dist/.

Проверка отсутствующих ресурсов

<script src> или href таблицы стилей, указывающие на файл, которого нет ни в src/, ни в public/, прерывают сборку. Предпочитаете предупреждение?

export default {
  missingAssets: 'warn',
}