Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions .jslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"ass": false,
"bitwise": false,
"browser": false,
"closure": false,
"continue": false,
"couch": false,
"debug": false,
"devel": true,
"eqeq": false,
"eval": true,
"evil": false,
"forin": false,
"indent": 2,
"maxerr": 50,
"maxlen": false,
"newcap": false,
"node": true,
"nomen": false,
"passfail": false,
"plusplus": false,
"predef": [
"node",
"$",
"require"
],
"regexp": false,
"rhino": false,
"sloppy": false,
"stupid": false,
"sub": false,
"todo": false,
"unparam": true,
"vars": false,
"white": true
}
17 changes: 13 additions & 4 deletions CHANGELOG
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
PL-node-v0.10.0
- ADD: Added support for pattern parameters! Resolves #88
- FIX: Data inheritance is now working as advertised. Resolves #127. This turned out to be a MAJOR thing, as I realized the home-page was not passing down any of its json data to partials.
- CHG: Refactored a lot of code out of patternlab.js and into separate files. Doing so should make everything dryer, more unit testable, and easier to understand I hope.
- ADD: Added proper styling for the homepage-emergency alert that is displayed for demo purposes
- ADD: Added a new comment organism, the sticky comment, to ship an example of pattern parameters
- CHG: Start some JS linting of the project. I don't quite agree with a lot of it, so am trying to set some smart configurations
- CHG: Wrapped some build messages in the patternlab.config.debug flag
- FIX: Allow users to set a base url path. Resolves #125 ([)testing in the while requested)

