Simplest "view-only" behavior for publishing on vanilla HTML sites?

[shah]

@kochrt this is a fantastic project, thanks for putting it together! We're using the VS Code extension for editing but we have a (seemingly) simple need: publishing a read-only interactive web version for in use in browsers. Similar to Mermaid and Markmap others that allow text to HTML/Js visualizations does Markwhen support creating browsable output for vanilla HTML sites (this is not the same as export/SVG).

For example, Mermaid and Markmap have an easy integration by just using <div class="mermaid">...content...</div>. How could we do something similar to make Markwhen markdown browsable?

[hikrr]

I also want to ask whether it is possible to have a timeline renderer support for react. Or any examples or existing projects using react with markwhen to learn from. (I found there are parser and view-client on npm, but no UI renderer components)

(Btw, this is a really great project, the good-looking style, the idea, etc.)

[kochrt]

@shah HTML output is a good idea... the timeline, like all views, is framed, so it's already well encapsulated. The only problem is that it expects some outside input to know what to render. Which would normally be given to it by the app (markwhen.com or the VS Code extension).

I guess if all assets were inlined (css and js), one could simply download the page 🤔 🤔. I will investigate this further.

@hikrr If you implement the view orchestrator stuff in your react site you could host the timeline component. In fact I'm kind of doing the reverse thing - the calendar view is a react component and I am running it with the ViewOrchestrator which is in vue.

useLpc is just a wrapper around postMessage, and useStateSerializer puts the app state into a nice JSON object that we can send via postMessage. So if you hosted the timeline view you could more or less send a "state" update and the timeline would be rendered: lpc.postRequest("state", toRaw(stateSerializer.value));

[shah]

Thanks for the elaboration @kochrt - seems like Markwhen would be a perfect fit for static site generators. Currently we're using Mermaid's Gantt and Timeline views in our Astro-based SSG but Markwhen is easier to write, more feature-packed and nicer to look at so we look forward to reading about the results of your investigation.

[kochrt]

@kochrt should probably be a vite plugin like https://github.com/antfu/vite-plugin-md

[kochrt]

@shah I just published @markwhen/mw on npm (repo).

With it you can do something like

mw my-timeline-file.mw timeline.html

from a terminal to convert a markwhen file to the timeline html. The html is fully contained (all js/css is inlined and no external scripts). It outputs an entire document, so if you wanted it as just a view on a page (as opposed to an entire page) you'd have to put it in an iframe.

If you try it, please let me know how it goes or if you have suggestions for improvement.

[shah]

That's great news @kochrt - I appreciate the note and will give it a shot this weekend, thanks!

[shah]

Thanks for this great feature @kochrt - it worked well for me.

Potential bug:

• When I used npx @markwhen/mw -o timeline -d my_name.html it did not seem to work but when I used npx @markwhen/mw timeline.html it did work.

Suggestions:

• Allow passing in additional arguments for showing "now" line, expand/collapse all, etc.

[kochrt]

@shah Did you provide an input file in both cases? npx @markwhen/mw input.mw -o timeline -d my_name.html

[shah]

Yes I tried a couple of variations, @kochrt it's pretty strange -- in my Node project, if I do this (my MarkWhen file is public/roadmap-prime.mw):

npx @markwhen/mw public/roadmap-prime.mw -o timeline -d public/roadmap-prime_timeline.html

The content in public/roadmap-prime_timeline.html is JSON but when I do this:

npx @markwhen/mw public/roadmap-prime.mw -d public/roadmap-prime_timeline.html

The content in public/roadmap-prime_timeline.html is HTML.

I run the commands directly from my NodeJS root and I have a package.json task defined so I can run it conveniently from there, too.

[kochrt]

Sorry about that, should be fixed in 1.1.1, just published it

[shah]

Excellent, thanks @kochrt I'll check it out soon and report back.

[shah]

@kochrt should npx automatically pick up the latest version? When I used this a few minutes ago:

$ npx @markwhen/mw public/roadmap-prime.mw -o timeline -d public/roadmap-prime.html

My public/roadmap-prime.html output file contains JSON. If you can refine the CLI I should use to get the latest that would be helpful.

Thanks!

[kochrt]

Hm can you try adding @latest?

npx @markwhen/mw@latest ...

[shah]

Perfect, that did the trick @kochrt - thanks!