feat: lax html hints

Microflash · Jul 6, 2023 · e77daa8 · e77daa8
1 parent 421f3da
commit e77daa8
Show file tree

Hide file tree

Showing 8 changed files with 542 additions and 592 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+.DS_Store
diff --git a/.npmignore b/.npmignore
@@ -1,2 +1,3 @@
 samples
-test
+test
+.DS_Store
diff --git a/README.md b/README.md
@@ -105,8 +105,8 @@ Running that with `node example.js` yields:
   <div class="callout-indicator">
     <div class="callout-hint">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-note">
-        <path d="M12 8h.01M12 12v4"></path>
-        <circle cx="12" cy="12" r="10"></circle>
+        <path d="M12 8h.01M12 12v4"/>
+        <circle cx="12" cy="12" r="10"/>
       </svg>
     </div>
     <div class="callout-title">Note</div>
@@ -198,7 +198,7 @@ Running `example.js` will yield:
   <div class="callout-indicator">
     <div class="callout-hint">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-warn">
-        <path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"></path>
+        <path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/>
       </svg>
     </div>
     <div class="callout-title">Hold on there</div>
@@ -226,7 +226,7 @@ Running `example.js` will yield:
   <div class="callout-indicator">
     <div class="callout-hint">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-warn">
-        <path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"></path>
+        <path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/>
       </svg>
     </div>
     <div class="callout-title">
@@ -289,7 +289,7 @@ Running `example.js` will yield:
   <div class="callout-indicator">
     <div class="callout-hint">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-shoutout">
-        <path d="M4.7 6.5h.01m8.49-2.8h.01m4.29 15.6h.01m2.79-8.5h.01m-6.41-.7 2.2-.7V6.5h2.8V3.7L21 3m-6.253 10.767c1.676-.175 2.93-.38 3.739-.064 1.234.483 1.497 1.529 1.409 3.008m-9.723-7.519c.175-1.676.38-2.93.064-3.739-.483-1.234-1.529-1.497-3.008-1.409M6.5 10.4l7.1 7.1L3 21z"></path>
+        <path d="M4.7 6.5h.01m8.49-2.8h.01m4.29 15.6h.01m2.79-8.5h.01m-6.41-.7 2.2-.7V6.5h2.8V3.7L21 3m-6.253 10.767c1.676-.175 2.93-.38 3.739-.064 1.234.483 1.497 1.529 1.409 3.008m-9.723-7.519c.175-1.676.38-2.93.064-3.739-.483-1.234-1.529-1.497-3.008-1.409M6.5 10.4l7.1 7.1L3 21z"/>
       </svg>
     </div>
     <div class="callout-title">Well done!</div>
@@ -347,8 +347,8 @@ Running that with `node example.js` yields:
   <div class="callout-indicator">
     <div class="callout-hint">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-deter">
-        <path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"></path>
-        <path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"></path>
+        <path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/>
+        <path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/>
       </svg>
     </div>
     <div class="callout-title">Danger</div>
@@ -410,7 +410,7 @@ Running that with `node example.js` yields:
   <div class="callout-indicator">
     <div class="callout-hint">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-assert">
-        <path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"></path>
+        <path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"/>
       </svg>
     </div>
     <div class="callout-title">Info</div>
@@ -473,8 +473,8 @@ Running that with `node example.js` yields:
   <div class="callout-indicator">
     <div class="callout-hint">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-commend">
-        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-        <path d="M22 4 12 14.01l-3-3"></path>
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+        <path d="M22 4 12 14.01l-3-3"/>
       </svg>
     </div>
     <div class="callout-title">Tip</div>

