mark-when/markwhen

Make a cascading timeline from markdown-like text. Supports simple American/European date styles, ISO8601, images, links, locations, and more.

Markwhen is alive and well, just not in this repository

Markwhen's components have been separated and live in other repositories under the mark-when organization.

The web app (the editor) is the only thing that isn't open source. Everything else (including the timeline itself and the vs code extension) is - check out the links below and the diagram of repositories image.

Markwhen

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

⚠️ Note that if you intend to run markwhen locally you may also want to host views locally ⚠️

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 [email protected]:mark-when/markwhen.git
> cd markwhen
> npm i
> npm run dev

(Optional) Run the timeline view locally:

> git clone [email protected]:mark-when/timeline.git
> cd timeline
> npm i
> npm run dev

(Optional) Update useViewProviders:

/* src/Views/useViewProviders.ts */
...

export const useTimelineExternalProvider = () => ({
  id: "markwhen.timeline",
  name: "Timeline",
- url: "https://timeline.markwhen.com",
+ url: "http://localhost:5173"
...
})

The renderer renders whatever is given to the markwhenStore.

To enable editing from the timeline view, set editorOrchestrator.editable to true:

const editable = ref(true);

Dockerized

> git clone [email protected]:mark-when/markwhen.git
> cd markwhen
> docker build -t markwhen .
> docker run -p8080:8080 markwhen

This should build a development markwhen image from the Dockerfile and run it on port 8080. Once running, it should be available at http://localhost:8080

Documentation

Documentation is located here.

markwhen's Issues

Map: Google does not recognize the API key

When trying to load a map view, no locations are being displayed.

Instead, an error message appears in the Doc (...ument?) list view.

Date a11y and i18n

The section on Date formatting is ambiguous about how to format a date string:

Date formatting

Non-ISO8601 dates default to American formatting (Month/Day/Year). This can be changed to European formatting by adding the following line in the header area (before any event):

dateFormat: d/M/y

This is a hardcoded line, any other format attempt will not work.

The question is:

• Is it imaginable to change this into other representations as well?
  Thinking of the actual European d.M.y ;) (d/M/y is rather very British), or "short" ISO y-M-d, which many like, too.

If there'd be some kind of Markup for dates. such as []: or similar, one could also consider adding one or both of

• https://date-fns.org/
• https://momentjs.com/

Support Time

This is a great project! Thank you!

Would it be possible to support time? Ideally to the millisecond would be perfect. We’re looking for a timeline for incident management and need to support events with that precision.

Feature Request: centrally managed configuration and defaults

When hosting a cascade.page instance, I like to define the configuration in a certain way, for example, with the sidebar disabled and with the "light" theme enabled.

Currently, to do this requires adjusting the defaults of the Vue components or injecting custom code to fill the localStorage with these configuration options.

It would be great if such options could be defined centrally in a JSON file that is either compiled into the instance or loaded over AJAX so that people running their own instance do not have to (pre)compile Nuxt.

Example of configuration options that would be nice to have:

• hide/show certain buttons in the sidebar
• set default theme that is statically compiled by Nuxt (to prevent a theme change flash on hydration)
• set editor pane enabled/disabled
• enable/disable theme switcher
• etc

Plugin system?

There are a lot of avenues of customization that could probably be better served by a plugin system than me trying to implement every possible idea.

Ways in which plugins could interact with markwhen:

• Custom time labels
• Custom views (more than the current timeline/map/doc views)
• Custom date parsing
• Custom themes

Some challenges this introduces:

• What the plugin API would look like
• Should there be an offline editor
• How to choose, install, and uninstall plugins
• Is a plugin system worth the effort

Expand text edit box

Or make it resizable

Feature Request: Vertical (print friendly) orientation for timeline

I first saw this suggestion from this HN comment. This would be the keystone feature of your tool that would enable me to use it in a significant capacity (writing a non-fiction book, among other things). Presently, I'm weary of integrating this tool into my workflow because I may need to switch tools depending on the timeline shape I need - depending on space and content.

I can share more details/vision on this enhancement request as needed. I know I left this pretty open-ended in its current form.

PWA

Loving Markwhen! Any chance of it becoming a progressive web app? Would be lovely to be able to run it on an iPad without having to invoke a browser tab...

Theming

Be able to specify colors and whatnot (background, text, date markers, etc.)

