diff --git a/packages/core/src/lib/buildFooter.js b/packages/core/src/lib/buildFooter.js index 5a3eb6217..ec839d470 100644 --- a/packages/core/src/lib/buildFooter.js +++ b/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 { diff --git a/packages/core/src/lib/buildPatterns.js b/packages/core/src/lib/buildPatterns.js index 51dcea8b3..22b930190 100644 --- a/packages/core/src/lib/buildPatterns.js +++ b/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, } diff --git a/packages/core/src/lib/compose.js b/packages/core/src/lib/compose.js index 86b2f8f91..880977286 100644 --- a/packages/core/src/lib/compose.js +++ b/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, diff --git a/packages/core/src/lib/loaduikits.js b/packages/core/src/lib/loaduikits.js index 1f97564a2..d2025237e 100644 --- a/packages/core/src/lib/loaduikits.js +++ b/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); diff --git a/packages/core/src/lib/ui_builder.js b/packages/core/src/lib/ui_builder.js index 96229e08c..7802f81cd 100644 --- a/packages/core/src/lib/ui_builder.js +++ b/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, }, diff --git a/packages/edition-twig/package-lock.json b/packages/edition-twig/package-lock.json new file mode 100644 index 000000000..cb30f303e --- /dev/null +++ b/packages/edition-twig/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "@pattern-lab/edition-twig", + "version": "3.0.0-alpha.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@pattern-lab/starterkit-twig-demo": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@pattern-lab/starterkit-twig-demo/-/starterkit-twig-demo-4.0.0.tgz", + "integrity": "sha512-GDSKRgDT4BugTcEDRv3oH0+Lc9sUHWbUS6L1GPsLHr5PsJ/AdGdQOqTfrePZJMq2d/4xxGxQLAH2Ua6wagg0eg==" + } + } +} diff --git a/packages/edition-twig/package.json b/packages/edition-twig/package.json index 5c389c034..98aefd27d 100644 --- a/packages/edition-twig/package.json +++ b/packages/edition-twig/package.json @@ -23,9 +23,9 @@ "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" + "@pattern-lab/uikit-workshop": "^1.0.0-alpha.5", + "@pattern-lab/starterkit-twig-demo": "^4.0.0" }, "engines": { "node": ">=6.0" diff --git a/packages/edition-twig/patternlab-config.json b/packages/edition-twig/patternlab-config.json index 4c6b2358a..a4d00d3b2 100644 --- a/packages/edition-twig/patternlab-config.json +++ b/packages/edition-twig/patternlab-config.json @@ -2,46 +2,53 @@ "engines": { "twig": { "namespaces": [ + { + "id": "uikit", + "recursive": true, + "paths": [ + "../uikit-workshop/views-twig/" + ] + }, { "id": "atoms", "recursive": true, "paths": [ - "source/_patterns/00-atoms" + "./node_modules/@pattern-lab/starterkit-twig-demo/dist/_patterns/00-atoms" ] }, { "id": "molecules", "recursive": true, "paths": [ - "source/_patterns/01-molecules" + "./node_modules/@pattern-lab/starterkit-twig-demo/dist/_patterns/01-molecules" ] }, { "id": "organisms", "recursive": true, "paths": [ - "source/_patterns/02-organisms" + "./node_modules/@pattern-lab/starterkit-twig-demo/dist/_patterns/02-organisms" ] }, { "id": "templates", "recursive": true, "paths": [ - "source/_patterns/03-templates" + "./node_modules/@pattern-lab/starterkit-twig-demo/dist/_patterns/03-templates" ] }, { "id": "pages", "recursive": true, "paths": [ - "source/_patterns/04-pages" + "./node_modules/@pattern-lab/starterkit-twig-demo/dist/_patterns/04-pages" ] }, { "id": "macros", "recursive": true, "paths": [ - "source/_macros" + "./node_modules/@pattern-lab/starterkit-twig-demo/dist/_macros" ] } ], @@ -94,23 +101,33 @@ }, "paths": { "source": { - "root": "./source/", - "patterns": "./source/_patterns/", - "data": "./source/_data/", - "meta": "./source/_meta/", - "annotations": "./source/_annotations/", + "root": "./node_modules/@pattern-lab/starterkit-twig-demo/dist/", + "patterns": "./node_modules/@pattern-lab/starterkit-twig-demo/dist/_patterns/", + "data": "./node_modules/@pattern-lab/starterkit-twig-demo/dist/_data/", + "meta": "./node_modules/@pattern-lab/starterkit-twig-demo/dist/_meta/", + "annotations": "./node_modules/@pattern-lab/starterkit-twig-demo/dist/_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", - "fonts": "./source/fonts", - "css": "./source/css" + "js": "./node_modules/@pattern-lab/starterkit-twig-demo/dist/js", + "images": "./node_modules/@pattern-lab/starterkit-twig-demo/dist/images", + "fonts": "./node_modules/@pattern-lab/starterkit-twig-demo/dist/fonts", + "css": "./node_modules/@pattern-lab/starterkit-twig-demo/dist/css" }, "public": { "root": "public/", diff --git a/packages/uikit-workshop/views-twig/README b/packages/uikit-workshop/views-twig/README new file mode 100755 index 000000000..14208f4c9 --- /dev/null +++ b/packages/uikit-workshop/views-twig/README @@ -0,0 +1 @@ +There should be no reason to touch these files in day-to-day use. \ No newline at end of file diff --git a/packages/uikit-workshop/views-twig/partials/general-footer.twig b/packages/uikit-workshop/views-twig/partials/general-footer.twig new file mode 100755 index 000000000..aca705d9c --- /dev/null +++ b/packages/uikit-workshop/views-twig/partials/general-footer.twig @@ -0,0 +1,56 @@ + + + + + + + diff --git a/packages/uikit-workshop/views-twig/partials/general-header.twig b/packages/uikit-workshop/views-twig/partials/general-header.twig new file mode 100755 index 000000000..6a74a9766 --- /dev/null +++ b/packages/uikit-workshop/views-twig/partials/general-header.twig @@ -0,0 +1 @@ + diff --git a/packages/uikit-workshop/views-twig/partials/patternSection.twig b/packages/uikit-workshop/views-twig/partials/patternSection.twig new file mode 100755 index 000000000..7868faf8a --- /dev/null +++ b/packages/uikit-workshop/views-twig/partials/patternSection.twig @@ -0,0 +1,51 @@ +
+ +
+

