diff --git a/examples/with-markdoc/src/components/Marquee.astro b/examples/with-markdoc/src/components/Marquee.astro
new file mode 100644
index 000000000000..3e35d1566192
--- /dev/null
+++ b/examples/with-markdoc/src/components/Marquee.astro
@@ -0,0 +1,7 @@
+
+
+
diff --git a/examples/with-markdoc/src/components/test.mdoc b/examples/with-markdoc/src/components/test.mdoc
index 33ab897d26d3..60e77b1c4e29 100644
--- a/examples/with-markdoc/src/components/test.mdoc
+++ b/examples/with-markdoc/src/components/test.mdoc
@@ -1,6 +1,6 @@
# Hey there
-This is a test file?
+Look at this table! Built-in to Markdoc, neat.
{% table %}
* Heading 1
@@ -15,14 +15,12 @@ This is a test file?
{% if $shouldMarquee %}
{% mq direction="right" %}
-Testing!
+Im a marquee!
{% /mq %}
{% /if %}
{% link href=$href %}Link{% /link %}
-Some `inline code` should help
-
```js
const testing = true;
function further() {
diff --git a/examples/with-markdoc/src/markdoc.config.ts b/examples/with-markdoc/src/markdoc.config.ts
new file mode 100644
index 000000000000..2d6e3d6cb099
--- /dev/null
+++ b/examples/with-markdoc/src/markdoc.config.ts
@@ -0,0 +1,30 @@
+export default {
+ transform: {
+ variables: {
+ shouldMarquee: true,
+ href: 'https://astro.build',
+ },
+ tags: {
+ mq: {
+ render: 'marquee',
+ attributes: {
+ direction: {
+ type: String,
+ default: 'left',
+ matches: ['left', 'right', 'up', 'down'],
+ errorLevel: 'critical',
+ },
+ },
+ },
+ link: {
+ render: 'a',
+ attributes: {
+ href: {
+ type: String,
+ required: true,
+ },
+ },
+ },
+ },
+ },
+};
diff --git a/examples/with-markdoc/src/pages/index.astro b/examples/with-markdoc/src/pages/index.astro
index 59a5ef7bc463..6b423317c66b 100644
--- a/examples/with-markdoc/src/pages/index.astro
+++ b/examples/with-markdoc/src/pages/index.astro
@@ -1,52 +1,10 @@
---
-import { body } from '../components/test.mdoc';
import { Markdoc } from '@astrojs/markdoc';
import RenderMarkdoc from '../renderer/RenderMarkdoc.astro';
-import RedP from '../components/RedP.astro';
-import { Code } from 'astro/components';
-import { Tag } from '@markdoc/markdoc';
-import { ComponentRenderer } from '../renderer/astroNode';
-
-const parsed = Markdoc.parse(body);
-const content = Markdoc.transform(parsed, {
- variables: {
- shouldMarquee: true,
- href: 'https://astro.build',
- },
- tags: {
- mq: {
- render: 'marquee',
- attributes: {
- direction: {
- type: String,
- default: 'left',
- matches: ['left', 'right', 'up', 'down'],
- errorLevel: 'critical',
- },
- },
- },
- link: {
- render: 'a',
- attributes: {
- href: {
- type: String,
- required: true,
- },
- },
- },
- },
-});
-const code: ComponentRenderer = {
- component: Code,
- props({ attributes, getTreeNode }) {
- return {
- ...attributes,
- lang: attributes.lang ?? attributes['data-language'],
- code: attributes.code ?? Markdoc.renderers.html(getTreeNode().children),
- };
- },
-};
+import { getTransformed } from '../components/test.mdoc';
+import { Code } from 'astro/components';
+import Marquee from '../components/Marquee.astro';
---
@@ -61,11 +19,19 @@ const code: ComponentRenderer = {
Astro
diff --git a/packages/integrations/markdoc/src/index.ts b/packages/integrations/markdoc/src/index.ts
index 676dcb0373c0..2ea2e862c228 100644
--- a/packages/integrations/markdoc/src/index.ts
+++ b/packages/integrations/markdoc/src/index.ts
@@ -9,6 +9,7 @@ export default function markdoc(partialOptions: {} = {}): AstroIntegration {
'astro:config:setup': async ({ updateConfig, config, addPageExtension, command }: any) => {
addPageExtension('.mdoc');
console.log('Markdoc working!');
+ const markdocConfigUrl = new URL('./markdoc.config.ts', config.srcDir);
const viteConfig: InlineConfig = {
plugins: [
@@ -16,7 +17,17 @@ export default function markdoc(partialOptions: {} = {}): AstroIntegration {
name: '@astrojs/markdoc',
async transform(code, id) {
if (!id.endsWith('.mdoc')) return;
- return `export const body = ${JSON.stringify(code)}`;
+ return `import { Markdoc } from '@astrojs/markdoc';\nexport const body = ${JSON.stringify(
+ code
+ )};\nexport function getParsed() { return Markdoc.parse(body); }\nexport async function getTransformed(inlineConfig) {
+let config = inlineConfig;
+if (!config) {
+ try {
+ const importedConfig = await import(${JSON.stringify(markdocConfigUrl.pathname)});
+ config = importedConfig.default.transform;
+ } catch {}
+}
+return Markdoc.transform(getParsed(), config) }`;
},
},
],