Got it kind of rendering properly! WOOOO

lovettbarron · Jul 1, 2024 · 0ee24a8 · 0ee24a8
1 parent 0778d35
commit 0ee24a8
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 36 deletions.
diff --git a/src/jsoncanvas.ts b/src/jsoncanvas.ts
@@ -1,18 +1,13 @@
 import { JSONCanvas, Edge, GenericNode } from "@trbn/jsoncanvas";
-import { h } from "hastscript";
-import { toHtml } from "hast-util-to-html";
-const { createCanvas, loadImage } = require("canvas");
+import { createCanvas, Canvas, CanvasRenderingContext2D } from "canvas";
 
 export function validate(jsonCanvasData: JSONCanvas) {
   // Use the typescript lib to vlaidate?
   console.log(jsonCanvasData.toString());
   return true;
 }
-export function render(
-  jsc: JSONCanvas,
-  options: object
-): HTMLCanvasElement | null {
-  console.log("render", jsc);
+export function render(jsc: JSONCanvas, options: object): String | null {
+  console.log("render", jsc, options);
 
   // Init Canvas objects
   const { canvas, ctx } = initRender("jsc", 800, 600);
@@ -28,14 +23,15 @@ export function render(
   jsc.getEdges().forEach((edge) => {
     const fromNode = jsc.getNodes().find((node) => node.id === edge.fromNode);
     const toNode = jsc.getNodes().find((node) => node.id === edge.toNode);
-    drawEdge(canvas, ctx, toNode, fromNode, edge);
+    if (toNode !== undefined && fromNode !== undefined)
+      drawEdge(canvas, ctx, toNode, fromNode, edge);
   });
 
-  return canvas;
+  return canvas.toDataURL();
 }
 
 function initRender(id: string, width: number, height: number) {
-  const canvas = createCanvas(width, height) as HTMLCanvasElement;
+  const canvas = createCanvas(width, height);
   if (!canvas) {
     console.error(`Canvas element with id '${id}' not found.`);
     return { canvas: null, ctx: null };
@@ -58,7 +54,7 @@ function initRender(id: string, width: number, height: number) {
 }
 
 function drawNode(
-  canvas: HTMLCanvasElement,
+  canvas: Canvas,
   ctx: CanvasRenderingContext2D,
   node: GenericNode | any
 ) {
@@ -90,7 +86,7 @@ function drawNode(
 }
 
 function drawEdge(
-  canvas: HTMLCanvasElement,
+  canvas: Canvas,
   ctx: CanvasRenderingContext2D,
   toNode: GenericNode,
   fromNode: GenericNode,

diff --git a/src/plugin.ts b/src/plugin.ts
@@ -1,5 +1,5 @@
 import type { Plugin } from "unified";
-import type { ElementContent, Root } from "hast";
+import type { Element, ElementContent, Root } from "hast";
 import { fromHtmlIsomorphic } from "hast-util-from-html-isomorphic";
 import { visit } from "unist-util-visit";
 import fs from "fs";
@@ -28,31 +28,28 @@ Things decide:
 */
 
 export const rehypeJsonCanvas: Plugin<[], Root> = () => {
-  return (tree) => {
-    visit(tree, "element", (node, index, pre) => {
-      console.log(node, index, pre);
+  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;
       }
+      console.log("Adding", node);
+      nodesToReplace.push(node);
+      // index = index += 1;
+    });
 
-      // const nodeData = node.data ajec t;
-      const canvasPath = "jsoncanvas";
-      const webcheck = canvasPath.trim().toLowerCase();
-
-      let canvasMarkdown = "Loading";
-      if (webcheck.startsWith("https://")) {
-        fetch(canvasPath)
-          .then((res) => res.text())
-          .then((text) => (canvasMarkdown = text));
-      } else {
-        canvasMarkdown = fs.readFileSync(canvasPath, {
-          encoding: "utf8",
-          flag: "r",
-        });
-      }
+    for (const node of nodesToReplace) {
+      const canvasPath = node.properties.src as string;
+      console.log("Detected", canvasPath);
+      let canvasMarkdown = await getCanvasFromEmbed(canvasPath);
 
+      console.log("Got markdown", canvasMarkdown);
       const jsonCanvasFromString = JSONCanvas.fromString(canvasMarkdown);
 
       let canvas;
@@ -63,15 +60,36 @@ export const rehypeJsonCanvas: Plugin<[], Root> = () => {
         canvas = "<div>Not a properly formatted JsonCanvas</div>";
       }
 
-      const canvasHast = fromHtmlIsomorphic(canvas, {
+      console.log(canvas);
+
+      const canvasHast = fromHtmlIsomorphic(`<img alt='' src='${canvas}' />`, {
         fragment: true,
       });
       node.properties = {
         ...node.properties,
       };
-      node.tagName = "canvas";
+      node.tagName = "div";
       node.children = canvasHast.children as ElementContent[];
-      index = index += 1;
-    });
+    }
   };
 };
+
+async function getCanvasFromEmbed(path: string): Promise<string> {
+  let canvasMarkdown = "Loading";
+  const webcheck = path.trim().toLowerCase();
+
+  if (webcheck.startsWith("https://") || typeof window !== "undefined") {
+    await fetch(path)
+      .then((res) => res.text())
+      .then((text) => (canvasMarkdown = text));
+  } else {
+    // To accomodate ssr
+    canvasMarkdown = fs.readFileSync(path, {
+      encoding: "utf8",
+      flag: "r",
+    });
+  }
+  if (canvasMarkdown === null) return "";
+
+  return canvasMarkdown;
+}