Aset dan gaya

sitelo dibangun di atas Vite, jadi JavaScript dan CSS frontend dikompilasi otomatis. Taruh skrip dan gaya di bawah src/ (misalnya src/js dan src/css), tautkan dari HTML Anda dengan URL relatif-akar, dan sitelo mengurus sisanya — TypeScript, impor CSS, pembundelan, dan minifikasi.

Tata letak proyek

Halaman dan aset berbagi src/. Folder seperti js/ dan css/ adalah konvensi, bukan keharusan — yang dipedulikan sitelo adalah apa yang dirujuk HTML Anda, bukan nama foldernya.

my-site/
  src/
    index.ht.js          # halaman — mengembalikan HTML
    css/
      styles.css         # ditautkan dari HTML → dibundel
    js/
      main.js            # ditautkan dari HTML → dibundel
      counter.ts         # diimpor oleh main.js → ikut dibundel
    lib/
      posts.js           # hanya dipakai di data() → tidak pernah dikirim
  public/
    favicon.ico          # disalin apa adanya

Menautkan aset dari HTML

Rujuk berkas dengan jalur relatif-akar. Sebuah <script type="module"> atau <link rel="stylesheet"> itulah yang memberi tahu sitelo untuk menyertakan berkas tersebut dalam build:

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

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

Yang dikompilasi Vite

• .js / .ts / .jsx / .tsx — dibundel sebagai modul ES, TypeScript dilucuti, impor disisipkan
• .css — diproses dan diminifikasi; rujukan @import dan url() relatif diselesaikan
• Apa pun yang diimpor dari entri yang dirujuk (seperti counter.ts di atas) ditarik ke bundel yang sama
• Di sitelo (pengembangan), URL yang sama melewati jalur transformasi Vite — tidak perlu langkah build terpisah untuk mencoba TypeScript atau CSS

Butuh PostCSS, Sass, atau plugin Vite lain? Tambahkan di bawah vite dalam sitelo.config.js.

Nol JS secara bawaan

• Kode yang tidak dirujuk tidak dihasilkan. Pembantu yang hanya diimpor dari data() atau generateStaticParams tetap di luar dist/ — rahasia khusus server tidak pernah ikut terkirim tanpa sengaja.
• Tidak ada <script> di halaman berarti tidak ada JavaScript klien dalam build. HTML dan CSS statis sudah cukup untuk sebagian besar situs.
• public/ disalin apa adanya (favicon, robots.txt, gambar statis yang tidak ingin Anda beri hash).
• Berkas lain yang dirujuk (gambar, fon, video, …) disalin ke dist/.

Validasi aset yang hilang

Sebuah <script src> atau href lembar gaya yang menunjuk berkas yang tidak ada di src/ maupun public/ akan menggagalkan build. Lebih suka peringatan?

export default {
  missingAssets: 'warn',
}