Varlıklar ve stil

sitelo Vite üzerine kuruludur, bu yüzden ön yüz JavaScript’i ve CSS’i kendiliğinden derlenir. Betikleri ve stilleri src/ altına koyun (örneğin src/js ve src/css), HTML’inizden kök göreli URL’lerle bağlayın; gerisini sitelo halleder — TypeScript, CSS içe aktarmaları, paketleme ve küçültme.

Proje düzeni

Sayfalar ve varlıklar src/ dizinini paylaşır. js/ ve css/ gibi klasörler birer kural, zorunluluk değil — sitelo klasör adlarını değil, HTML’inizin neye başvurduğunu önemser.

my-site/
  src/
    index.ht.js          # sayfa — HTML döndürür
    css/
      styles.css         # HTML’den bağlandı → paketlenir
    js/
      main.js            # HTML’den bağlandı → paketlenir
      counter.ts         # main.js içe aktardı → o da paketlenir
    lib/
      posts.js           # yalnızca data() içinde kullanılır → hiç yayımlanmaz
  public/
    favicon.ico          # olduğu gibi kopyalanır

Varlıkları HTML’den bağlamak

Dosyalara kök göreli yollarla başvurun. sitelo’ya o dosyayı derlemeye dahil etmesini söyleyen şey bir <script type="module"> ya da <link rel="stylesheet"> etiketidir:

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

export default function Home() {
  return (
    <html lang="tr">
      <head>
        <title>Sitem</title>
        <link rel="stylesheet" href="/css/styles.css" />
        <script type="module" src="/js/main.js" />
      </head>
      <body>
        <h1>Merhaba</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’ın derledikleri

• .js / .ts / .jsx / .tsx — ES modülleri olarak paketlenir, TypeScript ayıklanır, içe aktarmalar satır içine alınır
• .css — işlenir ve küçültülür; @import ve göreli url() başvuruları çözülür
• Başvurulan bir girişten içe aktarılan her şey (yukarıdaki counter.ts gibi) aynı pakete çekilir
• sitelo (geliştirme) içinde aynı URL’ler Vite’ın dönüştürme hattından geçer — TypeScript ya da CSS denemek için ayrı bir derleme adımı yoktur

PostCSS, Sass ya da başka Vite eklentileri mi gerekiyor? Bunları sitelo.config.js içindeki vite altına ekleyin.

Varsayılan olarak sıfır JS

• Başvurulmayan kod üretilmez. Yalnızca data() ya da generateStaticParams içinden içe aktarılan bir yardımcı dist/ dışında kalır — yalnızca sunucuya ait sırlar kazara yayımlanmaz.
• Sayfada <script> olmaması, derlemede istemci JavaScript’i olmaması demektir. Çoğu site için statik HTML ve CSS yeter.
• public/ olduğu gibi kopyalanır (site simgeleri, robots.txt, özetlenmesini istemediğiniz statik görseller).
• Başvurulan diğer dosyalar (görseller, yazı tipleri, videolar, …) dist/ içine kopyalanır.

Eksik varlık doğrulaması

Ne src/ ne de public/ içinde bulunan bir dosyayı gösteren bir <script src> ya da stil sayfası href değeri derlemeyi başarısız kılar. Uyarı mı tercih edersiniz?

export default {
  missingAssets: 'warn',
}