feat: move Renderer to markdoc, get Content component!
This commit is contained in:
bholmesdev
parent
10c8fa16be
commit
b64e64b1a8
9 changed files with 45 additions and 32 deletions
|
|
@ -3,3 +3,32 @@ title: Example!
|
|||
---
|
||||
|
||||
# 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!')
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
---
|
||||
import { Markdoc } from '@astrojs/markdoc';
|
||||
import RenderMarkdoc from '../renderer/RenderMarkdoc.astro';
|
||||
|
||||
import { getTransformed } from '../components/test.mdoc';
|
||||
import { Code } from 'astro/components';
|
||||
import Marquee from '../components/Marquee.astro';
|
||||
import { getEntryBySlug } from 'astro:content';
|
||||
import RedP from '../components/RedP.astro';
|
||||
|
||||
const mdocEntry = await getEntryBySlug('blog', 'test');
|
||||
console.log(mdocEntry);
|
||||
const testEntry = await getEntryBySlug('blog', 'test');
|
||||
console.log(testEntry);
|
||||
const { Content } = await testEntry.render();
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
@ -22,10 +21,10 @@ console.log(mdocEntry);
|
|||
<body>
|
||||
<h1>Astro</h1>
|
||||
<article>
|
||||
<RenderMarkdoc
|
||||
content={await getTransformed()}
|
||||
<Content
|
||||
components={{
|
||||
marquee: Marquee,
|
||||
p: RedP,
|
||||
pre: {
|
||||
component: Code,
|
||||
props({ attributes, getTreeNode }) {
|
||||
|
|
|
|||
|
|
@ -184,7 +184,7 @@ async function render({
|
|||
|
||||
return {
|
||||
Content,
|
||||
headings: mod.getHeadings(),
|
||||
remarkPluginFrontmatter: mod.frontmatter,
|
||||
headings: mod.getHeadings?.() ?? [],
|
||||
remarkPluginFrontmatter: mod.frontmatter ?? {},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,12 +36,12 @@ export function createAstroNode(
|
|||
return '';
|
||||
}
|
||||
|
||||
if (Object.hasOwn(components, node.name)) {
|
||||
if (node.name in components) {
|
||||
const componentRenderer = components[node.name];
|
||||
const component =
|
||||
'component' in componentRenderer ? componentRenderer.component : componentRenderer;
|
||||
const props =
|
||||
'props' in componentRenderer
|
||||
'props' in componentRenderer && typeof componentRenderer.props === 'function'
|
||||
? componentRenderer.props({
|
||||
attributes: node.attributes,
|
||||
getTreeNode() {
|
||||
1
packages/integrations/markdoc/components/index.ts
Normal file
1
packages/integrations/markdoc/components/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { default as Renderer } from './Renderer.astro';
|
||||
|
|
@ -17,23 +17,6 @@ const contentEntryType = {
|
|||
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 {
|
||||
|
|
@ -51,17 +34,18 @@ export default function markdoc(partialOptions: {} = {}): AstroIntegration {
|
|||
name: '@astrojs/markdoc',
|
||||
async transform(code, id) {
|
||||
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
|
||||
)};\nexport function getParsed() { return Markdoc.parse(body); }\nexport async function getTransformed(inlineConfig) {
|
||||
let config = inlineConfig;
|
||||
let config = inlineConfig ?? {};
|
||||
if (!config) {
|
||||
try {
|
||||
const importedConfig = await import(${JSON.stringify(markdocConfigUrl.pathname)});
|
||||
console.log({ importedConfig })
|
||||
config = importedConfig.default.transform;
|
||||
} 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;`;
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"include": ["src"],
|
||||
"include": ["src", "components"],
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"module": "ES2020",
|
||||
|
|
|
|||
Loading…
Reference in a new issue