Fixed the option thing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rehype-jsoncanvas",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "rehype plugin to render inline json-canvas elements",
   "license": "MIT",
   "keywords": [
@@ -25,10 +25,6 @@
     {
       "type": "individual",
       "url": "https://andrewlb.com/support"
-    },
-    {
-      "type": "patreon",
-      "url": "https:patreon.com/andrewlb"
     }
   ],
   "type": "module",

readme.md

@@ -26,7 +26,21 @@ Rehype is a toolkit in the unified.js ecosystem that works to parse html trees a
 
 Parses the html content (If it's from markdown, usually after the markdown has been translates), then renders a canvas
 
-## Use
+## Install and Use
+
+However you use NPM, basically
+
+```
+npm i rehype-jsoncanvas
+```
+
+And then import it
+
+```
+import rehypeJsonCanvas from "rehype-jsoncanvas"
+```
+
+Then use it however you use rehype plugins.
 
 This is an example of using Unified to render out the base.md markdown. Basically you need to process the markdown first, then transform the markdown rehype. The plugin will then look for rendered images with a .canvas extension to render out the jsonCanvas.
 

src/options.ts

@@ -7,42 +7,42 @@ export interface Options {
    *
    * Defaults to true
    */
-  openEmbededInNewTab: boolean
+  openEmbededInNewTab?: boolean
 
   /**
    * Define an asset path where the .canvas files exists. This will add the asset path before the filename. Otherwise uses cwd.process() path + filename
    *
    * Defaults to null
    */
-  assetPath: string | null
+  assetPath?: string | null
 
   /**
    * Render mode. Determines the canvas output mode
    *
    * Defaults to canvas
    */
-  renderMode: "svg" | "image" | "canvas"
+  renderMode?: "svg" | "image" | "canvas"
 
   /**
    * Canvas Buffer
    *
    * Defaults to 30
    */
-  canvasBuffer: number
+  canvasBuffer?: number
 
   /**
    * Canvas node stroke width
    *
    * Defaults to 3
    */
-  nodeStrokeWidth: number
+  nodeStrokeWidth?: number
 
   /**
    * Canvas line stroke width
    *
    * Defaults to 5
    */
-  lineStrokeWidth: number
+  lineStrokeWidth?: number
 }
 
 /**
@@ -54,7 +54,7 @@ export function applyDefaults(config: Partial<Options> = {}): Options {
       config.openEmbededInNewTab === undefined
         ? true
         : config.openEmbededInNewTab,
-    assetPath: config.assetPath === undefined ? "public" : config.assetPath,
+    assetPath: config.assetPath === undefined ? null : config.assetPath,
     renderMode: config.renderMode === undefined ? "canvas" : config.renderMode,
     canvasBuffer: config.canvasBuffer === undefined ? 30 : config.canvasBuffer,
     nodeStrokeWidth:

src/plugin.ts

@@ -30,14 +30,14 @@ Things decide:
 
 */
 
-export const rehypeJsonCanvas: Plugin<[], Root> = () => {
+export const rehypeJsonCanvas: Plugin<[], Root> = (
+  config?: Partial<Options>,
+) => {
   return async (tree) => {
     const nodesToReplace = [] as Array<Element>
 
     // Iterate over the markdown file as tree
     visit(tree, "element", (node, index) => {
-      console.log(node, index)
-
       // only match image embeds
       if (node.tagName !== "img" || index === undefined) {
         return
@@ -53,16 +53,17 @@ export const rehypeJsonCanvas: Plugin<[], Root> = () => {
 
     for (const node of nodesToReplace) {
       const canvasPath = node.properties.src as string
-      const canvasMarkdown = await getCanvasFromEmbed(canvasPath)
+      const canvasMarkdown = await getCanvasFromEmbed(canvasPath, config)
 
+      if (canvasMarkdown.length < 1) return
       const jsonCanvasFromString = JSONCanvas.fromString(canvasMarkdown)
 
       let canvas = null
 
       if (validate(jsonCanvasFromString)) {
         canvas = render(jsonCanvasFromString, {})
       } else {
-        canvas = h("div", "<div>Not a properly formatted JsonCanvas</div>")
+        canvas = h("div", "Not a properly formatted JsonCanvas")
       }
 
       if (!canvas) return
@@ -81,7 +82,8 @@ export async function getCanvasFromEmbed(
   config?: Partial<Options>,
 ): Promise<string> {
   const options = applyDefaults(config)
-  let canvasMarkdown = "Loading"
+  console.log(options)
+  let canvasMarkdown = ""
   const webcheck = markdownPath.trim().toLowerCase()
 
   if (webcheck.startsWith("https://") || typeof window !== "undefined") {
@@ -95,7 +97,7 @@ export async function getCanvasFromEmbed(
     const ssrPath = options.assetPath
       ? path.join(process.cwd(), options.assetPath, markdownPath)
       : path.join(process.cwd(), markdownPath)
-    console.log("File Path", ssrPath)
+
     try {
       canvasMarkdown = fs.readFileSync(ssrPath, {
         encoding: "utf8",