Allow for tags/hashtags, e.g. #job (updated)

[michaelowens]

This simple modification will allow for optional tags by adding it at the end of your event, like so:

@USERNAME's life
===============

- 24/02/1955 Born
- ~1968 Summer job #job
- 03/1976 Built a computer #life #job
- 01/04/1976 Started a [company](http://en.wikipedia.org/wiki/Apple_Inc. "Apple Inc.") #job
- 04/1976-2011 Whole bunch of interesting events

These can then be easily styled with a custom css:

#life .event.tag-school .time {
    border: 4px solid #1abc9c;
}

#life .event.tag-job .time {
    border: 4px solid #3498db;
}

To see this working, I have it running myself currently and works like a charm:
http://timeline.owens.nl/

[cheeaun]

I think the [] syntax might be confusing since it's a bit like links. A better option would be a #hashtag which then an event could have multiple hashtags?

[michaelowens]

That is a legitimate suggestion. Would you want the hashtags to be visible as well on the timeline, or should it remove them?

[cheeaun]

Making it visible would be good, which later can be made into a clickable link to filter events by that tag (or even multiple tags?). I'm considering this to be a better solution to #4 , being more useful and flexible than normal categories/groups.

[michaelowens]

Alright, I'll have a go at that.

[michaelowens]

Alright, I added hashtags and they're configurable by setting "hideTags". By default they are shown.

(also added a gitignore for IDE settings and the non-example config files) @cheeaun

[michaelowens]

Also, 2 more things I noticed:

• Spaces are converted to   so multiple hashtags after each other might 'cause a lot of spaces. Add something like a trim?
• Currently I add the tags as class to the .time div. Should I put it on .event in stead?

[cheeaun]

• I don't think you need to trim them. When rendered in the browser, the spaces are ignored/collapsed anyway.
• Add the tag classes to .event. And prepend the classes with tag-, just in case someone create a #event hashtag 😏

[michaelowens]

Alright, prepended with tag- and added to the .event-div. Once again it's running on my timeline to see it working: http://timeline.owens.nl

The CSS then e.g. looks like:

#life .event.tag-school .time {
    border: 4px solid #1abc9c;
}

#life .event.tag-job .time {
    border: 4px solid #3498db;
}

[michaelowens]

@CharlesLirsac we could add a config to the new solution here to have colors in the config file rather than a custom css? That way we have the hashtags as mentioned above (better syntax than square brackets) and easier to configure.

[lirsacc]

@michaelowens Yes that's exactly what I meant, but as I am now using the old syntax with brackets so I wanted to wait for your code to be merged and then update accordingly, sorry if I wasn't clear. (I don't really care if it's here or in a separate PR)

The custom css remark was just to say that if we want to customize tags with more than just color, a custom css file might be better suited than complicating the config file.

[cheeaun]

@CharlesLirsac there is already a custom stylesheet option.

[lirsacc]

@cheeaun I know, that's my point : with the tags implemented, using the custom stylesheet seems a better solution for customization (compared to adding stuff to the config and js rendering process), though color is simple enough to be built-in

[thomasschmit]

Is it possible to merge these commits?

[nogweii]

Another vote to see this included. @michaelowens do you have time to rebase this on latest master?