diff --git a/astro.config.mjs b/astro.config.mjs
index 29127e8..bd6cd9a 100644
--- a/astro.config.mjs
+++ b/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',
diff --git a/package.json b/package.json
index b656300..2f13226 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 17cf599..22ef2a1 100644
--- a/pnpm-lock.yaml
+++ b/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))
diff --git a/src/content/journal-entries/2024-11-19.md b/src/content/journal-entries/2024-11-19.mdx
similarity index 100%
rename from src/content/journal-entries/2024-11-19.md
rename to src/content/journal-entries/2024-11-19.mdx
diff --git a/src/content/journal-entries/2024-11-20.md b/src/content/journal-entries/2024-11-20.mdx
similarity index 100%
rename from src/content/journal-entries/2024-11-20.md
rename to src/content/journal-entries/2024-11-20.mdx
diff --git a/src/content/journal-entries/2024-11-21.md b/src/content/journal-entries/2024-11-21.mdx
similarity index 100%
rename from src/content/journal-entries/2024-11-21.md
rename to src/content/journal-entries/2024-11-21.mdx
diff --git a/src/content/journal-entries/2024-11-23.md b/src/content/journal-entries/2024-11-23.mdx
similarity index 65%
rename from src/content/journal-entries/2024-11-23.md
rename to src/content/journal-entries/2024-11-23.mdx
index 06d4690..55dd05f 100644
--- a/src/content/journal-entries/2024-11-23.md
+++ b/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 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.
```
diff --git a/src/content/journal-entries/2024-11-24.md b/src/content/journal-entries/2024-11-24.mdx
similarity index 66%
rename from src/content/journal-entries/2024-11-24.md
rename to src/content/journal-entries/2024-11-24.mdx
index f0c519d..498c26b 100644
--- a/src/content/journal-entries/2024-11-24.md
+++ b/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 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.
```
diff --git a/src/content/journal-entries/2024-12-01.mdx b/src/content/journal-entries/2024-12-01.mdx
new file mode 100644
index 0000000..567694f
--- /dev/null
+++ b/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
+
+
+ {journalEntry.data.title}
+
+
+
+```
+
+The `RegularText` component is a simple wrapper around `Text` from FullDev UI:
+
+```jsx
+import Text from "fulldev-ui/components/Text.astro";
+
+
+
+;
+```
+
+I had to create this wrapper as a separate component because the Astro syntax doesn't allow defining inline components like this:
+
+```jsx
+
+
+ {journalEntry.data.title}
+ (
+
+
+
+ ),
+ a: Link,
+ }}
+ />
+
+
+```
+
+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.
+```
diff --git a/src/pages/journal/RegularText.astro b/src/pages/journal/RegularText.astro
new file mode 100644
index 0000000..ca73abd
--- /dev/null
+++ b/src/pages/journal/RegularText.astro
@@ -0,0 +1,4 @@
+---
+import Text from 'fulldev-ui/components/Text.astro';
+---
+
\ No newline at end of file
diff --git a/src/pages/journal/[...slug].astro b/src/pages/journal/[...slug].astro
new file mode 100644
index 0000000..5c8d890
--- /dev/null
+++ b/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();
+---
+
+
+ {journalEntry.data.title}
+
+
+
\ No newline at end of file