Bye-bye Weeds! Digital gardening with Astro and MDX — Kathleen McMahon — React Alicante
Gracias a todos. — React Alicante
https://noti.st/resource11
@resource11 Twitter | Instagram | GitHub
Kathleen McMahon | Engineer • Designer • Speaker
Cyclocross! [image] various pictures of me racing cyclocross
image: Me on a cyclocross bike, in Spam, Ninja Turtle, Nerds candy box, Medusa costumes
image: a wide-screen view of the colorful lamps and lighting strips adorning my home office desk and bookcases
image: A wide-planked boardwalk — with soft sand and sea grass surrounding its weathered wooden railing — leads toward the calm ocean during a cloudy afternoon low tide
image: A montage of sand dollars of various sizes and colors, next to a tiny and medium sand dollar in the palm of my hand.
image: Thor, resting on the windowsill of my kitchen window, enjoying the warm summer breeze and sunshine on his soft beige fur and dreamy blue eyes.
image: Otis — my silky black haus panther — nestled between my purple bed pillows, gazing at me with calm golden eyes.
image: A gathering of green aventurine, sodalite, rose quarts towers, and quarts diamond on the kitchen table
image: Otis, the black wonder cat, steps into the frame of my crystal collection
image: Otis' paws walk through my crystal arrangement on the kitchen table
image: grouping of citrine, amethyst, and celestite glowing in the sun-washed windowsill
image: Otis — sassy black cat — sits exactly on top of all my windowsill crystals, seeking attention.
image: In pure art director fashion, Thor sits distinctly on one windowsill sand dollar. Ready to provide his ultimate design judgement.
image: Thor looks up from the windowsill to the camera with a very satisfied look. His blue eyes gaze hypnotically my way as his pink nose points upward, whiskers pridefully twitching.
image: Otis looking very cute as he lays upside down on my bed, gazing at me.
Northwestern Mutual
Design Systems are ALWAYS the hotness [image]: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee.
image: Woman attempting to arrange 10 squirming kittens in a straight line, with varied success
Image: Gatsby and MDX logo
Image: KathleenMcMahon.dev homepage
A digital what?
What is a digital garden? [image]: Small potted plant next to a rake with caption, My blog is a digital garden, not a blog
Image: Gatsby and MDX logo
image: ALL THE THINGS Hyperbole and a Half
Perfection is the enemy of done
image: A Lexus with a big red bow juxtaposed next to a tiny floofy beige kitten with a red bow
There be weeds [image]: Two fluffy dandelion weeds in a green field
JavaScript is hard
JavaScript is hard …maybe you should build a Squarespace site?
image: Judy Hopps from Zootopia, shakes her head in disgust
10 hours later…
image: Judy Hopps from Zootopia, shakes her head in disgust
image: Shrimp and lime jello mold, plated with apple slices
"if you want a static site, why are you using a whole JavaScript framework to render it?"
Why use JSX to create HTML when you could just… use HTML?
I don't need a suite of combine machines. [image]: Large agricultural harvesting machines in a vast golden field
A hoe and rake will do. [image] Small rake, pronged fork and clippers in a modest garden
Weed out the Complexity [image]: Gloved hand digging weeds out of a garden
image: Astro.build homepage
Why Astro?
Why Astro? [image] Astro documentation page
MDX support
PostCSS support
Astro Islands
Convert some components or all components
I can try out different UI frameworks in Astro
MPA Architecture
Leaner configs
image: side-by-side comparison — gatsby-config.js 😀 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😀 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😀 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😶 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 🤔 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😐 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😑 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😐 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 🫤 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😬 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😳 astro.config.mjs 😀
image: side-by-side comparison — gatsby-node.js 🫣 astro.config.mjs 😀
image: side-by-side comparison — gatsby-node.js 🙄 astro.config.mjs 😀
image: side-by-side comparison — gatsby-browser.js 🙃 astro.config.mjs 😀
Till the soil [image] Person digging with a spade into the soil
From React children to Astro slots
image: side-by-side comparison — layout.js Layout.astro
image: side-by-side comparison — layout.js Layout.astro
image: side-by-side comparison — layout.js Layout.astro
image: side-by-side comparison — layout.js Layout.astro
Add mulch [image]: Hands holding soil
From GraphQL to Content Collections
image: GraphQL indexQuery
image: GraphQL aboutQuery
image: GraphQL writeQuery
image: Astro config.ts
Dynamically generating routes
image: […slug].astro file
Type-safe MDX with Zod.
Zod… say what?
Zod TypeScript-first schema validation with static type inference
Plant new starters [image] hand planting starters in soil
< Image />
image:assets
image: <Image /> example file
image: <img /> example file
Stubborn Link Icon conversions
From Gatsby-links to Astro links
From ReactFontawesome to astro-iconify
image: side-by-side comparison — Link.jsx Link.astro
What I’ve learned
Big Lexus bows vs. Tiny kitten bows
Schemas are tricky. So are dynamic imports… with images.
CSS load order is no joke.
Clean up file cruft, or your Netlify deploys will fail
ViewTransitions are Tricky …and buggy
Demo
Everything Everywhere at Once
What components are still port over (yet)
Card
Custom MDX components
custom CodeBlock with react-live/ DisplayBox
Thank you Astro team @Bryceguy @Sarah @Elian @Sarah11918 @Erika @Tony-Sull @Kevin @Yan @Otterlord
Gracias. | @resource11
@resource11 Twitter | Instagram | GitHub