Bye-bye Weeds! Digital Gardening with Astro & MDX.

A presentation at React Alicante 2023 in in Alicante, Spain by Kathleen McMahon

Bye-bye Weeds! Digital gardening with Astro and MDX — Kathleen McMahon — React Alicante

Bye-bye Weeds! Digital gardening with Astro and MDX — Kathleen McMahon — React Alicante

Gracias a todos. — React Alicante

Gracias a todos. — React Alicante

https://noti.st/resource11

https://noti.st/resource11

@resource11 Twitter | Instagram | GitHub

@resource11 Twitter | Instagram | GitHub

Kathleen McMahon | Engineer • Designer • Speaker

Kathleen McMahon | Engineer • Designer • Speaker

Cyclocross! [image] various pictures of me racing cyclocross

Cyclocross! [image] various pictures of me racing cyclocross

image: Me on a cyclocross bike, in Spam, Ninja Turtle, Nerds candy box, Medusa costumes

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-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 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: 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: 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: 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: 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, 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: 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: 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: 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: 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: 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.

image: Otis looking very cute as he lays upside down on my bed, gazing at me.

Northwestern Mutual

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.

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: Woman attempting to arrange 10 squirming kittens in a straight line, with varied success

Image: Gatsby and MDX logo

Image: Gatsby and MDX logo

Image: KathleenMcMahon.dev homepage

Image: KathleenMcMahon.dev homepage

A digital what?

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

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: Gatsby and MDX logo

image: ALL THE THINGS Hyperbole and a Half

image: ALL THE THINGS Hyperbole and a Half

Perfection is the enemy of done

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

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

There be weeds [image]: Two fluffy dandelion weeds in a green field

JavaScript is hard

JavaScript is hard

JavaScript is hard …maybe you should build a Squarespace site?

JavaScript is hard …maybe you should build a Squarespace site?

image: Judy Hopps from Zootopia, shakes her head in disgust

image: Judy Hopps from Zootopia, shakes her head in disgust

10 hours later…

10 hours later…

image: Judy Hopps from Zootopia, shakes her head in disgust

image: Judy Hopps from Zootopia, shakes her head in disgust

image: Shrimp and lime jello mold, plated with apple slices

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?"

"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?

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

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

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

Weed out the Complexity [image]: Gloved hand digging weeds out of a garden

image: Astro.build homepage

image: Astro.build homepage

Why Astro?

Why Astro?

Why Astro? [image] Astro documentation page

Why Astro? [image] Astro documentation page

MDX support

MDX support

PostCSS support

PostCSS support

Astro Islands

Astro Islands

Convert some components or all components

Convert some components or all components

I can try out different UI frameworks in Astro

I can try out different UI frameworks in Astro

MPA Architecture

MPA Architecture

Leaner configs

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-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-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 😀

image: side-by-side comparison — gatsby-browser.js 🙃 astro.config.mjs 😀

Till the soil [image] Person digging with a spade into the soil

Till the soil [image] Person digging with a spade into the soil

From React children to Astro slots

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

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

Add mulch [image]: Hands holding soil

From GraphQL to Content Collections

From GraphQL to Content Collections

image: GraphQL indexQuery

image: GraphQL indexQuery

image: GraphQL aboutQuery

image: GraphQL aboutQuery

image: GraphQL writeQuery

image: GraphQL writeQuery

image: Astro config.ts

image: Astro config.ts

Dynamically generating routes

Dynamically generating routes

image: […slug].astro file

image: […slug].astro file

Type-safe MDX with Zod.

Type-safe MDX with Zod.

Zod… say what?

Zod… say what?

Zod TypeScript-first schema validation with static type inference

Zod TypeScript-first schema validation with static type inference

Plant new starters [image] hand planting starters in soil

Plant new starters [image] hand planting starters in soil

< Image />

< Image />

image:assets

image:assets

 image: &lt;Image /&gt; example file

image: <Image /> example file

image: &lt;img /&gt; example file

image: <img /> example file

Stubborn Link Icon conversions

Stubborn Link Icon conversions

From Gatsby-links to Astro links

From Gatsby-links to Astro links

From ReactFontawesome to astro-iconify

From ReactFontawesome to astro-iconify

image: side-by-side comparison — Link.jsx Link.astro

image: side-by-side comparison — Link.jsx Link.astro

What I’ve learned

What I’ve learned

Big Lexus bows vs. Tiny kitten bows

Big Lexus bows vs. Tiny kitten bows

Schemas are tricky. So are dynamic imports… with images.

Schemas are tricky. So are dynamic imports… with images.

CSS load order is no joke.

CSS load order is no joke.

Clean up file cruft, or your Netlify deploys will fail

Clean up file cruft, or your Netlify deploys will fail

ViewTransitions are Tricky …and buggy

ViewTransitions are Tricky …and buggy

Demo

Demo

Everything Everywhere at Once

Everything Everywhere at Once

What components are still port over (yet)

What components are still port over (yet)

Card

Card

Custom MDX components

Custom MDX components

custom CodeBlock with react-live/ DisplayBox

custom CodeBlock with react-live/ DisplayBox

Thank you Astro team  @Bryceguy @Sarah @Elian @Sarah11918 @Erika @Tony-Sull @Kevin @Yan @Otterlord

Thank you Astro team @Bryceguy @Sarah @Elian @Sarah11918 @Erika @Tony-Sull @Kevin @Yan @Otterlord

Gracias. | @resource11

Gracias. | @resource11

@resource11 Twitter | Instagram | GitHub

@resource11 Twitter | Instagram | GitHub

Has your once-thriving digital garden become overgrown with weeds? Has your framework of choice changed from a suite of landscaping tools to a warehouse of industrial farming equipment? What if you’re three versions behind? Do you upgrade and continue with complexity, or choose a new stack that meets your static site needs?

This talk will teach you to weed out site complexity with Astro, SolidJS, and MDX. Pair this with accessibility best practices, and breathe new life into your digital garden.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on social media.