Merge pull request tastejs#547 from stephenplusplus/readmes

More helpful readmes for beginners - epic work by stephen.

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+tasks/node_modules

architecture-examples/agilityjs/bower_components/todomvc-common/base.css

@@ -412,3 +412,144 @@ label[for='toggle-all'] {
 .hidden{
 	display:none;
 }
+
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #C5C5C5;
+	border-bottom: 1px dashed #F7F7F7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+/**body*/.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	/**body*/.learn-bar {
+		width: auto;
+		margin: 0 0 0 300px;
+	}
+	/**body*/.learn-bar > .learn {
+		left: 8px;
+	}
+	/**body*/.learn-bar #todoapp {
+		width: 550px;
+		margin: 130px auto 40px auto;
+	}
+}

architecture-examples/agilityjs/bower_components/todomvc-common/base.js

@@ -33,6 +33,150 @@
 		}
 	}
 
+	function findRoot() {
+		var base;
+
+		[/labs/, /\w*-examples/].forEach(function (href) {
+			var match = location.href.match(href);
+
+			if (!base && match) {
+				base = location.href.indexOf(match);
+			}
+		});
+
+		return location.href.substr(0, base);
+	}
+
+	function getFile(file, callback) {
+		var xhr = new XMLHttpRequest();
+
+		xhr.open('GET', findRoot() + file, true);
+		xhr.send();
+
+		xhr.onload = function () {
+			if (xhr.status === 200 && callback) {
+				callback(xhr.responseText);
+			}
+		};
+	}
+
+	function Learn(learnJSON, config) {
+		if (!(this instanceof Learn)) {
+			return new Learn(learnJSON, config);
+		}
+
+		var template, framework;
+
+		if (typeof learnJSON !== 'object') {
+			try {
+				learnJSON = JSON.parse(learnJSON);
+			} catch (e) {
+				return;
+			}
+		}
+
+		if (config) {
+			template = config.template;
+			framework = config.framework;
+		}
+
+		if (!template && learnJSON.templates) {
+			template = learnJSON.templates.todomvc;
+		}
+
+		if (!framework && document.querySelector('[data-framework]')) {
+			framework = document.querySelector('[data-framework]').getAttribute('data-framework');
+		}
+
+		if (template && learnJSON[framework]) {
+			this.frameworkJSON = learnJSON[framework];
+			this.template = template;
+
+			this.append();
+		}
+	}
+
+	Learn.prototype._prepareTemplate = function () {
+		var aside = document.createElement('aside');
+		aside.innerHTML = this.template;
+
+		var header = aside.cloneNode(true);
+		header.removeChild(header.querySelector('ul'));
+		header.removeChild(header.querySelectorAll('footer')[1]);
+
+		return {
+			header: header,
+			links: aside.cloneNode(true).querySelector('ul a'),
+			footer: aside.cloneNode(true).querySelectorAll('footer')[1]
+		};
+	};
+
+	Learn.prototype._parseTemplate = function () {
+		if (!this.template) {
+			return;
+		}
+
+		var frameworkJSON = this.frameworkJSON;
+		var template = this._prepareTemplate();
+
+		var aside = document.createElement('aside');
+		var linksTemplate = template.links.outerHTML;
+		var parser = /\{\{([^}]*)\}\}/g;
+
+		var header, examples, links;
+
+		header = template.header.innerHTML.replace(parser, function (match, key) {
+			return frameworkJSON[key];
+		});
+
+		aside.innerHTML = header;
+
+		if (frameworkJSON.examples) {
+			examples = frameworkJSON.examples.map(function (example) {
+				return ''
+				+ '<h5>' + example.name + '</h5>'
+				+ '<p>'
+				+    (location.href.match(example.url + '/') ? '' : '  <a href="' + findRoot() + example.url + '">Demo</a>, ')
+				+ '  <a href="https://github.com/tastejs/todomvc/tree/gh-pages/' + (example.source_url || example.url) + '">Source</a>'
+				+ '</p>';
+			}).join('');
+
+			aside.querySelector('.source-links').innerHTML = examples;
+		}
+
+		if (frameworkJSON.link_groups) {
+			links = frameworkJSON.link_groups.map(function (linkGroup) {
+				return ''
+				+ '<h4>' + linkGroup.heading + '</h4>'
+				+ '<ul>'
+				+ linkGroup.links.map(function (link) {
+					return ''
+					+ '<li>'
+					+ linksTemplate.replace(parser, function (match, key) {
+						return link[key];
+					})
+					+ '</li>';
+				}).join('')
+				+ '</ul>';
+			}).join('');
+
+			aside.innerHTML += links;
+			aside.innerHTML += template.footer.outerHTML;
+		}
+
+		return aside;
+	};
+
+	Learn.prototype.append = function () {
+		var aside = this._parseTemplate();
+
+		aside.className = 'learn';
+
+		document.body.className = (document.body.className + ' learn-bar').trim();
+		document.body.insertAdjacentElement('afterBegin', aside);
+	};
+
 	appendSourceLink();
 	redirect();
+	getFile('learn.json', Learn);
 })();

architecture-examples/agilityjs/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-framework="agilityjs">
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

architecture-examples/agilityjs/readme.md

@@ -0,0 +1,33 @@
+# Agility.js TodoMVC Example
+
+> [Agility.js](http://agilityjs.com) is an MVC library for Javascript that lets you write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.
+
+> _[Agility.js - agilityjs.com](http://agilityjs.com)_
+
+
+## Learning Agility.js
+
+The [Agility.js website](http://agilityjs.com) is a great resource for getting started.
+
+Here are some links you may find helpful:
+
+* [Official Documentation](http://agilityjs.com/docs/docs.html)
+* [Try it out on JSBin](http://jsbin.com/agility/224/edit)
+* [Applications built with Agility.js](http://agilityjs.com/docs/gallery.html)
+
+Articles and guides from the community:
+
+* [Step by step from jQuery to Agility.js](https://gist.github.com/pindia/3166678)
+
+Get help from other Agility.js users:
+
+* [Google Groups mailing list](http://groups.google.com/group/agilityjs)
+* [agility.js on Stack Overflow](http://stackoverflow.com/questions/tagged/agility.js)
+* [Agility.js on Twitter](https://twitter.com/agilityjs)
+* [Agility.js on Google +](https://plus.google.com/116251025970928820842/posts)
+
+_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._
+
+
+## Credit
+This TodoMVC application was created by [tshm](https://github.com/tshm).