diff --git a/index.js b/index.js
@@ -1,11 +1,10 @@
-import { visit } from "unist-util-visit"
-import { fromHtml } from "hast-util-from-html"
-import { fromMarkdown } from "mdast-util-from-markdown"
-import { h } from "hastscript"
-import { defu } from "defu"
+import { visit } from "unist-util-visit";
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { h } from "hastscript";
+import { defu } from "defu";
 
 function generate(title, children, hint) {
-	const indicators = []
+	const indicators = [];
 
 	if (hint) {
 		indicators.push({
@@ -17,24 +16,24 @@ function generate(title, children, hint) {
 			children: [
 				{
 					type: "html",
-					value: fromHtml(hint, { fragment: true })
+					value: hint
 				}
 			]
-		})
+		});
 	}
 
-	const titleNode = fromMarkdown(title).children[0]
+	const titleNode = fromMarkdown(title).children[0];
 	if (titleNode.type === "paragraph") {
 		titleNode.data = {
 			hName: "div",
 			hProperties: { className: ["callout-title"] }
-		}
+		};
 	} else {
 		titleNode.data = {
 			hProperties: { className: ["callout-title"] }
-		}
+		};
 	}
-	indicators.push(titleNode)
+	indicators.push(titleNode);
 
 	return [ 
 		{
@@ -53,7 +52,7 @@ function generate(title, children, hint) {
 			},
 			children
 		}
-	]
+	];
 }
 
 const defaults = {
@@ -80,35 +79,35 @@ const defaults = {
 			hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-assert"><path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"/></svg>`
 		}
 	}
-}
+};
 
 export default function remarkCalloutDirectives(userOptions = {}) {
-	const options = defu(userOptions, defaults)
-	const { callouts } = options
-	const aliases = defu(options.aliases, Object.keys(callouts).reduce((a, v) => ({ ...a, [v]: v}), {}))
+	const options = defu(userOptions, defaults);
+	const { callouts } = options;
+	const aliases = defu(options.aliases, Object.keys(callouts).reduce((a, v) => ({ ...a, [v]: v}), {}));
 	return (tree) => {
 		visit(tree, (node) => {
 			if (node.type === "containerDirective") {
 				if (!aliases[node.name]) {
-					return
+					return;
 				}
 
-				const calloutType = aliases[node.name]
-				const callout = callouts[calloutType]
-				const data = node.data || (node.data = {})
-				const { title, ...attributes } = node.attributes
+				const calloutType = aliases[node.name];
+				const callout = callouts[calloutType];
+				const data = node.data || (node.data = {});
+				const { title, ...attributes } = node.attributes;
 
 				node.attributes = {
 					...attributes,
 					class: `callout callout-${calloutType}`
-				}
+				};
 
-				node.children = generate(title || callout.title, node.children, callout.hint)
+				node.children = generate(title || callout.title, node.children, callout.hint);
 
-				const tagName = callout.tagName || "aside"
-				data.hName = tagName
-				data.hProperties = h(tagName, node.attributes).properties
+				const tagName = callout.tagName || "aside";
+				data.hName = tagName;
+				data.hProperties = h(tagName, node.attributes).properties;
 			}
-		})
-	}
+		});
+	};
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@microflash/remark-callout-directives",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"description": "remark plugin to render callouts and admonitions with directives",
 	"license": "MIT",
 	"keywords": [
@@ -27,17 +27,16 @@
 		"test": "ava"
 	},
 	"dependencies": {
-		"defu": "^6.1.1",
-		"hast-util-from-html": "^1.0.0",
-		"hastscript": "^7.1.0",
-		"mdast-util-from-markdown": "^1.2.0",
-		"unist-util-visit": "^4.1.1"
+		"defu": "^6.1.2",
+		"hastscript": "^7.2.0",
+		"mdast-util-from-markdown": "^1.3.1",
+		"unist-util-visit": "^4.1.2"
 	},
 	"devDependencies": {
-		"ava": "^5.1.0",
+		"ava": "^5.3.1",
 		"rehype-stringify": "^9.0.3",
 		"remark-directive": "^2.0.1",
-		"remark-parse": "^10.0.1",
+		"remark-parse": "^10.0.2",
 		"remark-rehype": "^10.1.0",
 		"unified": "^10.1.2"
 	},