PL-node-v0.9.1
- FIX: Fixed an issue with view all navigation not checking for index out of bounds cases
Expand All @@ -7,7 +16,7 @@ PL-node-v0.9.0
- FIX: Added grunt-contrib-copy args to copy all found source/css/*.css
- ADD: Added upgrade instructions to README
- FIX: Fix issue with styleguide accordions not closing upon click of a sibling menu.
- THX: @getsetbro for reporting more issues :)
- THX: @getsetbro for reporting more issues :)
- ADD: Added support for pattern search. This is 'in beta' and should have more testing applied to it.
- ADD: Added support for all keyboard shortcuts found in PL-PHP-v1.0.0
- FIX: Fixed an issue where Hay mode and Disco mode did not stop one another when using keyboard shortcuts
Expand Down Expand Up @@ -63,7 +72,7 @@ PL-node-v0.1.3

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
- ADD: Smarter filtering of files to support other templates Thanks
- ADD: Help command line agument
- ADD: Version command line argument
- ADD: Patterns only command line argument
Expand Down Expand Up @@ -102,7 +111,7 @@ PL-node-v0.0.5

PL-node-v0.0.4
- ADD: An explicit MIT license
- FIX: Clean public/patterns/ before build
- FIX: Clean public/patterns/ before build

PL-node-v0.0.3
- FIX: Install documentation was incomplete, should not have assumed grunt
Expand All @@ -114,4 +123,4 @@ PL-node-v0.0.2
- FIX: Grunt watching styleguide scss

PL-node-v0.0.1
- Minimum Viable Product! At this point, I feel you could use Pattern Lab Node to build an atomic design-driven website.
- Minimum Viable Product! At this point, I feel you could use Pattern Lab Node to build an atomic design-driven website.
14 changes: 13 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,21 @@ module.exports = function(grunt) {
src: './builder/patternlab_grunt.js',
dest: './builder/patternlab_grunt.js'
},
parameter_hunter: {
src: './builder/parameter_hunter.js',
dest: './builder/parameter_hunter.js'
},
pattern_exporter: {
src: './builder/pattern_exporter.js',
dest: './builder/pattern_exporter.js'
},
pattern_assembler: {
src: './builder/pattern_assembler.js',
dest: './builder/pattern_assembler.js'
},
pseudopattern_hunter: {
src: './builder/pseudopattern_hunter.js',
dest: './builder/pseudopattern_hunter.js'
}
},
copy: {
Expand Down Expand Up @@ -125,4 +137,4 @@ module.exports = function(grunt) {

grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect', 'watch']);

};
};
38 changes: 33 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node)
[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node)

## About the Node Version of Pattern Lab

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.

### Getting Started

To run patternlab-node, run the following from the command line at the root of whichever directory you want to initialize your project in:
To run patternlab-node, run the following from the command line at the root of whichever directory you want to initialize your project in:

1. `npm install`
2. `npm install -g grunt-cli`
Expand Down Expand Up @@ -73,6 +73,25 @@ Pattern states should be lowercase and use hyphens where spaces are present.
}
```

##### Pattern Parameters
attern parameters are a simple mechanism for replacing Mustache variables via attributes on a pattern partial tag rather than having to use a pattern-specific json file. They are especially useful when you want to supply distinct values for Mustache variables in a specific pattern partial instance that may be included multiple times in a molecule, template, or page.

The basic syntax is this:

```
{{> molecules-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}
```

The attributes listed in the pattern parameters should match Mustache variable names in your pattern. The values listed for each attribute will replace the Mustache variables. Again, pattern parameters are a simple find and replace of Mustache variables with the supplied values.

Pattern parameters **do not** currently support the following:

* sub-lists (e.g. iteration of a section),
* and the use of long strings of text can be unwieldy
* nested properties within the parameter data, such as `{{> molecules-single-comment(foo.bar: 'baz') }}`

You can read the full documentation on pattern parameters here: [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)

##### Pseudo-Patterns
Pseudo-patterns are meant to give developers the ability to build multiple and unique **rendered** patterns off of one base pattern and its mark-up while giving them control over the data that is injected into the base pattern. This feature is especially useful when developing template- and page-style patterns.

Expand Down Expand Up @@ -139,7 +158,7 @@ As you can see, it's a much easier way of linking patterns to one another.


##### Pattern Export
`config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is `"./pattern_exports/"` created inside the install directory.
`config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is `"./pattern_exports/"` created inside the install directory.

```
"patternExportKeys": ["molecules-primary-nav", "organisms-header", "organisms-header"],
Expand All @@ -148,6 +167,15 @@ As you can see, it's a much easier way of linking patterns to one another.

Coupled with exported css (much easier to extract with existing tools like [grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy)), pattern export can help to maintain the relevancy of the design system by directly placing partials in a directory of your choosing.

##### baseurl

If your instance of Pattern Lab lives in a subdirectory of your server, for instance on github pages (ex: yourusername.github.io/patterns-demo/), then add the baseurl here. The baseurl is everything after the hostname - ie: `patterns-demo`

```
"baseurl" : "/patterns-demo"
```

Default: blank

##### Verbose Mode
`patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.
Expand All @@ -165,7 +193,7 @@ You can find some simple upgrade documenation in it's current home here (unrelea

### Forward, To the Specification!

Dave Olsen has published the [specification](https://github.com/pattern-lab/the-spec/blob/draft/SPEC.md) for Pattern Lab ports. Development will be oriented toward compliance with this as the spec and the port mature together.
Dave Olsen has published the [specification](https://github.com/pattern-lab/the-spec/blob/draft/SPEC.md) for Pattern Lab ports. Development will be oriented toward compliance with this as the spec and the port mature together.

### Is Pattern Lab a Platform or a Build Tool?

Expand Down Expand Up @@ -219,7 +247,7 @@ By default, the Pattern Lab assets can be manually generated and the Pattern Lab
* [Watching for Changes and Auto-Regenerating Patterns](http://patternlab.io/docs/advanced-auto-regenerate.html) - Node version coming soon
* [Auto-Reloading the Browser Window When Changes Are Made](http://patternlab.io/docs/advanced-reload-browser.html) - Node version coming soon
* [Multi-browser & Multi-device Testing with Page Follow](http://patternlab.io/docs/advanced-page-follow.html)
* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html)
* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html)
* [Special Pattern Lab-specific Query String Variables ](http://patternlab.io/docs/pattern-linking.html)
* [Preventing the Cleaning of public/](http://patternlab.io/docs/advanced-clean-public.html) - Node version coming soon
* [Modifying the Pattern Lab Nav](http://patternlab.io/docs/advanced-pattern-lab-nav.html) - Node version coming soon
Expand Down
11 changes: 7 additions & 4 deletions builder/lineage_hunter.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* patternlab-node - v0.9.1 - 2015
* patternlab-node - v0.10.0 - 2015
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
Expand All @@ -15,12 +15,15 @@

function findlineage(pattern, patternlab){

var pa = require('./pattern_assembler');
var pattern_assembler = new pa();

//find the {{> template-name }} within patterns
var matches = pattern.template.match(/{{>([ ]+)?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ]+)}}/g);
var matches = pattern_assembler.find_pattern_partials(pattern);
if(matches !== null){
matches.forEach(function(match, index, matches){
//strip out the template cruft
var foundPattern = match.replace("{{> ", "").replace(" }}", "");
var foundPattern = match.replace("{{> ", "").replace(" }}", "").replace("{{>", "").replace("}}", "");

//add if it doesnt exist
if (pattern.lineageIndex.indexOf(foundPattern) === -1){
Expand Down Expand Up @@ -71,4 +74,4 @@

module.exports = lineage_hunter;

}());
}());
27 changes: 4 additions & 23 deletions builder/media_hunter.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* patternlab-node - v0.9.1 - 2015
* patternlab-node - v0.10.0 - 2015
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
Expand All @@ -12,8 +12,8 @@
"use strict";

var diveSync = require('diveSync'),
path = require('path'),
fs = require('fs-extra');
path = require('path'),
fs = require('fs-extra');

var media_hunter = function(){

Expand All @@ -32,7 +32,7 @@
}
}
}
});
});
//alpha sort for now, but should meet most use-cases except greater than 100ems. you are using ems right?
patternlab.mediaQueries.sort();
}
Expand All @@ -48,22 +48,3 @@
module.exports = media_hunter;

}());

// protected function gatherMQs() {

// $mqs = array();

// foreach(glob($this->sd."/css/*.css") as $filename) {
// $data = file_get_contents($filename);
// preg_match_all("/(min|max)-width:([ ]+)?(([0-9]{1,5})(\.[0-9]{1,20}|)(px|em))/",$data,$matches);
// foreach ($matches[3] as $match) {
// if (!in_array($match,$mqs)) {
// $mqs[] = $match;
// }
// }
// }

// sort($mqs);
// return $mqs;

// }
5 changes: 3 additions & 2 deletions builder/object_factory.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* patternlab-node - v0.9.1 - 2015
* patternlab-node - v0.10.0 - 2015
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
Expand All @@ -16,6 +16,7 @@
this.subdir = subdir;
this.name = subdir.replace(/[\/\\]/g, '-') + '-' + this.fileName; //this is the unique name with the subDir
this.data = data || null;
this.jsonFileData = {};
this.patternName = this.fileName.substring(this.fileName.indexOf('-') + 1); //this is the display name for the ui
this.patternLink = this.name + '/' + this.name + '.html';
this.patternGroup = this.name.substring(this.name.indexOf('-') + 1, this.name.indexOf('-', 4) + 1 - this.name.indexOf('-') + 1);
Expand Down Expand Up @@ -59,4 +60,4 @@
oNavSubItem: oNavSubItem
};

}());
}());
77 changes: 77 additions & 0 deletions builder/parameter_hunter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
/*
* patternlab-node - v0.10.0 - 2015
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
*
* Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
*
*/

