Assets und Styling

sitelo baut auf Vite auf, deshalb werden Frontend-JavaScript und -CSS automatisch kompiliert. Lege Skripte und Styles unter src/ ab (zum Beispiel src/js und src/css), verlinke sie im HTML mit wurzelrelativen URLs, und sitelo erledigt den Rest: TypeScript, CSS-Importe, Bundling und Minifizierung.

Projektstruktur

Seiten und Assets teilen sich src/. Ordner wie js/ und css/ sind Konventionen, keine Vorgaben — für sitelo zählt, was dein HTML referenziert, nicht wie die Ordner heißen.

my-site/
  src/
    index.ht.js          # Seite — gibt HTML zurück
    css/
      styles.css         # aus dem HTML verlinkt → gebündelt
    js/
      main.js            # aus dem HTML verlinkt → gebündelt
      counter.ts         # von main.js importiert → ebenfalls gebündelt
    lib/
      posts.js           # nur in data() verwendet → wird nie ausgeliefert
  public/
    favicon.ico          # unverändert kopiert

Assets aus dem HTML verlinken

Referenziere Dateien über wurzelrelative Pfade. Ein <script type="module"> oder ein <link rel="stylesheet"> ist das Signal an sitelo, diese Datei in den Build aufzunehmen:

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

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

Was Vite kompiliert

.js / .ts / .jsx / .tsx — als ES-Module gebündelt, TypeScript entfernt, Importe eingebunden
.css — verarbeitet und minifiziert; @import und relative url()-Referenzen werden aufgelöst
Alles, was von einem referenzierten Einstiegspunkt importiert wird (wie das counter.ts oben), landet im selben Bundle
In sitelo (dev) laufen dieselben URLs durch Vites Transform-Pipeline — kein separater Build-Schritt, um TypeScript oder CSS auszuprobieren

Du brauchst PostCSS, Sass oder andere Vite-Plugins? Trage sie unter vite in sitelo.config.js ein.

Null JS von Haus aus

Nicht referenzierter Code wird nicht ausgegeben. Ein Helfer, der nur aus data() oder generateStaticParams importiert wird, bleibt aus dist/ heraus — Server-Geheimnisse werden nie versehentlich ausgeliefert.
Kein <script> auf der Seite bedeutet kein Client-JavaScript im Build. Für die meisten Websites genügen statisches HTML und CSS.
public/ wird unverändert kopiert (Favicons, robots.txt, statische Bilder ohne Hash).
Weitere referenzierte Dateien (Bilder, Schriften, Videos, …) werden nach dist/ kopiert.

Prüfung fehlender Assets

Ein <script src> oder ein Stylesheet-href, das auf eine Datei zeigt, die weder in src/ noch in public/ existiert, lässt den Build fehlschlagen. Lieber nur eine Warnung?

export default {
  missingAssets: 'warn',
}