Merge pull request #57 from hongshaoyang/patch-1

update server command to use python3

README.md

@@ -3,7 +3,7 @@ Life
 
 This is something that I've wanted to build for a long time. It's a **timeline of important events** in my life, visualized in a way my mind always imagine it. There was something called [**Lifepath.me**](http://dcurt.is/facebook-timelines-and-lifepath-me-4) but now it's gone. How about Facebook timeline? Meh.
 
-So, this is it. Have a look at [cheeaun.github.io/life](http://cheeaun.github.io/life).
+So, this is it. Have a look at [cheeaun.life](http://cheeaun.life/).
 
 Features
 --------
@@ -28,9 +28,12 @@ How to setup your own *Life*
 2. `git checkout -b gh-pages` (or any branch name you like)
 3. Make a copy of `life.example.md`, rename it to `life.md`.
 4. Add your life events into `life.md`.
-5. Preview it on a local server. Use [`python -m SimpleHTTPServer`](http://docs.python.org/2/library/simplehttpserver.html) or [`http-server`](https://github.com/nodeapps/http-server).
+5. Preview it on a local server. Use [`python -m http.server`](https://docs.python.org/3/library/http.server.html) or [`http-server`](https://github.com/nodeapps/http-server).
 6. Commit `life.md` (not in `master` branch).
-6. `git push origin gh-pages -f` and publish to [GitHub Pages](http://pages.github.com/).
+7. `git push origin gh-pages -f` and publish to [GitHub Pages](http://pages.github.com/).
+8. Update the website link in your GitHub repo description.
+9. Tell the world about your Life.
+10. Add your Life to the [Lives](https://github.com/cheeaun/life/wiki/Lives) page.
 
 How to upgrade your *Life*
 --------------------------
@@ -60,6 +63,7 @@ The configuration:
 
 - `customStylesheetURL` - (*string*, default to `null`) Path to a custom stylesheet file, for those who doesn't like the default *theme*.
 - `yearLength` - (*number*, default to `120`) The width of the year grids, in pixels.
+- `hideAge` - (*boolean*, default to `false`) Option to hide age from year axis.
 
 Datetime "syntax"
 -----------------
@@ -74,7 +78,7 @@ Datetime "syntax"
 Other people's Lives
 --------------------
 
-Here's [a compilation of Lives from the people who has forked Life](https://github.com/cheeaun/life/wiki/Lives).
+Here's [a compilation of Lives from the people who have forked Life](https://github.com/cheeaun/life/wiki/Lives).
 
 License
 -------

index.html

@@ -3,28 +3,33 @@
 <title>Life</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="format-detection" content="telephone=no">
-<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300">
 <style>
-*{
-	font-family: Open Sans, Helvetica, Arial, sans-serif;
-}
 body{
+	font-family: Open Sans, Helvetica, Arial, sans-serif;
 	color: #fff;
 	background-color: #384047;
 	margin: 0;
 	padding: 0;
 	font-size: 12px;
 	-webkit-text-size-adjust: none;
-	position: relative;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	cursor: default;
 }
 a{
 	color: #fff;
 }
 header{
+	z-index: 3;
+	background: linear-gradient(to bottom, rgba(56,64,71,0) 0%,rgba(56,64,71,.5) 20%,rgba(56,64,71,1) 50%,rgba(56,64,71,.5) 80%,rgba(56,64,71,0) 100%);
 	position: fixed;
 	bottom: 0;
+	left: 0;
 	margin: 0;
-	padding: 20px;
+	padding: 10px;
 }
 header a{
 	margin-left: 1em;
@@ -38,7 +43,6 @@ header a:hover{
 h1{
 	display: inline;
 	font-size: 20px;
-	font-weight: normal;
 	line-height: 1em;
 	opacity: .5;
 	z-index: 3;
@@ -46,27 +50,67 @@ h1{
 	white-space: nowrap;
 }
 #life{
-	padding-top: 40px;
+	position: absolute;
-	padding-bottom: 5em;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+	cursor: -webkit-grab;
+	cursor: -moz-grab;
+	cursor: grab;
 }
-#life section.year{
+#life-years{
-	box-sizing: border-box;
-	border-left: 1px dashed rgba(255,255,255,.1);
-	color: rgba(255,255,255,.3);
 	position: absolute;
 	top: 0;
 	bottom: 0;
-	padding-left: 10px;
+	white-space: nowrap;
-	padding-top: 10px;
 	pointer-events: none;
+}
+#life-years .year{
+	display: inline-block;
+	box-sizing: border-box;
+	color: #fff;
 	font-weight: 300;
 	white-space: nowrap;
+	box-sizing: border-box;
+	height: 100%;
+	border-left: 1px dashed rgba(255,255,255,.2);
+}
+#life-years .year:first-child{
+	border-left: 0;
+}
+#life-years .year span{
+	background: linear-gradient(to bottom, rgba(56,64,71,1) 30%,rgba(56,64,71,0) 100%);
+	display: block;
+	padding: 10px;
+	position: -webkit-sticky;
+	position: sticky;
+	top: 0;
+	z-index: 3;
+}
+#life-years .year span i{
+	opacity: .5;
+	font-style: normal;
+}
+#life-events{
+	padding-top: 40px;
+	padding-bottom: 5em;
+	position: relative;
+}
+#life-events:after{
+	content: '';
+	display: block;
+	clear: left;
 }
 #life .event{
 	padding-right: 20px;
 	padding-bottom: 5px;
 	vertical-align: middle;
 	white-space: nowrap;
+	float: left;
+	clear: left;
 }
 #life .event b{
 	font-weight: normal;
@@ -247,11 +291,21 @@ h1{
 				}
 			}
 
+			// Parse Markdown links in the text
+			// credit: http://stackoverflow.com/a/9268827
+			var link = null;
+			while(link = d.text.match(/\[([^\]]+)\]\(([^)"]+)(?: \"([^\"]+)\")?\)/)) {
+				var link_attr = "";
+				if (link[3] !== undefined) {
+					link_attr = " title='" + link[3] + "'";
+				}
+				d.text = d.text.replace(link[0], "<a href='" + link[2] + "'" + link_attr + ">" + link[1] + "</a>");
+			}
+
 			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;'
+				+ '<b>' + d.time.title + '</b> ' + d.text
 				+ '</div>';
-			return '';
 		},
 		renderYears: function(firstYear, lastYear){
 			var dayLength = life.config.yearLength/12/30;
@@ -259,10 +313,10 @@ h1{
 			var days = 0;
 			var hideAge = life.config.hideAge;
 			for (var y=firstYear, age = 0; y<=lastYear+1; y++, age++){
-				html += '<section class="year" style="left: ' + (days*dayLength).toFixed(2) + 'px">'
+				var days = (y % 4 == 0) ? 366 : 365;
-					+ y + (hideAge ? '' : (' (' + age + ')'))
+				html += '<div class="year" style="width: ' + (days*dayLength).toFixed(2) + 'px"><span>'
-					+ '</section>';
+					+ y + (hideAge ? '' : (' <i>(' + age + ')</i>'))
-				days += (y % 4 == 0) ? 366 : 365;
+					+ '</span></div>';
 			}
 			return html;
 		},
@@ -282,14 +336,46 @@ h1{
 			});
 			life.firstYear = firstYear;
 
-			var html = life.renderYears(firstYear, lastYear);
+			var html = '<div id="life-events">';
+			// 'comment_' class name is to hide it from Safari Reader
+			html += '<div id="life-years" class="comment_">' + life.renderYears(firstYear, lastYear) + '</div>';
 			data.forEach(function(d){
 				html += life.renderEvent(d);
 			});
+			html += '</div>';
 			life.$el.innerHTML = html;
 		}
 	};
 
+	var slider = {
+		startingMousePostition: {},
+		containerOffset: {},
+		init: function(){
+			window.addEventListener('mousedown', function(event){
+				slider.startingMousePostition = {
+					x: event.clientX,
+					y: event.clientY
+				};
+				slider.containerOffset = {
+					x: life.$el.scrollLeft,
+					y: life.$el.scrollTop
+				};
+				window.addEventListener('mousemove', slider.slide);
+			});
+			window.addEventListener('mouseup', function(event){
+				window.removeEventListener('mousemove', slider.slide);
+			});
+		},
+		slide: function(event){
+			event.preventDefault();
+			var x = slider.containerOffset.x + (slider.startingMousePostition.x - event.clientX);
+			var y = slider.containerOffset.y + (slider.startingMousePostition.y - event.clientY);
+			life.$el.scrollLeft = x;
+			life.$el.scrollTop = y;
+		}
+	};
+
 	life.start();
+	slider.init();
 })();
 </script>

life.example.md

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