mlevit / life

Life - a timeline of important events in my life

Life

Life is a simple event timeline of events important to your life. This repository is a fork of the original repository with a few updates.

You can have a look at the new life timeline here https://life-public.vercel.app/.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install --legacy-peer-deps

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Features

• Super simple
• No fancy formatting
• No fancy setup
• No fancy effects
• Flexible datetimes because sometimes you don't remember the exact date of an event

Newly added features

• Event filtering
• Personal avatar (because why not)
• Hashtags to help clasiffy your events (optional)
• Notes to add that extra bit of info (optional)
• Vue.js + Vite for a single HTML page design

How to contribute

1. Fork this project.
2. Write code.
3. Make pull requests.

How to setup your own Life

1. Fork this project.
2. Add your life events into life.md.
3. Preview it on a local server. Use python -m http.server or http-server.
4. Commit life.md.
5. Tell the world about your Life.

How to configure your Life

Head on over to src/assets/life.config.json. There you'll find the following configurable variables:

• avatarURL - (string, default to null) Path to avatar.
• showAge - (boolean, default to true) Option to show age within the year axis.
• yearLength - (number, default to 120) The width of the year grids, in pixels.

Datetime "syntax"

• 2000 - event that happen in that year
• 01/2000 - event that happen in that month/year
• 01/01/2000 - event that happen exactly in that day/month/year
• 2001-2005, 10/2001-02/03/2005 - event that happen within the two dates
• ~2005 - event that happen around the time in that year
• 2005-~ - event that happen from that year and beyond (now).

Hashtags

Tags can be added to each event. Simple start each tag with a #. They will be automatically parsed up and added to the timeline.

Notes

Notes can be added to each event. Simple enclose the note within curly braces {}. They will be automatically parsed and added to the timeline as a tooltip.

Todo

• Cleanup of JavaScript file
• Replace CSS file with Tailwind CSS
• Avatar
• Better way to visualise links inside events
• Event filtering / search by title or tag
• Event notes

License

MIT