Ressources et styles

sitelo repose sur Vite : le JavaScript et le CSS frontend sont donc compilés automatiquement. Placez scripts et styles sous src/ (par exemple src/js et src/css), liez-les depuis votre HTML avec des URL relatives à la racine, et sitelo s’occupe du reste : TypeScript, imports CSS, bundling et minification.

Structure du projet

Les pages et les ressources partagent src/. Des dossiers comme js/ et css/ sont des conventions, pas des obligations — ce qui compte pour sitelo, c’est ce que votre HTML référence, pas le nom des dossiers.

my-site/
  src/
    index.ht.js          # page — renvoie du HTML
    css/
      styles.css         # lié depuis le HTML → inclus dans le bundle
    js/
      main.js            # lié depuis le HTML → inclus dans le bundle
      counter.ts         # importé par main.js → également dans le bundle
    lib/
      posts.js           # utilisé uniquement dans data() → jamais livré
  public/
    favicon.ico          # copié tel quel

Lier des ressources depuis le HTML

Référencez les fichiers avec des chemins relatifs à la racine. Un <script type="module"> ou un <link rel="stylesheet"> est ce qui indique à sitelo d’inclure ce fichier dans le build :

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

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

Ce que Vite compile

.js / .ts / .jsx / .tsx — regroupés en modules ES, TypeScript retiré, imports intégrés
.css — traité et minifié ; les @import et les références url() relatives sont résolus
Tout ce qui est importé depuis une entrée référencée (comme le counter.ts ci-dessus) rejoint le même bundle
Dans sitelo (dev), ces mêmes URL passent par le pipeline de transformation de Vite — aucun build séparé pour essayer TypeScript ou CSS

Besoin de PostCSS, Sass ou d’autres plugins Vite ? Ajoutez-les sous vite dans sitelo.config.js.

Zéro JS par défaut

Le code non référencé n’est pas émis. Un utilitaire importé uniquement depuis data() ou generateStaticParams reste hors de dist/ — les secrets serveur ne sont jamais livrés par accident.
Pas de <script> sur la page signifie pas de JavaScript client dans le build. Pour la plupart des sites, du HTML et du CSS statiques suffisent.
public/ est copié tel quel (favicons, robots.txt, images statiques que vous ne voulez pas hachées).
Les autres fichiers référencés (images, polices, vidéos, …) sont copiés dans dist/.

Validation des ressources manquantes

Un <script src> ou un href de feuille de style pointant vers un fichier absent de src/ comme de public/ fait échouer le build. Vous préférez un avertissement ?

export default {
  missingAssets: 'warn',
}