53 lines
1.2 KiB
Plaintext
53 lines
1.2 KiB
Plaintext
---
|
|
title: "Astro Sphere: Writing MDX"
|
|
summary: "Lorem ipsum dolor sit amet"
|
|
date: "Mar 12 2024"
|
|
draft: false
|
|
tags:
|
|
- Tutorial
|
|
- Astro
|
|
- Astro Sphere
|
|
- Markdown
|
|
- MDX
|
|
---
|
|
|
|
MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to [mix JavaScript and UI Components into your Markdown content](https://docs.astro.build/en/guides/markdown-content/#mdx-features) for things like interactive charts or alerts.
|
|
|
|
If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.
|
|
|
|
## An astro component with props
|
|
|
|
```
|
|
// Imported from relative path (same dir as markdown file)
|
|
import MyComponent from "./MyComponent.astro"
|
|
|
|
<MyComponent name="You">
|
|
Welcome to MDX
|
|
</MyComponent>
|
|
```
|
|
|
|
import MyComponent from "./MyComponent.astro"
|
|
|
|
<MyComponent name="You">
|
|
Welcome to MDX
|
|
</MyComponent>
|
|
|
|
|
|
|
|
## An interactive Solid Js component
|
|
|
|
```
|
|
// Imported from components directory (src/components)
|
|
import MyComponent from "@components/Counter"
|
|
|
|
// Don't forget the astro client:load directive
|
|
<Counter client:load />
|
|
```
|
|
|
|
import Counter from "@components/Counter"
|
|
|
|
<Counter client:load />
|
|
|
|
<br/>
|
|
<br/>
|
|
<br/> |