added groupings by markdown headings

.gitignore

@@ -0,0 +1 @@
+*.sw[opnm]

index.html

@@ -44,11 +44,28 @@
 	font-weight: 300;
 	white-space: nowrap;
 }
-#life{
+.life:first-of-type{
 	padding-top: 40px;
+}
+.life:last-of-type{
 	padding-bottom: 5em;
 }
-#life section.year{
+.life section.title{
+    position: absolute;
+    left: 0;
+    width: 100%;
+    font-weight: bolder;
+	color: rgba(255,255,255,.5);
+}
+.life section.now{
+	border-left: 1px dashed rgba(255,0,0,0.5);
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	padding-left: 10px;
+	padding-top: 10px;
+}
+.life section.year{
 	box-sizing: border-box;
 	border-left: 1px dashed rgba(255,255,255,.1);
 	color: rgba(255,255,255,.3);
@@ -61,17 +78,26 @@
 	font-weight: 300;
 	white-space: nowrap;
 }
-#life .event{
+.life .event:first-of-type{
+    padding-top: 20px;
+}
+.life .event{
 	padding-right: 20px;
 	padding-bottom: 5px;
 	vertical-align: middle;
 	white-space: nowrap;
 }
-#life .event b{
+.life .event b{
 	font-weight: normal;
 	color: rgba(255,255,255,.5);
 }
-#life .event .time{
+.life:not(:last-of-type):hover .time {
+    opacity: .7;
+}
+.life:not(:last-of-type):hover section.title {
+    color: rgba(255,255,255,0.8);
+}
+.life .event .time{
 	vertical-align: middle;
 	display: inline-block;
 	overflow: hidden;
@@ -83,17 +109,24 @@
 	position: relative;
 	left: -2px;
 }
-#life .event:hover .time{
+.life .event:hover .time{
 	opacity: .5;
 }
 </style>
 <header>
 	<h1 id="title">Life</h1>
 	<a href="https://github.com/cheeaun/life">Fork me</a>
 </header>
-<div id="life"></div>
+<div id="life" class="life"></div>
 <script>
 (function(){
+    window.onscroll = function() {
+        var items = document.getElementsByClassName("title");
+        var offset = window.pageXOffset + "px";
+        for (var i=0; i<items.length; i++) {
+            items[i].style.left = offset;
+        }
+    }
 	var life = {
 		$title: document.getElementById('title'),
 		$el: document.getElementById('life'),
@@ -140,17 +173,30 @@ <h1 id="title">Life</h1>
 			xhr.send();
 		},
 		parse: function(response){
-			var list = response.match(/\-\s+[^\n\r]+/ig);
-			var data = [];
+			var list = response.match(/(\-|#+)\s+[^\n\r]+/ig);
+            var data = [];
+            var section = {data : []};
 			list.forEach(function(l){
+                var sectionMatch = l.match(/[\#]+\s(.*)/i);
+                if (sectionMatch != undefined) {
+                    if (section.data != undefined && section.data.length > 0) {
+                        data.push(section)
+                    }
+                    section = {title : sectionMatch[1], data : []};
+                }
 				var matches = l.match(/\-\s+([\d\/\-\~]+)\s(.*)/i);
-				var time = matches[1];
-				var text = matches[2];
-				data.push({
-					time: life.parseTime(time),
-					text: text
-				});
+                if (matches != undefined) {
+				    var time = matches[1];
+				    var text = matches[2];
+				    section.data.push({
+				    	time: life.parseTime(time),
+				    	text: text
+				    });
+                }
 			});
+            if (section.data != undefined) {
+                data.push(section)
+            }
 			return data;
 		},
 		parseTitle: function(response){
@@ -234,12 +280,36 @@ <h1 id="title">Life</h1>
 			return '<div class="event" style="margin-left: ' + offset.toFixed(2) + 'px"><div class="time" style="width: ' + width.toFixed(2) + 'px"></div><b>' + d.time.title + '</b> ' + d.text + '&nbsp;&nbsp;</div>';
 			return '';
 		},
+        insertAfter: function(newElement,targetElement) {
+            //target is what you want it to go after. Look for this elements parent.
+            var parent = targetElement.parentNode;
+
+            //if the parents lastchild is the targetElement...
+            if(parent.lastchild == targetElement) {
+                //add the newElement after the target element.
+                parent.appendChild(newElement);
+            } else {
+                // else the target has siblings, insert the new element between the target and it's next sibling.
+                parent.insertBefore(newElement, targetElement.nextSibling);
+            }
+        },
 		render: function(title, data){
 			document.title = title;
 			life.$title.innerHTML = title;
 
-			var firstYear = life.firstYear = data[0].time.startYear;
-			var nowYear = new Date().getFullYear();
+            var firstYear = undefined;
+            data.forEach(function(s) {
+                s.data.forEach(function(i) {
+                    console.log(firstYear, i.time.startYear);
+                    if (firstYear == undefined || firstYear > i.time.startYear) {
+                        firstYear = i.time.startYear;
+                    }
+                });
+            });
+            life.firstYear = firstYear;
+
+            var now = new Date();
+			var nowYear = now.getFullYear();
 			var dayLength = life.yearLength/12/30;
 
 			html = '';
@@ -251,13 +321,34 @@ <h1 id="title">Life</h1>
 					'</section>';
 				days += (y % 4 == 0) ? 366 : 365;
 			}
-			data.forEach(function(d){
-				html += life.renderEvent(d);
-			});
-			life.$el.innerHTML = html;
-		}
+
+            var nowDays = (now.getTime() - new Date(firstYear, 1, 1).getTime()) / (24*60*60*1000)
+            html += '<section class="now" style="left: ' + (nowDays*dayLength) + 'px">&nbsp;</section>';
+
+            var curNode = life.$el;
+            var baseNode = curNode.cloneNode(true);
+			curNode.innerHTML = html;
+            life.insertAfter(baseNode, curNode);
+            curNode = baseNode;
+            baseNode = curNode.cloneNode(true);
+            html = '';
+
+            for (s in data) {
+                if (data[s].title != undefined) {
+                    html += '<section class="title">' + data[s].title + '</section>';
+                }
+			    data[s].data.forEach(function(d){
+			    	html += life.renderEvent(d);
+			    });
+			    curNode.innerHTML = html;
+                life.insertAfter(baseNode, curNode);
+                curNode = baseNode;
+                baseNode = curNode.cloneNode(true);
+                html = '';
+            }
+		},
 	}
 
 	life.start();
 })();
-</script>
+</script>

life.example.md

@@ -5,4 +5,8 @@
 - ~1968 Summer job
 - 03/1976 Built a computer
 - 01/04/1976 Started a company
-- 04/1976-2011 Whole bunch of interesting events
+- 04/1976-2011 Whole bunch of interesting events
+
+# places i've lived
+- 24/02/1995-2010 The moon
+- 2010-~ The sun