Commit debc5e5c authored by Björn Bartels's avatar Björn Bartels

refactoring POC, part I

parent d9746711
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"atom/link": {
"pattern": {
"name": "atom/link",
"categories": [
"basic",
"typography"
],
"uses": null,
"type": "atom"
},
"params": {
"class": [
"*"
],
"href": [
"*"
],
"label": [
"*"
]
},
"body": "<a class=\"{{class}}\" href=\"{{#if href}}{{href}}{{/if}}{{#unless href}}{{texthelper 'url'}}{{/unless}}\">{{#if label}}{{label}}{{/if}}{{#unless label}}{{texthelper 'word'}}{{/unless}}</a>\n ",
"usage": {
"count": 1,
"consumers": {}
}
},
"atom/modal-close-button": {
"pattern": {
"name": "atom/modal-close-button",
"categories": [
"button",
"modal"
],
"type": "atom"
},
"body": "<a class=\"btn btn-icon btn-cta-xhr cta-xhr-modal-close\" href=\"javascript:return true;\" aria-label=\"Close modal\" data-close>\n <span aria-hidden=\"true\">&times;</span>\n</a>"
},
"atom/text-headline": {
"pattern": {
"name": "atom/text-headline",
"categories": [
"basic",
"typography"
],
"uses": null,
"type": "atom"
},
"params": {
"headlevel": [
"1",
"2",
"3",
"4",
"5",
"6"
],
"class": [
"*"
],
"text": [
"*"
]
},
"defaults": {
"headlevel": "1"
},
"body": "{{#unless headlevel}}\n<h{{defaults.headlevel}} class=\"{{class}}\">{{#unless text}}{{texthelper 'words'}}{{/unless}}{{#if text}}{{text}}{{/if}}</h{{defaults.headlevel}}>\n{{/unless}}\n{{#if headlevel}}\n<h{{headlevel}} class=\"{{class}}\">{{#unless text}}{{texthelper 'words'}}{{/unless}}{{#if text}}{{text}}{{/if}}</h{{headlevel}}>\n{{/if}}\n",
"usage": {
"count": 1,
"consumers": {}
}
},
"atom/text-paragraph": {
"pattern": {
"name": "atom/text-paragraph",
"categories": [
"basic",
"typography"
],
"uses": null,
"type": "atom"
},
"params": {
"class": [
"*"
]
},
"body": "<p class=\"{{class}}\">{{texthelper 'normal'}}</p>",
"usage": {
"count": 1,
"consumers": {}
}
},
"molecule/article-excerpt-toggle": {
"pattern": {
"name": "molecule/article-excerpt-toggle",
"categories": [
"typography",
"article"
],
"uses": [
"atom/text-headline",
"molecule/text-excerpt-toggle",
"atom/link"
],
"type": "molecule"
},
"params": {
"class": [
"*"
],
"headline": [
"*"
],
"content": [
"*"
],
"url": [
"*"
]
},
"defaults": {
"headline": "This is some article headline...",
"url": "https://domain.tld/"
},
"body": "<article class=\"{{class}}\">\n {{PL atom=\"text-headline\" text=headline}}\n {{PL molecule=\"text-excerpt-toggle\" text=content}}\n {{PL atom=\"link\" href=url label=\"read more\" class=\"more\"}}\n</article>"
},
"molecule/article-teaser": {
"pattern": {
"name": "molecule/article-teaser",
"categories": [
"typography",
"article"
],
"uses": [
"atom/text-headline",
"atom/text-paragraph",
"atom/link"
],
"type": "molecule"
},
"params": {
"class": [
"*"
],
"headline": [
"*"
],
"content": [
"*"
],
"url": [
"*"
]
},
"defaults": {
"headline": "This is some article headline...",
"url": "https://domain.tld/"
},
"body": "<article class=\"{{class}}\">\n {{PL atom=\"text-headline\" text=headline}}\n {{PL atom=\"text-paragraph\" text=content}}\n {{PL atom=\"link\" href=url label=\"more\" class=\"more\"}}\n</article>"
},
"molecule/text-excerpt-toggle": {
"pattern": {
"name": "molecule/text-excerpt-toggle",
"categories": [
"basic",
"typography"
],
"uses": [
"atom/text-paragraph",
"atom/link"
],
"type": "molecule"
},
"params": {
"class": [
"*"
]
},
"body": "<p class=\"{{class}}\" data-text-excerpt-toggle>{{texthelper 'long'}}</p>\n<a href=\"#more\">show more</a>\n<a href=\"#less\">show less</a>",
"usage": {
"count": 1,
"consumers": {}
}
}
}
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
---
title: 'atom/link'
description: an inline link
description: 'an inline link'
source: 'atom-link.html'
sass:
js:
sass: styles.scss
js: module.js
---
Here you can either give a rather brief description of your pattern or provide extended usage information.
......
......@@ -269,7 +269,7 @@ gulp.task('copy:patternlibrary',
// clear patternlibrary dist folder
gulp.task('clean:patternlibrary-dist', function (done) {
rimraf(PATHS.dist + '/pl/', done);
rimraf(path.join(PATHS.dist, patternlibraryBaseURL), done);
});
// clear patternlibrary assets folder
......@@ -301,7 +301,7 @@ gulp.task('patternlibrary:init', function (done) {
$PL = null;
$PL = Patternlibrary({
verbose : true,
dest : patternlibraryDestination,
dest : PATHS.dist,
basepath : patternlibraryBaseURL,
/*partials : 'src/patterns/' */
root : 'gui/src/pages/',
......@@ -323,7 +323,7 @@ gulp.task('patternlibrary:run', function (done) {
// generate Patternlibrary pages
if ($PL != null) {
// ...go, go $PL !
$PL
return $PL
.run()
//.log("PL:", $PL)
;
......@@ -351,19 +351,19 @@ gulp.task('patternlibrary',
// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, 'libnamespace', gulp.parallel(gulp.series(pages, 'patternlibrary'), sass, javascript, javascriptVendors, images, copy, copyDevData), styleGuide));
gulp.series(clean, 'libnamespace', gulp.parallel(gulp.series(/*pages,*/ 'patternlibrary'), sass, javascript, javascriptVendors, images, copy/*, copyDevData*/), styleGuide));
// Build the site, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch));
gulp.series('build')); //, server, watch));
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('gui/data/*.json').on('all', gulp.series(copyDevData, browser.reload));
gulp.watch('gui/src/pages/**/*.html').on('all', gulp.series(gulp.series(pages, 'patternlibrary:re-run'), browser.reload));
gulp.watch('gui/src/{layouts,partials}/**/*.{html,md}').on('all', gulp.series(resetPages, gulp.series(pages, 'patternlibrary:re-run'), browser.reload));
gulp.watch('gui/src/pages/**/*.html').on('all', gulp.series(gulp.series(/*pages,*/ 'patternlibrary:re-run'), browser.reload));
gulp.watch('gui/src/{layouts,partials}/**/*.{html,md}').on('all', gulp.series(resetPages, gulp.series(/*pages,*/ 'patternlibrary:re-run'), browser.reload));
gulp.watch('gui/src/assets/scss/**/*.scss').on('all', sass);
gulp.watch('gui/src/assets/*/**/*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('gui/src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
......
......@@ -27,7 +27,7 @@ module.exports = function(options) {
return the_patternlibrary;
};
module.exports.Patternlibrary = Patternlibrary;
/**
......
......@@ -20,10 +20,16 @@ var Patternlibrary_Defaults = {
"helpers" : "src/helpers/",
// destination build-path for patternlibrary files
"dest" : "_build/patternlibrary/",
"dest" : "dist/",
// base path for server request's middleware hook
"basepath" : "/patternlibrary",
// base path for server request's
"basepath" : "pl/",
// pattern base path for server request's
"patternspath" : "patterns/",
// pattern base path for server request's
"categoriespath" : "categories/",
// Patternlibrary setup
......@@ -32,47 +38,46 @@ var Patternlibrary_Defaults = {
// verbose console output
"verbose" : false,
// pattern sub-directories in "partials"
"patterns" : {
"atoms" : "atoms/",
"molecules" : "molecules/",
"organisms" : "organisms/",
"templates" : "tempates/"
},
// pattern filenames to look up
"patternfilenames" : {
//"main" : "{index,pattern}.{html,hbs,handlebars}",
"main" : "*.{html,hbs,handlebars}",
"readme" : "{readme,info}.{md,markdown}",
"markup" : "{example,examples}.{md,markdown}",
"javascript" : "{index,module}.js",
"scss" : "{style,styles,pattern}.{scss,sass,css}",
"tests" : "{test,tests,visual,visualtest,visualtests}.js",
"changelog" : "changelog.{md,markdown}"
},
// search sub-path
"patternsearchpath" : "*/**/",
"templates": {
// pattern options
"pattern" : {
"source" : "*.{html,hbs,handlebars}", // {index,pattern}
"readme" : "{readme,info}.{md,markdown}", // "*.md", // {readme,info}.{md,markdown}
"javascript" : "*.js", // {index,module}
"scss" : "*.{scss,sass,css}", // {style,styles,pattern}
"tests" : "{test,tests,visual,visualtest,visualtests}.js",
"changelog" : "changelog.{md,markdown}",
// Patternlibrary helpers path
"helpers" : "helpers/",
// search sub-path
"searchpath" : "**",
// Patternlibrary layout file
"layout" : "template", // "layout" : "layouts/patternlibrary.html", //
// doc target filename
"target" : "index.html",
// pattern sub-directories in "partials"
"dirs" : {
"atoms" : "atoms/",
"molecules" : "molecules/",
"organisms" : "organisms/",
"templates" : "tempates/",
"pages" : "pages/"
}
},
"templates": {
// Patternlibrary partials templates
//
// Patternlibrary page layout file
"layout" : "patternlibrary",
// Patternlibrary main page template
"page" : "patternlibrary", // "page" : "templates/patternlibrary-page.html", //
// Patternlibrary pattern doc page template
"docpage" : "patterndocs.html", //
// Patternlibrary dashboard template
"dashboard" : "dashboard.html",
// main index page template
"mainindex" : "templates/index.html",
// Patternlibrary pattern list page template
"patternlist" : "index.html",
// pattern list template
"patternlist" : "templates/patternlist.html",
// pattern display template
"patterndisplay" : "templates/patterndisplay.html",
......@@ -120,6 +125,10 @@ var Patternlibrary_Defaults = {
"supercollider" : {
},
// internal Supercollider options
"adapters" : {
},
// (internal) plugin setups
"plugins" : {
......
This diff is collapsed.
var extend = require('deep-extend');
var curl = require('curl');
var queryString = require('query-string');
var fm = require('front-matter');
var fs = require('fs-extra');
var glob = require('glob');
var path = require('path');
var through = require('through2');
var slash = require('slash');
var jsonfile = require('jsonfile');
/**
* Patternlibrary object...
*
* @package Patternlibrary
* @namespace Patternlibrary
* @author Björn Bartels <coding@bjoernbartels.earth>
*/
class Patternlibrary_BASEOBJECT {
/**
* Initializes an instance of Patternlibrary object...
* @constructor
* @param {object} options - Configuration options to use.
* @param {Patternlibrary} patternlibrary - main patternlibrary object reference.
*/
constructor ( options, patternlibrary ) {
this.options = extend(this.defaults, options);
this.$PL = null;
if (typeof patternlibrary == 'object') {
this.$PL = patternlibrary;
}
}
/**
* bind Patternlibrary object
*
* @param Patternlibrary the Patternlibrary
* @return self
*/
bind ( patternlibrary ) {
if ( (typeof patternlibrary.patternlibrary_version == 'undefined') ) throw 'invalid patternlibrary object to bind';
if (typeof patternlibrary == 'object') {
this.$PL = patternlibrary;
}
return (this);
}
}
Patternlibrary_BASEOBJECT.prototype.defaults = require('./../config/default.js');
module.exports = Patternlibrary_BASEOBJECT;
\ No newline at end of file
var extend = require('deep-extend');
var curl = require('curl'); // 0.1.4
var queryString = require('query-string'); // 4.3.4
var fm = require('front-matter');
var fs = require('fs-extra');
var glob = require('glob');
var path = require('path');
var through = require('through2');
var slash = require('slash');
var jsonfile = require('jsonfile');
var yaml = require('js-yaml');
var extend = require('util')._extend;
var fs = require('fs');
var path = require('path');
var fm = require('front-matter');
/**
* Patternlibrary configuration reader
*
* @package Patternlibrary
* @namespace Patternlibrary
* @author Björn Bartels <coding@bjoernbartels.earth>
*/
class Patternlibrary_Config {
module.exports = function(opts) {
/**
* Initializes an instance of Patternlibrary configuration reader.
* @constructor
* @param {object} options - Configuration options to use.
*/
constructor ( options ) {
if (typeof options == 'string') {
options = this._loadFromFile(options);
}
if (typeof options == 'object') {
this.options = extend(this.defaults, options);
}
}
_loadFromFile ( file_name ) {
let file = fs.stat(file_name);
var opitons = {};
if ( file.isFile() ) {
console.log('loading config from file:', file_name);
this.options = extend(this.options, {
data : {},
pageRoot : process.cwd()
}, opts);
// initialises doc page as body-partial and compiled template
if (this.options.pattern.layout) {
if (this.options.pattern.docpage) {
try {
var pagefile = path.join(this.options.root, this.options.basepath, this.options.pattern.docpage);
var pageSource = fs.readFileSync(pagefile);
var page = fm(pageSource.toString());
if (page.attributes.layout != '') {
this.layout = page.attributes.layout;
}
} catch (e) {
throw new Error('Error loading Patternlibrary doc page template file: ' + e.message);
}
// Now create Handlebars templates out of them
this.template = this.handlebars.compile(page.body, {noEscape: true});
// Finally, add the page as a partial called "body", and render the layout template
this.handlebars.registerPartial('body', this.template);
if ( /$.yml/.test(file_name) ) {
options = this._loadYaml(file_name);
} else if ( /$.json/.test(options) ) {
options = this._loadJson(file_name);
} else {
console.log('cannot load config from file,, invalid extension:', file_name);
}
console.log('result: ', options);
} else {
console.log('cannot load config from file:', file_name);
throw new Error('No path to a doc page template was set in Patternlibrary.config().');
}
return options;
}
_loadYaml ( yamlfile_name ) {
let ymlFile = fs.readFileSync(yamlfile_name, 'utf8');
return yaml.load(ymlFile);
}
_loadJson ( jsonfile_name ) {
return jsonfile.readFileSync(jsonfile_name);
} else {
throw new Error('No path to a layout was set in Patternlibrary.config().');
}
get ( key ) {
if (typeof this.options[key] != 'undefined') {
return this.options[key];
}
return this.options;
}
set ( args ) {
if (arguments.length == 1) {
if (typeof args == 'object') {
this.options = args;
}
}
if (arguments.length == 3) {
var key = arguments[0];
var value = arguments[1];
var merge = arguments[2];
if (typeof merge == 'boolean') {
if (merge === true) {
if (typeof this.options[key] != 'undefined') {
this.options[key] = this._merge(this.options[key], value);
} else {
this.options[key] = value;
}
} else {
this.options = args;
}
}
}
if (arguments.length == 2) {
var mixed = arguments[0];
var value = arguments[1];
if (typeof mixed == 'object') {
if (typeof value == 'boolean') { // merge -> true
if (value === true) {
this.options = this._merge(this.options, mixed);
} else {
this.options = mixed;
}
} else {
this.options = mixed;
}
}
if (typeof mixed == 'string') {
this.options[mixed] = value;
}
}
}
_merge ( args ) {
return ( extend( arguments[0], arguments[1] ) );
}
return this;
}
Patternlibrary_Config.prototype.defaults = require('./../config/default.js');
module.exports = Patternlibrary_Config;
\ No newline at end of file
var extend = require('deep-extend');
var curl = require('curl'); // 0.1.4
var queryString = require('query-string'); // 4.3.4
var fm = require('front-matter');
var fs = require('fs-extra');
var glob = require('glob');
var path = require('path');
var through = require('through2');
var slash = require('slash');
var jsonfile = require('jsonfile');
/**
* Patternlibrary Documentaion Parser
*
* @package Patternlibrary
* @namespace Patternlibrary
* @author Björn Bartels <coding@bjoernbartels.earth>
*/
class Patternlibrary_DocParser {
/**
* Initializes an instance of Patternlibrary Documentaion Parser
* @constructor
* @param {object} options - Configuration options to use.
* @param {Patternlibrary} patternlibrary - main patternlibrary object reference.
*/
constructor ( options, patternlibrary ) {
this.options = extend(this.defaults, options);
this.$PL = null;
if (typeof patternlibrary == 'object') {
this.$PL = patternlibrary;
}
}
/**
* bind Patternlibrary object
*
* @param Patternlibrary the Patternlibrary
* @return self
*/
bind ( patternlibrary ) {
if ( (typeof patternlibrary.patternlibrary_version == 'undefined') ) throw 'invalid patternlibrary object to bind';
if (typeof patternlibrary == 'object') {
this.$PL = patternlibrary;
}
return (this);
}
/**
* retrieve ('front-matter') meta data from file
*
* @param file patternfile
* @return object
*/
patternFile ( patternfile ) {
var pattern = fm(patternfile.toString());
return (pattern);
}
/**
* register path-based partial names to 'handlebars'
*
* @param string dir
*/
parsePatternPartials ( dir ) {
var searchPath = this.$PL.Config.get('patternsearchpath');
var filenamePattern = this.$PL.Config.get('patternfilenames').main;
var partials = this._readdir(dir, path.join(searchPath, filenamePattern));
//console.log('patterns:', patterns);
for (var i in partials) {
var ext = path.extname(partials[i]);
var file = fs.readFileSync(partials[i]);
var name = path.basename(partials[i], ext);
var pattern = this.patternFile(file);
if ( pattern.attributes.pattern && (pattern.attributes.pattern.name != '') ) {
this.$PL.Handlebars.registerPartial(pattern.attributes.pattern.name, pattern.body + '\n');
}
}
}
/**
* register path-based partial names to 'handlebars'
*
* @param string dir
*/
loadPartials ( dir ) {
var searchPath = this.$PL.Config.get('patternsearchpath');
var filenamePattern = '*.*'; // this.$PL.Config.get('patternfilenames').main;
var partials = this._readdir(dir, path.join(searchPath, filenamePattern), true);
for (var i in partials) {
var ext = path.extname(partials[i]);
var file = fs.readFileSync(partials[i]);
var name = path.basename(partials[i], ext);
var pattern = this.patternFile(file);
if ( (pattern) ) {