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

feat: move Renderer to markdoc, get Content component!

Browse source
This commit is contained in:
bholmesdev 2023-02-08 09:53:35 -05:00
parent 10c8fa16be
commit b64e64b1a8
9 changed files with 45 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
examples/with-markdoc/src/content/blog/test.mdoc
View file

@ -3,3 +3,32 @@ title: Example!
--- ---
# Hey there # Hey there
Look at this table! Built-in to Markdoc, neat.
{% table %}
* Heading 1
* Heading 2
---
* Row 1 Cell 1
* Row 1 Cell 2
---
* Row 2 Cell 1
* Row 2 cell 2
{% /table %}
{% if $shouldMarquee %}
{% mq direction="right" %}
Im a marquee!
{% /mq %}
{% /if %}
{% link href=$href %}Link{% /link %}
```js
const testing = true;
function further() {
console.log('still highlighted!')
}
```

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

@ -1,14 +1,13 @@
--- ---
import { Markdoc } from '@astrojs/markdoc'; import { Markdoc } from '@astrojs/markdoc';
import RenderMarkdoc from '../renderer/RenderMarkdoc.astro';
import { getTransformed } from '../components/test.mdoc';
import { Code } from 'astro/components'; import { Code } from 'astro/components';
import Marquee from '../components/Marquee.astro'; import Marquee from '../components/Marquee.astro';
import { getEntryBySlug } from 'astro:content'; import { getEntryBySlug } from 'astro:content';
import RedP from '../components/RedP.astro';
const mdocEntry = await getEntryBySlug('blog', 'test'); const testEntry = await getEntryBySlug('blog', 'test');
console.log(mdocEntry); console.log(testEntry);
const { Content } = await testEntry.render();
--- ---
<html lang="en"> <html lang="en">
@ -22,10 +21,10 @@ console.log(mdocEntry);
<body> <body>
<h1>Astro</h1> <h1>Astro</h1>
<article> <article>
<RenderMarkdoc <Content
content={await getTransformed()}
components={{ components={{
marquee: Marquee, marquee: Marquee,
p: RedP,
pre: { pre: {
component: Code, component: Code,
props({ attributes, getTreeNode }) { props({ attributes, getTreeNode }) {

4
packages/astro/src/content/internal.ts
View file

@ -184,7 +184,7 @@ async function render({
return { return {
Content, Content,
headings: mod.getHeadings(), headings: mod.getHeadings?.() ?? [],
remarkPluginFrontmatter: mod.frontmatter, remarkPluginFrontmatter: mod.frontmatter ?? {},
}; };
} }

0
examples/with-markdoc/src/renderer/RenderNode.astro → packages/integrations/markdoc/components/RenderNode.astro
View file

0
examples/with-markdoc/src/renderer/RenderMarkdoc.astro → packages/integrations/markdoc/components/Renderer.astro
View file

4
examples/with-markdoc/src/renderer/astroNode.ts → packages/integrations/markdoc/components/astroNode.ts
View file

@ -36,12 +36,12 @@ export function createAstroNode(
return ''; return '';
} }
if (Object.hasOwn(components, node.name)) { if (node.name in components) {
const componentRenderer = components[node.name]; const componentRenderer = components[node.name];
const component = const component =
'component' in componentRenderer ? componentRenderer.component : componentRenderer; 'component' in componentRenderer ? componentRenderer.component : componentRenderer;
const props = const props =
'props' in componentRenderer 'props' in componentRenderer && typeof componentRenderer.props === 'function'
? componentRenderer.props({ ? componentRenderer.props({
attributes: node.attributes, attributes: node.attributes,
getTreeNode() { getTreeNode() {

1
packages/integrations/markdoc/components/index.ts Normal file
View file

@ -0,0 +1 @@
export { default as Renderer } from './Renderer.astro';

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

@ -17,23 +17,6 @@ const contentEntryType = {
rawData: parsed.matter, rawData: parsed.matter,
}; };
}, },
async render({ entry }: { entry: any }) {
function getParsed() {
return Markdoc.parse(entry.body);
}
async function getTransformed(inlineConfig: any) {
let config = inlineConfig;
// TODO: load config file
// if (!config) {
// try {
// const importedConfig = await import('./markdoc.config.ts');
// config = importedConfig.default.transform;
// } catch {}
// }
return Markdoc.transform(getParsed(), config);
}
return { getParsed, getTransformed };
},
}; };
export default function markdoc(partialOptions: {} = {}): AstroIntegration { export default function markdoc(partialOptions: {} = {}): AstroIntegration {
@ -51,17 +34,18 @@ 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 `import { Markdoc } from '@astrojs/markdoc';\nexport const body = ${JSON.stringify( return `import { jsx as h } from 'astro/jsx-runtime';\nimport { Markdoc } from '@astrojs/markdoc';\nimport { Renderer } from '@astrojs/markdoc/components';\nexport const body = ${JSON.stringify(
code code
)};\nexport function getParsed() { return Markdoc.parse(body); }\nexport async function getTransformed(inlineConfig) { )};\nexport function getParsed() { return Markdoc.parse(body); }\nexport async function getTransformed(inlineConfig) {
let config = inlineConfig; let config = inlineConfig ?? {};
if (!config) { if (!config) {
try { try {
const importedConfig = await import(${JSON.stringify(markdocConfigUrl.pathname)}); const importedConfig = await import(${JSON.stringify(markdocConfigUrl.pathname)});
console.log({ importedConfig })
config = importedConfig.default.transform; config = importedConfig.default.transform;
} catch {} } catch {}
} }
return Markdoc.transform(getParsed(), config) }`; return Markdoc.transform(getParsed(), config) }\nexport async function Content ({ transformConfig, components }) { return h(Renderer, { content: await getTransformed(transformConfig), components }); }\nContent[Symbol.for('astro.needsHeadRendering')] = true;`;
}, },
}, },
], ],

2
packages/integrations/markdoc/tsconfig.json
View file

@ -1,6 +1,6 @@
{ {
"extends": "../../../tsconfig.base.json", "extends": "../../../tsconfig.base.json",
"include": ["src"], "include": ["src", "components"],
"compilerOptions": { "compilerOptions": {
"allowJs": true, "allowJs": true,
"module": "ES2020", "module": "ES2020",