feat: basic Astro renderer in with-markdoc

examples/with-markdoc/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

examples/with-markdoc/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

examples/with-markdoc/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

examples/with-markdoc/README.md

@@ -0,0 +1,46 @@
+# Astro Starter Kit: Minimal
+
+```
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                | Action                                           |
+| :--------------------- | :----------------------------------------------- |
+| `npm install`          | Installs dependencies                            |
+| `npm run dev`          | Starts local dev server at `localhost:3000`      |
+| `npm run build`        | Build your production site to `./dist/`          |
+| `npm run preview`      | Preview your build locally, before deploying     |
+| `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

examples/with-markdoc/astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import markdoc from '@astrojs/markdoc';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});

examples/with-markdoc/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@example/with-markdoc",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/markdoc": "^0.0.1",
+    "astro": "^2.0.6",
+    "html-escaper": "^3.0.3"
+  },
+  "devDependencies": {
+    "@markdoc/markdoc": "^0.2.2"
+  }
+}

examples/with-markdoc/sandbox.config.json

@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}

examples/with-markdoc/src/components/RedP.astro

@@ -0,0 +1,7 @@
+<p><slot /></p>
+
+<style>
+	p {
+		color: red;
+	}
+</style>

examples/with-markdoc/src/components/test.mdoc

@@ -0,0 +1,31 @@
+# Hey there
+
+This is a test file?
+
+{% 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" %}
+Testing!
+{% /mq %}
+{% /if %}
+
+{% link href=$href %}Link{% /link %}
+
+Some `inline code` should help
+
+```js
+const testing = true;
+function further() {
+	console.log('still highlighted!')
+}
+```

examples/with-markdoc/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

examples/with-markdoc/src/pages/index.astro

@@ -0,0 +1,73 @@
+---
+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),
+		};
+	},
+};
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<h1>Astro</h1>
+		<article>
+			<RenderMarkdoc
+				content={content}
+				components={{
+					p: RedP,
+					code,
+					pre: code,
+				}}
+			/>
+		</article>
+	</body>
+</html>

examples/with-markdoc/src/renderer/RenderMarkdoc.astro

@@ -0,0 +1,14 @@
+---
+import type { RenderableTreeNode } from '@markdoc/markdoc';
+import { ComponentRenderer, createAstroNode } from './astroNode';
+import RenderNode from './RenderNode.astro';
+
+type Props = {
+	content: RenderableTreeNode;
+	components: Record<string, ComponentRenderer>;
+};
+
+const { content, components } = Astro.props as Props;
+---
+
+<RenderNode node={createAstroNode(content, components)} />

examples/with-markdoc/src/renderer/RenderNode.astro

@@ -0,0 +1,29 @@
+---
+import type { AstroNode } from './astroNode';
+
+type Props = {
+	node: AstroNode;
+};
+
+const Node = (Astro.props as Props).node;
+---
+
+{
+	typeof Node === 'string' ? (
+		<Fragment set:text={Node} />
+	) : 'component' in Node ? (
+		<Node.component {...Node.props}>
+			{Node.children.map((child) => (
+				<Astro.self node={child} />
+			))}
+		</Node.component>
+	) : (
+		<Fragment>
+			<Fragment set:html={`<${Node.tag}>`} />
+			{Node.children.map((child) => (
+				<Astro.self node={child} />
+			))}
+			<Fragment set:html={`</${Node.tag}>`} />
+		</Fragment>
+	)
+}

examples/with-markdoc/src/renderer/astroNode.ts

@@ -0,0 +1,67 @@
+import { RenderableTreeNode, Tag, renderers, NodeType } from '@markdoc/markdoc';
+import { escape } from 'html-escaper';
+
+// TODO: expose `AstroComponentFactory` type from core
+type AstroComponentFactory = (props: Record<string, any>) => any & {
+	isAstroComponentFactory: true;
+};
+
+export type ComponentRenderer =
+	| AstroComponentFactory
+	| {
+			component: AstroComponentFactory;
+			props?(params: { attributes: Record<string, any>; getTreeNode(): Tag }): Record<string, any>;
+	  };
+
+export type AstroNode =
+	| string
+	| {
+			component: AstroComponentFactory;
+			props: Record<string, any>;
+			children: AstroNode[];
+	  }
+	| {
+			tag: string;
+			attributes: Record<string, any>;
+			children: AstroNode[];
+	  };
+
+export function createAstroNode(
+	node: RenderableTreeNode,
+	components: Record<string, ComponentRenderer> = {}
+): AstroNode {
+	if (typeof node === 'string' || typeof node === 'number') {
+		return escape(String(node));
+	} else if (node === null || typeof node !== 'object' || !Tag.isTag(node)) {
+		return '';
+	}
+
+	if (Object.hasOwn(components, node.name)) {
+		const componentRenderer = components[node.name];
+		const component =
+			'Component' in componentRenderer ? componentRenderer.component : componentRenderer;
+		const props =
+			'props' in componentRenderer
+				? componentRenderer.props({
+						attributes: node.attributes,
+						getTreeNode() {
+							return node;
+						},
+				  })
+				: node.attributes;
+
+		const children = node.children.map((child) => createAstroNode(child, components));
+
+		return {
+			component,
+			props,
+			children,
+		};
+	} else {
+		return {
+			tag: node.name,
+			attributes: node.attributes,
+			children: node.children.map((child) => createAstroNode(child, components)),
+		};
+	}
+}

examples/with-markdoc/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/base"
+}

packages/integrations/markdoc/package.json

@@ -30,6 +30,7 @@
     "test:match": "mocha --timeout 20000 -g"
   },
   "dependencies": {
+    "@markdoc/markdoc": "^0.2.2"
   },
   "devDependencies": {
     "@types/chai": "^4.3.1",