This commit is contained in:
2025-06-08 20:07:38 +09:00
parent 3b2966ebe2
commit a372bb62c7
2479 changed files with 1059113 additions and 1057157 deletions

View File

@@ -1,16 +1,16 @@
---
type Props = {
name: string
}
const { name } = Astro.props
---
<div class="border p-4 bg-yellow-100 text-black">
<div>
Hello,
<span class="font-semibold">
{name}!!!
</span>
</div>
<slot/>
---
type Props = {
name: string
}
const { name } = Astro.props
---
<div class="border p-4 bg-yellow-100 text-black">
<div>
Hello,
<span class="font-semibold">
{name}!!!
</span>
</div>
<slot/>
</div>

View File

@@ -1,53 +1,53 @@
---
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/>
---
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/>