use MDX to use FullDev UI in Markdown

astro.config.mjs

@@ -3,6 +3,7 @@ import { defineConfig } from "astro/config";
 import fulldev from "fulldev-ui/integration";
 import node from "@astrojs/node";
 import UnoCSS from "unocss/astro";
+import mdx from "@astrojs/mdx";
 // import { createRequire } from "node:module";
 
 // const require = createRequire(import.meta.url);
@@ -17,8 +18,20 @@ export default defineConfig({
   }),
 
   integrations: [
+    mdx(),
     UnoCSS({
       // injectReset: true, // or a path to the reset file
+      // preflights: [
+      //   {
+      //     getCSS: ({ theme }) => `
+      //       * {
+      //         color: ${theme.colors.gray?.[200] ?? "#ccc"};
+      //         padding: 0;
+      //         margin: 0;
+      //       }
+      //     `,
+      //   },
+      // ],
     }),
     fulldev({
       // css: '/src/css/custom.css',

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^3.1.9",
     "@astrojs/node": "^8.3.4",
     "astro": "^4.16.13",
     "fulldev-ui": "^0.4.33",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@astrojs/check':
         specifier: ^0.9.4
         version: 0.9.4(typescript@5.6.3)
+      '@astrojs/mdx':
+        specifier: ^3.1.9
+        version: 3.1.9(astro@4.16.13(rollup@4.27.2)(sass@1.81.0)(typescript@5.6.3))
       '@astrojs/node':
         specifier: ^8.3.4
         version: 8.3.4(astro@4.16.13(rollup@4.27.2)(sass@1.81.0)(typescript@5.6.3))

src/content/journal-entries/2024-11-23.mdx

@@ -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 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:///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 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:///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 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:///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 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:///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 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.
 ```
 

src/content/journal-entries/2024-11-24.mdx

@@ -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 generateError (.../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 readDocument (.../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 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 (/home/avraham/sakal.us/blog-astro/node_modules/.pnpm/gray-matter@4.0.3/node_modules/gray-matter/lib/parse.js:12:17)
+    at module.exports (.../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 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.
 ```
 

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.
+```

src/pages/journal/RegularText.astro

@@ -0,0 +1,4 @@
+---
+import Text from 'fulldev-ui/components/Text.astro';
+---
+<Text contrast={true}><slot /></Text>

src/pages/journal/[...slug].astro

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