diff --git a/package-lock.json b/package-lock.json index ed872a8..3eaf993 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "rehype-jsoncanvas", - "version": "0.1.0", + "version": "0.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "rehype-jsoncanvas", - "version": "0.1.0", + "version": "0.1.1", "funding": [ { "type": "individual", diff --git a/package.json b/package.json index bd56df8..a22ce57 100644 --- a/package.json +++ b/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", diff --git a/readme.md b/readme.md index 19b5a44..bddfa12 100644 --- a/readme.md +++ b/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. diff --git a/src/options.ts b/src/options.ts index 5312546..70bca4d 100644 --- a/src/options.ts +++ b/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 { 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: diff --git a/src/plugin.ts b/src/plugin.ts index 49295ad..fafb7fd 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -30,14 +30,14 @@ Things decide: */ -export const rehypeJsonCanvas: Plugin<[], Root> = () => { +export const rehypeJsonCanvas: Plugin<[], Root> = ( + config?: Partial, +) => { return async (tree) => { const nodesToReplace = [] as Array // 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,8 +53,9 @@ 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 @@ -62,7 +63,7 @@ export const rehypeJsonCanvas: Plugin<[], Root> = () => { if (validate(jsonCanvasFromString)) { canvas = render(jsonCanvasFromString, {}) } else { - canvas = h("div", "
Not a properly formatted JsonCanvas
") + canvas = h("div", "Not a properly formatted JsonCanvas") } if (!canvas) return @@ -81,7 +82,8 @@ export async function getCanvasFromEmbed( config?: Partial, ): Promise { 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",