pattern states and connect and dot files

fixes #51
fixes #50
fixes #44
fixes #34

Author: bmuenzenmeyer

CHANGELOG

@@ -1,5 +1,10 @@
 THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
 
+PL-node-v0.1.3
+ - ADD: Pattern states
+ - FIX: Removed all grunt dependencies from patternlab.js
+ - ADD: Ships with grunt connect if you are into that kinda thing
+
 PL-node-v0.1.2
  - ADD: Abstracted template rendering into a function for easier swapping of rendering engine
  - ADD: Smarter filtering of files to support other templates Thanks 

Gruntfile.js

@@ -24,12 +24,12 @@ module.exports = function(grunt) {
 		copy: {
 			main: {
 				files: [
-					{ expand: true, cwd: './source/js/', src: '*', dest: './public/js/'},
-					{ expand: true, cwd: './source/css/', src: 'style.css', dest: './public/css/' },
-					{ expand: true, cwd: './source/images/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/' },
-					{ expand: true, cwd: './source/images/sample/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/sample/'},
-					{ expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'},
-					{ expand: true, cwd: './source/_data/', src: 'annotations.js', dest: './public/data/' }
+				{ expand: true, cwd: './source/js/', src: '*', dest: './public/js/'},
+				{ expand: true, cwd: './source/css/', src: 'style.css', dest: './public/css/' },
+				{ expand: true, cwd: './source/images/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/' },
+				{ expand: true, cwd: './source/images/sample/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/sample/'},
+				{ expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'},
+				{ expand: true, cwd: './source/_data/', src: 'annotations.js', dest: './public/data/' }
 				]
 			}
 		},
@@ -50,12 +50,12 @@ module.exports = function(grunt) {
 			// 	files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'],
 			// 	tasks: ['default']
 			// },
-			mustache: {
-				files: ['source/_patterns/**/*.mustache'],
-				tasks: ['default']
-			},
-			data: {
-				files: ['source/_patterns/**/*.json', 'source/_data/*.json'],
+			all: {
+				files: [
+				'source/_patterns/**/*.mustache',
+				'source/_patterns/**/*.json',
+				'source/_data/*.json'
+				],
 				tasks: ['default']
 			}
 		},
@@ -74,6 +74,16 @@ module.exports = function(grunt) {
 		},
 		nodeunit: {
 			all: ['test/*_tests.js']
+		},
+		connect: {
+			app:{
+				options: {
+					port: 9001,
+					base: './public',
+					hostname: 'localhost',
+					keepalive: true
+				}
+			}
 		}
 	});
 
@@ -88,4 +98,10 @@ module.exports = function(grunt) {
 
 	//travis CI task
 	grunt.registerTask('travis', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'nodeunit']);
+
+	grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect:app']);
+	//need to get livereload working
+	//http://www.thecrumb.com/2014/03/16/using-grunt-for-live-reload-revisited/
+	//http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/
+
 };

README.md

@@ -64,6 +64,22 @@ The current selection is as follows. It reflects support versus patternlab-php.
 ##### Verbose Mode
 `patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.
 
+##### Pattern States
+You can set the state of a pattern by including it in `config.json` too. The out of the box styles are in progress (orange), in review (yellow), and complete (green).
+Pattern states should be lowercase and use hyphens where spaces are present.
+```
+"patternStates": {
+	"colors" : "inprogress",
+	"fonts" : "inreview",
+	"three-up" : "complete"
+}
+```
+
+##### Server
+Running `grunt serve` will compile the patternlab front end and host it on <a href="http://localhost:9001">http://localhost:9001</a> by default. This can be changed in the `Gruntfile.js`
+
+**Next steps: Livereload and watches**
+
 ### Under Active Development
 
 [![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node) The Node version of Pattern Lab is under active development by [@bmuenzenmeyer](https://twitter.com/bmuenzenmeyer) and contributors. Pull requests welcome, but please take a moment to read the [guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/CONTRIBUTING.md).

builder/object_factory.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.1.2 - 2014 
+ * patternlab-node - v0.1.3 - 2014 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 

builder/patternlab.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.1.2 - 2014 
+ * patternlab-node - v0.1.3 - 2014 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 
@@ -28,7 +28,7 @@ var patternlab_engine = function(){
 		console.log('Patternlab Node Help');
 		console.log('===============================');
 		console.log('Command Line Arguments');
-		console.log('patternlab:only_patterns');			
+		console.log('patternlab:only_patterns');
 		console.log(' > Compiles the patterns only, outputting to ./public/patterns');
 		console.log('patternlab:v');
 		console.log(' > Retrieve the version of patternlab-node you have installed');
@@ -75,8 +75,8 @@ var patternlab_engine = function(){
 				currentPattern,
 				flatPatternPath;
 
-			//ignore _underscored patterns and json
-			if(filename.charAt(0) === '_' || path.extname(filename) === '.json'){
+			//ignore _underscored patterns, json, and dotfiles
+			if(filename.charAt(0) === '_' || path.extname(filename) === '.json' || filename.charAt(0) === '.'){
 				return;
 			}
 
@@ -88,6 +88,11 @@ var patternlab_engine = function(){
 			currentPattern.patternName = patternName.substring(patternName.indexOf('-') + 1);
 			currentPattern.data = null;
 
+			//see if this file has a state
+			if(patternlab.config.patternStates[currentPattern.patternName]){
+				currentPattern.patternState = patternlab.config.patternStates[currentPattern.patternName];
+			}
+
 			//look for a json file for this template
 			try {
 				var jsonFilename = abspath.substr(0, abspath.lastIndexOf(".")) + ".json";
@@ -185,6 +190,11 @@ var patternlab_engine = function(){
 				navSubItem.patternPath = pattern.patternLink;
 				navSubItem.patternPartial = bucketName + "-" + pattern.patternName; //add the hyphenated name
 
+				//add the patternState if it exists
+				if(pattern.patternState){
+					navSubItem.patternState = pattern.patternState;
+				}
+
 				//if it is flat - we should not add the pattern to patternPaths
 				if(flatPatternItem){
 
@@ -226,6 +236,11 @@ var patternlab_engine = function(){
 				navSubItem.patternPath = pattern.patternLink;
 				navSubItem.patternPartial = bucketName + "-" + pattern.patternName; //add the hyphenated name
 
+				//add the patternState if it exists
+				if(pattern.patternState){
+					navSubItem.patternState = pattern.patternState;
+				}
+
 				//test whether the pattern struture is flat or not - usually due to a template or page
 				var flatPatternItem = false;
 				if(navItemName === bucketName){
@@ -267,7 +282,7 @@ var patternlab_engine = function(){
 
 			}
 
-		};
+		}
 
 		//the patternlab site requires a lot of partials to be rendered.
 		//patternNav

config.json

@@ -27,5 +27,7 @@
  		"tools-reload": false,
  		"tools-shortcuts": false,
  		"tools-docs": true
+ 	},
+ 	"patternStates": {
  	}
  }

package.json

@@ -11,6 +11,7 @@
     "grunt-contrib-clean": "~0.5.0",
     "grunt-contrib-concat": "~0.3.0",
     "grunt-contrib-nodeunit": "~0.3.0",
+    "grunt-contrib-connect": "^0.8.0",
     "mustache": "~0.8.1",
     "matchdep": "~0.3.0",
     "dive": "^0.3.1",

source/_patternlab-files/partials/patternNav.mustache

@@ -4,7 +4,7 @@
 		{{# navItems }}
 			<li class="sg-nav-{{ sectionNameLC }}"><a class="sg-acc-handle">{{ sectionNameUC }}</a><ol class="sg-acc-panel">
 			{{# navSubItems }}
-				<li><a href="patterns/{{ patternPath }}" class="sg-pop" data-patternpartial="{{ patternPartial }}">{{ patternName }}</a></li>
+			<li><a href="patterns/{{ patternPath }}" class="sg-pop  {{# patternState }}sg-pattern-state {{ patternState }}{{/ patternState }}" data-patternpartial="{{ patternPartial }}">{{ patternName }}</a></li>
 			{{/ navSubItems }}
 			</ol></li>
 		{{/ navItems }}

source/_patternlab-files/styleguide.mustache

@@ -17,7 +17,7 @@
 			<div id="sg-patterns">
 				{{# partials }}
 					<div class="sg-pattern">
-						<h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
+						<h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink {{# patternState }}sg-pattern-state {{ . }}{{/ patternState }}" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
 						<div class="sg-pattern-body">
 							{{{ patternPartial }}}
 							<div class="sg-code" style="display: none">

source/_patterns/00-atoms/00-global/.test

@@ -0,0 +1 @@
+BOOM