Migrer un portfolio interactif vers Astro 5

Astro 5 apporte le Content Layer API, un nouveau système de gestion de contenu qui remplace l’ancien type: 'content' par des loaders flexibles comme glob().

Pourquoi Astro ?

Le principal avantage : le zero-JS par défaut. Pour un portfolio avec des effets Three.js lourds, ne charger JavaScript que là où c’est nécessaire fait toute la différence en performance.

Content Collections en pratique

Le nouveau content.config.ts à la racine de src/ simplifie la validation du frontmatter avec Zod :

const blog = defineCollection({
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/blog" }),
  schema: z.object({ title: z.string(), date: z.coerce.date() })
});

View Transitions

Avec <ClientRouter />, les navigations entre pages deviennent fluides sans recharger le DOM complet. Combiné avec transition:persist, le canvas Three.js survit aux changements de page.