Not sure if this should be a plugin type thing, prespecified themes that you can choose from, or very customizable in the header on a per cascade basis

Use Arbitrary Counter as Timeline

I want to be able to use a counter (that represents an arbitrary thing, not just dates) as the basis for events. For example,

5-20: Event 1
90-150: Event 2
45-68: Event 3

etc.

When I tried this in the live example, it treated it like a percentage and only went up to 100.
It won't let me zoom out any more

Please add a LICENSE

Great project! Thanks for creating it.

Can you please add a LICENSE to the repository? GitHub makes this really easy and Choosealicense.com helps you pick a license.

Zoom to Smaller and Larger Timescales

This tool is great for timelines that are days/months/years long, but unless I'm missing something it falls short when we move to minutes/seconds/milliseconds. I'm trying to diagram out a phone hunt group and the entire thing takes place in a span of 45 seconds, with actions typically lasting anywhere from 5 to 15 seconds and even at the strongest zoom level, it's still zoomed out too far to be useful.

Support standard Markdown headings

This is an impressive piece of work, Rob.
I help build plugins for the flexible and extensible NotePlan app, and so am familiar with debates around Markdown syntaxes and interoperability questions between different Markdown editors.
I was surprised to find that Markdown header syntax seems to be ignored here; I would have thought it natural that the group Section syntax would instead be simply H2 ## Sections ... possibly with H3 if you want some sub-sections in future.

To increase interoperability please consider supporting this as well as group.

Choose username save button doesn't work

Enter button works, save button does not

Separate repo for parser?

Bug: I can't create a username

Clicking on the Create Username button doesn't do anything. This makes cascade pretty much useless for me.

Chrome: Version 96.0.4664.110 (Official Build) (64-bit).

I'll take a look at the code

Can the timeline be exported to PDF?

Title

Long-term plans for markwhen

I love this project. Apologies if you've already explained elsewhere, but should any assumptions be made on how long the server app will be up and running? In other words, is this an experiment, or is it meant to last for the long term? Many thanks.

error with negative years

Hi,
Good job.
But it is not possible to insert negative years.

Will it be possible to self-host it?

Auto sort events

Enter events in any order and have a button that sorts them automatically

Dropdowns cut off when Sidebar is too small

When the sidebar is dragged to be small, the Dropdown menus are cut off on Firefox/Ubuntu so that you can no longer see the options present.

Sorry for the flood of Bug reports. This projects looks really interesting and I'm excited for it's future :)

How-to/syntax explanation area

Add a section to the sidebar that gives an overview of how the site works and what the syntax is

Groups not collapsible

Using Markwhen on Firefox on Ubuntu groups can not be collapsed.

Color picker for tags

Show last editted time

colors

It would be nice if one was able to assign a specific colour to an entry

perhaps something like this

red 09/2019: Hawaii with Google
blue 12/20/2019-12/22/2019: Train from Seattle to Chicago
red 12/2019: Christmas at home, Dad to hospital

Wikipedia Scraping

Hi,

I'm a teacher. I use timelines a lot for both personal use and teaching.

Can Cascade display dates in BC - even back billions of years?

Can the code be entered to show images by default, rather than having to click?

Can the system support images from Wikipedia?

My goal is to be able to enter something like this:
Early Mycenaean period 1750-1400 BC
https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Mycenaean_World_en.png/330px-Mycenaean_World_en.png
Palatial Bronze Age 1400-1200 BC
Postpalatial Bronze Age 1200-1050 BC

Such a HUGE help if these things were possible.

Sincerely,

Acherates

Feature Request: CLI tool to render on command line

It would be really great to render the chart from the CLI. This way markwhen could be integrated into something like github pages.

Expandable timelines

Foremost: I love this project. I have been playing around with it for hours and I want to use it for many things both private and at work.
I would love it, if I could specify expandable / nested dates. Usecases are: Changing position at the same company, creating some kind of high/low level structure.
I am not expecting you to implement this, after all, you have already selflessly open sourced this great project. Just in case you are looking for additions worth implementing, I would vote for this one!

Feature request: define static cascade files to display on start

I would like to host the Cascade editor as read-only, and preload a few cascades for visitors to look at, since this would function well as a public roadmap. Currently to do so would require hacking the HTML and prefilling the LocalStorage, correct?

Edit: considering that Nuxt can statically render using 'npm run generate' I guess the only thing needed is a way to set context.req.timelineFile when server-side rendering

