0.1.9

.npmignore

@@ -0,0 +1,2 @@
+src
+node_modules

package-lock.json

@@ -1,10 +1,12 @@
 {
-  "name": "markdown-to-html",
+  "name": "@doc-utils/markdown2html",
+  "version": "0.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "markdown-to-html",
+      "name": "@doc-utils/markdown2html",
+      "version": "0.1.9",
       "dependencies": {
         "bytefield-svg": "^1.6.1",
         "dompurify": "^2.3.6",
@@ -18,6 +20,9 @@
         "vega": "^5.22.1",
         "yaml": "^2.2.2"
       },
+      "bin": {
+        "markdown2html": "bin/markdown2html"
+      },
       "devDependencies": {
         "@types/dompurify": "^2.3.3",
         "@types/jsdom": "^20.0.0",
@@ -28,8 +33,7 @@
         "@types/prismjs": "^1.26.0",
         "@types/qrcode": "^1.5.0",
         "typescript": "^5.0.4"
-      },
-      "version": "0.1.2"
+      }
     },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
@@ -82,15 +86,15 @@
       "dev": true
     },
     "node_modules/@types/marked": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.8.tgz",
-      "integrity": "sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-zK4gSFMjgslsv5Lyvr3O1yCjgmnE4pr8jbG8qVn4QglMwtpvPCf4YT2Wma7Nk95OxUUJI8Z+kzdXohbM7mVpGw==",
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.16.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz",
-      "integrity": "sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==",
+      "version": "18.16.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.5.tgz",
+      "integrity": "sha512-seOA34WMo9KB+UA78qaJoCO20RJzZGVXQ5Sh6FWu0g/hfT44nKXnej3/tCQl7FL97idFpBhisLYCTB50S0EirA==",
       "dev": true
     },
     "node_modules/@types/prismjs": {
@@ -2011,15 +2015,15 @@
       "dev": true
     },
     "@types/marked": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.8.tgz",
-      "integrity": "sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-zK4gSFMjgslsv5Lyvr3O1yCjgmnE4pr8jbG8qVn4QglMwtpvPCf4YT2Wma7Nk95OxUUJI8Z+kzdXohbM7mVpGw==",
       "dev": true
     },
     "@types/node": {
-      "version": "18.16.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz",
-      "integrity": "sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==",
+      "version": "18.16.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.5.tgz",
+      "integrity": "sha512-seOA34WMo9KB+UA78qaJoCO20RJzZGVXQ5Sh6FWu0g/hfT44nKXnej3/tCQl7FL97idFpBhisLYCTB50S0EirA==",
       "dev": true
     },
     "@types/prismjs": {
@@ -3482,6 +3486,5 @@
         "decamelize": "^1.2.0"
       }
     }
-  },
-  "version": "0.1.2"
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doc-utils/markdown2html",
-  "version": "0.1.2",
+  "version": "0.1.9",
   "publishConfig": {
     "registry": "https://gitea.home.jbrumond.me/api/packages/doc-utils/npm/"
   },
@@ -11,7 +11,7 @@
   "bin": {
     "markdown2html": "./bin/markdown2html"
   },
-  "main": "./src/index.ts",
+  "main": "./build/index.js",
   "devDependencies": {
     "@types/dompurify": "^2.3.3",
     "@types/jsdom": "^20.0.0",

readme.md

@@ -68,11 +68,11 @@ foo:
 # This is some markdown
 `;
 
-const { frontmatter, markdown } = process_frontmatter(raw_content);
+const { frontmatter, document } = process_frontmatter(raw_content);
 
 console.log(frontmatter.title);  // "Example Markdown with front matter"
 console.log(frontmatter.foo);    // [ "bar", "baz" ]
-console.log(markdown);           // "\n# This is some markdown\n"
+console.log(document);           // "\n# This is some markdown\n"
 ```
 
 

src/attrs.ts

@@ -88,7 +88,5 @@ export function parse_attributes(text: string, fallback_id?: Lazy<string>) {
 		}
 	}
 
-	console.log(attrs);
-
 	return attrs;
 }

src/frontmatter.ts

@@ -1,18 +1,26 @@
 
 import * as yaml from 'yaml';
 
