handle frontmatter

Author: pngwn

package.json

@@ -28,6 +28,7 @@
 		"@rollup/plugin-node-resolve": "^11.2.0",
 		"@rollup/plugin-sucrase": "^3.1.0",
 		"@sindresorhus/slugify": "^1.1.0",
+		"@types/js-yaml": "^4.0.0",
 		"@types/marked": "^2.0.0",
 		"@types/prismjs": "^1.16.4",
 		"js-yaml": "^4.0.0",
@@ -45,6 +46,7 @@
 		"typescript": "^4.2.3",
 		"unified": "^9.2.1",
 		"unist-util-visit": "^2.0.3",
-		"uvu": "^0.5.1"
+		"uvu": "^0.5.1",
+		"vfile-message": "^2.0.4"
 	}
 }

pnpm-lock.yaml

@@ -0,0 +1,68 @@
+import { suite } from "uvu";
+import * as assert from "uvu/assert";
+
+import { parse_frontmatter } from "./frontmatter";
+
+import unified from "unified";
+import markdown from "remark-parse";
+import extract_frontmatter from "remark-frontmatter";
+import rehype from "remark-rehype";
+import stringify from "rehype-stringify";
+
+const processor = unified()
+	.use(markdown)
+	.use(extract_frontmatter)
+	.use(parse_frontmatter)
+	.use(rehype)
+	.use(stringify);
+
+const frontmatter = suite("extract-frontmatter");
+
+frontmatter("extracts and parses yaml metadata from frontmatter", async () => {
+	const src = `---
+  name: one
+  secondname: two
+---
+
+# hello
+
+---
+
+	`;
+
+	const output = await processor.process(src);
+
+	assert.equal((output.data as any).frontmatter, {
+		name: "one",
+		secondname: "two",
+	});
+	assert.equal(output.contents, "<h1>hello</h1>\n<hr>");
+});
+
+frontmatter("extracts and parses yaml metadata from frontmatter", async () => {
+	const src = `---
+names:
+  - 1
+  - 2
+  - 3  
+secondname: 
+  hello: friend
+  goodbye: friend
+---
+
+# hello
+
+---
+
+	`;
+
+	const output = await processor.process(src);
+
+	assert.equal((output.data as any).frontmatter, {
+		names: [1, 2, 3],
+		secondname: { hello: "friend", goodbye: "friend" },
+	});
+	assert.equal(output.contents, "<h1>hello</h1>\n<hr>");
+});
+
+frontmatter.run();

src/format/frontmatter.test.ts

@@ -0,0 +1,22 @@
+import type { Transformer } from "unified";
+import { YamlNode } from "remark-frontmatter";
+
+import yaml from "js-yaml";
+import Message from "vfile-message";
+import visit from "unist-util-visit";
+
+export function parse_frontmatter(): Transformer {
+	return function transformer(tree, vFile) {
+		visit(tree, "yaml", (node: YamlNode) => {
+			try {
+				const data = yaml.load(node.value) as Record<string, unknown>;
+				if (data) {
+					// @ts-ignore
+					vFile.data.frontmatter = data;
+				}
+			} catch (e) {
+				vFile.messages.push(new Message("YAML failed to parse", e));
+			}
+		});
+	};
+}

src/format/frontmatter.ts

@@ -1,7 +1,7 @@
 import type { Transformer } from "unified";
 import type { Code, HTML } from "mdast";
-import visit from "unist-util-visit";
 
+import visit from "unist-util-visit";
 import PrismJS from "prismjs";
 import "prismjs/components/prism-bash.js";
 import "prismjs/components/prism-diff.js";

src/format/highlight.ts

@@ -1,5 +1,6 @@
 import type { Transformer } from "unified";
 import type { Heading, Root } from "mdast";
+
 import visit from "unist-util-visit";
 
 const types = [