Skip to content
This repository was archived by the owner on Dec 10, 2019. It is now read-only.

Commit bb8f284

Browse files
committed
Merge branch 'plnode1-6'
2 parents 26aaeb1 + b2e938b commit bb8f284

File tree

16 files changed

+346
-63
lines changed

16 files changed

+346
-63
lines changed

CHANGELOG

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
22

3+
PL-node-v0.1.6
4+
- ADD: media queries found in css added to ish controls
5+
- ADD: basic lineage support
6+
- ADD: more unit tests
7+
8+
PL-node-v0.1.5
9+
- ADD: Added support for live reload via gruntfile
10+
- THX: thanks @marcinmodestowicz for the proper syntax!
11+
12+
PL-node-v0.1.4
13+
- FIX: Resolved issue with nested pattern rendering
14+
- FIX: Supporting flat pattern name regex's in unix-systems
15+
- THX: thanks @torbs for the issue and pull request
16+
317
PL-node-v0.1.3
418
- ADD: Pattern states
519
- ADD: Ships with grunt connect if you are into that kinda thing

Gruntfile.js

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,18 @@ module.exports = function(grunt) {
1919
object_factory: {
2020
src: './builder/object_factory.js',
2121
dest: './builder/object_factory.js'
22+
},
23+
lineage: {
24+
src: './builder/lineage_hunter.js',
25+
dest: './builder/lineage_hunter.js'
26+
},
27+
media_hunter: {
28+
src: './builder/media_hunter.js',
29+
dest: './builder/media_hunter.js'
30+
},
31+
patternlab_grunt: {
32+
src: './builder/patternlab_grunt.js',
33+
dest: './builder/patternlab_grunt.js'
2234
}
2335
},
2436
copy: {
@@ -51,6 +63,9 @@ module.exports = function(grunt) {
5163
// tasks: ['default']
5264
// },
5365
all: {
66+
options: {
67+
livereload: true
68+
},
5469
files: [
5570
'source/_patterns/**/*.mustache',
5671
'source/_patterns/**/*.json',
@@ -81,7 +96,8 @@ module.exports = function(grunt) {
8196
port: 9001,
8297
base: './public',
8398
hostname: 'localhost',
84-
keepalive: true
99+
open: true,
100+
livereload: 35729
85101
}
86102
}
87103
}
@@ -99,9 +115,6 @@ module.exports = function(grunt) {
99115
//travis CI task
100116
grunt.registerTask('travis', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'nodeunit']);
101117

102-
grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect:app']);
103-
//need to get livereload working
104-
//http://www.thecrumb.com/2014/03/16/using-grunt-for-live-reload-revisited/
105-
//http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/
118+
grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect', 'watch']);
106119

107120
};

README.md

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node)
2+
13
## About the Node Version of Pattern Lab
24

