Adding checks for SSR options

example/example.canvas

@@ -31,7 +31,7 @@
     {
       "id": "61ed4f3ea922e776",
       "type": "file",
-      "file": "example.jpeg",
+      "file": "img/example.jpeg",
       "x": 20,
       "y": 300,
       "width": 400,

src/embed.ts

@@ -25,12 +25,16 @@ export async function drawEmbedded(
   )
   if (node.type === "file" && svg) {
     if (node.file.match(/\.(jpg|jpeg|png|gif)$/i)) {
+      const imgPath = options.assetPath
+        ? path.join(options.assetPath, node.file)
+        : node.file
+
       const image = s("image", {
         x: 5 + node.x + <number>svg.properties.renWidth / 2,
         y: 5 + node.y + <number>svg.properties.renHeight / 2,
         width: node.width - 10,
         height: node.height - 10,
-        "xlink:href": node.file,
+        "xlink:href": imgPath,
       })
 
       grp.children.push(image)

src/options.ts

@@ -9,6 +9,13 @@ export interface Options {
    */
   openEmbededInNewTab?: boolean
 
+  /**
+   * This is a dumb hack for accomodating SSr. Basically, the mrakdown embed path requires the SSR relative path, and image svg is from the client side, so doesn't see the `public`directory. Otherwise will use assetPath
+   *
+   * Defaults to 'public'
+   */
+  ssrPath?: string
+
   /**
    * Define an asset path where the .canvas files exists. This will add the asset path before the filename. Otherwise uses cwd.process() path + filename
    *
@@ -23,20 +30,6 @@ export interface Options {
    */
   mdPath?: string | null
 
-  /**
-   * Render mode. Determines the canvas output mode
-   *
-   * Defaults to canvas
-   */
-  renderMode?: "svg" | "image" | "canvas"
-
-  /**
-   * Canvas Buffer
-   *
-   * Defaults to 30
-   */
-  canvasBuffer?: number
-
   /**
    * Canvas node stroke width
    *
@@ -62,9 +55,8 @@ export function applyDefaults(config: Partial<Options> = {}): Options {
         ? true
         : config.openEmbededInNewTab,
     assetPath: config.assetPath === undefined ? null : config.assetPath,
+    ssrPath: config.ssrPath === undefined ? "public" : config.ssrPath,
     mdPath: config.mdPath === undefined ? config.assetPath : config.mdPath,
-    renderMode: config.renderMode === undefined ? "canvas" : config.renderMode,
-    canvasBuffer: config.canvasBuffer === undefined ? 30 : config.canvasBuffer,
     nodeStrokeWidth:
       config.nodeStrokeWidth === undefined ? 3 : config.nodeStrokeWidth,
     lineStrokeWidth:

src/plugin.ts

@@ -30,7 +30,7 @@ Things decide:
 
 */
 
-export const rehypeJsonCanvas: Plugin<[], Root> = (
+export const rehypeJsonCanvas: Plugin<[(Options | undefined)?], Root> = (
   config?: Partial<Options>,
 ) => {
   return async (tree) => {
@@ -96,15 +96,13 @@ export async function getCanvasFromEmbed(
       .then((text) => {
         canvasMarkdown = text
       })
-  } else {
+  } else if (options.ssrPath !== undefined) {
     const opPath =
       extension === "md" ? options.mdPath : options.assetPath || null
 
-    console.log("opPath", opPath)
-    // To accomodate ssr
     const ssrPath = opPath
-      ? path.join(process.cwd(), opPath, markdownPath)
-      : path.join(process.cwd(), markdownPath)
+      ? path.join(process.cwd(), options.ssrPath, opPath, markdownPath)
+      : path.join(process.cwd(), options.ssrPath, markdownPath)
     console.log(ssrPath)
     try {
       canvasMarkdown = fs.readFileSync(ssrPath, {
@@ -114,6 +112,10 @@ export async function getCanvasFromEmbed(
     } catch (err) {
       console.log("No Canvas File Found. Try using the assetPath option!", err)
     }
+  } else {
+    console.log(
+      "If you're running this plugin via serverside renering, you'll need to define an ssrPath relative to your project file. Take a look at the readme or nextjs project for examples.",
+    )
   }
   if (canvasMarkdown === null) return ""