Fix: Markdoc Integration build when root folder contains spaces (#8759)

Co-authored-by: Arsh <69170106+lilnasy@users.noreply.github.com>
withastro · Oct 27, 2023 · 01c8011 · 01c8011
1 parent 35c5265
commit 01c8011
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 2 deletions.
diff --git a/.changeset/seven-files-punch.md b/.changeset/seven-files-punch.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/markdoc': patch
+---
+
+Fix build process on markdoc integration when root folder contains spaces
diff --git a/packages/integrations/markdoc/src/content-entry-type.ts b/packages/integrations/markdoc/src/content-entry-type.ts
@@ -106,7 +106,7 @@ export async function getContentEntryType({
 import { createGetHeadings, createContentComponent } from '@astrojs/markdoc/runtime';
 ${
 	markdocConfigUrl
-		? `import markdocConfig from ${JSON.stringify(markdocConfigUrl.pathname)};`
+		? `import markdocConfig from ${JSON.stringify(fileURLToPath(markdocConfigUrl))};`
 		: 'const markdocConfig = {};'
 }
 
@@ -230,7 +230,7 @@ function getStringifiedImports(
 			? `{ ${config.namedExport} as ${componentNamePrefix + toImportName(key)} }`
 			: componentNamePrefix + toImportName(key);
 		const resolvedPath =
-			config.type === 'local' ? new URL(config.path, root).pathname : config.path;
+			config.type === 'local' ? fileURLToPath(new URL(config.path, root)) : config.path;
 
 		stringifiedComponentImports += `import ${importName} from ${JSON.stringify(resolvedPath)};\n`;
 	}

diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render with-space/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()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/package.json b/packages/integrations/markdoc/test/fixtures/render with-space/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-with-space",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc
@@ -0,0 +1,7 @@
+---
+title: Simple post with root folder containing a space
+---
+
+## Simple post with root folder containing a space
+
+This is a simple Markdoc post with root folder containing a space.
diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+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</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/render.test.js b/packages/integrations/markdoc/test/render.test.js
@@ -69,6 +69,18 @@ describe('Markdoc - render', () => {
 
 			await server.stop();
 		});
+
+		it('renders content - with root folder containing space', async () => {
+			const fixture = await getFixture('render with-space');
+			const server = await fixture.startDevServer();
+
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderWithRootFolderContainingSpace(html);
+
+			await server.stop();
+		});
 	});
 
 	describe('build', () => {
@@ -116,6 +128,15 @@ describe('Markdoc - render', () => {
 
 			renderNullChecks(html);
 		});
+
+		it('renders content - with root folder containing space', async () => {
+			const fixture = await getFixture('render with-space');
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+
+			renderWithRootFolderContainingSpace(html);
+		});
 	});
 });
 
@@ -189,3 +210,14 @@ function renderSimpleChecks(html) {
 	const p = document.querySelector('p');
 	expect(p.textContent).to.equal('This is a simple Markdoc post.');
 }
+
+/** @param {string} html */
+function renderWithRootFolderContainingSpace(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	expect(h2.textContent).to.equal('Simple post with root folder containing a space');
+	const p = document.querySelector('p');
+	expect(p.textContent).to.equal(
+		'This is a simple Markdoc post with root folder containing a space.'
+	);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml