Support markdoc-it's typographer option in markdoc

withastro · Jul 10, 2024 · 0f0c013 · 0f0c013
1 parent 88e2b43
commit 0f0c013
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 0 deletions.
diff --git a/.changeset/forty-scissors-jog.md b/.changeset/forty-scissors-jog.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/markdoc': minor
+---
+
+Add support for markdoc-it's typographer option
diff --git a/packages/integrations/markdoc/src/options.ts b/packages/integrations/markdoc/src/options.ts
@@ -1,4 +1,5 @@
 export interface MarkdocIntegrationOptions {
 	allowHTML?: boolean;
 	ignoreIndentation?: boolean;
+	typographer?: boolean;
 }
diff --git a/packages/integrations/markdoc/src/tokenizer.ts b/packages/integrations/markdoc/src/tokenizer.ts
@@ -24,6 +24,11 @@ export function getMarkdocTokenizer(options: MarkdocIntegrationOptions | undefin
 			// allow indentation so nested Markdoc tags can be formatted for better readability
 			tokenizerOptions.allowIndentation = true;
 		}
+		if (options?.typographer) {
+			// enable typographer to convert straight quotes to curly quotes, etc.
+			tokenizerOptions.typographer = options.typographer;
+		}
+
 
 		_cachedMarkdocTokenizers[key] = new Markdoc.Tokenizer(tokenizerOptions);
 	}

diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-typographer/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc({ typographer: true })],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/package.json b/packages/integrations/markdoc/test/fixtures/render-typographer/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-typographer",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/...s/integrations/markdoc/test/fixtures/render-typographer/src/content/blog/typographer.mdoc b/...s/integrations/markdoc/test/fixtures/render-typographer/src/content/blog/typographer.mdoc
@@ -0,0 +1,7 @@
+---
+title: Typographer
+---
+
+## Typographer's post
+
+This is a post to test the "typographer" option.
diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-typographer/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'typographer');
+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
@@ -117,6 +117,16 @@ describe('Markdoc - render', () => {
 
 			renderWithRootFolderContainingSpace(html);
 		});
+
+		// test that typographer option is working
+		it('renders content - with typographer option', async () => {
+			const fixture = await getFixture('render-typographer');
+			await fixture.build()
+
+			const html = await fixture.readFile('/index.html');
+
+			renderTypographerChecks(html);
+		});
 	});
 });
 
@@ -173,3 +183,16 @@ function renderWithRootFolderContainingSpace(html) {
 	const p = document.querySelector('p');
 	assert.equal(p.textContent, 'This is a simple Markdoc post with root folder containing a space.');
 }
+
+/**
+ * @param {string} html
+ */
+function renderTypographerChecks(html) {
+	const { document } = parseHTML(html);
+
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Typographer’s post');
+
+	const p = document.querySelector('p');
+	assert.equal(p.textContent, 'This is a post to test the “typographer” option.');
+}