Weird import fix

lovettbarron · Jul 8, 2024 · ca901d4 · ca901d4
1 parent ccf0fe9
commit ca901d4
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 15 deletions.
diff --git a/example/example.md b/example/example.md
diff --git a/src/embed.ts b/src/embed.ts
@@ -1,3 +1,4 @@
+import path from "node:path"
 import type { Element } from "hast"
 import { s } from "hastscript"
 
@@ -8,12 +9,20 @@ import type { GenericNode } from "@trbn/jsoncanvas"
 // import { applyDefaults, Options } from "./options";
 import { getCanvasFromEmbed } from "./plugin"
 
+import { type Options, applyDefaults } from "./options"
+
 // This renders out the images
 export async function drawEmbedded(
   svg: Element,
   grp: Element,
   node: GenericNode | any,
+  config?: Partial<Options>,
 ) {
+  const options = applyDefaults(config)
+  console.log(
+    "Test",
+    options.assetPath ? path.join(options.assetPath, node.file) : node.file,
+  )
   if (node.type === "file" && svg) {
     if (node.file.match(/\.(jpg|jpeg|png|gif)$/i)) {
       const image = s("image", {
@@ -34,10 +43,11 @@ export async function drawMarkdownEmbed(
   svg: Element,
   grp: Element,
   node: GenericNode | any,
+  config?: Partial<Options>,
 ) {
   if (node.type === "file" && svg) {
     if (node.file.match(/\.(md|mdx)$/i)) {
-      const mdFile = await getCanvasFromEmbed(node.file)
+      const mdFile = await getCanvasFromEmbed(node.file, config)
 
       const mdast = fromMarkdown(mdFile)
       const hast = toHast(mdast)

diff --git a/src/jsoncanvas.ts b/src/jsoncanvas.ts
@@ -59,12 +59,6 @@ export function render(
       drawEdge(svg, toNode, fromNode, edge, options)
   }
 
-  return renderToBuffer(svg)
-}
-
-function renderToBuffer(svg: Element, config?: Partial<Options>): Element {
-  const options = applyDefaults(config)
-  console.log("Rendering", svg, options)
   return svg
 }
 
@@ -74,7 +68,6 @@ function initRender(
   config?: Partial<Options>,
 ): Element {
   const options = applyDefaults(config)
-  console.log(options)
   const BASE_SVG_PROPS = {
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -148,8 +141,8 @@ async function drawNode(
 
   group.children.push(rect)
 
-  drawEmbedded(svg, group, node)
-  drawMarkdownEmbed(svg, group, node)
+  drawEmbedded(svg, group, node, config)
+  drawMarkdownEmbed(svg, group, node, config)
 
   // Group Label
   if (node.label) {

diff --git a/src/options.ts b/src/options.ts
@@ -16,6 +16,13 @@ export interface Options {
    */
   assetPath?: string | null
 
+  /**
+   * Define an markdown path where the .md files will be searched for WHEN EMBEDDING ONLY. This will add the md path before the filename. Otherwise uses assetPath defaults
+   *
+   * Defaults to null
+   */
+  mdPath?: string | null
+
   /**
    * Render mode. Determines the canvas output mode
    *
@@ -55,6 +62,7 @@ export function applyDefaults(config: Partial<Options> = {}): Options {
         ? true
         : config.openEmbededInNewTab,
     assetPath: config.assetPath === undefined ? null : config.assetPath,
+    mdPath: config.mdPath === undefined ? config.assetPath : config.mdPath,
     renderMode: config.renderMode === undefined ? "canvas" : config.renderMode,
     canvasBuffer: config.canvasBuffer === undefined ? 30 : config.canvasBuffer,
     nodeStrokeWidth:

diff --git a/src/plugin.ts b/src/plugin.ts
@@ -61,7 +61,7 @@ export const rehypeJsonCanvas: Plugin<[], Root> = (
       let canvas = null
 
       if (validate(jsonCanvasFromString)) {
-        canvas = render(jsonCanvasFromString, {})
+        canvas = render(jsonCanvasFromString, config)
       } else {
         canvas = h("div", "Not a properly formatted JsonCanvas")
       }
@@ -82,22 +82,30 @@ export async function getCanvasFromEmbed(
   config?: Partial<Options>,
 ): Promise<string> {
   const options = applyDefaults(config)
-  console.log(options)
   let canvasMarkdown = ""
   const webcheck = markdownPath.trim().toLowerCase()
 
+  // https://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript/12900504#12900504
+  const extension = webcheck.slice(
+    (Math.max(0, webcheck.lastIndexOf(".")) || Number.POSITIVE_INFINITY) + 1,
+  )
+
   if (webcheck.startsWith("https://") || typeof window !== "undefined") {
     await fetch(markdownPath)
       .then((res) => res.text())
       .then((text) => {
         canvasMarkdown = text
       })
   } else {
+    const opPath =
+      extension === "md" ? options.mdPath : options.assetPath || null
+
+    console.log("opPath", opPath)
     // To accomodate ssr
-    const ssrPath = options.assetPath
-      ? path.join(process.cwd(), options.assetPath, markdownPath)
+    const ssrPath = opPath
+      ? path.join(process.cwd(), opPath, markdownPath)
       : path.join(process.cwd(), markdownPath)
-
+    console.log(ssrPath)
     try {
       canvasMarkdown = fs.readFileSync(ssrPath, {
         encoding: "utf8",