@astrojs/markdoc 0.0.0-markdoc-20230214163516

package/test/content-collections.test.js

@@ -0,0 +1,181 @@
+import { parseHTML } from 'linkedom';
+import { parse as parseDevalue } from 'devalue';
+import { expect } from 'chai';
+import { loadFixture, fixLineEndings } from '../../../astro/test/test-utils.js';
+
+function formatPost(post) {
+	return {
+		...post,
+		body: fixLineEndings(post.body),
+	};
+}
+
+describe('Markdoc - Content Collections', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/content-collections/', import.meta.url),
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('loads entry', async () => {
+			const res = await fixture.fetch('/entry.json');
+			const post = parseDevalue(await res.text());
+			expect(formatPost(post)).to.deep.equal(simplePostEntry);
+		});
+
+		it('loads collection', async () => {
+			const res = await fixture.fetch('/collection.json');
+			const posts = parseDevalue(await res.text());
+			expect(posts).to.not.be.null;
+			expect(posts.sort().map((post) => formatPost(post))).to.deep.equal([
+				simplePostEntry,
+				withComponentsEntry,
+				withConfigEntry,
+			]);
+		});
+
+		it('renders content - simple', async () => {
+			const res = await fixture.fetch('/content-simple');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+			const h2 = document.querySelector('h2');
+			expect(h2.textContent).to.equal('Simple post');
+			const p = document.querySelector('p');
+			expect(p.textContent).to.equal('This is a simple Markdoc post.');
+		});
+
+		it('renders content - with config', async () => {
+			const res = await fixture.fetch('/content-with-config');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+			const h2 = document.querySelector('h2');
+			expect(h2.textContent).to.equal('Post with config');
+			const marquee = document.querySelector('marquee');
+			expect(marquee).to.not.be.null;
+			expect(marquee.textContent).to.equal('Im a marquee!');
+		});
+
+		it('renders content - with components', async () => {
+			const res = await fixture.fetch('/content-with-components');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+			const h2 = document.querySelector('h2');
+			expect(h2.textContent).to.equal('Post with components');
+
+			// Renders custom shortcode component
+			const marquee = document.querySelector('marquee');
+			expect(marquee).to.not.be.null;
+			expect(marquee.hasAttribute('data-custom-marquee')).to.equal(true);
+
+			// Renders Astro Code component
+			const pre = document.querySelector('pre');
+			expect(pre).to.not.be.null;
+			expect(pre.className).to.equal('astro-code');
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('loads entry', async () => {
+			const res = await fixture.readFile('/entry.json');
+			const post = parseDevalue(res);
+			expect(formatPost(post)).to.deep.equal(simplePostEntry);
+		});
+
+		it('loads collection', async () => {
+			const res = await fixture.readFile('/collection.json');
+			const posts = parseDevalue(res);
+			expect(posts).to.not.be.null;
+			expect(posts.sort().map((post) => formatPost(post))).to.deep.equal([
+				simplePostEntry,
+				withComponentsEntry,
+				withConfigEntry,
+			]);
+		});
+
+		it('renders content - simple', async () => {
+			const html = await fixture.readFile('/content-simple/index.html');
+			const { document } = parseHTML(html);
+			const h2 = document.querySelector('h2');
+			expect(h2.textContent).to.equal('Simple post');
+			const p = document.querySelector('p');
+			expect(p.textContent).to.equal('This is a simple Markdoc post.');
+		});
+
+		it('renders content - with config', async () => {
+			const html = await fixture.readFile('/content-with-config/index.html');
+			const { document } = parseHTML(html);
+			const h2 = document.querySelector('h2');
+			expect(h2.textContent).to.equal('Post with config');
+			const marquee = document.querySelector('marquee');
+			expect(marquee).to.not.be.null;
+			expect(marquee.textContent).to.equal('Im a marquee!');
+		});
+
+		it('renders content - with components', async () => {
+			const html = await fixture.readFile('/content-with-components/index.html');
+			const { document } = parseHTML(html);
+			const h2 = document.querySelector('h2');
+			expect(h2.textContent).to.equal('Post with components');
+
+			// Renders custom shortcode component
+			const marquee = document.querySelector('marquee');
+			expect(marquee).to.not.be.null;
+			expect(marquee.hasAttribute('data-custom-marquee')).to.equal(true);
+
+			// Renders Astro Code component
+			const pre = document.querySelector('pre');
+			expect(pre).to.not.be.null;
+			expect(pre.className).to.equal('astro-code');
+		});
+	});
+});
+
+const simplePostEntry = {
+	id: 'simple.mdoc',
+	slug: 'simple',
+	collection: 'blog',
+	data: {
+		schemaWorks: true,
+		title: 'Simple post',
+	},
+	body: '\n## Simple post\n\nThis is a simple Markdoc post.\n',
+};
+
+const withComponentsEntry = {
+	id: 'with-components.mdoc',
+	slug: 'with-components',
+	collection: 'blog',
+	data: {
+		schemaWorks: true,
+		title: 'Post with components',
+	},
+	body: '\n## Post with components\n\nThis uses a custom marquee component with a shortcode:\n\n{% mq direction="right" %}\nI\'m a marquee too!\n{% /mq %}\n\nAnd a code component for code blocks:\n\n```js\nconst isRenderedWithShiki = true;\n```\n',
+};
+
+const withConfigEntry = {
+	id: 'with-config.mdoc',
+	slug: 'with-config',
+	collection: 'blog',
+	data: {
+		schemaWorks: true,
+		title: 'Post with config',
+	},
+	body: '\n## Post with config\n\nThis uses a shortcode to render a marquee element,\nwith a variable to show and hide:\n\n{% if $showMarquee %}\n{% mq direction="down" %}\nIm a marquee!\n{% /mq %}\n{% /if %}\n',
+};

