# [Markwhen](https://markwhen.com)
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](https://markwhen.com).
This repo is for the view container, not the editor. The editor (markwhen.com) and [VSCode extension](https://marketplace.visualstudio.com/items?itemName=Markwhen.markwhen) 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](https://github.com/mark-when/view-client-library).
| Links | |
| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| Editor | [https://markwhen.com](https://markwhen.com) |
| VSCode extension | [https://marketplace.visualstudio.com/items?itemName=Markwhen.markwhen](https://marketplace.visualstudio.com/items?itemName=Markwhen.markwhen) |
| Documentation | [https://docs.markwhen.com](https://docs.markwhen.com) |
| Blog | [https://blog.markwhen.com](https://blog.markwhen.com) |
| Parser | [https://github.com/mark-when/parser](https://github.com/mark-when/parser) |
| Timeline View | [https://github.com/mark-when/timeline](https://github.com/mark-when/timeline) |
| Calendar View | [https://github.com/mark-when/calendar](https://github.com/mark-when/calendar) |
| Resume View | [https://github.com/mark-when/resume](https://github.com/mark-when/resume) |
| View Client Library (for making your own views) | [https://github.com/mark-when/view-client](https://github.com/mark-when/view-client) |
| Vue view template | [https://github.com/mark-when/vue-view-template](https://github.com/mark-when/vue-view-template) |
<br>
## Get updated
If you'd like to be kept up-to-date about markwhen's feature development, add your email [here](https://docs.google.com/forms/d/e/1FAIpQLSceSLgm90NljlcMvdU2Ly45JYB7ZWGN1BNzQg-T-NSWO1Hm-w/viewform?usp=sf_link).
<br>
## VSCode Extension
Get the VSCode extension [here](https://marketplace.visualstudio.com/items?itemName=Markwhen.markwhen).
To switch between the text editor and the timeline view, select `View: Reopen editor with...` from the command palette and choose `Text Editor`.
<br>
## 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](https://github.com/mark-when/timeline) (or other view) and update [`useViewProviders`](src/Views/useViewProviders.ts) accordingly:
```diff
/* 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:
```sh
> git clone
[email protected]:mark-when/markwhen.git
> cd markwhen
> npm i
> npm run dev
```
(Optional) Run the timeline view locally:
```sh
> git clone
[email protected]:mark-when/timeline.git
> cd timeline
> npm i
> npm run dev
```
(Optional) Update [`useViewProviders`](src/Views/useViewProviders.ts):
```diff
/* 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`](src/Markwhen/markwhenStore.ts).
To enable editing from the timeline view, set [`editorOrchestrator.editable`](src/EditorOrchestrator/editorOrchestratorStore.ts) 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](./Dockerfile) and run it on port `8080`. Once running, it should be available at http://localhost:8080
## Documentation
Documentation is located [here](https://docs.markwhen.com).