michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip: play with separate markdoc config

Browse source
This commit is contained in:
bholmesdev 2023-02-06 18:09:23 -05:00
parent fa52eb4844
commit 7d0a6b8042
5 changed files with 66 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
examples/with-markdoc/src/components/Marquee.astro Normal file
View file

@ -0,0 +1,7 @@
<marquee {...Astro.props}><slot /></marquee>
<style>
marquee {
color: red;
}
</style>

6
examples/with-markdoc/src/components/test.mdoc
View file

@ -1,6 +1,6 @@
# Hey there # Hey there
This is a test file? Look at this table! Built-in to Markdoc, neat.
{% table %} {% table %}
* Heading 1 * Heading 1
@ -15,14 +15,12 @@ This is a test file?
{% if $shouldMarquee %} {% if $shouldMarquee %}
{% mq direction="right" %} {% mq direction="right" %}
Testing! Im a marquee!
{% /mq %} {% /mq %}
{% /if %} {% /if %}
{% link href=$href %}Link{% /link %} {% link href=$href %}Link{% /link %}
Some `inline code` should help
```js ```js
const testing = true; const testing = true;
function further() { function further() {

30
examples/with-markdoc/src/markdoc.config.ts Normal file
View file

@ -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,
},
},
},
},
},
};

64
examples/with-markdoc/src/pages/index.astro
View file

@ -1,52 +1,10 @@
--- ---
import { body } from '../components/test.mdoc';
import { Markdoc } from '@astrojs/markdoc'; import { Markdoc } from '@astrojs/markdoc';
import RenderMarkdoc from '../renderer/RenderMarkdoc.astro'; import RenderMarkdoc from '../renderer/RenderMarkdoc.astro';
import RedP from '../components/RedP.astro';
import { getTransformed } from '../components/test.mdoc';
import { Code } from 'astro/components'; import { Code } from 'astro/components';
import { Tag } from '@markdoc/markdoc'; import Marquee from '../components/Marquee.astro';
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),
};
},
};
--- ---
<html lang="en"> <html lang="en">
@ -61,11 +19,19 @@ const code: ComponentRenderer = {
<h1>Astro</h1> <h1>Astro</h1>
<article> <article>
<RenderMarkdoc <RenderMarkdoc
content={content} content={await getTransformed()}
components={{ components={{
p: RedP, marquee: Marquee,
code, pre: {
pre: code, component: Code,
props({ attributes, getTreeNode }) {
return {
...attributes,
lang: attributes.lang ?? attributes['data-language'],
code: attributes.code ?? Markdoc.renderers.html(getTreeNode().children),
};
},
},
}} }}
/> />
</article> </article>

13
packages/integrations/markdoc/src/index.ts
View file

@ -9,6 +9,7 @@ export default function markdoc(partialOptions: {} = {}): AstroIntegration {
'astro:config:setup': async ({ updateConfig, config, addPageExtension, command }: any) => { 'astro:config:setup': async ({ updateConfig, config, addPageExtension, command }: any) => {
addPageExtension('.mdoc'); addPageExtension('.mdoc');
console.log('Markdoc working!'); console.log('Markdoc working!');
const markdocConfigUrl = new URL('./markdoc.config.ts', config.srcDir);
const viteConfig: InlineConfig = { const viteConfig: InlineConfig = {
plugins: [ plugins: [
@ -16,7 +17,17 @@ export default function markdoc(partialOptions: {} = {}): AstroIntegration {
name: '@astrojs/markdoc', name: '@astrojs/markdoc',
async transform(code, id) { async transform(code, id) {
if (!id.endsWith('.mdoc')) return; 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) }`;
}, },
}, },
], ],