Make a cascading timeline from markdown-like text. Supports simple American/European date styles, ISO8601, images, links, locations, and more.
Markwhen is an interactive text-to-timeline tool. Write markdown-ish text and it gets converted into a nice looking cascading timeline.
Use the editor here.
This repo is for the view container, not the editor. The editor (markwhen.com) and VSCode extension are built on top of the view container.
The view container renders different views, like the timeline and the calendar. It is possible to create your own views using the view client library.
| Links | |
|---|---|
| Editor | https://markwhen.com |
| VSCode extension | https://marketplace.visualstudio.com/items?itemName=Markwhen.markwhen |
| Documentation | https://docs.markwhen.com |
| Blog | https://blog.markwhen.com |
| Parser | https://github.com/mark-when/parser |
| Timeline View | https://github.com/mark-when/timeline |
| Calendar View | https://github.com/mark-when/calendar |
| Resume View | https://github.com/mark-when/resume |
| View Client Library (for making your own views) | https://github.com/mark-when/view-client |
| Vue view template | https://github.com/mark-when/vue-view-template |
Get updated
If you'd like to be kept up-to-date about markwhen's feature development, add your email here.
VSCode Extension
Get the VSCode extension here.
To switch between the text editor and the timeline view, select View: Reopen editor with... from the command palette and choose Text Editor.
Self-hosted views
The default view is hosted from https://timeline.markwhen.com. You may want to run your own local instance of the timeline (or other view) and update useViewProviders accordingly:
/* src/Views/useViewProviders.ts */
...
export const useTimelineExternalProvider = () => ({
id: "markwhen.timeline",
name: "Timeline",
- url: "https://timeline.markwhen.com",
+ url: "http://localhost:5173"
...
})
Quick start
View container:
> git clone git@github.com:mark-when/markwhen.git
> cd markwhen
> npm i
> npm run dev
(Optional) Run the timeline view locally:
> git clone git@github.com:mark-when/timeline.git
> cd timeline
> npm i
> npm run dev
Documentation
Documentation is located here.
from
https://github.com/mark-when/markwhen
----------------------------------------------------
Markwhen CLI
I have published a markwhen cli that you can use to generate markwhen views (single html files) from the command line.
Installation
npm i -g @markwhen/mw
Parse markwhen document and output json:
mw project.mw
# -> outputs timeline.mw.json
Render a timeline view:
mw my_markwhen_file.mw timeline.html
# -> outputs timeline.html (timeline+gantt view)
Render a calendar view:
mw ThingsToDo.mw ThingsToDo-calendar.html
# -> outputs ThingsToDo-calendar.html (calendar view - inferred from the filename)
See this issue for more information.
Other updates
from
https://blog.markwhen.com/posts/2023-03-27-mw.html
-------------------------------------------------------------------------
Markwhen CLI
@markwhen/mw
mw is the markwhen command line interface (CLI). You can use it to parse markwhen files and optionally render a view of it (timeline+gantt/calendar/resume).
All html output is self-contained; js and css are inlined and there are no external scripts.
Installation
npm i -g @markwhen/mw
Usage
Output HTML
mw [serve] <input_file> [<destination>] [-o <outputType>] [-d <destination>] [-p <port>] [-s <socket_port>]
| Option | Description |
|---|---|
serve |
If provided, will start a server at the specified port and watch the input_file for changes |
outputType |
one of json | timeline | calendar | resume |
destination |
File to write to. Output type can be inferred from the filename if outputType is not specified; i.e., files ending in timeline.html will produce the timeline view, files ending in json will produce the raw parse output. |
port |
If serving, port to serve from |
socketPort |
If serving, socket port to serve from |
Parse markwhen document and output json:
mw project.mw
# -> outputs timeline.mw.json
Render a timeline view:
mw my_markwhen_file.mw timeline.html
# -> outputs timeline.html (timeline+gantt view)
Render a calendar view:
mw ThingsToDo.mw ThingsToDo-calendar.html
# -> outputs ThingsToDo-calendar.html (calendar view - inferred from the filename)
Start a server and watch file
mw serve <input_file> will start a server and reflect changes to the input file.
Watch projects.mw and get immediate updates in localhost:3000:
