Getting FullDev UI to Work with MDX in Astro

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 styling for headings, text, links, etc. because the rest of the site is using FullDev UI .

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:

<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:

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:

<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/[email protected]/node_modules/esbuild/lib/main.js:1472:15)
    [...] See full stack trace in the browser, or rerun with --verbose.