pagina di destinazione con Astro 5, TypeScript e zero framework CSS
Quale problema risolve
Avevo bisogno di una landing page per xarop.com: veloce, accessibile, multilingue e facile da mantenere. Il sito principale (web.xarop.com) è un blog/portfolio generato con Node.js + Markdown, ma non è una landing. Avevo bisogno di qualcosa con più controllo visivo e prestazioni di primo livello.
Perché Astro
Astro 5 compila in HTML statico per impostazione predefinita — zero JavaScript nel client se non necessario. Consente di combinare componenti .astro, TypeScript e CSS senza alcun overhead di runtime. Il routing è basato su file, il che rende l'internazionalizzazione (CA / ES / EN) diretta.
Il risultato: ~10 KB di JavaScript, tutto opzionale e progressivo (IntersectionObserver per il scroll reveal, toggle del tema, cambio sapore).
Stack
- Astro 5 — build e routing
- TypeScript — tutta la logica dei componenti e della configurazione
- Vanilla CSS — design token, tavolozze di colore (flavor), modalità scura/chiara, senza framework
- Asap — tipografia auto-hosting (OFL), nessuna chiamata esterna
- Google Analytics 4 — integrato via variabile d'ambiente, opzionale
- Cloudflare Pages / Vercel / Netlify — deploy statico, configurazione per ENV
Caratteristiche
- 7 sapori di tavolozza persistiti in
localStorage - Modalità scura/chiara: automatica per
prefers-color-scheme+ toggle manuale - Multilingue: Catalano (predefinito), Spagnolo, Inglese via routing di Astro
- Navigazione sticky con hamburger mobile, switcher di lingua e sapore
- Scroll reveal senza dipendenze esterne —
IntersectionObserverpuro - Accessibile: focus ring,
prefers-reduced-motion, semantica HTML - MIT per il codice; SIL OFL per la tipografia
Distribuzione del codice
CSS 37% · TypeScript 34% · Astro 27% · PHP 1% · JS 1%
xarop.com → · Codice su GitHub →