Twig PHP Engine Updates

packages/core/src/lib/buildFooter.js

@@ -15,12 +15,17 @@ let render = require('./render'); //eslint-disable-line prefer-const
  */
 module.exports = function(patternlab, patternPartial, uikit) {
   //first render the general footer
-  return render(Pattern.createEmpty({ extendedTemplate: uikit.footer }), {
-    patternData: JSON.stringify({
-      patternPartial: patternPartial,
-    }),
-    cacheBuster: patternlab.cacheBuster,
-  })
+  return render(
+    uikit.footer.path
+      ? Pattern.createEmpty({ relPath: uikit.footer.path })
+      : Pattern.createEmpty({ extendedTemplate: uikit.footer }),
+    {
+      patternData: JSON.stringify({
+        patternPartial: patternPartial,
+      }),
+      cacheBuster: patternlab.cacheBuster,
+    }
+  )
     .then(footerPartial => {
       let allFooterData;
       try {

packages/core/src/lib/buildPatterns.js

@@ -100,12 +100,29 @@ module.exports = (deletePatternDir, patternlab, additionalData) => {
                 //cascade any patternStates
                 lineage_hunter.cascade_pattern_states(patternlab);
 
+                let plHeader = Pattern.createEmpty({
+                  extendedTemplate: patternlab.header,
+                });
+
+                // because patternlab.header doesn't yet exist, we need to check the first uikit condfig specified to see if a template path is defined there, otherwise use the original default logic.
+                if (
+                  patternlab.header === undefined &&
+                  patternlab.uikits[Object.keys(patternlab.uikits)[0]]
+                    .header !== undefined &&
+                  patternlab.uikits[Object.keys(patternlab.uikits)[0]].header
+                    .path !== undefined
+                ) {
+                  plHeader = Pattern.createEmpty({
+                    relPath:
+                      patternlab.uikits[Object.keys(patternlab.uikits)[0]]
+                        .header.path,
+                  });
+                }
+
                 //set the pattern-specific header by compiling the general-header with data, and then adding it to the meta header
                 return render(
-                  Pattern.createEmpty({
-                    // todo should this be uikit.header?
-                    extendedTemplate: patternlab.header,
-                  }),
+                  // todo should this be uikit.header?
+                  plHeader,
                   {
                     cacheBuster: patternlab.cacheBuster,
                   }

packages/core/src/lib/compose.js

@@ -68,7 +68,9 @@ module.exports = function(pattern, patternlab) {
         headPromise = render(patternlab.userHead, allData);
       } else {
         headPromise = render(
-          Pattern.createEmpty({ extendedTemplate: uikit.header }),
+          uikit.header.path
+            ? Pattern.createEmpty({ relPath: uikit.header.path })
+            : Pattern.createEmpty({ extendedTemplate: uikit.header }),
           allData
         );
       }
@@ -131,7 +133,9 @@ module.exports = function(pattern, patternlab) {
 
       //set the pattern-specific footer by compiling the general-footer with data, and then adding it to the meta footer
       const footerPartialPromise = render(
-        Pattern.createEmpty({ extendedTemplate: uikit.footer }),
+        uikit.footer.path
+          ? Pattern.createEmpty({ relPath: uikit.footer.path })
+          : Pattern.createEmpty({ extendedTemplate: uikit.footer }),
         {
           isPattern: pattern.isPattern,
           patternData: pattern.patternData,

packages/core/src/lib/loaduikits.js

@@ -68,23 +68,41 @@ module.exports = patternlab => {
         outputDir: configEntry.outputDir,
         excludedPatternStates: configEntry.excludedPatternStates,
         excludedTags: configEntry.excludedTags,
-        header: readModuleFile(
-          kit,
-          paths.source.patternlabFiles['general-header']
-        ),
-        footer: readModuleFile(
-          kit,
-          paths.source.patternlabFiles['general-footer']
-        ),
-        patternSection: readModuleFile(
-          kit,
-          paths.source.patternlabFiles.patternSection
-        ),
-        patternSectionSubType: readModuleFile(
-          kit,
-          paths.source.patternlabFiles.patternSectionSubtype
-        ),
-        viewAll: readModuleFile(kit, paths.source.patternlabFiles.viewall),
+
+        /**
+         * If the uikit asset config isn't a simple string path but an object,
+         * don't automatically inline the file's contents. This also keeps the
+         * door open for more advanced configurations down the road!
+         */
+        header:
+          typeof paths.source.patternlabFiles['general-header'] === 'object'
+            ? paths.source.patternlabFiles['general-header']
+            : readModuleFile(
+                kit,
+                paths.source.patternlabFiles['general-header']
+              ),
+        footer:
+          typeof paths.source.patternlabFiles['general-footer'] === 'object'
+            ? paths.source.patternlabFiles['general-footer']
+            : readModuleFile(
+                kit,
+                paths.source.patternlabFiles['general-footer']
+              ),
+        patternSection:
+          typeof paths.source.patternlabFiles.patternSection === 'object'
+            ? paths.source.patternlabFiles.patternSection
+            : readModuleFile(kit, paths.source.patternlabFiles.patternSection),
+        patternSectionSubType:
+          typeof paths.source.patternlabFiles.patternSectionSubtype === 'object'
+            ? paths.source.patternlabFiles.patternSectionSubtype
+            : readModuleFile(
+                kit,
+                paths.source.patternlabFiles.patternSectionSubtype
+              ),
+        viewAll:
+          typeof paths.source.patternlabFiles.viewall === 'object'
+            ? paths.source.patternlabFiles.viewall
+            : readModuleFile(kit, paths.source.patternlabFiles.viewall),
       }; // [3]
     } catch (ex) {
       logger.error(ex);

packages/core/src/lib/ui_builder.js

@@ -519,7 +519,9 @@ const ui_builder = function() {
    */
   function buildViewAllHTML(patternlab, patterns, patternPartial, uikit) {
     return render(
-      Pattern.createEmpty({ extendedTemplate: uikit.viewAll }),
+      uikit.viewAll.path
+        ? Pattern.createEmpty({ relPath: uikit.viewAll.path })
+        : Pattern.createEmpty({ extendedTemplate: uikit.viewAll }),
       {
         //data
         partials: patterns,
@@ -764,7 +766,9 @@ const ui_builder = function() {
       return new Promise(resolve => {
         //set the pattern-specific header by compiling the general-header with data, and then adding it to the meta header
         const headerPromise = render(
-          Pattern.createEmpty({ extendedTemplate: uikit.header }),
+          uikit.header.path
+            ? Pattern.createEmpty({ relPath: uikit.header.path })
+            : Pattern.createEmpty({ extendedTemplate: uikit.header }),
           {
             cacheBuster: patternlab.cacheBuster,
           }
@@ -782,7 +786,9 @@ const ui_builder = function() {
 
         //set the pattern-specific footer by compiling the general-footer with data, and then adding it to the meta footer
         const footerPromise = render(
-          Pattern.createEmpty({ extendedTemplate: uikit.footer }),
+          uikit.footer.path
+            ? Pattern.createEmpty({ relPath: uikit.footer.path })
+            : Pattern.createEmpty({ extendedTemplate: uikit.footer }),
           {
             patternData: '{}',
             cacheBuster: patternlab.cacheBuster,
@@ -824,9 +830,13 @@ const ui_builder = function() {
 
                 //build the main styleguide page
                 return render(
-                  Pattern.createEmpty({
-                    extendedTemplate: uikit.viewAll,
-                  }),
+                  uikit.viewAll.path
+                    ? Pattern.createEmpty({
+                        relPath: uikit.viewAll.path,
+                      })
+                    : Pattern.createEmpty({
+                        extendedTemplate: uikit.viewAll,
+                      }),
                   {
                     partials: uniquePatterns,
                   },

packages/edition-twig/package.json

@@ -23,7 +23,6 @@
   "dependencies": {
     "@pattern-lab/cli": "^0.0.1-alpha.19",
     "@pattern-lab/core": "^3.0.0-alpha.13",
-    "@pattern-lab/engine-mustache": "^2.0.0-alpha.6",
     "@pattern-lab/engine-twig-php": "^0.1.0",
     "@pattern-lab/uikit-workshop": "^1.0.0-alpha.5"
   },

packages/edition-twig/patternlab-config.json

@@ -2,6 +2,13 @@
   "engines": {
     "twig": {
       "namespaces": [
+        {
+          "id": "uikit",
+          "recursive": true,
+          "paths": [
+            "../uikit-workshop/views-twig/"
+          ]
+        },
         {
           "id": "atoms",
           "recursive": true,
@@ -101,11 +108,21 @@
       "annotations": "./source/_annotations/",
       "styleguide": "dist/",
       "patternlabFiles": {
-        "general-header": "views/partials/general-header.mustache",
-        "general-footer": "views/partials/general-footer.mustache",
-        "patternSection": "views/partials/patternSection.mustache",
-        "patternSectionSubtype": "views/partials/patternSectionSubtype.mustache",
-        "viewall": "views/viewall.mustache"
+        "general-header": {
+          "path": "@uikit/general-header.twig"
+        },
+        "general-footer": {
+          "path": "@uikit/general-footer.twig"
+        },
+        "patternSection": {
+          "path": "@uikit/patternSection.twig"
+        },
+        "patternSectionSubtype": {
+          "path": "@uikit/patternSectionSubtype.twig"
+        },
+        "viewall": {
+          "path": "@uikit/viewall.twig"
+        }
       },
       "js": "./source/js",
       "images": "./source/images",

packages/uikit-workshop/views-twig/README

@@ -0,0 +1 @@
+There should be no reason to touch these files in day-to-day use.

packages/uikit-workshop/views-twig/partials/general-footer.twig

@@ -0,0 +1,56 @@
+<script type="text/json" id="pl-pattern-data-footer" class="pl-js-pattern-data">
+  {{ patternData | raw }}
+</script>
+
+<script>
+  /*!
+   * scriptLoader - v0.1
+   *
+   * Copyright (c) 2014 Dave Olsen, http://dmolsen.com
+   * Licensed under the MIT license
+   *
+   */
+
+  var scriptLoader = {
+
+    run: function(js,cb,target) {
+      var s  = document.getElementById(target+'-'+cb);
+      for (var i = 0; i < js.length; i++) {
+        var src = (typeof js[i] != 'string') ? js[i].src : js[i];
+        var c   = document.createElement('script');
+        c.src   = '../../'+src+'?'+cb;
+        if (typeof js[i] != 'string') {
+          if (js[i].dep !== undefined) {
+            c.onload = function(dep,cb,target) {
+              return function() {
+                scriptLoader.run(dep,cb,target);
+              }
+            }(js[i].dep,cb,target);
+          }
+        }
+        s.parentNode.insertBefore(c,s);
+      }
+    }
+
+  }
+</script>
+
+<script id="pl-js-polyfill-insert-{{ cacheBuster }}">
+  (function() {
+    if (self != top) {
+      var cb = '{{ cacheBuster}}';
+      var js = [];
+      scriptLoader.run(js,cb,'pl-js-polyfill-insert');
+    }
+  })();
+</script>
+
+<script id="pl-js-insert-{{ cacheBuster }}">
+  (function() {
+    if (self != top) {
+      var cb = '{{ cacheBuster}}';
+      var js = [ { 'src': 'styleguide/bower_components/jwerty.min.js', 'dep': [ 'styleguide/js/patternlab-pattern.min.js' ] } ];
+      scriptLoader.run(js,cb,'pl-js-insert');
+    }
+  })();
+</script>

packages/uikit-workshop/views-twig/partials/general-header.twig

@@ -0,0 +1 @@
+<link rel="stylesheet" href="../../styleguide/css/pattern-lab.css?{{ cacheBuster }}" media="all">

packages/uikit-workshop/views-twig/partials/patternSection.twig

@@ -0,0 +1,34 @@
+<div id="{{ partial.patternPartial }}" class="pl-c-pattern">
+
+  <div class="pl-c-pattern__header">
+    <h3 class="pl-c-pattern__title">
+      <a href="../../patterns/{{ partial.patternLink }}" class="pl-c-pattern__title-link patternLink" data-patternpartial="{{ partial.patternPartial }}" title="Link to Pattern">
+        {{ partial.patternName }}
+        {% if partial.patternState %}
+          <span class="pl-c-pattern-state pl-c-pattern-state--{{ partial.patternState }}" title="{{ partial.patternState }}">{{ partial.patternState }}</span>
+        {% endif %}
+      </a>
+    </h3>
+
+    <!-- @todo: why doesn't PL node have breadcrumbs?? -- keeping in the Twig version -->
+    <div class="sg-pattern-breadcrumb pl-c-pattern-breadcrumb">
+      {{ partial.patternBreadcrumb }}
+    </div>
+
+
+    <button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{partial.patternPartial}}" data-patternpartial="{{ partial.patternPartial }}" title="View Pattern Info">
+      <span class="pl-c-pattern__toggle-icon">&#9660;</span>
+    </button><!--end pl-c-pattern__extra-toggle-->
+  </div><!--end pl-c-pattern__header-->
+
+  <div class="pl-c-pattern__extra pl-js-pattern-extra" id="pl-pattern-extra-{{ partial.patternPartial }}"></div><!--end pl-c-pattern__extra-->
+
+  <div class="pl-js-pattern-example">
+    {{ partial.patternPartialCode | raw }}
+  </div><!--end pl-js-pattern-example-->
+
+  <script type="text/json" id="pl-pattern-data-{{partial.patternPartial}}" class="pl-js-pattern-data">
+    {{ partial.patternData | raw }}
+  </script>
+
+</div><!--end pl-c-pattern-->

packages/uikit-workshop/views-twig/partials/patternSectionSubtype.twig

@@ -0,0 +1,11 @@
+<div id="{{ partial.patternPartial }}" class="pl-c-category">
+
+  <h2 class="pl-c-category__title">
+    <a href="../../patterns/{{ partial.patternLink }}" class="pl-c-category__title-link patternLink" data-patternpartial="{{ partial.patternPartial }}">{{ partial.patternName }}</a>
+  </h2><!--end pl-c-category__title-->
+
+  <div class="pl-c-category__description pl-c-text-passage">
+    {{ partial.patternDesc | raw }}
+  </div><!--end pl-c-category__description-->
+
+</div><!--end pl-c-category-->

packages/uikit-workshop/views-twig/viewall.twig

@@ -0,0 +1,13 @@
+<!-- View All Patterns in a Pattern Sub-Type -->
+<div class="pl-c-main">
+  <!-- Index of Patterns -->
+  <div class="pl-c-pattern-index">
+    {% for partial in partials %}
+      {% if partial.patternSectionSubtype %}
+        {% include "@uikit/patternSectionSubtype.twig" %}
+      {% else %}
+        {% include "@uikit/patternSection.twig" %}
+      {% endif %}
+    {% endfor %}
+  </div><!--end pl-c-pattern-index-->
+</div><!--end pl-c-main-->