Comments (14)
@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.
from markwhen.
@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));
from markwhen.
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.)
from markwhen.
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 usednpx @markwhen/mw timeline.html
it did work.
Suggestions:
- Allow passing in additional arguments for showing "now" line, expand/collapse all, etc.
from markwhen.
Sorry about that, should be fixed in 1.1.1
, just published it
from markwhen.
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.
from markwhen.
@kochrt should probably be a vite plugin like https://github.com/antfu/vite-plugin-md
from markwhen.
That's great news @kochrt - I appreciate the note and will give it a shot this weekend, thanks!
from markwhen.
@shah Did you provide an input file in both cases? npx @markwhen/mw input.mw -o timeline -d my_name.html
from markwhen.
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.
from markwhen.
Excellent, thanks @kochrt I'll check it out soon and report back.
from markwhen.
@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!
from markwhen.
Hm can you try adding @latest
?
npx @markwhen/mw@latest ...
from markwhen.
Perfect, that did the trick @kochrt - thanks!
from markwhen.
Related Issues (20)
- Search for TAGs HOT 1
- View link opens greyscale version HOT 1
- The Markwhen VS Code extension is nowhere to be found HOT 3
- Feature request: Allow specifying key dates that show vertical bar like "now" bar HOT 2
- Missing export to SVG feature HOT 2
- [Feature request] Continuous vertical line for custom date HOT 2
- When Dockerized, how to load local .mw file HOT 1
- Export from VSCode HOT 1
- MacOS Icon HOT 5
- VSCode extension: syntax highlighting HOT 1
- Dockerhub HOT 8
- VS Code extension update 1.4.0 broke visualization. HOT 2
- Reminder/notification :
- Change discord link in example timeline
- Publish to open-vsx.org HOT 1
- version 1.4.0+ Can't resize time windows
- Coloring a one-day event
- Is there a way to connect an online calendar to the view?
- Tags are not support for other languages
- [Feature Request] Persistence sort and zoom state HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from markwhen.