fskpf / svg2roughjs

Create sketchy, hand-drawn-like images from SVGs
https://fskpf.github.io/
MIT License
153 stars 13 forks source link

stand alone executable #93

Closed nkh closed 10 months ago

nkh commented 1 year ago

Hi, could you make it clear how to build/get a stand alone command for us non js folk?

That would help making cool images without relying on an internet connection.

svg2roughjs (2)

fskpf commented 1 year ago

I've added instructions on how to build the project locally now: https://github.com/fskpf/svg2roughjs/tree/master#local-build. Other than that, you can also obtain the current build from (e.g.) unpgk: https://unpkg.com/browse/svg2roughjs@latest/

The current implementation relies on the DOM implementation of the browser. Therefore it needs to run in a browser (or in something with a DOM implementation).

To create a self-contained executable, it might work to bundle it with a (headless) browser and provide some kind of CLI. Otherwise, the core implementation would need to be changed.

nkh commented 1 year ago

HI, and once I have run the commands above, how do I run it in a browser?

fskpf commented 1 year ago

You could set up a simple HTML file, including the UMD bundle as described here.

Here https://jsfiddle.net/bc4ywxs2/ is also a minimal running example, where you could just replace the unpkg.com reference with the local UMD bundle.

Alternatively, use the provided sample-application of the project, i.e.

> cd .\sample-application\
> npm install
> npm run dev

This starts a Vitejs server that serves the sample application on http://localhost:5173/. However, note that the sample application directly depends on the /src/ files (see the import here) and not the build artifacts in /dist/.

For a more in-depth guide on how to use npm packages in general, please have a look at one of the many NPM or web-dev guides, for example, https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/ or https://css-tricks.com/a-complete-beginners-guide-to-npm/.

fskpf commented 1 year ago

I've added a simple Node.js CLI with Puppeteer to the project: https://github.com/fskpf/svg2roughjs/tree/master/nodejs-cli

It is still not a standalone executable but maybe this can be packaged like one, Idk. However, for now, it can be used with Node.js, e.g.,

node nodejs-cli/src/svg2roughjs ./test/complex/bpmn-diagram/test.svg -o ./test.svg

To create a sketch from the given SVG file (see the README for its usage). Didn't test it much, though.

nkh commented 1 year ago

@fskpf fantastic, that's easy enough to throw in a shell script.