From 7d0a6b80427f41b63f22599da42efcb91c54d79d Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Mon, 6 Feb 2023 18:09:23 -0500 Subject: [PATCH] wip: play with separate markdoc config --- .../with-markdoc/src/components/Marquee.astro | 7 ++ .../with-markdoc/src/components/test.mdoc | 6 +- examples/with-markdoc/src/markdoc.config.ts | 30 +++++++++ examples/with-markdoc/src/pages/index.astro | 64 +++++-------------- packages/integrations/markdoc/src/index.ts | 13 +++- 5 files changed, 66 insertions(+), 54 deletions(-) create mode 100644 examples/with-markdoc/src/components/Marquee.astro create mode 100644 examples/with-markdoc/src/markdoc.config.ts diff --git a/examples/with-markdoc/src/components/Marquee.astro b/examples/with-markdoc/src/components/Marquee.astro new file mode 100644 index 000000000..3e35d1566 --- /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 33ab897d2..60e77b1c4 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 000000000..2d6e3d6cb --- /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 59a5ef7bc..6b423317c 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 { getTransformed } from '../components/test.mdoc'; 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 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 676dcb037..2ea2e862c 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) }`; }, }, ],