From c6a57407298ea3ac15cae5e597d959008ebd4522 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Sun, 26 Jul 2015 22:05:09 -0500 Subject: [PATCH 01/11] progress on the re-write of the parse --- .jslintrc | 36 +++++ Gruntfile.js | 14 +- builder/lineage_hunter.js | 11 +- builder/media_hunter.js | 23 +-- builder/object_factory.js | 5 +- builder/parameter_hunter.js | 75 +++++++++ builder/pattern_assembler.js | 129 ++++++++++++++- builder/pattern_exporter.js | 2 +- builder/patternlab.js | 152 ++++-------------- builder/patternlab_grunt.js | 2 +- builder/pseudopattern_hunter.js | 74 +++++++++ package.json | 2 +- .../02-comments/01-sticky-comment.mustache | 9 ++ .../03-templates/02-article.mustache | 5 +- .../_patterns/04-pages/00-homepage.mustache | 2 +- 15 files changed, 380 insertions(+), 161 deletions(-) create mode 100644 .jslintrc create mode 100644 builder/parameter_hunter.js create mode 100644 builder/pseudopattern_hunter.js create mode 100644 source/_patterns/02-organisms/02-comments/01-sticky-comment.mustache diff --git a/.jslintrc b/.jslintrc new file mode 100644 index 000000000..8ac6b2e37 --- /dev/null +++ b/.jslintrc @@ -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 +} diff --git a/Gruntfile.js b/Gruntfile.js index ad4f48ca2..53f28e6b4 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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: { @@ -125,4 +137,4 @@ module.exports = function(grunt) { grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect', 'watch']); -}; \ No newline at end of file +}; diff --git a/builder/lineage_hunter.js b/builder/lineage_hunter.js index 50679b64b..33bb126d2 100644 --- a/builder/lineage_hunter.js +++ b/builder/lineage_hunter.js @@ -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. @@ -13,14 +13,17 @@ var lineage_hunter = function(){ + var pa = require('./pattern_assembler'); + var pattern_assembler = new pa(); + function findlineage(pattern, patternlab){ //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){ @@ -71,4 +74,4 @@ module.exports = lineage_hunter; -}()); \ No newline at end of file +}()); diff --git a/builder/media_hunter.js b/builder/media_hunter.js index de16591be..a7a2f66ff 100644 --- a/builder/media_hunter.js +++ b/builder/media_hunter.js @@ -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. @@ -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(); } @@ -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; - - // } \ No newline at end of file diff --git a/builder/object_factory.js b/builder/object_factory.js index 47c112c81..fe6ca3a1c 100644 --- a/builder/object_factory.js +++ b/builder/object_factory.js @@ -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. @@ -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); @@ -59,4 +60,4 @@ oNavSubItem: oNavSubItem }; -}()); \ No newline at end of file +}()); diff --git a/builder/parameter_hunter.js b/builder/parameter_hunter.js new file mode 100644 index 000000000..16a8c2e29 --- /dev/null +++ b/builder/parameter_hunter.js @@ -0,0 +1,75 @@ +/* + * 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] + + //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 partial = patternlab.partials[partialName]; + 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(partial, existingData, patternlab.partials); + + //remove the parameter from the partial and replace it with the rendered partial + paramData + pattern.template = pattern.template.replace(pMatch, renderedPartial); + + //TODO see if other data works + + }); + } + return matches.length; + } + + return { + find_parameters: function(pattern, patternlab){ + return findparameters(pattern, patternlab); + } + }; + + }; + + module.exports = parameter_hunter; + +}()); diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index d91136763..3207bd4f4 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -1,11 +1,31 @@ +/* + * 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 fs = require('fs-extra'), + mustache = require('mustache'), + ph = require('./parameter_hunter'), path = require('path'); + var parameter_hunter = new ph(); + var pattern_assembler = function(){ + //find and return any {{> template-name }} within pattern + function findPartials(pattern){ + var matches = pattern.template.match(/{{>([ ])?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g); + return matches; + } + function setState(pattern, patternlab){ if(patternlab.config.patternStates[pattern.patternName]){ pattern.patternState = patternlab.config.patternStates[pattern.patternName]; @@ -14,17 +34,114 @@ } } - function addPattern(pattern, patternLab){ - patternLab.data.link[pattern.patternGroup + '-' + pattern.patternName] = '/patterns/' + pattern.patternLink; - patternLab.patterns.push(pattern); + function addPattern(pattern, patternlab){ + patternlab.data.link[pattern.patternGroup + '-' + pattern.patternName] = '/patterns/' + pattern.patternLink; + patternlab.patterns.push(pattern); + } + + function renderPattern(template, data, partials) { + if(partials) { + return mustache.render(template, data, partials); + }else{ + return mustache.render(template, data); + } + } + + function processPatternFile(file, patternlab){ + //extract some information + var abspath = file.substring(2); + var subdir = path.dirname(path.relative('./source/_patterns', file)).replace('\\', '/'); + var filename = path.basename(file); + + //ignore _underscored patterns, json (for now), and dotfiles + if(filename.charAt(0) === '_' || path.extname(filename) === '.json' || filename.charAt(0) === '.'){ + return; + } + + //make a new Pattern Object + currentPattern = new of.oPattern(subdir, filename); + + //see if this file has a state + pattern_assembler.setPatternState(currentPattern, patternlab); + + //look for a json file for this template + try { + var jsonFilename = abspath.substr(0, abspath.lastIndexOf(".")) + ".json"; + currentPattern.jsonFileData = fs.readJSONSync(jsonFilename); + } + catch(e) { + } + + //add the raw template to memory + currentPattern.template = fs.readFileSync(abspath, 'utf8'); + + //our helper function that does a lot of heavy lifting + processPattern(currentPattern, patternlab); + } + + function processPattern(pattern, patternlab, additionalData){ + //find how many partials there may be for the given pattern + var foundPatternPartials = findPartials(currentPattern); + + if(foundPatternPartials != null && foundPatternPartials.length > 0){ + + console.log(foundPatternPartials); + + //determine if the template contains any pattern parameters. if so they must be immediately consumed + var patternsConsumedWithParamaters = parameter_hunter.find_parameters(pattern, patternlab); + + if(patternsConsumedWithParamaters === 0){ + //do something with the regular old partials + } + + } else{ + //we found no partials, so we are ready to render + + } + + //find pattern lineage + lineage_hunter.find_lineage(currentPattern, patternlab); + + //add as a partial in case this is referenced later. convert to syntax needed by existing patterns + var sub = subdir.substring(subdir.indexOf('-') + 1); + var folderIndex = sub.indexOf(path.sep); + var cleanSub = sub.substring(0, folderIndex); + + //add any templates found to an object of partials, so downstream templates may use them too + //look for the full path on nested patterns, else expect it to be flat + var partialname = ''; + if(cleanSub !== ''){ + partialname = cleanSub + '-' + currentPattern.patternName; + } else{ + partialname = currentPattern.patternGroup + '-' + currentPattern.patternName; + } + patternlab.partials[partialname] = currentPattern.template; + + //look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json + pseudopattern_hunter.find_pseudopatterns(currentPattern, subdir, patternlab); + + //add to patternlab object so we can look these up later. + pattern_assembler.addPattern(currentPattern, patternlab); } return { + find_pattern_partials: function(pattern){ + return findPartials(pattern); + }, setPatternState: function(pattern, patternlab){ setState(pattern, patternlab); }, - addPattern: function(pattern, patternLab){ - addPattern(pattern, patternLab); + addPattern: function(pattern, patternlab){ + addPattern(pattern, patternlab); + }, + renderPattern: function(template, data, partials){ + return renderPattern(template, data, partials); + }, + process_pattern_file: function(file, patternlab){ + processPatternFile(file, patternlab); + }, + process_pattern: function(pattern, patternlab, additionalData){ + processPattern(pattern, patternlab, additionalData); } }; @@ -32,4 +149,4 @@ module.exports = pattern_assembler; -}()); \ No newline at end of file +}()); diff --git a/builder/pattern_exporter.js b/builder/pattern_exporter.js index 75dae4e2b..fc7631b8b 100644 --- a/builder/pattern_exporter.js +++ b/builder/pattern_exporter.js @@ -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. diff --git a/builder/patternlab.js b/builder/patternlab.js index d0f457f5c..cb07b68d4 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -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. @@ -8,7 +8,8 @@ * */ -var patternlab_engine = function(){ +var patternlab_engine = function () { + 'use strict'; var path = require('path'), fs = require('fs-extra'), extend = require('util')._extend, @@ -18,13 +19,11 @@ var patternlab_engine = function(){ of = require('./object_factory'), pa = require('./pattern_assembler'), mh = require('./media_hunter'), - lh = require('./lineage_hunter'), pe = require('./pattern_exporter'), - pa = require('./pattern_assembler'), he = require('html-entities').AllHtmlEntities, patternlab = {}; - patternlab.package =fs.readJSONSync('./package.json'); + patternlab.package = fs.readJSONSync('./package.json'); patternlab.config = fs.readJSONSync('./config.json'); function getVersion() { @@ -55,7 +54,7 @@ var patternlab_engine = function(){ } function buildPatterns(callback){ - var assembler = new pa(); + console.log('0'); patternlab.data = fs.readJSONSync('./source/_data/data.json'); patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json'); @@ -65,117 +64,37 @@ var patternlab_engine = function(){ patternlab.partials = {}; patternlab.data.link = {}; - diveSync('./source/_patterns', function(err, file){ + var pattern_assembler = new pa(), + entity_encoder = new he(), + pattern_exporter = new pe(); + diveSync('./source/_patterns', function(err, file){ + console.log('1'); //log any errors if(err){ console.log(err); return; } - //extract some information - var abspath = file.substring(2); - var subdir = path.dirname(path.relative('./source/_patterns', file)).replace('\\', '/'); - var filename = path.basename(file); - - //ignore _underscored patterns, json (for now), and dotfiles - if(filename.charAt(0) === '_' || path.extname(filename) === '.json' || filename.charAt(0) === '.'){ - return; - } - - //TODO: https://github.com/pattern-lab/patternlab-node/issues/88 check for pattern parameters before we do much else. need to remove them into a data object so the rest of the filename parsing works - //TODO: https://github.com/pattern-lab/patternlab-node/issues/95 check for patternstylemodifiers before we do much else. need to remove these from the template for proper rendering - - //make a new Pattern Object - currentPattern = new of.oPattern(subdir, filename); - - //see if this file has a state - assembler.setPatternState(currentPattern, patternlab); - - //look for a json file for this template - try { - var jsonFilename = abspath.substr(0, abspath.lastIndexOf(".")) + ".json"; - currentPattern.data = fs.readJSONSync(jsonFilename); - } - catch(e) { - - } - currentPattern.template = fs.readFileSync(abspath, 'utf8'); - - //find pattern lineage - var lineage_hunter = new lh(); - lineage_hunter.find_lineage(currentPattern, patternlab); - - //add as a partial in case this is referenced later. convert to syntax needed by existing patterns - var sub = subdir.substring(subdir.indexOf('-') + 1); - var folderIndex = sub.indexOf(path.sep); - var cleanSub = sub.substring(0, folderIndex); - - //add any templates found to an object of partials, so downstream templates may use them too - //look for the full path on nested patters, else expect it to be flat - var partialname = ''; - if(cleanSub !== ''){ - partialname = cleanSub + '-' + currentPattern.patternName; - } else{ - partialname = currentPattern.patternGroup + '-' + currentPattern.patternName; - } - patternlab.partials[partialname] = currentPattern.template; - - //look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json - var needle = currentPattern.subdir + '/' + currentPattern.fileName+ '~*.json'; - var pseudoPatterns = glob.sync(needle, { - cwd: 'source/_patterns/', //relative to gruntfile - debug: false, - nodir: true, - }); - - if(pseudoPatterns.length > 0){ - for(var i = 0; i < pseudoPatterns.length; i++){ - //we want to do everything we normally would here, except instead head the pseudoPattern data - var variantFileData = fs.readJSONSync('source/_patterns/' + pseudoPatterns[i]); + pattern_assembler.process_pattern_file(file, patternlab); - //extend any existing data with variant data - variantFileData = extend(variantFileData, currentPattern.data); - - var variantName = pseudoPatterns[i].substring(pseudoPatterns[i].indexOf('~') + 1).split('.')[0]; - var patternVariant = new of.oPattern(subdir, currentPattern.fileName + '-' + variantName + '.mustache', variantFileData); - - //see if this file has a state - assembler.setPatternState(patternVariant, patternlab); - - //use the same template as the non-variant - patternVariant.template = currentPattern.template; - - //find pattern lineage - lineage_hunter.find_lineage(patternVariant, patternlab); - - //add to patternlab object so we can look these up later. - assembler.addPattern(patternVariant, patternlab); - } - } - - //add to patternlab object so we can look these up later. - assembler.addPattern(currentPattern, patternlab); }); -var entity_encoder = new he(); - //render all patterns last, so lineageR works patternlab.patterns.forEach(function(pattern, index, patterns){ //render the pattern. pass partials and data if(pattern.data) { // Pass found pattern-specific JSON as data - //extend pattern data links into link for pattern link shortcuts to work. we do this locally and globally pattern.data.link = extend({}, patternlab.data.link); - pattern.patternPartial = renderPattern(pattern.template, pattern.data, patternlab.partials); - }else{ // Pass global patternlab data - pattern.patternPartial = renderPattern(pattern.template, patternlab.data, patternlab.partials); + pattern.patternPartial = pattern_assembler.renderPattern(pattern.template, pattern.data, patternlab.partials); + } else { // Pass global patternlab data + pattern.patternPartial = pattern_assembler.renderPattern(pattern.template, patternlab.data, patternlab.partials); } //add footer info before writing - var patternFooter = renderPattern(patternlab.footer, pattern); + var patternFooter = pattern_assembler.renderPattern(patternlab.footer, pattern); //write the compiled template to the public patterns directory fs.outputFileSync('./public/patterns/' + pattern.patternLink, patternlab.header + pattern.patternPartial + patternFooter); @@ -188,29 +107,29 @@ var entity_encoder = new he(); }); //export patterns if necessary - var pattern_exporter = new pe(); - pattern_exporter.export_patterns(patternlab); + //pattern_exporter.export_patterns(patternlab); } function buildFrontEnd(){ + var pattern_assembler = new pa(), + media_hunter = new mh(); patternlab.buckets = []; patternlab.bucketIndex = []; patternlab.patternPaths = {}; patternlab.viewAllPaths = {}; //find mediaQueries - var media_hunter = new mh(); media_hunter.find_media_queries(patternlab); //build the styleguide - var styleguideTemplate = fs.readFileSync('./source/_patternlab-files/styleguide.mustache', 'utf8'); - var styleguideHtml = renderPattern(styleguideTemplate, {partials: patternlab.patterns}); + var styleguideTemplate = fs.readFileSync('./source/_patternlab-files/styleguide.mustache', 'utf8'), + styleguideHtml = pattern_assembler.renderPattern(styleguideTemplate, {partials: patternlab.patterns}); fs.outputFileSync('./public/styleguide/html/styleguide.html', styleguideHtml); //build the viewall pages var prevSubdir = '', - i; + i; for (i = 0; i < patternlab.patterns.length; i++) { var pattern = patternlab.patterns[i]; @@ -224,21 +143,21 @@ var entity_encoder = new he(); j; for (j = 0; j < patternlab.patterns.length; j++) { - if (patternlab.patterns[j].subdir == pattern.subdir) { + if (patternlab.patterns[j].subdir === pattern.subdir) { viewAllPatterns.push(patternlab.patterns[j]); } } var viewAllTemplate = fs.readFileSync('./source/_patternlab-files/viewall.mustache', 'utf8'); - var viewAllHtml = renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial}); + var viewAllHtml = pattern_assembler.renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial}); fs.outputFileSync('./public/patterns/' + pattern.flatPatternPath + '/index.html', viewAllHtml); } } //build the patternlab website var patternlabSiteTemplate = fs.readFileSync('./source/_patternlab-files/index.mustache', 'utf8'); - - //loop through all patterns.to build the navigation + + //loop through all patterns.to build the navigation //todo: refactor this someday for(var i = 0; i < patternlab.patterns.length; i++){ var pattern = patternlab.patterns[i]; @@ -283,7 +202,7 @@ var entity_encoder = new he(); if(flatPatternItem){ bucket.patternItems.push(navSubItem); - + //add to patternPaths addToPatternPaths(bucketName, pattern); @@ -385,23 +304,23 @@ var entity_encoder = new he(); //the patternlab site requires a lot of partials to be rendered. //patternNav var patternNavTemplate = fs.readFileSync('./source/_patternlab-files/partials/patternNav.mustache', 'utf8'); - var patternNavPartialHtml = renderPattern(patternNavTemplate, patternlab); + var patternNavPartialHtml = pattern_assembler.renderPattern(patternNavTemplate, patternlab); //ishControls var ishControlsTemplate = fs.readFileSync('./source/_patternlab-files/partials/ishControls.mustache', 'utf8'); patternlab.config.mqs = patternlab.mediaQueries; - var ishControlsPartialHtml = renderPattern(ishControlsTemplate, patternlab.config); + var ishControlsPartialHtml = pattern_assembler.renderPattern(ishControlsTemplate, patternlab.config); //patternPaths var patternPathsTemplate = fs.readFileSync('./source/_patternlab-files/partials/patternPaths.mustache', 'utf8'); - var patternPathsPartialHtml = renderPattern(patternPathsTemplate, {'patternPaths': JSON.stringify(patternlab.patternPaths)}); + var patternPathsPartialHtml = pattern_assembler.renderPattern(patternPathsTemplate, {'patternPaths': JSON.stringify(patternlab.patternPaths)}); //viewAllPaths var viewAllPathsTemplate = fs.readFileSync('./source/_patternlab-files/partials/viewAllPaths.mustache', 'utf8'); - var viewAllPathsPartialHtml = renderPattern(viewAllPathsTemplate, {'viewallpaths': JSON.stringify(patternlab.viewAllPaths)}); + var viewAllPathsPartialHtml = pattern_assembler.renderPattern(viewAllPathsTemplate, {'viewallpaths': JSON.stringify(patternlab.viewAllPaths)}); //render the patternlab template, with all partials - var patternlabSiteHtml = renderPattern(patternlabSiteTemplate, {}, { + var patternlabSiteHtml = pattern_assembler.renderPattern(patternlabSiteTemplate, {}, { 'ishControls': ishControlsPartialHtml, 'patternNav': patternNavPartialHtml, 'patternPaths': patternPathsPartialHtml, @@ -410,14 +329,6 @@ var entity_encoder = new he(); fs.outputFileSync('./public/index.html', patternlabSiteHtml); } - function renderPattern(name, data, partials) { - if(partials) { - return mustache.render(name, data, partials); - }else{ - return mustache.render(name, data); - } - } - function addToPatternPaths(bucketName, pattern){ //this is messy, could use a refactor. patternlab.patternPaths[bucketName][pattern.patternName] = pattern.subdir.replace(/\\/g, '/') + "/" + pattern.fileName; @@ -444,4 +355,3 @@ var entity_encoder = new he(); }; module.exports = patternlab_engine; - diff --git a/builder/patternlab_grunt.js b/builder/patternlab_grunt.js index fecd74b80..326626358 100644 --- a/builder/patternlab_grunt.js +++ b/builder/patternlab_grunt.js @@ -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. diff --git a/builder/pseudopattern_hunter.js b/builder/pseudopattern_hunter.js new file mode 100644 index 000000000..7d91ee840 --- /dev/null +++ b/builder/pseudopattern_hunter.js @@ -0,0 +1,74 @@ +/* + * 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 pseudopattern_hunter = function(){ + + var extend = require('util')._extend, + glob = require('glob'), + fs = require('fs-extra'), + pa = require('./pattern_assembler'), + lh = require('./lineage_hunter'), + of = require('./object_factory'), + mustache = require('mustache'); + + var pattern_assembler = new pa(); + var lineage_hunter = new lh(); + + function findpseudopatterns(currentPattern, subdir, patternlab){ + + //look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json + var needle = currentPattern.subdir + '/' + currentPattern.fileName+ '~*.json'; + var pseudoPatterns = glob.sync(needle, { + cwd: 'source/_patterns/', //relative to gruntfile + debug: false, + nodir: true, + }); + + if(pseudoPatterns.length > 0){ + for(var i = 0; i < pseudoPatterns.length; i++){ + //we want to do everything we normally would here, except instead head the pseudoPattern data + var variantFileData = fs.readJSONSync('source/_patterns/' + pseudoPatterns[i]); + + //extend any existing data with variant data + variantFileData = extend(variantFileData, currentPattern.data); + + var variantName = pseudoPatterns[i].substring(pseudoPatterns[i].indexOf('~') + 1).split('.')[0]; + var patternVariant = new of.oPattern(subdir, currentPattern.fileName + '-' + variantName + '.mustache', variantFileData); + + //see if this file has a state + pattern_assembler.setPatternState(patternVariant, patternlab); + + //use the same template as the non-variant + patternVariant.template = currentPattern.template; + + //find pattern lineage + lineage_hunter.find_lineage(patternVariant, patternlab); + + //add to patternlab object so we can look these up later. + pattern_assembler.addPattern(patternVariant, patternlab); + } + } + + } + + return { + find_pseudopatterns: function(pattern, subdir, patternlab){ + findpseudopatterns(pattern, subdir, patternlab); + } + }; + + }; + + module.exports = pseudopattern_hunter; + +}()); diff --git a/package.json b/package.json index c23c00f2e..41cadb886 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "patternlab-node", "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).", - "version": "0.9.1", + "version": "0.10.0", "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-watch": "^0.6.1", diff --git a/source/_patterns/02-organisms/02-comments/01-sticky-comment.mustache b/source/_patterns/02-organisms/02-comments/01-sticky-comment.mustache new file mode 100644 index 000000000..ac0b28dc4 --- /dev/null +++ b/source/_patterns/02-organisms/02-comments/01-sticky-comment.mustache @@ -0,0 +1,9 @@ +
+
+

Selected Comments

+
    + {{> molecules-single-comment(description: 'We are all in the gutter, but some of us are looking at the stars.') }} + {{> molecules-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }} +
+
+
diff --git a/source/_patterns/03-templates/02-article.mustache b/source/_patterns/03-templates/02-article.mustache index ea151ef7e..c39b4c754 100644 --- a/source/_patterns/03-templates/02-article.mustache +++ b/source/_patterns/03-templates/02-article.mustache @@ -11,6 +11,7 @@ {{> organisms-article-body }} {{> molecules-social-share }} + {{> organisms-sticky-comment }} {{> organisms-comment-thread }} @@ -18,7 +19,7 @@ {{> organisms-related-posts }} {{> organisms-recent-tweets }} - + {{> organisms-footer }} - \ No newline at end of file + diff --git a/source/_patterns/04-pages/00-homepage.mustache b/source/_patterns/04-pages/00-homepage.mustache index 68a930daa..d9894d4a7 100644 --- a/source/_patterns/04-pages/00-homepage.mustache +++ b/source/_patterns/04-pages/00-homepage.mustache @@ -1 +1 @@ -{{> templates-homepage }} \ No newline at end of file +{{> templates-homepage }} From 7f455ef6a7fc36d04eb31e25e6bd89ea3c7efe4c Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Sun, 26 Jul 2015 22:53:16 -0500 Subject: [PATCH 02/11] v0.10 stable again --- builder/lineage_hunter.js | 6 ++--- builder/parameter_hunter.js | 2 +- builder/pattern_assembler.js | 44 +++++++++++++++++++++------------ builder/patternlab.js | 4 +-- builder/pseudopattern_hunter.js | 26 +++++++++---------- 5 files changed, 46 insertions(+), 36 deletions(-) diff --git a/builder/lineage_hunter.js b/builder/lineage_hunter.js index 33bb126d2..8566dd0cb 100644 --- a/builder/lineage_hunter.js +++ b/builder/lineage_hunter.js @@ -13,11 +13,11 @@ var lineage_hunter = function(){ - var pa = require('./pattern_assembler'); - var pattern_assembler = new pa(); - function findlineage(pattern, patternlab){ + var pa = require('./pattern_assembler'); + var pattern_assembler = new pa(); + //find the {{> template-name }} within patterns var matches = pattern_assembler.find_pattern_partials(pattern); if(matches !== null){ diff --git a/builder/parameter_hunter.js b/builder/parameter_hunter.js index 16a8c2e29..3fd355101 100644 --- a/builder/parameter_hunter.js +++ b/builder/parameter_hunter.js @@ -59,7 +59,7 @@ }); } - return matches.length; + return matches !== null ? matches.length : 0; } return { diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index 3207bd4f4..f75867450 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -11,13 +11,6 @@ (function () { "use strict"; - var fs = require('fs-extra'), - mustache = require('mustache'), - ph = require('./parameter_hunter'), - path = require('path'); - - var parameter_hunter = new ph(); - var pattern_assembler = function(){ //find and return any {{> template-name }} within pattern @@ -40,6 +33,9 @@ } function renderPattern(template, data, partials) { + + var mustache = require('mustache'); + if(partials) { return mustache.render(template, data, partials); }else{ @@ -48,6 +44,10 @@ } function processPatternFile(file, patternlab){ + var fs = require('fs-extra'), + of = require('./object_factory'), + path = require('path'); + //extract some information var abspath = file.substring(2); var subdir = path.dirname(path.relative('./source/_patterns', file)).replace('\\', '/'); @@ -59,10 +59,10 @@ } //make a new Pattern Object - currentPattern = new of.oPattern(subdir, filename); + var currentPattern = new of.oPattern(subdir, filename); //see if this file has a state - pattern_assembler.setPatternState(currentPattern, patternlab); + setState(currentPattern, patternlab); //look for a json file for this template try { @@ -79,18 +79,30 @@ processPattern(currentPattern, patternlab); } - function processPattern(pattern, patternlab, additionalData){ + function processPattern(currentPattern, patternlab, additionalData){ + + var fs = require('fs-extra'), + mustache = require('mustache'), + lh = require('./lineage_hunter'), + ph = require('./parameter_hunter'), + pph = require('./pseudopattern_hunter'), + path = require('path'); + + var parameter_hunter = new ph(), + lineage_hunter = new lh(), + pseudopattern_hunter = new pph(); + //find how many partials there may be for the given pattern var foundPatternPartials = findPartials(currentPattern); - if(foundPatternPartials != null && foundPatternPartials.length > 0){ + if(foundPatternPartials !== null && foundPatternPartials.length > 0){ console.log(foundPatternPartials); //determine if the template contains any pattern parameters. if so they must be immediately consumed - var patternsConsumedWithParamaters = parameter_hunter.find_parameters(pattern, patternlab); + var patternsConsumedWithParameters = parameter_hunter.find_parameters(currentPattern, patternlab); - if(patternsConsumedWithParamaters === 0){ + if(patternsConsumedWithParameters === 0){ //do something with the regular old partials } @@ -103,7 +115,7 @@ lineage_hunter.find_lineage(currentPattern, patternlab); //add as a partial in case this is referenced later. convert to syntax needed by existing patterns - var sub = subdir.substring(subdir.indexOf('-') + 1); + var sub = currentPattern.subdir.substring(currentPattern.subdir.indexOf('-') + 1); var folderIndex = sub.indexOf(path.sep); var cleanSub = sub.substring(0, folderIndex); @@ -118,10 +130,10 @@ patternlab.partials[partialname] = currentPattern.template; //look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json - pseudopattern_hunter.find_pseudopatterns(currentPattern, subdir, patternlab); + pseudopattern_hunter.find_pseudopatterns(currentPattern, patternlab); //add to patternlab object so we can look these up later. - pattern_assembler.addPattern(currentPattern, patternlab); + addPattern(currentPattern, patternlab); } return { diff --git a/builder/patternlab.js b/builder/patternlab.js index cb07b68d4..ffa60c8dd 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -10,6 +10,7 @@ var patternlab_engine = function () { 'use strict'; + var path = require('path'), fs = require('fs-extra'), extend = require('util')._extend, @@ -54,8 +55,6 @@ var patternlab_engine = function () { } function buildPatterns(callback){ - console.log('0'); - patternlab.data = fs.readJSONSync('./source/_data/data.json'); patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json'); patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8'); @@ -69,7 +68,6 @@ var patternlab_engine = function () { pattern_exporter = new pe(); diveSync('./source/_patterns', function(err, file){ - console.log('1'); //log any errors if(err){ console.log(err); diff --git a/builder/pseudopattern_hunter.js b/builder/pseudopattern_hunter.js index 7d91ee840..73975a816 100644 --- a/builder/pseudopattern_hunter.js +++ b/builder/pseudopattern_hunter.js @@ -13,18 +13,18 @@ var pseudopattern_hunter = function(){ - var extend = require('util')._extend, - glob = require('glob'), - fs = require('fs-extra'), - pa = require('./pattern_assembler'), - lh = require('./lineage_hunter'), - of = require('./object_factory'), - mustache = require('mustache'); + function findpseudopatterns(currentPattern, patternlab){ - var pattern_assembler = new pa(); - var lineage_hunter = new lh(); + var extend = require('util')._extend, + glob = require('glob'), + fs = require('fs-extra'), + pa = require('./pattern_assembler'), + lh = require('./lineage_hunter'), + of = require('./object_factory'), + mustache = require('mustache'); - function findpseudopatterns(currentPattern, subdir, patternlab){ + var pattern_assembler = new pa(); + var lineage_hunter = new lh(); //look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json var needle = currentPattern.subdir + '/' + currentPattern.fileName+ '~*.json'; @@ -43,7 +43,7 @@ variantFileData = extend(variantFileData, currentPattern.data); var variantName = pseudoPatterns[i].substring(pseudoPatterns[i].indexOf('~') + 1).split('.')[0]; - var patternVariant = new of.oPattern(subdir, currentPattern.fileName + '-' + variantName + '.mustache', variantFileData); + var patternVariant = new of.oPattern(currentPattern.subdir, currentPattern.fileName + '-' + variantName + '.mustache', variantFileData); //see if this file has a state pattern_assembler.setPatternState(patternVariant, patternlab); @@ -62,8 +62,8 @@ } return { - find_pseudopatterns: function(pattern, subdir, patternlab){ - findpseudopatterns(pattern, subdir, patternlab); + find_pseudopatterns: function(pattern, patternlab){ + findpseudopatterns(pattern, patternlab); } }; From bf66e789a42014e1b6ebae2df44635d3bb792e52 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Tue, 28 Jul 2015 00:34:51 -0500 Subject: [PATCH 03/11] proper rendering of templates with correct data inheritance --- builder/pattern_assembler.js | 85 ++++++++++++++----- builder/patternlab.js | 14 ++- .../02-organisms/00-global/01-footer.mustache | 4 +- .../03-templates/00-homepage.mustache | 4 +- 4 files changed, 75 insertions(+), 32 deletions(-) diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index f75867450..d3e4441f0 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -38,7 +38,7 @@ if(partials) { return mustache.render(template, data, partials); - }else{ + } else{ return mustache.render(template, data); } } @@ -92,42 +92,51 @@ lineage_hunter = new lh(), pseudopattern_hunter = new pph(); + currentPattern.extendedTemplate = currentPattern.template; + //find how many partials there may be for the given pattern var foundPatternPartials = findPartials(currentPattern); if(foundPatternPartials !== null && foundPatternPartials.length > 0){ - console.log(foundPatternPartials); - + if(patternlab.config.debug){ + console.log('found partials for ' + currentPattern.key); + } //determine if the template contains any pattern parameters. if so they must be immediately consumed var patternsConsumedWithParameters = parameter_hunter.find_parameters(currentPattern, patternlab); - if(patternsConsumedWithParameters === 0){ - //do something with the regular old partials + //do something with the regular old partials + for(var i = 0; i < foundPatternPartials.length; i++){ + var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g, '$2'); + console.log('key for partial is ' + partialKey); + var partialPattern = getpatternbykey(partialKey, patternlab); + currentPattern.extendedTemplate = currentPattern.extendedTemplate.replace(foundPatternPartials[i], partialPattern.extendedTemplate); } } else{ //we found no partials, so we are ready to render - + if(patternlab.config.debug){ + console.log('no partial found in pattern ' + currentPattern.key); + } } //find pattern lineage lineage_hunter.find_lineage(currentPattern, patternlab); //add as a partial in case this is referenced later. convert to syntax needed by existing patterns - var sub = currentPattern.subdir.substring(currentPattern.subdir.indexOf('-') + 1); - var folderIndex = sub.indexOf(path.sep); - var cleanSub = sub.substring(0, folderIndex); - - //add any templates found to an object of partials, so downstream templates may use them too - //look for the full path on nested patterns, else expect it to be flat - var partialname = ''; - if(cleanSub !== ''){ - partialname = cleanSub + '-' + currentPattern.patternName; - } else{ - partialname = currentPattern.patternGroup + '-' + currentPattern.patternName; - } - patternlab.partials[partialname] = currentPattern.template; + // var sub = currentPattern.subdir.substring(currentPattern.subdir.indexOf('-') + 1); + // var folderIndex = sub.indexOf(path.sep); + // var cleanSub = sub.substring(0, folderIndex); + // + // //add any templates found to an object of partials, so downstream templates may use them too + // //look for the full path on nested patterns, else expect it to be flat + // var partialname = ''; + // if(cleanSub !== ''){ + // partialname = cleanSub + '-' + currentPattern.patternName; + // } else{ + // partialname = currentPattern.patternGroup + '-' + currentPattern.patternName; + // } + // patternlab.partials[partialname] = currentPattern.template; //look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json pseudopattern_hunter.find_pseudopatterns(currentPattern, patternlab); @@ -136,6 +145,38 @@ addPattern(currentPattern, patternlab); } + function getpatternbykey(key, patternlab){ + for(var i = 0; i < patternlab.patterns.length; i++){ + if(patternlab.patterns[i].key === key){ + return patternlab.patterns[i]; + } + } + throw 'Could not find pattern with key ' + key; + } + + /* + * Recursively merge properties of two objects + * http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically + */ + function mergeData(obj1, obj2) { + for (var p in obj2) { + try { + // Property in destination object set; update its value. + if ( obj2[p].constructor == Object ) { + obj1[p] = merge_data(obj1[p], obj2[p]); + + } else { + obj1[p] = obj2[p]; + + } + } catch(e) { + // Property in destination object not set; create it and set its value. + obj1[p] = obj2[p]; + } + } + return obj1; + } + return { find_pattern_partials: function(pattern){ return findPartials(pattern); @@ -154,6 +195,12 @@ }, process_pattern: function(pattern, patternlab, additionalData){ processPattern(pattern, patternlab, additionalData); + }, + get_pattern_by_key: function(key, patternlab){ + return getpatternbykey(key, patternlab); + }, + merge_data: function(existingData, newData){ + return mergeData(existingData, newData); } }; diff --git a/builder/patternlab.js b/builder/patternlab.js index ffa60c8dd..6bcd6ce43 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -81,15 +81,11 @@ var patternlab_engine = function () { //render all patterns last, so lineageR works patternlab.patterns.forEach(function(pattern, index, patterns){ - //render the pattern. pass partials and data - if(pattern.data) { // Pass found pattern-specific JSON as data - //extend pattern data links into link for pattern link shortcuts to work. we do this locally and globally - pattern.data.link = extend({}, patternlab.data.link); - - pattern.patternPartial = pattern_assembler.renderPattern(pattern.template, pattern.data, patternlab.partials); - } else { // Pass global patternlab data - pattern.patternPartial = pattern_assembler.renderPattern(pattern.template, patternlab.data, patternlab.partials); - } + //render the pattern, but first consolidate any data we may have + var allData = patternlab.data; + allData = pattern_assembler.merge_data(allData, pattern.jsonFileData); + allData = pattern_assembler.merge_data(allData, pattern.data); + pattern.patternPartial = pattern_assembler.renderPattern(pattern.extendedTemplate, patternlab.data); //add footer info before writing var patternFooter = pattern_assembler.renderPattern(patternlab.footer, pattern); diff --git a/source/_patterns/02-organisms/00-global/01-footer.mustache b/source/_patterns/02-organisms/00-global/01-footer.mustache index 63f6fa5ef..f82a69c5d 100644 --- a/source/_patterns/02-organisms/00-global/01-footer.mustache +++ b/source/_patterns/02-organisms/00-global/01-footer.mustache @@ -1,7 +1,7 @@
- +
- \ No newline at end of file + diff --git a/source/_patterns/03-templates/00-homepage.mustache b/source/_patterns/03-templates/00-homepage.mustache index 038a514b3..40f9b1588 100644 --- a/source/_patterns/03-templates/00-homepage.mustache +++ b/source/_patterns/03-templates/00-homepage.mustache @@ -11,7 +11,7 @@
{{# touts}}
- {{> molecules-block-inset }} + {{> molecules-inset-block }}
{{/ touts}}
@@ -37,4 +37,4 @@ {{> organisms-footer }} - \ No newline at end of file + From ac4a25cd258f0c46ba5766a04f65c1189ea4caa0 Mon Sep 17 00:00:00 2001 From: Scott Nath Date: Tue, 28 Jul 2015 11:52:53 -0400 Subject: [PATCH 04/11] iframe url with 'patterns' bugfix --- README.md | 9 ++++++++ builder/patternlab.js | 5 +++++ config.json | 3 ++- public/styleguide/js/postmessage.js | 22 ++++++++++++++++--- .../pattern-header-footer/footer.html | 3 ++- 5 files changed, 37 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f17943092..e4cd09725 100644 --- a/README.md +++ b/README.md @@ -148,6 +148,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. diff --git a/builder/patternlab.js b/builder/patternlab.js index d0f457f5c..ca7a08a9e 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -174,6 +174,11 @@ var entity_encoder = new he(); pattern.patternPartial = renderPattern(pattern.template, patternlab.data, patternlab.partials); } + // check for baseurl in config.json + if(patternlab.config.baseurl){ + pattern.baseurl = patternlab.config.baseurl; + } + //add footer info before writing var patternFooter = renderPattern(patternlab.footer, pattern); diff --git a/config.json b/config.json index c82acc58e..f0b2f6a74 100644 --- a/config.json +++ b/config.json @@ -32,5 +32,6 @@ "homepage-emergency" : "inprogress" }, "patternExportKeys": [], - "patternExportDirectory": "./pattern_exports/" + "patternExportDirectory": "./pattern_exports/", + "baseurl" : "" } diff --git a/public/styleguide/js/postmessage.js b/public/styleguide/js/postmessage.js index f5d65321b..76e482d3f 100644 --- a/public/styleguide/js/postmessage.js +++ b/public/styleguide/js/postmessage.js @@ -86,10 +86,26 @@ function receiveIframeMessage(event) { if (data.path !== undefined) { if (patternPartial !== "") { - + + if(baseurl){ + // create main site url + var siteurl = window.location.protocol+"//"+window.location.host; + // add a trailing slash if it doesn't exist + siteurl = siteurl.replace(/\/?$/, '/'); + // remove a begining slash for baseurl if it exists + baseurl = baseurl.replace(/^\//, ''); + // connect baseurl to siteurl + siteurl = siteurl + baseurl; + // add a trailing slash if it doesn't exist + siteurl = siteurl.replace(/\/?$/, '/'); + // build our final path + path = siteurl+data.path+'?'+Date.now(); + } else { // handle patterns and the view all page - var re = /patterns\/(.*)$/; - path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+data.path+'?'+Date.now(); + var re = /patterns\/(.*)$/; + path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+data.path+'?'+Date.now(); + } + window.location.replace(path); } else { diff --git a/source/_patternlab-files/pattern-header-footer/footer.html b/source/_patternlab-files/pattern-header-footer/footer.html index f66f45b92..2234cfd9f 100644 --- a/source/_patternlab-files/pattern-header-footer/footer.html +++ b/source/_patternlab-files/pattern-header-footer/footer.html @@ -11,7 +11,8 @@ var patternPartial = "{{ patternGroup }}-{{ patternName }}"; var lineage = [{{{ lineage }}}]; var lineageR = [{{{ lineageR }}}]; - var patternState = "{{patternState}}" + var patternState = "{{patternState}}"; + var baseurl = "{{{baseurl}}}"; var cssEnabled = false; //TODO From 977983cb50cc861c923442798dddad3bbfa36152 Mon Sep 17 00:00:00 2001 From: Scott Nath Date: Tue, 28 Jul 2015 12:47:58 -0400 Subject: [PATCH 05/11] view all pages include baseurl now --- builder/patternlab.js | 9 +++++++-- source/_patternlab-files/styleguide.mustache | 3 ++- source/_patternlab-files/viewall.mustache | 3 ++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/builder/patternlab.js b/builder/patternlab.js index ca7a08a9e..13df6730a 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -204,13 +204,18 @@ var entity_encoder = new he(); patternlab.patternPaths = {}; patternlab.viewAllPaths = {}; + var baseurl; + // check for baseurl in config.json + if(patternlab.config.baseurl){ + baseurl = patternlab.config.baseurl; + } //find mediaQueries var media_hunter = new mh(); media_hunter.find_media_queries(patternlab); //build the styleguide var styleguideTemplate = fs.readFileSync('./source/_patternlab-files/styleguide.mustache', 'utf8'); - var styleguideHtml = renderPattern(styleguideTemplate, {partials: patternlab.patterns}); + var styleguideHtml = renderPattern(styleguideTemplate, {partials: patternlab.patterns, baseurl: baseurl}); fs.outputFileSync('./public/styleguide/html/styleguide.html', styleguideHtml); //build the viewall pages @@ -235,7 +240,7 @@ var entity_encoder = new he(); } var viewAllTemplate = fs.readFileSync('./source/_patternlab-files/viewall.mustache', 'utf8'); - var viewAllHtml = renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial}); + var viewAllHtml = renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial, baseurl: baseurl}); fs.outputFileSync('./public/patterns/' + pattern.flatPatternPath + '/index.html', viewAllHtml); } } diff --git a/source/_patternlab-files/styleguide.mustache b/source/_patternlab-files/styleguide.mustache index 81e7e55f9..e4a9e5479 100644 --- a/source/_patternlab-files/styleguide.mustache +++ b/source/_patternlab-files/styleguide.mustache @@ -53,9 +53,10 @@ diff --git a/source/_patternlab-files/viewall.mustache b/source/_patternlab-files/viewall.mustache index 32db975f2..a0c4805be 100644 --- a/source/_patternlab-files/viewall.mustache +++ b/source/_patternlab-files/viewall.mustache @@ -53,9 +53,10 @@ From 2c9527f04d5d7395940ba9786d7bc9586c61a7b2 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Fri, 31 Jul 2015 16:35:36 -0500 Subject: [PATCH 06/11] pattern parameters working with the new rendering algorithm. closes #88 pattern parameters support for passing in inherited pattern partial data closes #127 --- builder/parameter_hunter.js | 24 +++++++++++------------- builder/pattern_assembler.js | 29 +++++++---------------------- 2 files changed, 18 insertions(+), 35 deletions(-) diff --git a/builder/parameter_hunter.js b/builder/parameter_hunter.js index 3fd355101..a4da98a9d 100644 --- a/builder/parameter_hunter.js +++ b/builder/parameter_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v0.10.0 - 2015 - * +/* + * 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. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -37,7 +37,7 @@ //compile this partial immeadiately, essentially consuming it. //TODO: see how this affects lineage. perhaps add manually here. - var partial = patternlab.partials[partialName]; + var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab); var existingData = pattern.data || patternlab.data; //merge paramData with any other data that exists. @@ -49,22 +49,20 @@ //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(partial, existingData, patternlab.partials); + 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.template = pattern.template.replace(pMatch, renderedPartial); + pattern.extendedTemplate = pattern.extendedTemplate.replace(pMatch, renderedPartial); - //TODO see if other data works + //TODO: lineage is missing for this pattern }); } - return matches !== null ? matches.length : 0; } return { find_parameters: function(pattern, patternlab){ - return findparameters(pattern, patternlab); + findparameters(pattern, patternlab); } }; diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index d3e4441f0..74b16560a 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v0.10.0 - 2015 - * +/* + * 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. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -103,7 +103,7 @@ console.log('found partials for ' + currentPattern.key); } //determine if the template contains any pattern parameters. if so they must be immediately consumed - var patternsConsumedWithParameters = parameter_hunter.find_parameters(currentPattern, patternlab); + parameter_hunter.find_parameters(currentPattern, patternlab); //do something with the regular old partials for(var i = 0; i < foundPatternPartials.length; i++){ @@ -123,21 +123,6 @@ //find pattern lineage lineage_hunter.find_lineage(currentPattern, patternlab); - //add as a partial in case this is referenced later. convert to syntax needed by existing patterns - // var sub = currentPattern.subdir.substring(currentPattern.subdir.indexOf('-') + 1); - // var folderIndex = sub.indexOf(path.sep); - // var cleanSub = sub.substring(0, folderIndex); - // - // //add any templates found to an object of partials, so downstream templates may use them too - // //look for the full path on nested patterns, else expect it to be flat - // var partialname = ''; - // if(cleanSub !== ''){ - // partialname = cleanSub + '-' + currentPattern.patternName; - // } else{ - // partialname = currentPattern.patternGroup + '-' + currentPattern.patternName; - // } - // patternlab.partials[partialname] = currentPattern.template; - //look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json pseudopattern_hunter.find_pseudopatterns(currentPattern, patternlab); From 7486cffb6e2f10b580904502cf027a604b990cb4 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Fri, 31 Jul 2015 21:44:15 -0500 Subject: [PATCH 07/11] added proper styling of the alert message in homepage emergency --- builder/parameter_hunter.js | 12 ++++++------ builder/pattern_assembler.js | 12 ++++++------ source/css/scss/objects/_messaging.scss | 18 ++++++++++++++++++ source/css/style.css | 20 +++++++++++++++++--- source/css/style.scss | 7 +++---- 5 files changed, 50 insertions(+), 19 deletions(-) create mode 100644 source/css/scss/objects/_messaging.scss diff --git a/builder/parameter_hunter.js b/builder/parameter_hunter.js index a4da98a9d..44a779d2d 100644 --- a/builder/parameter_hunter.js +++ b/builder/parameter_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v0.10.0 - 2015 - * +/* + * 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. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index 74b16560a..b0bea15a3 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v0.10.0 - 2015 - * +/* + * 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. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/source/css/scss/objects/_messaging.scss b/source/css/scss/objects/_messaging.scss new file mode 100644 index 000000000..713ec0249 --- /dev/null +++ b/source/css/scss/objects/_messaging.scss @@ -0,0 +1,18 @@ +/*------------------------------------*\ + $MESSAGING +\*------------------------------------*/ + +// Alerts +.alert { + text-align: center; + padding: $pad; + margin-bottom: $space-half; + border: 1px solid $gray; + background: $gray-light; +} + +.alert-error { + color: $error; + border-color: $error; + background: #ffbebe; +} diff --git a/source/css/style.css b/source/css/style.css index 8c314e768..3b9f14539 100644 --- a/source/css/style.css +++ b/source/css/style.css @@ -5,13 +5,13 @@ $TABLE OF CONTENTS \*------------------------------------*/ /** - * VARIABLES..............................Declarations of Sass variables + * VARIABLES..............................Declarations of Sass variables * .....Colors * .....Typography * .....Layout * .....Defaults * .....Breakpoints - * MIXINS.................................Sass mixins + * MIXINS.................................Sass mixins * RESET..................................Set reset defaults * GLOBAL CLASSES.........................Set reset defaults * GLOBAL ELEMENTS........................Establish global styles @@ -35,7 +35,7 @@ /* CSS Transition Usage: @include transition(width,0.3s,ease-out); */ -/* Rem Unit font sizes with relative fallback http:/seesparkbox.com/foundry/scss_rem_mixin_now_with_a_better_fallback +/* Rem Unit font sizes with relative fallback http:/seesparkbox.com/foundry/scss_rem_mixin_now_with_a_better_fallback Usage: @include font-size(1, large); */ /*------------------------------------*\ @@ -1406,3 +1406,17 @@ td { .comment-text { margin-left: 9em; } + +.alert { + text-align: center; + padding: 1rem; + margin-bottom: .5rem; + border: 1px solid #808080; + background: #f9f9f9; +} + +.alert-error { + color: #F00; + border-color: #F00; + background: #ffbebe; +} diff --git a/source/css/style.scss b/source/css/style.scss index f1af3d12a..60e5210c3 100644 --- a/source/css/style.scss +++ b/source/css/style.scss @@ -7,13 +7,13 @@ $TABLE OF CONTENTS \*------------------------------------*/ /** - * VARIABLES..............................Declarations of Sass variables + * VARIABLES..............................Declarations of Sass variables * .....Colors * .....Typography * .....Layout * .....Defaults * .....Breakpoints - * MIXINS.................................Sass mixins + * MIXINS.................................Sass mixins * RESET..................................Set reset defaults * GLOBAL CLASSES.........................Set reset defaults * GLOBAL ELEMENTS........................Establish global styles @@ -92,5 +92,4 @@ @import "scss/objects/sections"; @import "scss/objects/article"; @import "scss/objects/comments"; - - +@import "scss/objects/messaging"; From c471eb075e77e832fd111b00b57b854f1e5145de Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Fri, 31 Jul 2015 23:02:48 -0500 Subject: [PATCH 08/11] fixed bug with pseudopatterns. auto-indented all js files standardized my consoles a bit to just found things --- builder/lineage_hunter.js | 18 +++--- builder/media_hunter.js | 22 +++---- builder/object_factory.js | 18 +++--- builder/parameter_hunter.js | 34 +++++----- builder/pattern_assembler.js | 78 +++++++++++------------ builder/pattern_exporter.js | 24 ++++---- builder/patternlab.js | 35 +++++------ builder/patternlab_grunt.js | 20 +++--- builder/pseudopattern_hunter.js | 106 +++++++++++++++++--------------- source/_data/data.json | 2 +- 10 files changed, 180 insertions(+), 177 deletions(-) diff --git a/builder/lineage_hunter.js b/builder/lineage_hunter.js index 8566dd0cb..a5a760583 100644 --- a/builder/lineage_hunter.js +++ b/builder/lineage_hunter.js @@ -1,12 +1,12 @@ -/* - * 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. - * - */ +/* +* 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"; diff --git a/builder/media_hunter.js b/builder/media_hunter.js index a7a2f66ff..2b367d2fa 100644 --- a/builder/media_hunter.js +++ b/builder/media_hunter.js @@ -1,19 +1,19 @@ -/* - * 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. - * - */ +/* +* 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 diveSync = require('diveSync'), - path = require('path'), - fs = require('fs-extra'); + path = require('path'), + fs = require('fs-extra'); var media_hunter = function(){ diff --git a/builder/object_factory.js b/builder/object_factory.js index fe6ca3a1c..4e6a7a397 100644 --- a/builder/object_factory.js +++ b/builder/object_factory.js @@ -1,12 +1,12 @@ -/* - * 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. - * - */ +/* +* 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"; diff --git a/builder/parameter_hunter.js b/builder/parameter_hunter.js index 44a779d2d..4a3664b43 100644 --- a/builder/parameter_hunter.js +++ b/builder/parameter_hunter.js @@ -1,12 +1,12 @@ -/* - * 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. - * - */ +/* +* 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"; @@ -14,9 +14,9 @@ var parameter_hunter = function(){ var extend = require('util')._extend, - pa = require('./pattern_assembler'), - mustache = require('mustache'), - pattern_assembler = new pa(); + pa = require('./pattern_assembler'), + mustache = require('mustache'), + pattern_assembler = new pa(); function findparameters(pattern, patternlab){ @@ -27,6 +27,10 @@ //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(')'); @@ -42,9 +46,9 @@ //merge paramData with any other data that exists. for (var prop in paramData) { - if (existingData.hasOwnProperty(prop)) { - existingData[prop] = paramData[prop]; - } + 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 diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index b0bea15a3..e8f3f4940 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -1,12 +1,12 @@ -/* - * 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. - * - */ +/* +* 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"; @@ -45,8 +45,8 @@ function processPatternFile(file, patternlab){ var fs = require('fs-extra'), - of = require('./object_factory'), - path = require('path'); + of = require('./object_factory'), + path = require('path'); //extract some information var abspath = file.substring(2); @@ -82,15 +82,15 @@ function processPattern(currentPattern, patternlab, additionalData){ var fs = require('fs-extra'), - mustache = require('mustache'), - lh = require('./lineage_hunter'), - ph = require('./parameter_hunter'), - pph = require('./pseudopattern_hunter'), - path = require('path'); + mustache = require('mustache'), + lh = require('./lineage_hunter'), + ph = require('./parameter_hunter'), + pph = require('./pseudopattern_hunter'), + path = require('path'); var parameter_hunter = new ph(), - lineage_hunter = new lh(), - pseudopattern_hunter = new pph(); + lineage_hunter = new lh(), + pseudopattern_hunter = new pph(); currentPattern.extendedTemplate = currentPattern.template; @@ -108,16 +108,10 @@ //do something with the regular old partials for(var i = 0; i < foundPatternPartials.length; i++){ var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g, '$2'); - console.log('key for partial is ' + partialKey); var partialPattern = getpatternbykey(partialKey, patternlab); currentPattern.extendedTemplate = currentPattern.extendedTemplate.replace(foundPatternPartials[i], partialPattern.extendedTemplate); } - } else{ - //we found no partials, so we are ready to render - if(patternlab.config.debug){ - console.log('no partial found in pattern ' + currentPattern.key); - } } //find pattern lineage @@ -139,28 +133,28 @@ throw 'Could not find pattern with key ' + key; } - /* - * Recursively merge properties of two objects - * http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically - */ - function mergeData(obj1, obj2) { - for (var p in obj2) { - try { - // Property in destination object set; update its value. - if ( obj2[p].constructor == Object ) { - obj1[p] = merge_data(obj1[p], obj2[p]); - - } else { + /* + * Recursively merge properties of two objects + * http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically + */ + var self = this; + function mergeData(obj1, obj2) { + for (var p in obj2) { + try { + // Property in destination object set; update its value. + if ( obj2[p].constructor == Object ) { + obj1[p] = self.merge_data(obj1[p], obj2[p]); + + } else { + obj1[p] = obj2[p]; + } + } catch(e) { + // Property in destination object not set; create it and set its value. obj1[p] = obj2[p]; - } - } catch(e) { - // Property in destination object not set; create it and set its value. - obj1[p] = obj2[p]; } + return obj1; } - return obj1; - } return { find_pattern_partials: function(pattern){ diff --git a/builder/pattern_exporter.js b/builder/pattern_exporter.js index fc7631b8b..b264528cc 100644 --- a/builder/pattern_exporter.js +++ b/builder/pattern_exporter.js @@ -1,18 +1,18 @@ -/* - * 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. - * - */ +/* +* 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 fs = require('fs-extra'), - path = require('path'); + path = require('path'); var pattern_exporter = function(){ @@ -31,7 +31,7 @@ } } - + } @@ -45,4 +45,4 @@ module.exports = pattern_exporter; -}()); \ No newline at end of file +}()); diff --git a/builder/patternlab.js b/builder/patternlab.js index 6bcd6ce43..d7f5306d4 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -1,12 +1,12 @@ -/* - * 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. - * - */ +/* +* 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. +* +*/ var patternlab_engine = function () { 'use strict'; @@ -64,8 +64,8 @@ var patternlab_engine = function () { patternlab.data.link = {}; var pattern_assembler = new pa(), - entity_encoder = new he(), - pattern_exporter = new pe(); + entity_encoder = new he(), + pattern_exporter = new pe(); diveSync('./source/_patterns', function(err, file){ //log any errors @@ -77,15 +77,14 @@ var patternlab_engine = function () { pattern_assembler.process_pattern_file(file, patternlab); }); - //render all patterns last, so lineageR works patternlab.patterns.forEach(function(pattern, index, patterns){ - //render the pattern, but first consolidate any data we may have - var allData = patternlab.data; + var allData = JSON.parse(JSON.stringify(patternlab.data)); allData = pattern_assembler.merge_data(allData, pattern.jsonFileData); allData = pattern_assembler.merge_data(allData, pattern.data); - pattern.patternPartial = pattern_assembler.renderPattern(pattern.extendedTemplate, patternlab.data); + + pattern.patternPartial = pattern_assembler.renderPattern(pattern.extendedTemplate, allData); //add footer info before writing var patternFooter = pattern_assembler.renderPattern(patternlab.footer, pattern); @@ -107,7 +106,7 @@ var patternlab_engine = function () { function buildFrontEnd(){ var pattern_assembler = new pa(), - media_hunter = new mh(); + media_hunter = new mh(); patternlab.buckets = []; patternlab.bucketIndex = []; patternlab.patternPaths = {}; @@ -118,12 +117,12 @@ var patternlab_engine = function () { //build the styleguide var styleguideTemplate = fs.readFileSync('./source/_patternlab-files/styleguide.mustache', 'utf8'), - styleguideHtml = pattern_assembler.renderPattern(styleguideTemplate, {partials: patternlab.patterns}); + styleguideHtml = pattern_assembler.renderPattern(styleguideTemplate, {partials: patternlab.patterns}); fs.outputFileSync('./public/styleguide/html/styleguide.html', styleguideHtml); //build the viewall pages var prevSubdir = '', - i; + i; for (i = 0; i < patternlab.patterns.length; i++) { var pattern = patternlab.patterns[i]; diff --git a/builder/patternlab_grunt.js b/builder/patternlab_grunt.js index 326626358..80c36d716 100644 --- a/builder/patternlab_grunt.js +++ b/builder/patternlab_grunt.js @@ -1,12 +1,12 @@ -/* - * 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. - * - */ +/* +* 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. +* +*/ var patternlab_engine = require('./patternlab.js'); @@ -37,4 +37,4 @@ module.exports = function(grunt) { }); -}; \ No newline at end of file +}; diff --git a/builder/pseudopattern_hunter.js b/builder/pseudopattern_hunter.js index 73975a816..917d907c6 100644 --- a/builder/pseudopattern_hunter.js +++ b/builder/pseudopattern_hunter.js @@ -1,74 +1,80 @@ -/* - * 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. - * - */ +/* +* 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 pseudopattern_hunter = function(){ - function findpseudopatterns(currentPattern, patternlab){ + function findpseudopatterns(currentPattern, patternlab){ - var extend = require('util')._extend, - glob = require('glob'), - fs = require('fs-extra'), - pa = require('./pattern_assembler'), - lh = require('./lineage_hunter'), - of = require('./object_factory'), - mustache = require('mustache'); + var glob = require('glob'), + fs = require('fs-extra'), + pa = require('./pattern_assembler'), + lh = require('./lineage_hunter'), + of = require('./object_factory'), + mustache = require('mustache'); var pattern_assembler = new pa(); var lineage_hunter = new lh(); - //look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json - var needle = currentPattern.subdir + '/' + currentPattern.fileName+ '~*.json'; - var pseudoPatterns = glob.sync(needle, { - cwd: 'source/_patterns/', //relative to gruntfile - debug: false, - nodir: true, - }); + //look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json + var needle = currentPattern.subdir + '/' + currentPattern.fileName + '~*.json'; + var pseudoPatterns = glob.sync(needle, { + cwd: 'source/_patterns/', //relative to gruntfile + debug: false, + nodir: true, + }); - if(pseudoPatterns.length > 0){ - for(var i = 0; i < pseudoPatterns.length; i++){ - //we want to do everything we normally would here, except instead head the pseudoPattern data - var variantFileData = fs.readJSONSync('source/_patterns/' + pseudoPatterns[i]); + if(pseudoPatterns.length > 0){ - //extend any existing data with variant data - variantFileData = extend(variantFileData, currentPattern.data); + for(var i = 0; i < pseudoPatterns.length; i++){ - var variantName = pseudoPatterns[i].substring(pseudoPatterns[i].indexOf('~') + 1).split('.')[0]; - var patternVariant = new of.oPattern(currentPattern.subdir, currentPattern.fileName + '-' + variantName + '.mustache', variantFileData); + if(patternlab.config.debug){ + console.log('found pseudoPattern variant of ' + currentPattern.key); + } - //see if this file has a state - pattern_assembler.setPatternState(patternVariant, patternlab); + //we want to do everything we normally would here, except instead head the pseudoPattern data + var variantFileData = fs.readJSONSync('source/_patterns/' + pseudoPatterns[i]); - //use the same template as the non-variant - patternVariant.template = currentPattern.template; + //extend any existing data with variant data + variantFileData = pattern_assembler.merge_data(variantFileData, currentPattern.jsonFileData); - //find pattern lineage - lineage_hunter.find_lineage(patternVariant, patternlab); + var variantName = pseudoPatterns[i].substring(pseudoPatterns[i].indexOf('~') + 1).split('.')[0]; + var patternVariant = new of.oPattern(currentPattern.subdir, currentPattern.fileName + '-' + variantName + '.mustache', variantFileData); - //add to patternlab object so we can look these up later. - pattern_assembler.addPattern(patternVariant, patternlab); - } - } + //see if this file has a state + pattern_assembler.setPatternState(patternVariant, patternlab); - } + //use the same template as the non-variant + patternVariant.template = currentPattern.template; + patternVariant.extendedTemplate = currentPattern.extendedTemplate; - return { - find_pseudopatterns: function(pattern, patternlab){ - findpseudopatterns(pattern, patternlab); - } - }; + //find pattern lineage + lineage_hunter.find_lineage(patternVariant, patternlab); - }; + //add to patternlab object so we can look these up later. + pattern_assembler.addPattern(patternVariant, patternlab); + } + } - module.exports = pseudopattern_hunter; + } + + return { + find_pseudopatterns: function(pattern, patternlab){ + findpseudopatterns(pattern, patternlab); + } + }; + + }; + + module.exports = pseudopattern_hunter; }()); diff --git a/source/_data/data.json b/source/_data/data.json index 3be1f4aca..3c79fac4a 100644 --- a/source/_data/data.json +++ b/source/_data/data.json @@ -90,4 +90,4 @@ { }, { } ] -} \ No newline at end of file +} From 54bd26fe16d32d58f75a7631510f6a657127ddee Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Fri, 31 Jul 2015 23:09:09 -0500 Subject: [PATCH 09/11] Updated CHANGELOG --- CHANGELOG | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 287c78c09..aa5ff5625 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,4 +1,12 @@ 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 PL-node-v0.9.1 - FIX: Fixed an issue with view all navigation not checking for index out of bounds cases @@ -7,7 +15,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 @@ -63,7 +71,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 @@ -102,7 +110,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 @@ -114,4 +122,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. \ No newline at end of file + - Minimum Viable Product! At this point, I feel you could use Pattern Lab Node to build an atomic design-driven website. From 121511b796f3f76ca4befc93491bb42c906be5f0 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Fri, 31 Jul 2015 23:17:05 -0500 Subject: [PATCH 10/11] updated the README with an example of pattern parameters in action --- README.md | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f17943092..a6c85d76a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[![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 @@ -6,7 +6,7 @@ The Node version of Pattern Lab is, at its core, a static site generator. It com ### 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` @@ -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. @@ -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"], @@ -165,7 +184,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? @@ -219,7 +238,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 From 81750838f889e83e19eddda2a8189df0657fd93a Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Sat, 1 Aug 2015 00:09:32 -0500 Subject: [PATCH 11/11] updated CHANGELOG with info about the base url path resolves #125 --- CHANGELOG | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG b/CHANGELOG index aa5ff5625..83067b2b8 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -6,7 +6,8 @@ PL-node-v0.10.0 - 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 + - 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