landningssida med Astro 5, TypeScript och zero frameworks CSS
Vilket problem löste jag
Jag behövde en landningssida för xarop.com: snabb, tillgänglig, flerspråkig och lätt att underhålla. Huvudwebbplatsen (web.xarop.com) är en blogg/portfolio genererad med Node.js + Markdown, men det är ingen landing page. Jag behövde något med större visuell kontroll och förstklassig prestanda.
Varför Astro
Astro 5 kompilerar till statisk HTML som standard — noll JavaScript på klienten om du inte behöver det. Det låter dig blanda .astro-komponenter, TypeScript och CSS utan någon runtime-overhead. Routningen är filbaserad, vilket gör internationalisering (CA / ES / EN) enkel.
Resultatet: ~10 KB JavaScript, allt valfritt och progressivt (IntersectionObserver för scroll reveal, temaväljar, smakväljar).
Stack
- Astro 5 — build och routing
- TypeScript — all komponentlogik och konfiguration
- Vanilla CSS — designtokens, färgpaletter (flavors), mörkt/ljust läge, utan ramverk
- Asap — typografi med egen värd (OFL), inga externa anrop
- Google Analytics 4 — integrerat via miljövariabel, valfritt
- Cloudflare Pages / Vercel / Netlify — statisk distribution, ENV-konfiguration
Funktioner
- 7 smaker i paletten sparade i
localStorage - Mörkt/ljust läge: automatiskt enligt
prefers-color-scheme+ manuell växling - Flerspråkigt: Katalanska (standard), Spanska, Engelska via Astro-routing
- Sticky-navigation med mobil-hamburgermeny, språk- och smakväxlare
- Scroll reveal utan externa beroenden — ren
IntersectionObserver - Tillgängligt: fokusringar,
prefers-reduced-motion, HTML-semantik - MIT för kod; SIL OFL för typografi
Kodfördelning
CSS 37% · TypeScript 34% · Astro 27% · PHP 1% · JS 1%