Recursos y estilos

sitelo está construido sobre Vite, así que el JavaScript y el CSS de frontend se compilan automáticamente. Pon scripts y estilos dentro de src/ (por ejemplo src/js y src/css), enlázalos desde tu HTML con URLs relativas a la raíz, y sitelo se encarga del resto: TypeScript, imports de CSS, empaquetado y minificación.

Estructura del proyecto

Las páginas y los recursos comparten src/. Carpetas como js/ y css/ son convenciones, no requisitos: a sitelo le importa lo que referencia tu HTML, no los nombres de las carpetas.

my-site/
  src/
    index.ht.js          # página — devuelve HTML
    css/
      styles.css         # enlazado desde el HTML → empaquetado
    js/
      main.js            # enlazado desde el HTML → empaquetado
      counter.ts         # importado por main.js → también empaquetado
    lib/
      posts.js           # solo se usa en data() → nunca se publica
  public/
    favicon.ico          # copiado tal cual

Enlaza recursos desde el HTML

Referencia los archivos con rutas relativas a la raíz. Un <script type="module"> o un <link rel="stylesheet"> es lo que le dice a sitelo que incluya ese archivo en la compilación:

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

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

Qué compila Vite

.js / .ts / .jsx / .tsx — empaquetados como módulos ES, con TypeScript eliminado y los imports incorporados
.css — procesado y minificado; se resuelven los @import y las referencias url() relativas
Todo lo que se importe desde una entrada referenciada (como el counter.ts de arriba) entra en el mismo bundle
En sitelo (dev), esas mismas URLs pasan por el pipeline de transformación de Vite — no hace falta compilar aparte para probar TypeScript o CSS

¿Necesitas PostCSS, Sass u otros plugins de Vite? Añádelos bajo vite en sitelo.config.js.

Cero JS por defecto

El código sin referenciar no se emite. Un ayudante que solo se importa desde data() o generateStaticParams se queda fuera de dist/ — los secretos de servidor nunca se publican por accidente.
Si la página no tiene ningún <script>, la compilación no lleva JavaScript de cliente. Para la mayoría de sitios, HTML y CSS estáticos son suficiente.
public/ se copia tal cual (favicons, robots.txt, imágenes estáticas a las que no quieras poner hash).
El resto de archivos referenciados (imágenes, tipografías, vídeos, …) se copian a dist/.

Validación de recursos que faltan

Un <script src> o un href de hoja de estilos que apunte a un archivo que no existe ni en src/ ni en public/ hace fallar la compilación. ¿Prefieres un aviso?

export default {
  missingAssets: 'warn',
}