+ + {{ partial.patternName }} + {% if partial.patternState %} + {{ partial.patternState }} + {% endif %} + +

+ + +
+ {{ partial.patternBreadcrumb }} +
+ + + +
+ +
+ +
+ {{ partial.patternPartialCode | raw }} +
+ + + +
diff --git a/packages/uikit-workshop/views-twig/partials/patternSectionSubtype.twig b/packages/uikit-workshop/views-twig/partials/patternSectionSubtype.twig new file mode 100755 index 000000000..ce449c607 --- /dev/null +++ b/packages/uikit-workshop/views-twig/partials/patternSectionSubtype.twig @@ -0,0 +1,11 @@ +
+ +

+ {{ partial.patternName }} +

+ +
+ {{ partial.patternDesc | raw }} +
+ +
diff --git a/packages/uikit-workshop/views-twig/viewall.twig b/packages/uikit-workshop/views-twig/viewall.twig new file mode 100755 index 000000000..42656abed --- /dev/null +++ b/packages/uikit-workshop/views-twig/viewall.twig @@ -0,0 +1,13 @@ + +
+ +
+ {% for partial in partials %} + {% if partial.patternSectionSubtype %} + {% include "@uikit/patternSectionSubtype.twig" %} + {% else %} + {% include "@uikit/patternSection.twig" %} + {% endif %} + {% endfor %} +
+