feat: experimental front matter support (#7)

* feat: experimental front matter support * docs: about front matter * chore: rename keyword * fix: change to load stylesheet
ryuapp · Dec 1, 2024 · b8766cc · b8766cc
1 parent 29cbdfc
commit b8766cc
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1 @@
-README.pdf
+*.pdf
diff --git a/README.md b/README.md
@@ -23,6 +23,18 @@ Options:
   --css          Set CSS file used for rendering.
 ```
 
+## Front matter (Experimental)
+
+We can specify CSS file used in the front matter of markdown.
+
+```md
+---
+stylesheet: ./github.css
+---
+
+# Hello World
+```
+
 ## Related
 
 - [md-to-pdf](https://github.com/simonhaenisch/md-to-pdf) - Markdown to PDF CLI

diff --git a/deno.json b/deno.json
@@ -10,7 +10,7 @@
     "dev": "deno run --allow-read --allow-write --allow-env --allow-net=0.0.0.0,127.0.0.1 --allow-run ./src/cli.ts -- README.md",
     "dev:all": "deno run --allow-read --allow-write --allow-env --allow-net=0.0.0.0,127.0.0.1 --allow-run ./src/cli.ts -w --css=src/testdata/bluecode.css -- README.md",
     "dev:help": "deno run --allow-read --allow-write --allow-env --allow-net=0.0.0.0,127.0.0.1 --allow-run ./src/cli.ts --help",
-    "dev:css": "deno run --allow-read --allow-write --allow-env --allow-net=0.0.0.0,127.0.0.1 --allow-run ./src/cli.ts --css=src/testdata/bluecode.css -- README.md",
+    "dev:css": "deno run --allow-read --allow-write --allow-env --allow-net=0.0.0.0,127.0.0.1 --allow-run ./src/cli.ts -- ./src/testdata/bluecode.md",
     "dev:invalidcss": "deno run --allow-read --allow-write --allow-env --allow-net=0.0.0.0,127.0.0.1 --allow-run ./src/cli.ts --css=src/testdata/redcode.css -- README.md",
     "dev:watch": "deno run --allow-read --allow-write --allow-env --allow-net=0.0.0.0,127.0.0.1 --allow-run ./src/cli.ts --watch -- README.md"
   },
@@ -19,6 +19,9 @@
     "@std/assert": "jsr:@std/assert@^1.0.2",
     "@std/cli": "jsr:@std/[email protected]",
     "@std/fmt": "jsr:@std/fmt@^1",
+    "@std/front-matter": "jsr:@std/front-matter@^1.0.5",
+    "@std/path": "jsr:@std/path@^1.0.8",
+    "@std/yaml": "jsr:@std/yaml@^1.0.5",
     "md4w": "npm:md4w@^0.2.6"
   },
   "exclude": [".gitattributes", ".github", "src/testdata", "**/*/*_test.ts"]

diff --git a/deno.lock b/deno.lock
diff --git a/src/testdata/bluecode.md b/src/testdata/bluecode.md
@@ -0,0 +1,8 @@
+---
+stylesheet: bluecode.css
+---
+
+# Blue Code
+```js
+console.log("Hello, World!");
+```
diff --git a/src/utils/server.ts b/src/utils/server.ts
@@ -1,6 +1,9 @@
 import { init as initMd4w, mdToHtml } from "md4w";
 import type { MdToPdfOptions } from "../types.ts";
 import { getFilename } from "./filename.ts";
+import { extract } from "@std/front-matter/yaml";
+import { parse } from "@std/yaml/parse";
+import { join } from "@std/path";
 
 export const DEFAULT_PORT = 33433;
 
@@ -20,18 +23,32 @@ export function launchHttpServer(
 
     if (url.pathname === "/") {
       const decoder = new TextDecoder("utf-8");
-      const css = options?.css
-        ? decoder.decode(await Deno.readFile(options?.css))
-        : "";
-      const content = mdToHtml(
-        decoder.decode(await Deno.readFile(path)),
-      );
+      const fileContent = decoder.decode(await Deno.readFile(path));
+
+      let markdown = "";
+      let stylesheet = "";
+      // Front matter
+      try {
+        const file = extract(fileContent);
+        const frontMatter = parse(file.frontMatter) as {
+          stylesheet?: string;
+        };
+        markdown = file.body;
+        if (frontMatter && frontMatter.stylesheet) {
+          stylesheet = join(path, "..", frontMatter.stylesheet);
+        }
+      } catch (_e) {
+        markdown = fileContent;
+      }
+      stylesheet = options?.css ? options?.css : stylesheet;
+
+      const content = mdToHtml(markdown);
       const title = getFilename(path.split("/").at(-1) || "") || "Untitled";
       return new Response(
         `<html>
             <head>
             <title>${title}</title>
-            <style>${css}</style>
+            ${stylesheet && `<link rel="stylesheet" href="${stylesheet}" />`}
             </head>
             <body>
               ${content}