use MDX to use FullDev UI in Markdown
Avraham Sakal
5 months ago
parent
626d94694c
commit
345a18729a
@ -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.
|
||||||
|
```
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
import Text from 'fulldev-ui/components/Text.astro';
|
||||||
|
---
|
||||||
|
<Text contrast={true}><slot /></Text>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
---
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
import Heading from 'fulldev-ui/components/Heading.astro';
|
||||||
|
import Link from 'fulldev-ui/components/Link.astro';
|
||||||
|
import RegularText from './RegularText.astro';
|
||||||
|
|
||||||
|
// 1. Generate a new path for every collection entry
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const journalEntries = await getCollection('journal-entries');
|
||||||
|
return journalEntries.map(journalEntry => ({
|
||||||
|
params: { slug: journalEntry.slug }, props: { journalEntry },
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. For your template, you can get the entry directly from the prop
|
||||||
|
const { journalEntry } = Astro.props;
|
||||||
|
const { Content } = await journalEntry.render();
|
||||||
|
---
|
||||||
|
<Layout title={journalEntry.data.title}>
|
||||||
|
<main>
|
||||||
|
<Heading>{journalEntry.data.title}</Heading>
|
||||||
|
<Content components={{
|
||||||
|
p: RegularText,
|
||||||
|
a: Link,
|
||||||
|
}} />
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
Loading…
Reference in New Issue