feat: Use metadata from typst

src/content/post/diagram.typ

@@ -3,6 +3,8 @@
 #metadata((
   title: "Title",
   date: "2025-01-01",
+  description: "Example diagram in typst",
+  tags: ("svg", "typst"),
 ))<post>
 
 This is a diagram.
@@ -56,3 +58,20 @@ This is a diagram.
   line((1, 0), (1, calc.tan(30deg)), name: "tan", stroke: (paint: orange))
   content("tan.end", $ text(#orange, tan alpha) = text(#red, sin alpha) / text(#blue, cos alpha) $, anchor: "west")
 }))
+
+== Heading
+
+#figure(
+  table(
+    columns: (auto, auto, auto),
+    inset: 10pt,
+    align: horizon,
+    table.header(
+      [*System*], [*Speed*]
+    ),
+    [LaTeX], [Slow],
+    [Markdown], [Fast],
+    [Typst], [Fast],
+  ),
+  caption: [Comparison of blog typesetting options]
+)

src/lib/typst.js

@@ -18,12 +18,12 @@ export const typstPreprocess = (config) => {
 		  if (!extensionsParts.some((ext) => filename.endsWith(ext))) return;
 
       const result_metadata = await exec_async(`typst query --features html ${filename} "<post>" --field value --one`);
-      const payload = String(result_metadata.stdout);
+      const metadata = String(result_metadata.stdout);
-      const metadata = JSON.parse(payload);
 
       const result_post = await exec_async(`typst compile --features html --format html ${filename} -`);
+      // strip the body tag
       const bodyHTML = /<body.*?>([\s\S]*)<\/body>/.exec(result_post.stdout)[1]
-      const code = "<script context='module'>\n export const metadata = {'title': 'Title', 'date': '2025-02-01'}\n</script>" + bodyHTML
+      const code = `<script context='module'>\n export const metadata = ${metadata}\n</script>` + bodyHTML
 
       return {
         code,