Svg generator for steno outlines

[IllustratedMan-code]

Hi! I saw in the book that you would like help to shift all the outlines to SVG. I don't think it would be that difficult for me to create some custom javascript code to convert strokes (e.g. SKR) into svg images. It would even be possible to have a custom HTML element that would be specifiable by something like <outline stroke="SKR">. It looks like you can include custom javascript into mdbook so it should be possible to have the custom elements available in markdown.

I would only need the SVG that is used to generate the previews in the book to get started.

[aerickt]

Hello! Thank you so much for offering your help! The custom HTML idea is very awesome. Here are the SVG files:

Let me know if there's anything else I can help you with.

[IllustratedMan-code]

Looks like I can't download these images because they are hosted in a private repository. I think you need to download the images and upload them here manually for me to access them.

Edit: Never mind, github was just being weird I think

[IllustratedMan-code]

I have a proof of concept here. I'll work on integrating it into this repo soon and I'll make a pull request.

Github Repo: https://github.com/IllustratedMan-code/steno-visualizer

Test website: https://illustratedman-code.github.io/steno-visualizer/

[aerickt]

Looks awesome! I have just a few minor suggestions.
The two files I sent are actually two separate colour schemes; the top is for the site's dark themes and the bottom is for the light ones. I was thinking that it could look a little like the plover-svg-layout-display plugin where unpressed keys are just blank.

So, H-L/WORLD would look something like this for the two themes:

I'd also been looking at some of the default themes in mdbook; I wonder if it's possible to make the diagrams match those colour schemes instead of just the two above?

Thanks for the cool work, I am looking forward to seeing the pull request!

[IllustratedMan-code]

See #35. I managed to implement this + animations.

[evgenyfadeev]

@IllustratedMan-code it might or not help you but in the typeytype repo there is a React component that renders the steno keyboard.
It would need an adaptation to the use case that you're suggesting (it uses different input), but the presentational part is already there.

Perhaps the book could be migrated to Astro and there the react components could be integrated.

https://github.com/didoesdigital/typey-type

[IllustratedMan-code]

I managed to implement it fairly well in vanilla js I think. I'm certainly not a web developer, so dipping into react scares me.