Demos

build/all.js

@@ -12,6 +12,7 @@ if (options.indexOf('--add-keys') != -1){
 var cmds = [
 	["build/docs", "core"],
 	["build/docs", "more"],
+	["build/demos", "demos"],
 	["build/guides", "core"],
 	["build/guides", "more"],
 	["build/blog"]

build/demos.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var fs = require('fs');
+var fse = require('fs-extra');
+var path = require('path');
+var YAML = require('js-yaml');
+var pkg = require('../package.json');
+var compile = require('../lib/compile-md');
+var getFiles = require('../lib/getFiles');
+var HEADER_REGEXP = /\/\*\s*^---([\s\S]+?)^(?:\.\.\.|---)\s*\*\//mg;
+var DESC_REGEXP = /...\n?\*\/\n*([\s\S]*)/m;
+
+var args = process.argv;
+
+if (args.length < 3){
+	console.log('usage: node demos.js "demos"');
+	process.exit(1);
+}
+
+var project = args[2];
+var placeholder = ''; // a possible generic text string
+var outputDir = path.join(__dirname, "../", pkg._buildOutput, project, "docs");
+
+build(project, outputDir);
+
+function processDetails(chunk){
+	var headers = chunk.match(HEADER_REGEXP)[0];
+	var html = chunk.match(DESC_REGEXP);
+	return {
+		YAML: YAML.load(headers.slice(2, -2)),
+		HTML: html ? html[1] : placeholder
+	}
+}
+
+function copy(src, target){
+	var folder = path.dirname(target);
+	var subFolder = path.dirname(folder);
+	if (!fs.existsSync(subFolder)){
+	    fs.mkdirSync(subFolder);
+	}
+	fs.mkdir(folder + '/', function(err){
+		if (err && err.code != 'EEXIST') console.error(err);
+		src && fse.copy(src, target, function(err){
+			if (err) console.error(err);
+		});
+	});
+}
+
+function build(project, dir){
+	var repoPath = path.join(dir, "demos", "demos");
+	var demoFolder = fs.readdirSync(repoPath);
+	var tocDemos = {};
+
+	demoFolder.forEach(function(demo){
+
+		var demoPath = path.join(repoPath, demo);
+		var type = fs.statSync(demoPath);
+		if (!type.isDirectory()) return;
+
+		var partials = getFiles(demoPath, null);
+		var jsFiddle = {};
+		jsFiddle.highlighted = {};
+		var yamlHeader;
+
+		partials.forEach(function(file){
+
+			var ext = path.extname(file).slice(1);
+			var content = fs.readFileSync(file, 'utf8');
+
+			if (!ext.match(/html|css|js|details/)){
+				var lastPath = file.split(demo)[1];
+				var target = path.join(__dirname, "../", "public", "demos", demo, lastPath);
+				return copy(file, target);
+			}
+
+			if (ext == 'details'){
+				var details = processDetails(content);
+				yamlHeader = details.YAML;
+				content = details.HTML;
+			} else {
+				// add tab so the compiler reads as a tabbed .md code block
+				var preparedContent = '\t' + content.replace(/\n/g, '\n\t');
+				jsFiddle.highlighted[ext] = compile(preparedContent).content;
+			}
+
+			jsFiddle[ext] = content;
+		});
+
+		tocDemos[demo] = {
+			link: '/demos/?demo=' + demo,
+			description:  yamlHeader
+		}
+		fs.writeFile(path.join(dir, demo + '.json'), JSON.stringify(jsFiddle, null, 2));
+	});
+	fs.writeFile(dir + '/toc-demos.json', JSON.stringify(tocDemos, null, 2));
+}

build/repositories.js

@@ -57,8 +57,9 @@ var versions = [];
 
 prime.each(projects, function(project, name){
 	project.versions.forEach(function(version){
+		var versionPath = name + (version ? '-' + version : '');
 		versions.push({
-			dir: path.join(__dirname, '../', pkg._buildOutput, name, 'docs', name + '-' + version),
+			dir: path.join(__dirname, '../', pkg._buildOutput, name, 'docs', versionPath),
 			repository: project.repository,
 			version: version
 		});

demos/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var project = 'demos';
+var demos = require('../middleware/demos')(project, {
+	title: "MooTools Demos"
+});
+
+module.exports = function(app){
+	app.get('/demos/', demos);
+};

index.js

@@ -49,6 +49,7 @@ app.use(bodyParser.json());
 
 // fix trailing slashes in path
 app.use(function(req, res, next){
+	if (req.method == 'POST') return next();
 	if (req.path != '/' && req.path.substr(-1) == '/'){
 		var query = req.url.slice(req.path.length);
 		res.redirect(301, req.path.slice(0, -1) + query);
@@ -62,7 +63,6 @@ if (app.get('env') == 'development'){
 
 	app.use(morgan('dev'));
 	app.use(errorhandler());
-
 	app.use(function setJadePretty(req, res, next){
 		res.locals.pretty = true;
 		res.locals.cache = false;
@@ -79,7 +79,7 @@ require('./middleware/build-static')(app, {
 	dirname: __dirname
 });
 
-app.use(express.static(__dirname + '/public'));
+app.use(express.static(__dirname + '/public', { redirect: false }));
 
 // github, twitter & blog feeds
 var githubEvents = require('./middleware/githubEvents')({
@@ -88,7 +88,7 @@ var githubEvents = require('./middleware/githubEvents')({
 var twitter = require('./middleware/twitter')();
 var blogData = require('./blog/data');
 function getLatestBlog(req, res, next){
-	blogData.get(function(err, blog) {
+	blogData.get(function(err, blog){
 		if (err) next(err);
 		res.locals.lastBlogPost = blog.posts[0];
 		next();
@@ -114,6 +114,7 @@ app.get('/search', function(req, res){
 
 require('./core')(app);
 require('./more')(app);
+require('./demos')(app);
 require('./blog')(app);
 require('./books')(app);
 require('./builder')(app);
@@ -139,6 +140,13 @@ app.get(/^\/download/i, function(req, res){
 	res.redirect(301, '/core');
 });
 
+// for demos to echo Requests
+app.post('/echo/:type', function(req, res){
+	var type = req.params.type;
+	res.send(req.body[type]);
+	res.end();
+});
+
 // handle 404 errors
 app.get('*', function(req, res, next){
 	var err = new Error();

lib/compile-md.js

@@ -37,6 +37,7 @@ function compile(md, path){
 			else if (lang == 'shell') lang = 'bash';
 		} else {
 			if (code.match(/^<\w+[>\s]/)) lang = 'xml';
+			else if (code.match(/^[\.#]?\w+[\.#\s]?{/)) lang = 'css';
 			else lang = 'javascript';
 		}
 		code = hljs.highlight(lang, code).value.trim();

middleware/demos.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var fs = require('fs');
+var path = require('path');
+var async = require('async');
+var pkg = require('../package.json');
+var waitForIt = require('../lib/waitForIt');
+var getFiles = require('../lib/getFiles');
+var loadJSON = require('../lib/loadJSON');
+var associate = require('../lib/associate');
+var debounce = require('../lib/debounce');
+
+
+function filterToc(file, cb){
+	cb(!fs.statSync(file).isDirectory() && file.indexOf('toc-demos.json') == -1 && file.slice(-4) == 'json');
+}
+
+function loadFiles(dir, callback){
+
+	var addPath = function(files, cb){
+		async.map(files, function(fileName, cbMap){
+			cbMap(null, path.join(dir, fileName));
+		}, cb);
+	}
+	var filterFiles = function(files, cb){
+		async.filter(files, filterToc, function(filtered){
+			// to sort files alphabetically without file extension interfering 
+			var orderedFiles = filtered.map(function(file){
+				return file.slice(0, -5);
+			}).sort().map(function(file){
+				return file + '.json';
+			});
+			cb(null, orderedFiles);
+		});
+	}
+	var addContent = function(arr, cb){
+		async.map(arr, loadJSON, cb);
+	}
+	var loadToc = function(filesContent, cb){
+		loadJSON(dir + '/toc-demos.json', function(err, data){
+			cb(err, !err && {
+				content: associate(Object.keys(data), filesContent),
+				toc: data
+			});
+		});
+	}
+	var compiler = async.compose(loadToc, addContent, filterFiles, addPath, fs.readdir);
+	compiler(dir, callback);
+}
+
+module.exports = function(project, options){
+
+	if (!project){
+		throw new Error("'project' argument is required");
+	}
+
+	if (!options) options = {};
+	if (!options.title) options.title = project;
+
+	var dir = path.join(__dirname, '..', pkg._buildOutput, project, 'docs');
+	var files = async.apply(loadFiles, dir);
+	var loadDemos = waitForIt(files);
+
+	fs.watch(dir, debounce(function(){
+		console.log('resetting ' + dir + ' docs data');
+		loadDemos.reset();
+	}));
+
+	function send404(next){
+		var err404 = new Error();
+		err404.status = 404;
+		next(err404);
+	}
+
+	return function(req, res, next){
+
+		loadDemos.get(function(err, results){
+
+			if (err) return next(err);
+			var demo = req.query.demo || Object.keys(results.content)[0];
+			var toc = results.toc[demo];
+			var data = results.content[demo];
+			if (!data) return send404(next);
+
+			res.render(project, {
+				title: options.title,
+				navigation: 'demos',
+				content: data,
+				description: data.details,
+				demoName: toc.description.name,
+				dependencies: toc.description.dependencies || 'dependencies/more/',
+				version: pkg._projects.core.versions[0],
+				toc: results.toc
+			});
+		});
+	};
+};

package.json

@@ -80,6 +80,10 @@
         "1.2.5.1",
         "1.0.2"
       ]
+    },
+    "demos": {
+      "repository": "https://github.com/mootools/mootools-demos",
+      "versions": [""]
     }
   }
 }

public/demos/.gitignore

@@ -0,0 +1,5 @@
+Drag.Scroll/
+Element.Event.Pseudos/
+MouseWheel/
+Request.JSON/
+*.DS_Store

views/css/colorscheme.styl

@@ -7,3 +7,8 @@ pre span
 	color_scheme('number', #429bc1)
 	color_scheme('string', #83a440)
 	color_scheme('comment', #9c9ea0)
+	color_scheme('tag', #b05098)
+	color_scheme('attribute', #83a440)
+	color_scheme('value', #429bc1)
+	color_scheme('id', #b05098)
+	color_scheme('class', #b05098)

views/css/demos.styl

@@ -0,0 +1,35 @@
+/* D E M O S * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+.demos
+	div.tabcontent
+		margin 0
+		.tabs
+			width 100%
+			height 100%
+			display none
+			&.selected
+				display block !important
+				background-color #fff
+		#runner
+			background-color #fff
+			h2
+				color #fff !important
+			h3
+				background-color #fff
+				border-radius: 5px;
+				border: solid #dedfdf 1px;
+				font-weight: 400;
+				margin: 1.5em 0 0;
+				padding: 0.15em 0.5em 0.25em;
+			a
+				padding 0 0.3em
+				margin-top 0.2em
+			.details
+				float left
+				clear: both
+				width 100%
+
+.demoTabs
+	form
+		textarea
+			display none

views/css/docs.styl

@@ -90,7 +90,7 @@
 			&:after
 				color #ffffff
 
-	.content
+	> .content
 		margin 0 0 2em
 
 		.heading:first-child

views/css/media.styl

@@ -261,6 +261,8 @@
 		.previous-version select
 			width 19.2em
 
+	.democontent
+		position static !important
 
 	.modules
 		padding-top 2em
@@ -317,7 +319,7 @@
 			float left
 			width 26%
 
-		.content
+		> .content
 			float right
 			width 70%
 

views/css/style.styl

@@ -11,6 +11,7 @@
 @import mootools
 @import builder
 @import developers
+@import demos
 
 
 // temp until guides are up