[Docs Site] Stringify vendored Markdown frontmatter as proper YAML (#23670)

Author: KianNH

src/content/docs/style-guide/fixtures/markdown.mdx

@@ -8,7 +8,7 @@ sidebar:
 
 import { Tabs, TabItem } from "~/components";
 
-The HTML generated by this file is used as a test fixture for our Markdown generation.
+The HTML generated by this file is used as a test fixture for our Markdown generation:
 
 <Tabs>
 	<TabItem label="mdx">

src/util/markdown.ts

@@ -1,6 +1,8 @@
 import { parse } from "node-html-parser";
 import { process } from "../util/rehype";
 
+import YAML from "yaml";
+
 import rehypeParse from "rehype-parse";
 import rehypeBaseUrl from "../plugins/rehype/base-url";
 import rehypeFilterElements from "../plugins/rehype/filter-elements";
@@ -39,14 +41,17 @@ export async function htmlToMarkdown(
 
 	const withFrontmatter = [
 		"---",
-		`title: ${title}`,
-		description ? `description: ${description}` : [],
-		lastUpdated ? `lastUpdated: ${lastUpdated}` : [],
-		chatbotDeprioritize ? `chatbotDeprioritize: ${chatbotDeprioritize}` : [],
-		tags ? `tags: ${tags}` : [],
-		`source_url:`,
-		`  html: ${url.replace("index.md", "")}`,
-		`  md: ${url}`,
+		YAML.stringify({
+			title,
+			description,
+			lastUpdated,
+			chatbotDeprioritize: Boolean(chatbotDeprioritize),
+			tags,
+			source_url: {
+				html: url.replace("index.md", ""),
+				md: url,
+			},
+		}).trim(),
 		"---\n",
 		markdown,
 	]

vitest.workspace.ts

@@ -12,7 +12,7 @@ const workspace = defineWorkspace([
 				optimizer: {
 					ssr: {
 						enabled: true,
-						include: ["node-html-parser"],
+						include: ["node-html-parser", "yaml"],
 					},
 				},
 			},

worker/index.worker.test.ts

@@ -254,15 +254,16 @@ describe("Cloudflare Docs", () => {
 			expect(text).toMatchInlineSnapshot(`
 				"---
 				title: Markdown · Cloudflare Style Guide
-				description: The HTML generated by this file is used as a test fixture for our Markdown generation.
+				description: "The HTML generated by this file is used as a test fixture for our
+				  Markdown generation:"
 				lastUpdated: 2025-01-01T00:00:00.000Z
 				chatbotDeprioritize: true
 				source_url:
 				  html: http://fakehost/style-guide/fixtures/markdown/
 				  md: http://fakehost/style-guide/fixtures/markdown/index.md
 				---
 
-				The HTML generated by this file is used as a test fixture for our Markdown generation.
+				The HTML generated by this file is used as a test fixture for our Markdown generation:
 
 				* mdx
 
@@ -353,10 +354,10 @@ describe("Cloudflare Docs", () => {
 					?.attributes.content;
 
 				expect(desc).toMatchInlineSnapshot(
-					`"The HTML generated by this file is used as a test fixture for our Markdown generation."`,
+					`"The HTML generated by this file is used as a test fixture for our Markdown generation:"`,
 				);
 				expect(og).toMatchInlineSnapshot(
-					`"The HTML generated by this file is used as a test fixture for our Markdown generation."`,
+					`"The HTML generated by this file is used as a test fixture for our Markdown generation:"`,
 				);
 			});
 		});