Switching to MDX

Wanted to use a more modular method to import images in blog articles. Found with general .md files text was easy but images were a bit more difficult to style. With .mdx can directly import the image in as .js

Using Image Components in MDX

This post acts as a template for how to utilise multiple methods to inject images into MDX formatted documents, utilising placehold.co

Full Width Image

Inline Image

Float Left with Text

This text wraps around the floated image. You can see how the image is positioned to the left and the text flows around it. This is great for creating more dynamic layouts in your blog posts.

Captioned Image

Image Pair

Gallery

Pull Quote

“A charming pull quote.”

Initial Colour Palette

Before & After

Regular Markdown Still Works

You can still use regular markdown alongside the components:

• Bold text and italic text
• Lists work normally
• Links function as expected
• Code blocks work too:

console.log("Hello, MDX!");

Benefits of MDX

1. Component Reusability: Import and use any component in your blog posts
2. Interactive Content: Add interactive elements to your posts
3. Consistent Styling: Use your design system components
4. Better Organization: Keep your content and presentation logic separate

Now you can create rich, interactive blog posts with custom components while maintaining the simplicity of markdown!