Map view

If a mw file has locations, enable a map view of those locations.

Initially start with just pins (don't try to do any routing or paths, as there are no guarantees about order)

Add ability to copy/fork timelines

Loading indicator for loading external url

When loading a mw via hash (#from=/some/path)

Linkify supplemental text

VS Code extenstion

It would be great to have a VS Code extension, like PlantUML has, to edit and generate timelines in the IDE. It will make it quicker to iterate timelines.

Display event description on hover

Sometimes an event my span the entire screen and the only way to view the event description is to scroll to the end of the event. Displaying the event description on hover would help with usability.

Feature Request: Import from Github Repo

It would be amazing if there was a way to pass in a github repo that has a .mw file in the root directory and automatically open the timeline. Maybe it could be built into the URL, something like markwhen.com/repo/(user)/(repo)?

This would allow for crowd-sourced collaboration on timelines without having to send a file back and forth.

Could I work on an Obsidian Plugin for this!

I love this! I would love it in an obsidian plugin. I could help creating that.

Raymond Doran

BCE

Any chance of getting the ability to use BC years.

Text content dropdown when clicking on events

It would be nice to be able to add more text content to an event without having to make an extremely long description. Might look something like the current photos dropdown, except that it just displays more text. There would also have to be some way to add multiline text in the timeline creator text editor.

Drag and Drop Firefox/Ubuntu

Drag and Drop/Click and Drag does not work in Firefox on Ubuntu.

See also: Hackernews comment

More human readable and writable dates

For example, [July 4 1776, 4th of July 1776, July fourth 1776] instead of 7/4/1776

Browse/Explore page (or, more likely, sidebar component)

Support [x] check box to indicate completion

There isn't a single agreed standard about notating tasks in Markdown, but many tools now support something like

- [ ] incomplete task
* [x] complete task

You have % completion. In order to improve interoperability with markdown used in other editors and task systems (e.g. NotePlan), please consider supporting at least the [x] syntax to indicate 100% completion.

Roadmap?

This looks like a great project! I found it when I was looking for a markdown-compatible timeline app to use with my Obsidian.md notes. Is there any chance that markwhen (terrific name, by the way!) will be able to import/export .md files?

For that matter, is there a public roadmap available?

Thanks!
J

Supporting working-back-from-immovable-deadline planning

I've tried and so far failed to be able to express my plan in Markwhen. The challenge in this case is it's not a forward-waterfall plan, but a working-back-from-an-immovable-deadline plan.

Ideally I want to write something like:

title: Annual Meetings 2023 (Markwhen plan)
description: A summary of what's needed and when
dateFormat: d/M/y
#announcements: red

before !ACM 2 month: revise voting eligibility list
before !ACM 6 weeks: publish notice of ACM #announcements
before !ACM 2 weeks: publish revised voters list
10/4/2023: ANNUAL CHURCH MEETING !ACM
after 1 week: publish results of elections #announcements

The 'before' syntax isn't available, so I tried negative relative dates:

title: Annual Meetings 2023 (Markwhen plan)
description: A summary of what's needed and when
dateFormat: d/M/y
#announcements: red
---
after !ACM -2 month: revise voting eligibility list
after !ACM -6 weeks: publish notice of ACM #announcements
after !ACM -2 weeks: publish revised voters list
10/4/2023: ANNUAL CHURCH MEETING !ACM
after 1 week: publish results of elections #announcements

but this doesn't work.

Is there an existing way to do this? If not, please add support for this kind of use case.

Panning

Ability to pan with mouse.

Had had something working earlier but it messed with mobile too much that I thought it would be better to remove it.

Feature request: allow symbolic time labels instead of only years

This tool is absolutely amazing! I see the potential of using this as a roadmap visualization that can be generated, but for that it would be nice to use symbolic time notations instead of the years at the top. Something like "Q1", "last year", "next year" etc.

Is that possible?

Site can become unresponsive Firefox/Ubuntu

When changing Tabs the site can become unresponsive on Firefox/Ubuntu.

By unresponsive I mean, that I can no longer input text in the editor and I can also no longer click anything in the UI/renderer.

I don't know whether they are related but I'm also getting several errors in Console saying:
Uncaught ReferenceError: TouchEvent is not defined r NuxtJS
These errors are being thrown when I move the cursor.

I also get the following error:
Error: Promised response from onMessage listener went out of scope