diff --git a/example/example.canvas b/example/example.canvas index 3b396f0..8cc12fb 100644 --- a/example/example.canvas +++ b/example/example.canvas @@ -31,7 +31,7 @@ { "id": "61ed4f3ea922e776", "type": "file", - "file": "example.jpeg", + "file": "img/example.jpeg", "x": 20, "y": 300, "width": 400, diff --git a/src/embed.ts b/src/embed.ts index d576edb..e418c6e 100644 --- a/src/embed.ts +++ b/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 + svg.properties.renWidth / 2, y: 5 + node.y + svg.properties.renHeight / 2, width: node.width - 10, height: node.height - 10, - "xlink:href": node.file, + "xlink:href": imgPath, }) grp.children.push(image) diff --git a/src/options.ts b/src/options.ts index b448aba..02a9cd6 100644 --- a/src/options.ts +++ b/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 { ? 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: diff --git a/src/plugin.ts b/src/plugin.ts index e32a855..43346e7 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -30,7 +30,7 @@ Things decide: */ -export const rehypeJsonCanvas: Plugin<[], Root> = ( +export const rehypeJsonCanvas: Plugin<[(Options | undefined)?], Root> = ( config?: Partial, ) => { 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 ""