Zasoby i style

sitelo stoi na Vite, więc frontowy JavaScript i CSS kompilują się automatycznie. Umieść skrypty i style pod src/ (na przykład w src/js i src/css), podlinkuj je z HTML-a adresami względem katalogu głównego, a sitelo zajmie się resztą — TypeScriptem, importami CSS, pakowaniem i minifikacją.

Układ projektu

Strony i zasoby dzielą src/. Katalogi takie jak js/ i css/ to konwencje, nie wymogi — sitelo interesuje to, do czego odwołuje się Twój HTML, a nie nazwy katalogów.

my-site/
  src/
    index.ht.js          # strona — zwraca HTML
    css/
      styles.css         # podlinkowane z HTML → trafia do paczki
    js/
      main.js            # podlinkowane z HTML → trafia do paczki
      counter.ts         # importowane przez main.js → też trafia do paczki
    lib/
      posts.js           # używane tylko w data() → nigdy nie trafia do wyniku
  public/
    favicon.ico          # kopiowane bez zmian

Podlinkuj zasoby z HTML-a

Odwołuj się do plików ścieżkami względem katalogu głównego. To <script type="module"> albo <link rel="stylesheet"> mówi sitelo, żeby włączyć dany plik do buildu:

export default () => `
  <html lang="pl">
    <head>
      <title>Moja strona</title>
      <link rel="stylesheet" href="/css/styles.css">
      <script type="module" src="/js/main.js"></script>
    </head>
    <body>
      <h1>Cześć</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: 'pl' },
    head(
      title('Moja strona'),
      link({ rel: 'stylesheet', href: '/css/styles.css' }),
      script({ type: 'module', src: '/js/main.js' }),
    ),
    body(
      h1('Cześć'),
      button({ id: 'count' }, '0'),
    ),
  )

export default function Home() {
  return (
    <html lang="pl">
      <head>
        <title>Moja strona</title>
        <link rel="stylesheet" href="/css/styles.css" />
        <script type="module" src="/js/main.js" />
      </head>
      <body>
        <h1>Cześć</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;
}

Co kompiluje Vite

• .js / .ts / .jsx / .tsx — pakowane jako moduły ES, TypeScript usuwany, importy wciągane
• .css — przetwarzane i minifikowane; @import i względne odwołania url() są rozwiązywane
• Wszystko zaimportowane z podlinkowanego punktu wejścia (jak counter.ts powyżej) trafia do tej samej paczki
• W sitelo (dev) te same URL-e przechodzą przez potok transformacji Vite — bez osobnego buildu, żeby wypróbować TypeScript albo CSS

Potrzebujesz PostCSS, Sassa albo innych wtyczek Vite? Dodaj je pod kluczem vite w sitelo.config.js.

Zero JS domyślnie

• Kod, do którego nic się nie odwołuje, nie jest wypuszczany. Pomocnik importowany tylko z data() albo generateStaticParams zostaje poza dist/ — sekrety serwerowe nigdy nie trafiają online przez przypadek.
• Brak <script> na stronie oznacza brak JavaScriptu klienckiego w buildzie. Statyczny HTML i CSS wystarczą dla większości witryn.
• public/ jest kopiowane bez zmian (favikony, robots.txt, statyczne obrazy, których nie chcesz hashować).
• Pozostałe podlinkowane pliki (obrazy, fonty, wideo, …) są kopiowane do dist/.

Sprawdzanie brakujących zasobów

<script src> albo href arkusza stylów wskazujący na plik, którego nie ma ani w src/, ani w public/, przerywa build. Wolisz ostrzeżenie?

export default {
  missingAssets: 'warn',
}