use MDX to use FullDev UI in Markdown

src/content/journal-entries/2024-12-01.mdx

@@ -0,0 +1,64 @@
+---
+title: "Getting FullDev UI to Work with MDX in Astro"
+tags: ["astro", "fulldev-ui"]
+category: "Astro"
+description: "I'm using MDX in my Astro blog, and I want to use FullDev UI's components in it."
+date: 2024-12-01
+---
+
+I wanted to keep the moving parts of this blog to a minimum, so I wanted to use plain Markdown for the content. But, I also wanted to use the [FullDev UI](https://fulldev.dev) styling for headings, text, links, etc. because the rest of the site is using [FullDev UI](https://fulldev.dev).
+
+So, I had to add the MDX integration to the blog. This allowed me to override which components to used for each Markdown element. So far, I've only overridden the `p` and `a` components:
+
+```jsx
+<Layout title={journalEntry.data.title}>
+  <main>
+    <Heading>{journalEntry.data.title}</Heading>
+    <Content
+      components={{
+        p: RegularText,
+        a: Link,
+      }}
+    />
+  </main>
+</Layout>
+```
+
+The `RegularText` component is a simple wrapper around `Text` from FullDev UI:
+
+```jsx
+import Text from "fulldev-ui/components/Text.astro";
+
+<Text contrast={true}>
+  <slot />
+</Text>;
+```
+
+I had to create this wrapper as a separate component because the Astro syntax doesn't allow defining inline components like this:
+
+```jsx
+<Layout title={journalEntry.data.title}>
+  <main>
+    <Heading>{journalEntry.data.title}</Heading>
+    <Content
+      components={{
+        p: () => (
+          <Text contrast={true}>
+            <slot />
+          </Text>
+        ),
+        a: Link,
+      }}
+    />
+  </main>
+</Layout>
+```
+
+In that case it gives a build error:
+
+```
+15:06:29 [ERROR] Expected ">" but found "contrast"
+  Stack trace:
+    at failureErrorWithLog (.../blog-astro/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1472:15)
+    [...] See full stack trace in the browser, or rerun with --verbose.
+```