070500

content/blog/05-astro-sphere-writing-mdx/MyComponent.astro

@@ -0,0 +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/>
+</div>

content/blog/05-astro-sphere-writing-mdx/index.mdx

@@ -0,0 +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/>
+<br/>