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

update docs templates, add category templates, fix linking in search,

update/fix helpers, update/fix doc-adapters, clean up
parent 2d8df024
Pipeline #3 passed with stage
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<!DOCTYPE html>
<html>
<head>
<title>[patternlibray-frontend] prototype</title>
<title>{{> text-project-title}}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
......
<!DOCTYPE html>
<html>
<head>
<title>[patternlibray-frontend] prototype</title>
<title>{{> text-project-title}}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
......
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
{{> patterns-list no_demo="true"}}
</div>
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Categories</h1>
</div>
</header>
<div class="small-12 columns">
{{> categories-list no_demo="true"}}
</div>
{{#if single}}<i class="fa fa-folder-o"></i>{{/if}}{{#unless single}}<i class="fa fa-folder-open"></i>{{/unless}}
\ No newline at end of file
{{#if pattern.type}}
{{#ifCond value=pattern.type comp="atom" mode="eq"}}<i class="fa fa-square-o"></i>{{/ifCond}}
{{#ifCond value=pattern.type comp="molecule" mode="eq"}}<i class="fa fa-cube"></i>{{/ifCond}}
{{#ifCond value=pattern.type comp="organism" mode="eq"}}<i class="fa fa-cubes"></i>{{/ifCond}}
{{#ifCond value=pattern.type comp="template" mode="eq"}}<i class="fa fa-file-picture-o"></i>{{/ifCond}}
{{/if}}
\ No newline at end of file
{{#if pattern.categories}}{{#each pattern.categories as |category|}}<span class="name">{{category}}</span>{{#unless @last}}, {{/unless}}{{/each}}{{/if}}
......@@ -18,12 +18,10 @@
<li class="accordion-item row columns is-active" data-accordion-item>
<!-- Accordion tab title {{../root}}/patterns/{{pattern.name}} -->
<a href="{{patternlink title}}" class="accordion-title row columns is-active">
<div class="columns medium-6 small-12">Name: {{title}}</div>
<div class="columns medium-6 small-12">Name: {{title}} {{#with specs}}{{> "icon-pattern"}}{{/with}}</div>
<div class="columns medium-6 hide-for-small show-for-medium categories">Categories:
{{#each pattern.categories as |category|}}
<span class="name">{{category}}</span>
{{/each}}
</div>
{{#with specs}}{{> "text-pattern-categories"}}{{/with}}
</div>
</a>
<!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
......
<!DOCTYPE html>
<html>
<head>
<title>[{{> text-project-title}}]</title>
<title>{{> text-project-title}}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
......
......@@ -9,7 +9,7 @@
<li class="tabs-title"><a href="#panel-scss">SCSS</a></li>
<li class="tabs-title"><a href="#panel-specs">Specs</a></li>
<li class="tabs-title"><a href="#panel-tests">Tests</a></li>
<li class="tabs-title"><a href="#panel-changelog">Changelog</a></li>
<li class="tabs-title"><a href="#panel-changelog">Log</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
......
......@@ -5,7 +5,7 @@
{{/unless}}
{{#if changelog}}
<section>
{{#heading 2}}Change-Log{{/heading}}
{{#heading 2}}Change-Log:{{/heading}}
<article>
{{changelog}}
......@@ -13,4 +13,22 @@
</section>
{{/if}}
<hr>
{{#unless gitinfo.log}}
<section>
{{#heading 3}}no git-log info available...{{/heading}}
</section>
{{/unless}}
{{#if gitinfo.log}}
<section>
{{#heading 2}}Git-Log:{{/heading}}
<article>
{{gitinfo.log.list}}
</article>
</section>
{{/if}}
\ No newline at end of file
<section>
{{#heading 2}}Template Source:{{/heading}}
{{source.highlight}}
<hr>
{{#heading 2}}Example:{{/heading}}
{{example.highlight}}
......
<section>
<p class="lead">{{ description }}</p>
{{ example.raw }}
{{ docs }}
</section>
......@@ -2,6 +2,8 @@
<p class="lead">{{ description }}</p>
{{ docs }}
<hr>
{{ docs }}
</section>
\ No newline at end of file
<section>
<p class="lead">{{ description }}</p>
{{ docs }}
</section>
{{#unless specs}}
<section>
{{#heading 3}}no template specifications available...{{/heading}}
{{#heading 3}}no pattern specifications available...{{/heading}}
</section>
{{/unless}}
{{#if specs}}
<section>
{{#heading 2}}Template Specifications{{/heading}}
{{#heading 2}}Pattern Specifications:{{/heading}}
<article>
{{specs}}
<div class="row">
<div class="columns large-6 small-12">
<div class="row">
<div class="columns medium-6 small-12">
{{#heading 3}}Info:{{/heading}}
{{#if specs.pattern}}
<ul>
<li><strong>Name:</strong> {{specs.pattern.name}}</li>
<li><strong>Categories:</strong>
{{#if specs.pattern.categories}}
{{#each specs.pattern.categories as |cat|}}
<a href="{{../root}}/categories/{{cat}}">{{cat}}</a>{{#unless @last}}, {{/unless}}<!-- {{categorylink cat}} -->
{{/each}}
{{/if}}
{{#unless specs.pattern.categories}}
<span class="n_a_">n.a.</span>
{{/unless}}
</li>
</ul>
{{/if}}
</div>
<div class="columns medium-6 small-12">
{{#heading 3}}Dependencies:{{/heading}}
{{#if specs.pattern.uses}}
<ul>
{{#each specs.pattern.uses as |dep|}}
<li><a href="{{patternlink dep}}">{{dep}} {{#with specs}}{{> "icon-pattern"}}{{/with}}</a></li>
{{/each}}
</ul>
{{/if}}
{{#unless specs.pattern.uses}}
<p>no dependencies</p>
{{/unless}}
</div>
</div>
</div>
<div class="columns large-6 small-12">
{{#heading 3}}Parameters:{{/heading}}
{{#if specs.params}}
<ul>
{{#each specs.params as |values paramname|}}
<li><strong>{{paramname}}:</strong> {{values}} {{#each ../specs.defaults as |value defname| }}{{#ifCond value=defname comp=paramname mode="eq"}}<br>default: {{value}}{{/ifCond}}{{/each}}
</li>
{{/each}}
</ul>
{{/if}}
{{#unless specs.params}}
<p>no parameters available</p>
{{/unless}}
</div>
</div>
</article>
</section>
{{/if}}
\ No newline at end of file
<hr>
<section>
{{#heading 2}}Pattern Source:{{/heading}}
{{source.highlight}}
</section>
<section>
<p class="lead">{{ description }}</p>
{{ docs }}
</section>
{{#unless tests}}
<section>
{{#heading 3}}no tests info available...{{/heading}}
......
<div class="row panel-body">
<div class="row columns large-12">
<ul class="accordion" data-patternlibrary-accordion data-multi-expand="true" data-allow-all-closed="true" data-deep-link="true" data-update-history>
{{#if categorylist}}
{{#each categorylist as |cat|}}
<li class="accordion-item row columns" data-accordion-item>
<!-- Accordion tab title {{../root}}/patterns/{{pattern.name}} -->
<a href="{{root}}{{categorylink cat.slug}}" class="accordion-title row columns">
<div class="columns medium-6 small-12">Name: <strong>{{cat.name}}</strong> {{> "icon-category"}}</div>
<div class="columns medium-6 hide-for-small show-for-medium categories">Patterns: <strong>{{cat.patternsCount}}</strong></div>
</a>
<!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
<div class="accordion-content" data-tab-content>
</div>
</li>
{{/each}}
{{/if}}
</ul>
</div>
</div>
\ No newline at end of file
......@@ -6,11 +6,9 @@
<li class="accordion-item row columns" data-accordion-item>
<!-- Accordion tab title {{../root}}/patterns/{{pattern.name}} -->
<a href="{{patternlink pattern.name}}" class="accordion-title row columns">
<div class="columns medium-6 small-12">Name: {{pattern.name}}</div>
<div class="columns medium-6 small-12">Name: <strong>{{pattern.name}}</strong> {{> "icon-pattern"}}</div>
<div class="columns medium-6 hide-for-small show-for-medium categories">Categories:
{{#each pattern.categories as |category|}}
<span class="name">{{category}}</span>
{{/each}}
<strong>{{> "text-pattern-categories"}}</strong>
</div>
</a>
......
......@@ -6,30 +6,30 @@
<div class="title-bar-title">Patterns</div>
</div>
<div class="top-bar" id="pl-patternlist-filter">
<div class="top-bar filter" id="pl-patternlist-filter">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text hide-for-small show-for-medium">Patterns:</li>
<li class="hide-for-small show-for-medium"><a href="{{root}}/patterns/atoms"><i class="fa fa-list"></i> <span>Atoms</span></a></li>
<li class="hide-for-small show-for-medium"><a href="{{root}}/patterns/molecules"><i class="fa fa-list"></i> <span>Molecules</span></a></li>
<li class="hide-for-small show-for-medium"><a href="{{root}}/patterns/organisms"><i class="fa fa-list"></i> <span>Organisms</span></a></li>
<li class="hide-for-small show-for-medium"><a href="{{root}}/patterns/templates"><i class="fa fa-list"></i> <span>Templates</span></a></li>
<li class="hide-for-small show-for-medium"><a href="{{root}}/patterns/atoms"><i class="fa fa-square-o"></i> <span>Atoms</span></a></li>
<li class="hide-for-small show-for-medium"><a href="{{root}}/patterns/molecules"><i class="fa fa-cube"></i> <span>Molecules</span></a></li>
<li class="hide-for-small show-for-medium"><a href="{{root}}/patterns/organisms"><i class="fa fa-cubes"></i> <span>Organisms</span></a></li>
<li class="hide-for-small show-for-medium"><a href="{{root}}/patterns/templates"><i class="fa fa-file-picture-o"></i> <span>Templates</span></a></li>
<li class="show-for-small hide-for-medium">
<a href="#"><i class="fa fa-list"></i> <span>Patterns</span></a>
<ul class="menu vertical">
<li><a href="{{root}}/patterns/atoms"><i class="fa fa-list"></i> <span>Atoms</span></a></li>
<li><a href="{{root}}/patterns/molecules"><i class="fa fa-list"></i> <span>Molecules</span></a></li>
<li><a href="{{root}}/patterns/organisms"><i class="fa fa-list"></i> <span>Organisms</span></a></li>
<li><a href="{{root}}/patterns/templates"><i class="fa fa-list"></i> <span>Templates</span></a></li>
<li><a href="{{root}}/patterns/atoms"><i class="fa fa-square-o"></i> <span>Atoms</span></a></li>
<li><a href="{{root}}/patterns/molecules"><i class="fa fa-cube"></i> <span>Molecules</span></a></li>
<li><a href="{{root}}/patterns/organisms"><i class="fa fa-cubes"></i> <span>Organisms</span></a></li>
<li><a href="{{root}}/patterns/templates"><i class="fa fa-file-picture-o"></i> <span>Templates</span></a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-list"></i> <span>Categories</span></a>
<a href="{{root}}/categories"><i class="fa fa-list"></i> <span>Categories</span></a>
<ul class="menu vertical">
{{#if categories}}
{{#each categories}}
<li><a href="{{this.root}}/patterns/categories/{{slug}}">{{name}}</a></li>
{{#each categories as |cat|}}
<li><a href="{{../root}}/categories/{{cat.slug}}">{{> "icon-category" single="true"}} {{cat.name}}</a><!-- {{root}}/categories/{{slug}} --></li>
{{/each}}
{{/if}}
{{#unless no_demo}}
......
......@@ -7,9 +7,9 @@
<li class="tabs-title"><a href="#panel3">Markup</a></li>
<li class="tabs-title"><a href="#panel4">JS</a></li>
<li class="tabs-title"><a href="#panel5">SCSS</a></li>
<li class="tabs-title"><a href="#panel6">Template</a></li>
<li class="tabs-title"><a href="#panel6">Specs</a></li>
<li class="tabs-title"><a href="#panel7">Tests</a></li>
<li class="tabs-title"><a href="#panel8">Changelog</a></li>
<li class="tabs-title"><a href="#panel8">Log</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
......
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text hide-for-small show-for-medium">{{> text-project-title}}</li>
<li><a href="{{root}}/patterns">Patterns</a></li>
<li><a href="/pages">Pages</a></li>
<li><a href="{{root}}/builder">Builder</a></li>
<li><a href="{{root}}/patterns"><i class="fa fa-puzzle-piece"></i> Patterns</a></li>
<li><a href="/pages"><i class="fa fa-photo"></i> Pages</a></li>
<li><a href="{{root}}/builder"><i class="fa fa-magic"></i> Builder</a></li>
<li>
<a href="{{root}}/help">Help</a>
<a href="{{root}}/help"><i class="fa fa-question"></i> Help</a>
<ul class="menu">
<li><a href="{{root}}/help/docs">Docs</a></li>
<li><a href="{{root}}/help/about.html">About</a></li>
......
<!-- #PL:CATEGORYLIST -->
<section class="row panel categorylist">
<div class="small-12 columns">
{{> patterns-list-filter}}
</div>
<div class="small-12 columns">
{{> categories-list-content}}
</div>
</section>
<!-- /PL:CATEGORYLIST -->
var Handlebars = require('handlebars');
var path = require('path');
/**
* gereate (absolute) path link to category(index)
*
* USAGE:
*
* ... href="{{categorylink "slug"}}" ...
*
*
* @param string name
* @return string
*
*/
module.exports = function ( ) {
var name = arguments[0];
var options = arguments[1];
const PREFIX = 'uid-';
name = String(name)
.replace('atom/', 'atoms/')
.replace('molecule/', 'molecules/')
.replace('organism/', 'organisms/')
.replace('template/', 'templates/');
var $PL = options.data.root.Patternlibrary;
if ( (typeof $PL == 'undefined') ) {
$PL = options.data.Patternlibrary;
}
var linkUrl = path.join(
((typeof $PL != 'undefined') && $PL) ? $PL.Config.get('basepath') : '/',
'/categories',
String(name)
.replace('atom/', 'atoms/')
.replace('molecule/', 'molecules/')
.replace('organism/', 'organisms/')
.replace('template/', 'templates/')
);
return new Handlebars.SafeString( linkUrl );
}
\ No newline at end of file
......@@ -15,12 +15,9 @@ module.exports = function() {
var condition = `${arguments[0]}`;
var options = arguments[1];
for (var key in options.data.root) {
console.log('this-var:', key);
}
var result = eval(condition.toString()); //.bind(this);
if (result === true) return options.fn(this);
else return options.inverse(this);
if (result === true) { return options.fn(this); }
else { return options.inverse(this); }
}
......@@ -66,14 +66,19 @@ module.exports = function(options) {
$PL.updateDataFile();
options.data.root.Patternlibrary = $PL ;
var layoutTemplate = $PL.Handlebars.compile('{{> body}}', {noEscape: true});
var patternTemplate = $PL.Handlebars.compile(patternContent, {noEscape: true});
$PL.Handlebars.registerPartial('body', patternTemplate);
var rendered = layoutTemplate(patternData);
result = ( new $PL.Panini.Handlebars.SafeString( rendered ) );
try {
var layoutTemplate = $PL.Handlebars.compile('{{> body}}', {noEscape: true});
var patternTemplate = $PL.Handlebars.compile(patternContent, {noEscape: true});
$PL.Handlebars.registerPartial('body', patternTemplate);
var rendered = layoutTemplate(patternData);
result = ( new $PL.Panini.Handlebars.SafeString( rendered ) );
} catch (err) {
this.$PL.warn('pattern Helper Error: ', err);
}
}
return (result);
......
......@@ -27,7 +27,6 @@ module.exports = function ( ) {
.replace('template/', 'templates/');
var $PL = options.data.root.Patternlibrary;
//console.log('data: ', options.data.root);
var linkUrl = path.join(
((typeof $PL != 'undefined') && $PL) ? $PL.Config.get('basepath') : '/',
......
......@@ -28,7 +28,7 @@ handlebars.registerHelper('writeJsConstructor', function(name) {
*/
handlebars.registerHelper('writeJsFunction', function(method) {
var str = '$(\'#element\').foundation(\'' + method.name;
if (method.params.length) {
if (method.params && method.params.length) {
str += '\', ';
str += (method.params || []).map(function(val) {
return val.name;
......
......@@ -293,7 +293,7 @@ class Patternlibrary {
*
* @return Patternlibrary
*/
warn ( msg ) {
warn ( msg, err ) {
var strings = {
time : chalk.yellow( (new Date()).toLocaleTimeString() ),
message : chalk.yellow( msg )
......@@ -301,6 +301,7 @@ class Patternlibrary {
console.log(
'['+(strings.time)+'] Patternlibrary: ' + (strings.message) // + "\n"
);
if (err) this.debug(err);
return (this);
}
......@@ -398,6 +399,7 @@ class Patternlibrary {
}, {spaces: 4, flag: 'w'});
// search data
this.Supercollider.options.pageRoot = this.Config.get('root');
this.Supercollider.buildSearch(this.options.dest+'/search.json', function() {
// file written...
});
......@@ -460,7 +462,22 @@ class Patternlibrary {
*/
getCategories ( ) {
var patterns = this.getPatterns();
function isCatInList ( arr, obj, idx ) {
for (var i in arr) {
if ( arr[i][idx] && obj[idx] && (arr[i][idx] == obj[idx]) ) {
return (true);
}
}
return false;
}
function sortByKey(array, key) {
return array.sort(function(a, b) {
var x = a[key]; var y = b[key];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}
// categories data
var categories = [];
for (var pattern in patterns) {
......@@ -473,18 +490,25 @@ class Patternlibrary {
name: String(patterncategories[i]),
slug: String(patterncategories[i])
};
if ( categories.indexOf(cat) < 0 ) {
if ( !isCatInList( categories, cat, 'slug' ) ) {
var catPatterns = this.getPatterns(cat.slug);
cat.patterns = catPatterns;
cat.patternsCount = ((b) => {
var c = 0; for (var a in b) { c++; }; return c;
})(catPatterns);
categories.push(cat);
}
}
}
categories = sortByKey(categories, 'slug');
return (categories);
}
//
// helpers
//
......@@ -613,7 +637,9 @@ class Patternlibrary {
this.Panini.loadHelpers([path.join(relPath, '../helpers/'), '../helpers/', 'helpers',
(this.options.helpers || 'helpers')
]);
// special partial helper
this.Panini.Handlebars.registerHelper('PL', require( path.join('../helpers/patternlibrary') ));
}
/**
......@@ -629,12 +655,15 @@ class Patternlibrary {
this.Supercollider.init = require('./supercollider/supercollider_init_path_awareness');
this.Supercollider.parse = require('./supercollider/supercollider_parse_extended');
this.Supercollider
.adapter('sass')
.adapter('js');
//.adapter('sass')
.adapter('js')
;
this.Supercollider.adapter('sass', require('./supercollider/adapters/sass.js'));
this.Supercollider.adapter('source', require('./supercollider/adapters/sourcecode.js'));
this.Supercollider.adapter('example', require('./supercollider/adapters/sourceexample.js'));
this.Supercollider.adapter('specs', require('./supercollider/adapters/patternspecs.js'));
this.Supercollider.adapter('changelog', require('./supercollider/adapters/changelog.js'));
this.Supercollider.adapter('gitinfo', require('./supercollider/adapters/gitinfo.js'));
this.Supercollider.adapter('tests', require('./supercollider/adapters/testresults.js'));
......
......@@ -138,6 +138,17 @@ class Patternlibrary_DocParser {
var pattern = this.patternFile(file);
if ( pattern.attributes.pattern && (pattern.attributes.pattern.name != '') ) {
if (pattern.attributes.pattern && !pattern.attributes.pattern.type) {
// 'type' is not set, try to get it from 'name'
var parts = String(pattern.attributes.pattern.name).split('/');
if (parts.length > 1) {
pattern.attributes.pattern.type = String(parts[0])
.replace('atoms', 'atom')
.replace('molecules', 'molecule')
.replace('organisms', 'organism')
;
}
}
this.$PL.data[pattern.attributes.pattern.name] = pattern.attributes;
this.$PL.data[pattern.attributes.pattern.name].body = pattern.body;
}
......
This diff is collapsed.
......@@ -9,7 +9,7 @@ var format = require('string-template');
var frontMatter = require('front-matter');
module.exports = function(value, config, cb) {
var data = getSourceCode (value, config);
var data = getChangeLog (value, config);
cb(null, processTree(data));
}
......@@ -31,10 +31,10 @@ module.exports.search = function(items, link) {
}
function getSourceCode(value, config) {
function getChangeLog(value, config) {
if (!fs.existsSync(value)) return false;
var sourceFile = frontMatter(fs.readFileSync(value).toString());
var srcTemplate = ''+sourceFile.body+'';
var changelogFile = frontMatter(fs.readFileSync(value).toString());
var srcTemplate = ''+changelogFile.body+'';
var result = config.$PL.getDocRenderer().renderMarkdown(srcTemplate);
return result;
}
......
var fs = require('fs');
var glob = require('glob');
var globAll = require('glob-all');
var marked = require('marked');
var path = require('path');
var extend = require('util')._extend;
var format = require('string-template');
var frontMatter = require('front-matter');
var yaml = require('js-yaml');
var git = require('../../util/git');
module.exports = function(value, config, cb) {
var data = getGitInfo (value, config);
//config.$PL.debug('gitinfo:', data);
cb(null, processTree(data, config));
}
module.exports.config = {
verbose: false
}
module.exports.search = function(items, link) {
var results = [];
// this => collider
/* results.push({
name: name,
type: 'sass ' + type,
description: description,
link: link + hash
}); */
return results;
}
function getGitInfo(value, config) {
if (!fs.existsSync(value)) return false;
var logFormatYaml =
'- date: \'%cd\''+'%n'+
' timestamp: %ct'+'%n'+
' author: %an'+'%n'+
' email: %ae'+'%n'+
' message: \"%s\"'+'%n'+
' commit: %h'+'%n'+
' hash: %H'+'%n'+
' body: \"%b\"'+'%n'+
'%n';
var logFormatCompact =
'### %cd'+'%n'+
'%n'+
'- %s (%h, by [%an](mailto:%ae), <%ae>)'+'%n'+