Risorse e stili

sitelo è costruito su Vite, quindi JavaScript e CSS di frontend vengono compilati automaticamente. Metti script e fogli di stile sotto src/ (per esempio src/js e src/css), collegali dal tuo HTML con URL relativi alla radice, e sitelo pensa al resto — TypeScript, import CSS, bundling e minificazione.

Struttura del progetto

Pagine e risorse condividono src/. Cartelle come js/ e css/ sono convenzioni, non obblighi — a sitelo interessa ciò che il tuo HTML referenzia, non i nomi delle cartelle.

my-site/
  src/
    index.ht.js          # pagina — restituisce HTML
    css/
      styles.css         # collegata dall’HTML → nel bundle
    js/
      main.js            # collegata dall’HTML → nel bundle
      counter.ts         # importata da main.js → anch’essa nel bundle
    lib/
      posts.js           # usata solo in data() → non viene mai pubblicata
  public/
    favicon.ico          # copiata così com’è

Collegare le risorse dall’HTML

Referenzia i file con percorsi relativi alla radice. Uno <script type="module"> o un <link rel="stylesheet"> è ciò che dice a sitelo di includere quel file nella build:

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

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

Cosa compila Vite

• .js / .ts / .jsx / .tsx — messi nel bundle come moduli ES, TypeScript rimosso, import incorporati
• .css — elaborato e minificato; @import e i riferimenti url() relativi vengono risolti
• Tutto ciò che è importato da un punto di ingresso referenziato (come counter.ts qui sopra) viene tirato dentro lo stesso bundle
• Con sitelo (sviluppo) gli stessi URL passano dalla pipeline di trasformazione di Vite — nessuna build separata per provare TypeScript o CSS

Ti servono PostCSS, Sass o altri plugin di Vite? Aggiungili sotto vite in sitelo.config.js.

Zero JS per impostazione predefinita

• Il codice non referenziato non viene prodotto. Un helper importato solo da data() o da generateStaticParams resta fuori da dist/ — i segreti destinati al server non finiscono mai online per sbaglio.
• Nessuno <script> nella pagina significa nessun JavaScript client nella build. HTML statico e CSS bastano per la maggior parte dei siti.
• public/ viene copiata pari pari (favicon, robots.txt, immagini statiche a cui non vuoi l’hash).
• Gli altri file referenziati (immagini, font, video, …) vengono copiati in dist/.

Validazione delle risorse mancanti

Uno <script src> o un href di foglio di stile che punta a un file che non esiste né in src/ né in public/ fa fallire la build. Preferisci un avviso?

export default {
  missingAssets: 'warn',
}