Bye-bye, weeds! Digital Gardening with Astro, SolidJS & MDX
summary
Migrates a four‑page MDX site from Gatsby (v2→v5 pain, ~10 hours spent) to Astro, keeping some React components and evaluating SolidJS for islanded interactivity; implements Astro content collections with Zod for front‑matter type safety, uses the new Astro image optimization asset component for automatic sizes/decoding, and converts header/footer to Astro components. Discovers CSS load‑order and stylesheet collisions, and that view transitions buggy can fail to unload previous stylesheets, so disables it for stability while the MPA build serves minimal JS.
AI-written summary · about
chapters (7)
- 0:00Introduction and welcome
- 3:58What is a digital garden
- 8:33Why switch from Gatsby to Astro
- 13:58Astro config and setup
- 20:19CSS and view transitions demo
- 27:27Testing view transitions
- 30:38Wrap-up and SolidJS notes
related talks
36mBye bye, weeds! Digital Gardening with Astro, SolidJS, & MDX
26mAll Things Astro
21mAll Things Astro
17mAstro: Revolutionizing Modern Web Development
24mAstro - Less JavaScript, Faster website - JSWORLD2023
32mZero-JavaScript Web Development with Astro
22mBuilding faster content-driven sites
30mGoing Full-Stack with Astro