35
The Node version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the [Mustache](http://mustache.github.io/)-based patterns and the JavaScript-based viewer, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, the Node version of Pattern Lab strongly separates patterns, data, and presentation from build logic. The Node version is a work in progress, the [PHP version](https://github.com/pattern-lab/patternlab-php) should be seen as a reference for other developers to improve upon as they build their own Pattern Lab Builders in their language of choice.
@@ -76,13 +78,11 @@ Pattern states should be lowercase and use hyphens where spaces are present.
7678
```
7779

7880
##### Server
79-
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`
80-
81-
**Next steps: Livereload and watches**
81+
Running `grunt serve` will compile the patternlab front end and host it on <a href="http://localhost:9001">http://localhost:9001</a> by default. Page will reload on any saved source code change.
8282

83-
### Under Active Development
83+
===
8484

85-
[![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).
85+
The Node version of Pattern Lab is maintained 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).
8686

8787
### Forward, To the Specification!
8888

@@ -100,53 +100,48 @@ grunt.registerTask('default', ['clean', 'concat', 'patternlab:only_patterns', /*
100100

101101
This will output compiled patterns to ./public/patterns/
102102

103-
===
103+
### Where is the Gulp Version?
104104

105-
**THE FOLLOWING IS FROM THE PATTERNLAB-PHP PROJECT. A LOT STILL APPLIES TO PATTERNLAB-NODE, BUT IT HAS NOT BEEN ADAPTED YET. USE AT YOUR OWN PERIL**
105+
The core patternlab engine is free of any dependencies to grunt, allowing users to integrate with gulp if desired. Future efforts here will orient towards [this gulp implementation](https://github.com/oscar-g/patternlab-node/tree/dev-gulp) by [oscar-g](https://github.com/oscar-g).
106106

107107
===
108108

109-
### Demo
110-
111-
You can play with a demo of the front-end of the PHP version of Pattern Lab at [demo.pattern-lab.info](http://demo.pattern-lab.info).
112-
113-
### Getting Started
114-
115-
The PHP version of Pattern Lab should be relatively easy for anyone to get up and running.
109+
## Working with Patterns
116110

117-
* [Requirements](https://github.com/pattern-lab/patternlab-php/wiki/Requirements)
118-
* [Installing the PHP Version of Pattern Lab](https://github.com/pattern-lab/patternlab-php/wiki/Installing-the-PHP-Version-of-Pattern-Lab)
119-
* [Generating the Pattern Lab Website for the First Time](https://github.com/pattern-lab/patternlab-php/wiki/Generating-the-Pattern-Lab-Website-for-the-First-Time)
120-
* [Editing the Pattern Lab Website Source Files](https://github.com/pattern-lab/patternlab-php/wiki/Editing-the-Pattern-Lab-Website-Source-Files)
121-
* [Using the Command-line Options](https://github.com/pattern-lab/patternlab-php/wiki/Using-the-Command-line-Options)
122-
123-
### Working with Patterns
111+
(The following documentation is built for the PHP version of Pattern Lab, but most applies to the node version too. If you find omissions or mistakes please open an issue.)
124112

125113
Patterns are the core element of Pattern Lab. Understanding how they work is the key to getting the most out of the system. Patterns use [Mustache](http://mustache.github.io/) so please read [Mustache's docs](http://mustache.github.io/mustache.5.html) as well.
126114

127-
* [How Patterns Are Organized](https://github.com/pattern-lab/patternlab-php/wiki/How-Patterns-Are-Organized)
128-
* [Adding New Patterns](https://github.com/pattern-lab/patternlab-php/wiki/Adding-New-Patterns)
129-
* [Reorganizing Patterns](https://github.com/pattern-lab/patternlab-php/wiki/Reorganizing-Patterns)
130-
* [Converting Old Patterns](https://github.com/pattern-lab/patternlab-php/wiki/Converting-Old-Patterns)
131-
* ["Hiding" Patterns in the Navigation](https://github.com/pattern-lab/patternlab-php/wiki/Hiding-Patterns-in-the-Navigation)
132-
* [Including One Pattern Within Another via Partials](https://github.com/pattern-lab/patternlab-php/wiki/Including-One-Pattern-Within-Another)
133-
* [Linking Directly to a Pattern](https://github.com/pattern-lab/patternlab-php/wiki/Linking-Directly-to-a-Pattern)
134-
* [Managing Assets for a Pattern: JavaScript, images, CSS, etc.](https://github.com/pattern-lab/patternlab-php/wiki/Managing-Assets-for-a-Pattern)
135-
* [Modifying the Standard Header & Footer for Patterns](https://github.com/pattern-lab/patternlab-php/wiki/Modifying-the-Standard-Header-&-Footer-for-Patterns)
136-
137-
### Creating & Working With Dynamic Data for a Pattern
138-
139-
The PHP version of Pattern Lab utilizes Mustache as the template language for patterns. In addition to allowing for the [inclusion of one pattern within another](https://github.com/pattern-lab/patternlab-php/wiki/Including-One-Pattern-Within-Another) it also gives pattern developers the ability to include variables. This means that attributes like image sources can be centralized in one file for easy modification across one or more patterns. The PHP version of Pattern Lab uses a JSON file, `source/_data/data.json`, to centralize many of these attributes.
140-
141-
* [Introduction to JSON & Mustache Variables](http://github.com/pattern-lab/patternlab-php/wiki/Introduction-to-JSON-&-Mustache-Variables)
142-
* [Overriding the Central `data.json` Values with Pattern-specific Values](https://github.com/pattern-lab/patternlab-php/wiki/Overriding-the-Central-%60data.json%60-Values-with-Pattern-specific-Values)
143-
* [Linking to Patterns with Pattern Lab's Default `link` Variable](https://github.com/pattern-lab/patternlab-php/wiki/Linking-to-Patterns-with-Pattern-Lab's-Default-%60link%60-Variable)
144-
* [Creating Lists with Pattern Lab's Default `listItems` Variable](https://github.com/pattern-lab/patternlab-php/wiki/Creating-Lists-with-Pattern-Lab's-Default-%60listItems%60-Variable)
145-
146-
### Using Pattern Lab's Advanced Features
147-
148-
By default, the Pattern Lab assets can be manually generated and the Pattern Lab site manually refreshed but who wants to waste time doing that? Here are some ways that the PHP version of Pattern Lab can make your development workflow a little smoother:
149-
150-
* [Watching for Changes and Auto-Regenerating Patterns](https://github.com/pattern-lab/patternlab-php/wiki/Watching-for-Changes-and-Auto-Regenerating-Patterns)
151-
* [Auto-Reloading the Browser Window When Changes Are Made](https://github.com/pattern-lab/patternlab-php/wiki/Auto-Reloading-the-Browser-Window-When-Changes-Are-Made)
152-
* [Multi-browser & Multi-device Testing with Page Follow](https://github.com/pattern-lab/patternlab-php/wiki/Multi-browser-&-Multi-device-Testing-with-Page-Follow)
115+
* [How Patterns Are Organized](http://patternlab.io/docs/pattern-organization.html)
116+
* [Adding New Patterns](http://patternlab.io/docs/pattern-add-new.html)
117+
* [Reorganizing Patterns](http://patternlab.io/docs/pattern-reorganizing.html)
118+
* [Including One Pattern Within Another via Partials](http://patternlab.io/docs/pattern-including.html)
119+
* [Managing Assets for a Pattern: JavaScript, images, CSS, etc.](http://patternlab.io/docs/pattern-managing-assets.html)
120+
* [Modifying the Pattern Header and Footer](http://patternlab.io/docs/pattern-header-footer.html)
121+
* [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)
122+
* [Using Pattern State](http://patternlab.io/docs/pattern-states.html)
123+
* ["Hiding" Patterns in the Navigation](http://patternlab.io/docs/pattern-hiding.html)
124+
* [Adding Annotations](http://patternlab.io/docs/pattern-adding-annotations.html)
125+
* [Viewing Patterns on a Mobile Device](http://patternlab.io/docs/pattern-mobile-view.html)
126+
127+
## Creating & Working With Dynamic Data for a Pattern
128+
129+
The Node version of Pattern Lab utilizes Mustache as the template language for patterns. In addition to allowing for the [inclusion of one pattern within another](http://patternlab.io/docs/pattern-including.html) it also gives pattern developers the ability to include variables. This means that attributes like image sources can be centralized in one file for easy modification across one or more patterns. The Node version of Pattern Lab uses a JSON file, `source/_data/data.json`, to centralize many of these attributes.
130+
131+
* [Introduction to JSON & Mustache Variables](http://patternlab.io/docs/data-json-mustache.html)
132+
* [Overriding the Central `data.json` Values with Pattern-specific Values](http://patternlab.io/docs/data-pattern-specific.html)
133+
* [Linking to Patterns with Pattern Lab's Default `link` Variable](http://patternlab.io/docs/data-link-variable.html)
134+
* [Creating Lists with Pattern Lab's Default `listItems` Variable](http://patternlab.io/docs/data-listitems.html)
135+
136+
## Using Pattern Lab's Advanced Features
137+
138+
By default, the Pattern Lab assets can be manually generated and the Pattern Lab site manually refreshed but who wants to waste time doing that? Here are some ways that Pattern Lab can make your development workflow a little smoother:
139+
140+
* [Watching for Changes and Auto-Regenerating Patterns](http://patternlab.io/docs/advanced-auto-regenerate.html) - Node version coming soon
141+
* [Auto-Reloading the Browser Window When Changes Are Made](http://patternlab.io/docs/advanced-reload-browser.html) - Node version coming soon
142+
* [Multi-browser & Multi-device Testing with Page Follow](http://patternlab.io/docs/advanced-page-follow.html)
143+
* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html)
144+
* [Special Pattern Lab-specific Query String Variables ](http://patternlab.io/docs/pattern-linking.html)
145+
* [Preventing the Cleaning of public/](http://patternlab.io/docs/advanced-clean-public.html) - Node version coming soon
146+
* [Modifying the Pattern Lab Nav](http://patternlab.io/docs/advanced-pattern-lab-nav.html) - Node version coming soon
147+
* [Editing the config.ini Options](http://patternlab.io/docs/advanced-config-options.html) - Node version coming soon

builder/lineage_hunter.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/*
2+
* patternlab-node - v0.1.6 - 2014
3+
*
4+
* Brian Muenzenmeyer, and the web community.
5+
* Licensed under the MIT license.
6+
*
7+
* Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
8+
*
9+
*/
10+
11+
(function () {
12+
"use strict";
13+
14+
var lineage_hunter = function(){
15+
16+
function findlineage(pattern, patternlab){
17+
18+
pattern.lineage = [];
19+
pattern.lineageIndex = [];
20+
//find the {{> template-name }} within patterns
21+
var matches = pattern.template.match(/{{>([ ]+)?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ]+)}}/g);
22+
if(matches !== null){
23+
matches.forEach(function(match, index, matches){
24+
//strip out the template cruft
25+
var cleanPattern = match.replace("{{> ", "").replace(" }}", "");
26+
27+
//add if it doesnt exist
28+
if (pattern.lineageIndex.indexOf(cleanPattern) === -1){
29+
30+
pattern.lineageIndex.push(cleanPattern);
31+
32+
patternlab.patterns.forEach(function(p, index, patterns){
33+
34+
//find the pattern in question
35+
var searchPattern = p.patternGroup + "-" + p.patternName;
36+
37+
if(searchPattern === cleanPattern){
38+
//create the more complex patternLineage object too
39+
var l = {
40+
"lineagePattern": cleanPattern,
41+
"lineagePath": "../../patterns/" + p.patternLink
42+
}
43+
pattern.lineage.push(JSON.stringify(l));
44+
}
45+
46+
});
47+
48+
}
49+
});
50+
}
51+
}
52+
53+
return {
54+
find_lineage: function(pattern, patternlab){
55+
findlineage(pattern, patternlab);
56+
}
57+
};
58+
59+
};
60+
61+
module.exports = lineage_hunter;
62+
63+
}());

builder/media_hunter.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
* patternlab-node - v0.1.6 - 2014
3+
*
4+
* Brian Muenzenmeyer, and the web community.
5+
* Licensed under the MIT license.
6+
*
7+
* Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
8+
*
9+
*/
10+
11+
(function () {
12+
"use strict";
13+
14+
var diveSync = require('diveSync'),
15+
path = require('path'),
16+
fs = require('fs-extra');
17+
18+
var media_hunter = function(){
19+
20+
function findMediaQueries(patternlab){
21+
patternlab.mediaQueries = [];
22+
23+
diveSync('./source/css', function(err, file){
24+
if(path.extname(file) === '.css'){
25+
var contents = fs.readFileSync(file, 'utf8');
26+
var safeContents = contents.replace("\r", " ").replace("\n", " ");
27+
var matches = safeContents.match(/\((min|max)-width:([ ]+)?(([0-9]{1,5})(\.[0-9]{1,20}|)(px|em))/g);
28+
for(var i = 0; i < matches.length; i++){
29+
var breakpoint = matches[i].substring(matches[i].indexOf(' ') + 1);
30+
if(patternlab.mediaQueries.indexOf(breakpoint) === -1){
31+
patternlab.mediaQueries.push(breakpoint);
32+
}
33+
}
34+
}
35+
});
36+
//alpha sort for now, but should meet most use-cases except greater than 100ems. you are using ems right?
37+
patternlab.mediaQueries.sort();
38+
}
39+
40+
return {
41+
find_media_queries: function(patternlab){
42+
findMediaQueries(patternlab);
43+
}
44+
};
45+
46+
};
47+
48+
module.exports = media_hunter;
49+
50+
}());
51+
52+
// protected function gatherMQs() {
53+
54+
// $mqs = array();
55+
56+
// foreach(glob($this->sd."/css/*.css") as $filename) {
57+
// $data = file_get_contents($filename);
58+
// preg_match_all("/(min|max)-width:([ ]+)?(([0-9]{1,5})(\.[0-9]{1,20}|)(px|em))/",$data,$matches);
59+
// foreach ($matches[3] as $match) {
60+
// if (!in_array($match,$mqs)) {
61+
// $mqs[] = $match;
62+
// }
63+
// }
64+
// }
65+
66+
// sort($mqs);
67+
// return $mqs;
68+
69+
// }

builder/object_factory.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* patternlab-node - v0.1.3 - 2014
2+
* patternlab-node - v0.1.6 - 2014
33
*
44
* Brian Muenzenmeyer, and the web community.
55
* Licensed under the MIT license.

0 commit comments

Comments
 (0)