-export function process_frontmatter(document: string, parse = true) {
-	if (! document.startsWith('---\n')) {
+export function process_frontmatter(raw_document: string, parse = true) {
+	if (! raw_document.startsWith('---\n')) {
 		return {
 			frontmatter: null,
-			markdown: document,
+			document: raw_document,
 		};
 	}
 
-	const endIndex = document.slice(3).indexOf('\n---\n') + 3;
-	const frontmatterYaml = document.slice(3, endIndex);
-	const markdown = document.slice(endIndex + 4);
-	const frontmatter = parse ? frontmatterYaml : yaml.parse(frontmatterYaml);
+	const end_index = raw_document.slice(3).indexOf('\n---\n') + 3;
+	
+	if (end_index === 2) {
+		return {
+			frontmatter: null,
+			document: raw_document,
+		};
+	}
 
-	return { frontmatter, markdown };
+	const formatter_yaml = raw_document.slice(3, end_index);
+	const document = raw_document.slice(end_index + 4);
+	const frontmatter = parse ? yaml.parse(formatter_yaml) : formatter_yaml;
+
+	return { frontmatter, document };
 }

src/pikchr.ts

@@ -0,0 +1,150 @@
+
+import { strip_svg } from './svg';
+
+export function post_process_pikchr_svg(svg: string, size?: string) {
+	svg = strip_svg(svg);
+
+	// text
+	for (const [ color, regex ] of Object.entries(text_regex)) {
+		svg = svg.replace(regex, `<text fill="${text_css_vars[color]}"`);
+	}
+
+	// shape fill
+	for (const [ color, regex ] of Object.entries(shape_fill_regex)) {
+		svg = svg.replace(regex, `<path style="fill:${fill_css_vars[color]}`);
+	}
+
+	// arrow heads
+	for (const [ color, regex ] of Object.entries(arrow_head_regex)) {
+		svg = svg.replace(regex, `fill:${line_css_vars[color]}`);
+	}
+
+	// lines / boxes
+	for (const [ color, regex ] of Object.entries(line_regex)) {
+		svg = svg.replace(regex, `stroke:${line_css_vars[color]}`);
+	}
+
+	return svg;
+}
+
+
+
+type CSSVarColor
+	= 'black'
+	| 'red'
+	| 'orange'
+	| 'yellow'
+	| 'green'
+	| 'teal'
+	| 'pink'
+	| 'purple'
+	| 'blue'
+	| 'indigo'
+	| 'magenta'
+	| 'brown'
+	;
+
+const text_regex: Record<CSSVarColor, RegExp> = {
+	black: /\b<text fill="rgb\(0,0,0\)"/gi,
+	red:   /\b<text fill="rgb\(255,0,0\)"/gi,
+	orange: /\b<text fill="rgb\(255,165,0\)"/gi,
+	yellow: /\b<text fill="rgb\(255,255,0\)"/gi,
+	green: /\b<text fill="rgb\(0,128,0\)"/gi,
+	teal: /\b<text fill="rgb\(0,128,128\)"/gi,
+	pink: /\b<text fill="rgb\(255,192,203\)"/gi,
+	purple: /\b<text fill="rgb\(128,0,128\)"/gi,
+	blue: /\b<text fill="rgb\(0,0,255\)"/gi,
+	indigo: /\b<text fill="rgb\(75,0,130\)"/gi,
+	magenta: /\b<text fill="rgb\(255,0,255\)"/gi,
+	brown: /\b<text fill="rgb\(165,42,42\)"/gi,
+};
+
+const line_regex: Record<CSSVarColor, RegExp> = {
+	black: /stroke:rgb\(0,0,0\)/gi,
+	red:   /stroke:rgb\(255,0,0\)/gi,
+	orange: /stroke:rgb\(255,165,0\)/gi,
+	yellow: /stroke:rgb\(255,255,0\)/gi,
+	green: /stroke:rgb\(0,128,0\)/gi,
+	teal: /stroke:rgb\(0,128,128\)/gi,
+	pink: /stroke:rgb\(255,192,203\)/gi,
+	purple: /stroke:rgb\(128,0,128\)/gi,
+	blue: /stroke:rgb\(0,0,255\)/gi,
+	indigo: /stroke:rgb\(75,0,130\)/gi,
+	magenta: /stroke:rgb\(255,0,255\)/gi,
+	brown: /stroke:rgb\(165,42,42\)/gi,
+};
+
+const shape_fill_regex = {
+	black: /\b<path style="fill:rgb\(0,0,0\)/gi,
+	red:   /\b<path style="fill:rgb\(255,0,0\)/gi,
+	orange: /\b<path style="fill:rgb\(255,165,0\)/gi,
+	yellow: /\b<path style="fill:rgb\(255,255,0\)/gi,
+	green: /\b<path style="fill:rgb\(0,128,0\)/gi,
+	teal: /\b<path style="fill:rgb\(0,128,128\)/gi,
+	pink: /\b<path style="fill:rgb\(255,192,203\)/gi,
+	purple: /\b<path style="fill:rgb\(128,0,128\)/gi,
+	blue: /\b<path style="fill:rgb\(0,0,255\)/gi,
+	indigo: /\b<path style="fill:rgb\(75,0,130\)/gi,
+	magenta: /\b<path style="fill:rgb\(255,0,255\)/gi,
+	brown: /\b<path style="fill:rgb\(165,42,42\)/gi,
+}
+
+const arrow_head_regex: Record<CSSVarColor, RegExp> = {
+	black: /fill:rgb\(0,0,0\)/gi,
+	red:   /fill:rgb\(255,0,0\)/gi,
+	orange: /fill:rgb:\(255,165,0\)/gi,
+	yellow: /fill:rgb:\(255,255,0\)/gi,
+	green: /fill:rgb:\(0,128,0\)/gi,
+	teal: /fill:rgb:\(0,128,128\)/gi,
+	pink: /fill:rgb:\(255,192,203\)/gi,
+	purple: /fill:rgb:\(128,0,128\)/gi,
+	blue: /fill:rgb:\(0,0,255\)/gi,
+	indigo: /fill:rgb:\(75,0,130\)/gi,
+	magenta: /fill:rgb:\(255,0,255\)/gi,
+	brown: /fill:rgb:\(165,42,42\)/gi,
+};
+
+const line_css_vars: Record<CSSVarColor, string> = {
+	black: 'var(--theme-line, currentcolor)',
+	red: 'var(--theme-chart-shape-red-line, currentcolor)',
+	orange: 'var(--theme-chart-shape-orange-line, currentcolor)',
+	yellow: 'var(--theme-chart-shape-yellow-line, currentcolor)',
+	green: 'var(--theme-chart-shape-green-line, currentcolor)',
+	teal: 'var(--theme-chart-shape-teal-line, currentcolor)',
+	pink: 'var(--theme-chart-shape-pink-line, currentcolor)',
+	purple: 'var(--theme-chart-shape-purple-line, currentcolor)',
+	blue: 'var(--theme-chart-shape-blue-line, currentcolor)',
+	indigo: 'var(--theme-chart-shape-indigo-line, currentcolor)',
+	magenta: 'var(--theme-chart-shape-magenta-line, currentcolor)',
+	brown: 'var(--theme-chart-shape-brown-line, currentcolor)',
+};
+
+const text_css_vars: Record<CSSVarColor, string> = {
+	black: 'var(--theme-text-body, currentcolor)',
+	red: 'var(--theme-chart-shape-red-line, currentcolor)',
+	orange: 'var(--theme-chart-shape-orange-line, currentcolor)',
+	yellow: 'var(--theme-chart-shape-yellow-line, currentcolor)',
+	green: 'var(--theme-chart-shape-green-line, currentcolor)',
+	teal: 'var(--theme-chart-shape-teal-line, currentcolor)',
+	pink: 'var(--theme-chart-shape-pink-line, currentcolor)',
+	purple: 'var(--theme-chart-shape-purple-line, currentcolor)',
+	blue: 'var(--theme-chart-shape-blue-line, currentcolor)',
+	indigo: 'var(--theme-chart-shape-indigo-line, currentcolor)',
+	magenta: 'var(--theme-chart-shape-magenta-line, currentcolor)',
+	brown: 'var(--theme-chart-shape-brown-line, currentcolor)',
+};
+
+const fill_css_vars: Record<CSSVarColor, string> = {
+	black: 'var(--theme-chart-shape-black-fill, transparent)',
+	red: 'var(--theme-chart-shape-red-fill, transparent)',
+	orange: 'var(--theme-chart-shape-orange-fill, transparent)',
+	yellow: 'var(--theme-chart-shape-yellow-fill, transparent)',
+	green: 'var(--theme-chart-shape-green-fill, transparent)',
+	teal: 'var(--theme-chart-shape-teal-fill, transparent)',
+	pink: 'var(--theme-chart-shape-pink-fill, transparent)',
+	purple: 'var(--theme-chart-shape-purple-fill, transparent)',
+	blue: 'var(--theme-chart-shape-blue-fill, transparent)',
+	indigo: 'var(--theme-chart-shape-indigo-fill, transparent)',
+	magenta: 'var(--theme-chart-shape-magenta-fill, transparent)',
+	brown: 'var(--theme-chart-shape-brown-fill, transparent)',
+};

src/renderer.ts

@@ -14,6 +14,7 @@ import { bind_data_async } from './async-steps';
 import { render_vega_spec } from './vega';
 import { parse_attributes } from './attrs';
 import { MarkdownOptions } from './render';
+import { post_process_pikchr_svg } from './pikchr';
 
 export function create_renderer(opts: MarkdownOptions) {
 	const renderer = new marked.Renderer();
@@ -275,23 +276,3 @@ function post_process_nomnoml_svg(svg: string, size?: string) {
 
 	return svg;
 }
-
-const svg_text_fill_rgb_000 = /\b<text fill="rgb\(0,0,0\)"/gi;
-const svg_fill_rgb_000 = /fill:rgb\(0,0,0\)/gi;
-const svg_stroke_rgb_000 = /stroke:rgb\(0,0,0\)/gi;
-
-// todo: css variables
-function post_process_pikchr_svg(svg: string, size?: string) {
-	svg = strip_svg(svg);
-
-	// text
-	svg = svg.replace(svg_text_fill_rgb_000, '<text fill="var(--theme-text-body, currentcolor)"');
-
-	// arrow heads
-	svg = svg.replace(svg_fill_rgb_000, 'fill:var(--theme-line, currentcolor)');
-
-	// lines / boxes
-	svg = svg.replace(svg_stroke_rgb_000, 'stroke:var(--theme-line, currentcolor)');
-
-	return svg;
-}