Recursos e estilos

O sitelo assenta no Vite, por isso o JavaScript e o CSS de frontend são compilados automaticamente. Coloca scripts e estilos dentro de src/ (por exemplo src/js e src/css), liga-os a partir do teu HTML com URLs relativos à raiz, e o sitelo trata do resto: TypeScript, imports de CSS, empacotamento e minificação.

Estrutura do projeto

As páginas e os recursos partilham src/. Pastas como js/ e css/ são convenções, não requisitos — ao sitelo interessa o que o teu HTML referencia, não como se chamam as pastas.

my-site/
  src/
    index.ht.js          # página — devolve HTML
    css/
      styles.css         # ligado a partir do HTML → incluído no bundle
    js/
      main.js            # ligado a partir do HTML → incluído no bundle
      counter.ts         # importado por main.js → também no bundle
    lib/
      posts.js           # só usado em data() → nunca é publicado
  public/
    favicon.ico          # copiado tal como está

Ligar recursos a partir do HTML

Referencia os ficheiros com caminhos relativos à raiz. Um <script type="module"> ou um <link rel="stylesheet"> é o que diz ao sitelo para incluir esse ficheiro na compilação:

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

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

O que o Vite compila

.js / .ts / .jsx / .tsx — empacotados como módulos ES, com o TypeScript removido e os imports incorporados
.css — processado e minificado; os @import e as referências url() relativas são resolvidos
Tudo o que for importado a partir de um ponto de entrada referenciado (como o counter.ts acima) entra no mesmo bundle
Em sitelo (dev), esses mesmos URLs passam pelo pipeline de transformação do Vite — não é preciso uma compilação à parte para experimentar TypeScript ou CSS

Precisas de PostCSS, Sass ou de outros plugins do Vite? Acrescenta-os sob vite em sitelo.config.js.

Zero JS por omissão

O código sem referências não é emitido. Um auxiliar importado apenas a partir de data() ou generateStaticParams fica fora de dist/ — os segredos de servidor nunca são publicados por acidente.
Sem <script> na página, a compilação não leva JavaScript de cliente. Para a maioria dos sites, HTML e CSS estáticos chegam.
public/ é copiado tal como está (favicons, robots.txt, imagens estáticas a que não queres pôr hash).
Os restantes ficheiros referenciados (imagens, tipos de letra, vídeos, …) são copiados para dist/.

Validação de recursos em falta

Um <script src> ou um href de folha de estilos que aponte para um ficheiro inexistente, quer em src/ quer em public/, faz falhar a compilação. Preferes um aviso?

export default {
  missingAssets: 'warn',
}