use MDX to use FullDev UI in Markdown
This commit is contained in:
Avraham Sakal
+7
-7
@@ -1,9 +1,9 @@
|
||||
---
|
||||
title: "@astrojs/node Build Error"
|
||||
date: 2024-11-23
|
||||
tags: ["astro"]
|
||||
category: "Astro"
|
||||
description: "Always prefix native imports with `node:`, even in dependencies. If a dependency doesn't do it, adjust your build-step to do it for you."
|
||||
date: 2024-11-23
|
||||
---
|
||||
|
||||
Today's entry is about this very site.
|
||||
@@ -31,13 +31,13 @@ It ran fine in dev mode (`pnpm run dev`), but when I tried to build it (`pnpm ru
|
||||
```
|
||||
23:29:44 [ERROR] [vite] x Build failed in 331ms
|
||||
[commonjs--resolver] Failed to resolve entry for package "fs". The package may have incorrect main/module/exports specified in its package.json.
|
||||
file: /home/avraham/sakal.us/blog-astro/node_modules/.pnpm/send@0.19.1/node_modules/send/index.js
|
||||
file: .../blog-astro/node_modules/.pnpm/send@0.19.1/node_modules/send/index.js
|
||||
Stack trace:
|
||||
at packageEntryFailure (file:///home/avraham/sakal.us/blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46637:15)
|
||||
at tryNodeResolve (file:///home/avraham/sakal.us/blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46450:16)
|
||||
at Object.handler (file:///home/avraham/sakal.us/blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65653:15)
|
||||
at async PluginDriver.hookFirstAndGetPlugin (file:///home/avraham/sakal.us/blog-astro/node_modules/.pnpm/rollup@4.27.2/node_modules/rollup/dist/es/shared/node-entry.js:21099:28)
|
||||
at async ModuleLoader.resolveId (file:///home/avraham/sakal.us/blog-astro/node_modules/.pnpm/rollup@4.27.2/node_modules/rollup/dist/es/shared/node-entry.js:20132:15)
|
||||
at packageEntryFailure (file://.../blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46637:15)
|
||||
at tryNodeResolve (file://.../blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46450:16)
|
||||
at Object.handler (file://.../blog-astro/node_modules/.pnpm/vite@5.4.11_sass@1.81.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65653:15)
|
||||
at async PluginDriver.hookFirstAndGetPlugin (file://.../blog-astro/node_modules/.pnpm/rollup@4.27.2/node_modules/rollup/dist/es/shared/node-entry.js:21099:28)
|
||||
at async ModuleLoader.resolveId (file://.../blog-astro/node_modules/.pnpm/rollup@4.27.2/node_modules/rollup/dist/es/shared/node-entry.js:20132:15)
|
||||
ELIFECYCLE Command failed with exit code 1.
|
||||
```
|
||||
|
||||
+6
-6
@@ -20,13 +20,13 @@ end of the stream or a document separator is expected
|
||||
See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.
|
||||
|
||||
Location:
|
||||
/home/avraham/sakal.us/blog-astro/src/content/journal-entries/2024-11-23.md:1:7
|
||||
.../blog-astro/src/content/journal-entries/2024-11-23.md:1:7
|
||||
Stack trace:
|
||||
at generateError (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:167:10)
|
||||
at readDocument (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:1545:5)
|
||||
at load (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:1614:19)
|
||||
at module.exports (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/gray-matter@4.0.3/node_modules/gray-matter/lib/parse.js:12:17)
|
||||
at matter (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/gray-matter@4.0.3/node_modules/gray-matter/index.js:50:10)
|
||||
at generateError (.../blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:167:10)
|
||||
at readDocument (.../blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:1545:5)
|
||||
at load (.../blog-astro/node_modules/.pnpm/js-yaml@3.14.1/node_modules/js-yaml/lib/js-yaml/loader.js:1614:19)
|
||||
at module.exports (.../blog-astro/node_modules/.pnpm/gray-matter@4.0.3/node_modules/gray-matter/lib/parse.js:12:17)
|
||||
at matter (.../blog-astro/node_modules/.pnpm/gray-matter@4.0.3/node_modules/gray-matter/index.js:50:10)
|
||||
ELIFECYCLE Command failed with exit code 1.
|
||||
```
|
||||
|
||||
@@ -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.
|
||||
```
|
||||
Reference in New Issue
Block a user