package/test/fixtures/content-collections/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()],
+});

package/test/fixtures/content-collections/node_modules/.bin/astro

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"
+else
+  exec node  "$basedir/../../../../../../../astro/astro.js" "$@"
+fi

package/test/fixtures/content-collections/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@test/markdoc-content-collections",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "@markdoc/markdoc": "^0.2.2",
+    "astro": "workspace:*"
+  },
+  "devDependencies": {
+    "shiki": "^0.11.1"
+  }
+}

package/test/fixtures/content-collections/src/components/CustomMarquee.astro

@@ -0,0 +1 @@
+<marquee data-custom-marquee {...Astro.props}><slot /></marquee>

package/test/fixtures/content-collections/src/content/blog/simple.mdoc

@@ -0,0 +1,7 @@
+---
+title: Simple post
+---
+
+## Simple post
+
+This is a simple Markdoc post.

package/test/fixtures/content-collections/src/content/blog/with-components.mdoc

@@ -0,0 +1,17 @@
+---
+title: Post with components
+---
+
+## Post with components
+
+This uses a custom marquee component with a shortcode:
+
+{% mq direction="right" %}
+I'm a marquee too!
+{% /mq %}
+
+And a code component for code blocks:
+
+```js
+const isRenderedWithShiki = true;
+```

package/test/fixtures/content-collections/src/content/blog/with-config.mdoc

@@ -0,0 +1,14 @@
+---
+title: Post with config
+---
+
+## Post with config
+
+This uses a shortcode to render a marquee element,
+with a variable to show and hide:
+
+{% if $showMarquee %}
+{% mq direction="down" %}
+Im a marquee!
+{% /mq %}
+{% /if %}

package/test/fixtures/content-collections/src/content/config.ts

@@ -0,0 +1,12 @@
+import { defineCollection, z } from 'astro:content';
+
+const blog = defineCollection({
+	schema: z.object({
+		title: z.string(),
+	}).transform(data => ({
+		...data,
+		schemaWorks: true,
+	}))
+});
+
+export const collections = { blog };

package/test/fixtures/content-collections/src/pages/collection.json.js

@@ -0,0 +1,10 @@
+import { getCollection } from 'astro:content';
+import { stringify } from 'devalue';
+import { stripAllRenderFn } from '../../utils.js';
+
+export async function get() {
+	const posts = await getCollection('blog');
+	return {
+		body: stringify(stripAllRenderFn(posts))
+	};
+}

package/test/fixtures/content-collections/src/pages/content-simple.astro

@@ -0,0 +1,18 @@
+---
+import { getEntryBySlug } from "astro:content";
+const post = await getEntryBySlug('blog', 'simple');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content - Simple</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>

package/test/fixtures/content-collections/src/pages/content-with-components.astro

@@ -0,0 +1,50 @@
+---
+import { getEntryBySlug } from "astro:content";
+import { Code } from 'astro/components';
+import CustomMarquee from '../components/CustomMarquee.astro';
+import Markdoc from '@markdoc/markdoc';
+
+const post = await getEntryBySlug('blog', 'with-components');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content - with components</title>
+</head>
+<body>
+	<Content
+		config={{
+			tags: {
+				mq: {
+					render: 'marquee',
+					attributes: {
+						direction: {
+							type: String,
+							default: 'left',
+							matches: ['left', 'right', 'up', 'down'],
+							errorLevel: 'critical',
+						},
+					},
+				},
+			}
+		}}
+		components={{
+			marquee: CustomMarquee,
+			pre: {
+				component: Code,
+				props({ attributes, getTreeNode }) {
+					return {
+						lang: attributes['data-language'],
+						code: Markdoc.renderers.html(getTreeNode().children),
+					};
+				},
+			},
+		}}
+	/>
+</body>
+</html>

package/test/fixtures/content-collections/src/pages/content-with-config.astro

@@ -0,0 +1,38 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'with-config');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content - with config</title>
+</head>
+<body>
+	<Content
+		config={{
+			variables: {
+				showMarquee: true,
+			},
+			tags: {
+				mq: {
+					render: 'marquee',
+					attributes: {
+						direction: {
+							type: String,
+							default: 'left',
+							matches: ['left', 'right', 'up', 'down'],
+							errorLevel: 'critical',
+						},
+					},
+				},
+			}
+		}}
+	/>
+</body>
+</html>

package/test/fixtures/content-collections/src/pages/entry.json.js

@@ -0,0 +1,10 @@
+import { getEntryBySlug } from 'astro:content';
+import { stringify } from 'devalue';
+import { stripRenderFn } from '../../utils.js';
+
+export async function get() {
+	const post = await getEntryBySlug('blog', 'simple');
+	return {
+		body: stringify(stripRenderFn(post)),
+	};
+}

package/test/fixtures/content-collections/utils.js

@@ -0,0 +1,8 @@
+export function stripRenderFn(entryWithRender) {
+	const { render, ...entry } = entryWithRender;
+	return entry;
+}
+
+export function stripAllRenderFn(collection = []) {
+	return collection.map(stripRenderFn);
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "allowJs": true,
+    "module": "ES2020",
+    "outDir": "./dist",
+    "target": "ES2020"
+  }
+}