MDX Integration

npm install @astrojs/mdx

import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [
    mdx(),
    // ... other integrations
  ],
});

---
title: "Interactive Blog Post"
description: "Example MDX content"
pubDate: 2026-03-05
draft: false
---

import CallToAction from '@/components/CallToAction.astro';

# Welcome to My Post

This is regular Markdown content.

<CallToAction 
  title="Get Started" 
  buttonText="Learn More" 
  href="/getting-help" 
/>

More Markdown content here...

import Hero from '@/components/Hero.astro';
import Feature from '@/components/Feature.astro';

<Hero title="Amazing Feature" />

## Features

<Feature icon="check" text="Fast Performance" />
<Feature icon="shield" text="Secure by Default" />

import Counter from '@/components/Counter.jsx';

Try our interactive counter:

<Counter client:load initialCount={0} />

import Card from '@/components/Card.astro';

<Card 
  title="Card Title"
  description="Card description"
  image="/img/card.jpg"
  link="/learn-more"
/>

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

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

export const collections = { blog };

---
// src/components/Note.astro
interface Props {
  type?: 'info' | 'warning' | 'success';
}

const { type = 'info' } = Astro.props;

const styles = {
  info: 'bg-blue-50 border-blue-200 text-blue-900',
  warning: 'bg-yellow-50 border-yellow-200 text-yellow-900',
  success: 'bg-green-50 border-green-200 text-green-900',
};
---

<div class={`border-l-4 p-4 ${styles[type]}`}>
  <slot />
</div>

import Note from '@/components/Note.astro';

<Note type="warning">
This is an important warning message.
</Note>

<Note type="success">
Operation completed successfully!
</Note>

# Heading 1
## Heading 2
### Heading 3

**Bold text** and *italic text*

- Unordered list
- Another item

1. Ordered list
2. Second item

[Link text](https://example.com)

![Alt text](/image.jpg)

`inline code`

```javascript
// Code block
const x = 10;

### Tables

```mdx
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6   |

> This is a blockquote.
> It can span multiple lines.

export const price = 199;
export const discount = 0.2;
export const finalPrice = price * (1 - discount);

Original price: €{price}
Discount: {discount * 100}%
**Final price: €{finalPrice}**

import Callout from '@/components/Callout.astro';

export const showPromo = true;

{showPromo && (
  <Callout type="success">
    Special promotion: 20% off!
  </Callout>
)}

import Feature from '@/components/Feature.astro';

export const features = [
  { icon: 'check', text: 'Fast' },
  { icon: 'shield', text: 'Secure' },
  { icon: 'code', text: 'Modern' },
];

<div class="grid grid-cols-3 gap-4">
  {features.map(feature => (
    <Feature icon={feature.icon} text={feature.text} />
  ))}
</div>

---
layout: '@/layouts/BlogPost.astro'
title: "My Post"
---

Content here...

---
// src/pages/blog/[...slug].astro
import { getEntry } from 'astro:content';
import BlogLayout from '@/layouts/BlogPost.astro';

const entry = await getEntry('blog', Astro.params.slug);
const { Content } = await entry.render();
---

<BlogLayout title={entry.data.title}>
  <Content />
</BlogLayout>

---
// Layout component
---

<article class="prose prose-lg max-w-none">
  <slot />
</article>

<style is:global>
  .prose h2 {
    @apply text-3xl font-bold mt-8 mb-4;
  }
  
  .prose p {
    @apply text-gray-700 leading-relaxed mb-4;
  }
  
  .prose a {
    @apply text-primary hover:underline;
  }
</style>

import styled from '@/components/StyledDiv.astro';

<div class="custom-content">
  # Styled Heading
  
  Content with custom styles.
</div>

<style>
  .custom-content {
    background: linear-gradient(to right, #f0f0f0, #ffffff);
    padding: 2rem;
    border-radius: 0.5rem;
  }
</style>

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');

### Supported Languages

- JavaScript/TypeScript
- HTML/CSS
- Python
- Bash/Shell
- JSON/YAML
- And many more...

## Best Practices

### Component Organization

### Import Aliases

Use `@/` alias for cleaner imports:

```mdx
import Component from '@/components/mdx/Component.astro';

import HeavyComponent from '@/components/Heavy.jsx';

<HeavyComponent client:visible />