(function () {
"use strict";

var parameter_hunter = function(){

var extend = require('util')._extend,
pa = require('./pattern_assembler'),
mustache = require('mustache'),
pattern_assembler = new pa();

function findparameters(pattern, patternlab){

//find the {{> template-name(*) }} within patterns
var matches = pattern.template.match(/{{>([ ]+)?([A-Za-z0-9-]+)(\()(.+)(\))([ ]+)?}}/g);
if(matches !== null){
matches.forEach(function(pMatch, index, matches){
//find the partial's name
var partialName = pMatch.match(/([a-z-]+)/ig)[0]

if(patternlab.config.debug){
console.log('found patternParameters for ' + partialName);
}

//strip out the additional data and eval
var leftParen = pMatch.indexOf('(');
var rightParen = pMatch.indexOf(')');
var paramString = '({' + pMatch.substring(leftParen + 1, rightParen) + '})';

//do no evil. there is no good way to do this that I can think of without using a split, which then makes commas and colons special characters and unusable within the pattern params
var paramData = eval(paramString);

//compile this partial immeadiately, essentially consuming it.
//TODO: see how this affects lineage. perhaps add manually here.
var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
var existingData = pattern.data || patternlab.data;

//merge paramData with any other data that exists.
for (var prop in paramData) {
if (existingData.hasOwnProperty(prop)) {
existingData[prop] = paramData[prop];
}
}

//extend pattern data links into link for pattern link shortcuts to work. we do this locally and globally
existingData.link = extend({}, patternlab.data.link);
var renderedPartial = pattern_assembler.renderPattern(partialPattern.extendedTemplate, existingData, patternlab.partials);

//remove the parameter from the partial and replace it with the rendered partial + paramData
pattern.extendedTemplate = pattern.extendedTemplate.replace(pMatch, renderedPartial);

//TODO: lineage is missing for this pattern

});
}
}

return {
find_parameters: function(pattern, patternlab){
findparameters(pattern, patternlab);
}
};

};

module.exports = parameter_hunter;

}());
Loading