Patterns url

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.

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);
 
@@ -199,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
@@ -230,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);
       }
     }

config.json

@@ -32,5 +32,6 @@
       "homepage-emergency" : "inprogress"
   },
   "patternExportKeys": [],
-  "patternExportDirectory": "./pattern_exports/"
+  "patternExportDirectory": "./pattern_exports/",
+  "baseurl" : ""
  }

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 {

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
 	</script>
 

source/_patternlab-files/styleguide.mustache

@@ -53,9 +53,10 @@
 
 		<!-- JS to hook everything together and do annotations -->
 		<script>
-			// handle injection of items from PHP
+			// handle injection of items from patternlab.js
 			var patternPartial = "";
 			var lineage = "";
+			var baseurl = "{{{baseurl}}}";
 		</script>
 		<script src="../../styleguide/js/vendor/jwerty.js"></script>
 		<script src="../../styleguide/js/vendor/prism.js"></script>

source/_patternlab-files/viewall.mustache

@@ -53,9 +53,10 @@
 
     <!-- JS to hook everything together and do annotations -->
     <script>
-      // handle injection of items from PHP
+      // handle injection of items from patternlab.js
       var patternPartial = "{{ patternPartial }}";
       var lineage = "";
+      var baseurl = "{{{baseurl}}}";
     </script>
     <script src="../../styleguide/js/vendor/jwerty.js"></script>
     <script src="../../styleguide/js/postmessage.js"></script>