Commit 8e524d3c authored by Björn Bartels's avatar Björn Bartels

fixed some styling, update docs, clean up config file

parent 7a8f3d4d
Pipeline #57 passed with stage
......@@ -21,6 +21,7 @@
/* atoms */
//@import 'components/atoms/...';
@import 'components/atoms/codeblock';
/* molecules */
//@import 'components/molecules/...';
......
pre code {
&:empty {
display: none;
}
pre code {
border : 0 none;
padding: 0;
}
}
\ No newline at end of file
......@@ -27,13 +27,13 @@ When using this software, absolutely no warranties of any sort are granted. Plea
## About
**Patternlibrary** (a.k.a. _node-patternlibrary_) is a simple flat file documentaion generator for use with Node, Gulp or Grunt.
**Patternlibrary** (a.k.a. _node-patternlibrary_) is a static site and pattern documentaion generator for use with Node, Gulp or Grunt.
It compiles a series of HTML **patterns** (a.k.a. _partials_) structured in an **atomic desing pattern**. These patterns can also include other HTML **patterns**/**partials**, external Handlebars **helpers**, or external **data** as JSON or YAML.
Documentation pages for each pattern are created according to the specific pattern meta-data supplied. Those pages are combined under a GUI to view in your browser.
The main template engine behind this is *handlebars* ([-> homepage](http://handlebarsjs.com)) which itself is extended by *Zurb Foundation*'s *Panini* ([-> GitHub](https://github.com/zurb/panini)). The style and script source files are parsed by *Zurb Foundation*'s *Supercollider* ([-> GitHub](https://github.com/zurb/supercollider)) utilizing *SassDoc* ([-> homepage](http://sassdoc.com/)) and *JSDoc* ([-> homepage](http://usejsdoc.org)).
The template engine used is *handlebars* ([-> homepage](http://handlebarsjs.com)) which itself is extended by *Zurb Foundation*'s *Panini* ([-> GitHub](https://github.com/zurb/panini)). The style and script source files are parsed by *Zurb Foundation*'s *Supercollider* ([-> GitHub](https://github.com/zurb/supercollider)) utilizing *SassDoc* ([-> homepage](http://sassdoc.com/)) and *JSDoc* ([-> homepage](http://usejsdoc.org)).
## Documentation
......
This diff is collapsed.
......@@ -99,3 +99,226 @@ layout: patternlibrary
</div>
</div>
<div class="row">
<div class="large-12 column">
<hr>
<h1>h1 Heading 😎</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
<h2>Horizontal Rules</h2>
<hr>
<hr>
<hr>
<h2>Typographic replacements</h2>
<p>Enable typographer option to see result.</p>
<p>© © ® ® ™ ™ § § ±</p>
<p>test… test… test… test?.. test!..</p>
<p>!!! ??? , – —</p>
<p>“Smartypants, double quotes” and ‘single quotes’</p>
<h2>Emphasis</h2>
<p><strong>This is bold text</strong></p>
<p><strong>This is bold text</strong></p>
<p><em>This is italic text</em></p>
<p><em>This is italic text</em></p>
<p><s>Strikethrough</s></p>
<h2>Blockquotes</h2>
<blockquote>
<p>Blockquotes can also be nested…</p>
<blockquote>
<p>…by using additional greater-than signs right next to each other…</p>
<blockquote>
<p>…or with spaces between arrows.</p>
</blockquote>
</blockquote>
</blockquote>
<h2>Lists</h2>
<p>Unordered</p>
<ul>
<li>Create a list by starting a line with <code>+</code>, <code>-</code>, or <code>*</code></li>
<li>Sub-lists are made by indenting 2 spaces:
<ul>
<li>Marker character change forces new list start:
<ul>
<li>Ac tristique libero volutpat at</li>
</ul>
<ul>
<li>Facilisis in pretium nisl aliquet</li>
</ul>
<ul>
<li>Nulla volutpat aliquam velit</li>
</ul>
</li>
</ul>
</li>
<li>Very easy!</li>
</ul>
<p>Ordered</p>
<ol>
<li>
<p>Lorem ipsum dolor sit amet</p>
</li>
<li>
<p>Consectetur adipiscing elit</p>
</li>
<li>
<p>Integer molestie lorem at massa</p>
</li>
<li>
<p>You can use sequential numbers…</p>
</li>
<li>
<p>…or keep all the numbers as <code>1.</code></p>
</li>
</ol>
<p>Start numbering with offset:</p>
<ol start="57">
<li>foo</li>
<li>bar</li>
</ol>
<h2>Code</h2>
<p>Inline <code>code</code></p>
<p>Indented code</p>
<pre><code>// Some comments
line 1 of code
line 2 of code
line 3 of code
</code></pre>
<p>Block code “fences”</p>
<pre class="hljs"><code>Sample text here...
</code></pre>
<p>Syntax highlighting</p>
<pre class="hljs language-js"><code><span class="hljs-keyword">var</span> foo = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">bar</span>) </span>{
<span class="hljs-keyword">return</span> bar++;
};
<span class="hljs-built_in">console</span>.log(foo(<span class="hljs-number">5</span>));
</code></pre>
<h2>Tables</h2>
<table>
<thead>
<tr>
<th>Option</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr>
<td>engine</td>
<td>engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr>
<td>ext</td>
<td>extension to be used for dest files.</td>
</tr>
</tbody>
</table>
<p>Right aligned columns</p>
<table>
<thead>
<tr>
<th style="text-align:right">Option</th>
<th style="text-align:right">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:right">data</td>
<td style="text-align:right">path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr>
<td style="text-align:right">engine</td>
<td style="text-align:right">engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr>
<td style="text-align:right">ext</td>
<td style="text-align:right">extension to be used for dest files.</td>
</tr>
</tbody>
</table>
<h2>Links</h2>
<p><a href="http://dev.nodeca.com">link text</a></p>
<p><a href="http://nodeca.github.io/pica/demo/" title="title text!">link with title</a></p>
<p>Autoconverted link <a href="https://github.com/nodeca/pica">https://github.com/nodeca/pica</a> (enable linkify to see)</p>
<h2>Images</h2>
<p><img src="https://octodex.github.com/images/minion.png" alt="Minion">
<img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Stormtroopocat" title="The Stormtroopocat"></p>
<p>Like links, Images also have a footnote style syntax</p>
<p><img src="https://octodex.github.com/images/dojocat.jpg" alt="Alt text" title="The Dojocat"></p>
<p>With a reference later in the document defining the URL location:</p>
<h2>Plugins</h2>
<p>The killer feature of <code>markdown-it</code> is very effective support of
<a href="https://www.npmjs.org/browse/keyword/markdown-it-plugin">syntax plugins</a>.</p>
<h3><a href="https://github.com/markdown-it/markdown-it-emoji">Emojies</a></h3>
<blockquote>
<p>Classic markup: 😉 :crush: 😢 :tear: 😆 😋</p>
<p>Shortcuts (emoticons): 😃 😦 😎 😉</p>
</blockquote>
<p>see <a href="https://github.com/markdown-it/markdown-it-emoji#change-output">how to change output</a> with twemoji.</p>
<h3><a href="https://github.com/markdown-it/markdown-it-sub">Subscript</a> / <a href="https://github.com/markdown-it/markdown-it-sup">Superscript</a></h3>
<ul>
<li>19<sup>th</sup></li>
<li>H<sub>2</sub>O</li>
</ul>
<h3><a href="https://github.com/markdown-it/markdown-it-ins">&lt;ins&gt;</a></h3>
<p><ins>Inserted text</ins></p>
<h3><a href="https://github.com/markdown-it/markdown-it-mark">&lt;mark&gt;</a></h3>
<p><mark>Marked text</mark></p>
<h3><a href="https://github.com/markdown-it/markdown-it-footnote">Footnotes</a></h3>
<p>Footnote 1 link<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>.</p>
<p>Footnote 2 link<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup>.</p>
<p>Inline footnote<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup> definition.</p>
<p>Duplicated footnote reference<sup class="footnote-ref"><a href="#fn2" id="fnref2:1">[2:1]</a></sup>.</p>
<h3><a href="https://github.com/markdown-it/markdown-it-deflist">Definition lists</a></h3>
<dl>
<dt>Term 1</dt>
<dd>
<p>Definition 1
with lazy continuation.</p>
</dd>
<dt>Term 2 with <em>inline markup</em></dt>
<dd>
<p>Definition 2</p>
<pre><code> { some code, part of Definition 2 }
</code></pre>
<p>Third paragraph of definition 2.</p>
</dd>
</dl>
<p><em>Compact style:</em></p>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2a</dd>
<dd>Definition 2b</dd>
</dl>
<h3><a href="https://github.com/markdown-it/markdown-it-abbr">Abbreviations</a></h3>
<p>This is <abbr title="Hyper Text Markup Language">HTML</abbr> abbreviation example.</p>
<p>It converts “<abbr title="Hyper Text Markup Language">HTML</abbr>”, but keep intact partial entries like “xxxHTMLyyy” and so on.</p>
<h3><a href="https://github.com/markdown-it/markdown-it-container">Custom containers</a></h3>
<div class="warning">
<p><em>here be dragons</em></p>
</div>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Footnote <strong>can have markup</strong></p>
<p>and multiple paragraphs. <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Footnote text. <a href="#fnref2" class="footnote-backref">↩︎</a> <a href="#fnref2:1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Text of inline footnote <a href="#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
</div>
</div>
......@@ -361,7 +361,7 @@ gulp.task('default',
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/pages/**/*.{html,md}').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));
......
......@@ -41,6 +41,8 @@ var Patternlibrary_Defaults = {
// pattern options
"pattern" : {
// doc adapter file patterns
"source" : "*.{html,hbs,handlebars}", // {index,pattern}
"readme" : "{readme,info}.{md,markdown}", // "*.md", // {readme,info}.{md,markdown}
"javascript" : "*.js", // {index,module}
......@@ -48,11 +50,8 @@ var Patternlibrary_Defaults = {
"tests" : "{test,tests,visual,visualtest,visualtests}.js",
"changelog" : "changelog.{md,markdown}",
// search sub-path
// search sub-path, default '**' = all sub-paths
"searchpath" : "**",
// doc target filename
"target" : "index.html",
// pattern sub-directories in "partials"
"dirs" : {
......@@ -61,7 +60,11 @@ var Patternlibrary_Defaults = {
"organisms" : "organisms/",
"templates" : "tempates/",
"pages" : "pages/"
}
},
// doc target filename
"target" : "index.html"
},
"gui": {
......@@ -96,21 +99,51 @@ var Patternlibrary_Defaults = {
},
"nogui": false,
// internal middleware options
"middleware" : {
},
// internal Panini/Handlebars options
"handlebars" : {
},
// internal MarkDown options
"markdown" : {
},
// internal JS Doc options
"jsdoc" : {
},
// internal JS Doc options
"sassdoc" : {
},
// internal Supercollider options
"adapters" : {
}/*,
"templates": {
// Patternlibrary page layout file
// main page layout file
"layout" : "patternlibrary",
// Patternlibrary pattern doc page template
// pattern doc page template
"docpage" : "patterndocs.html", //
// Patternlibrary dashboard template
// dashboard template
"dashboard" : "dashboard.html",
// Patternlibrary pattern list page template
// pattern list page template
"patternlist" : "index.html",
// pattern display template
// display template
"patterndisplay" : "templates/patterndisplay.html",
// pattern main index page template
......@@ -134,54 +167,8 @@ var Patternlibrary_Defaults = {
"pagelist" : "templates/pagelist.html",
// page display template
"pagedisplay" : "templates/pagedisplay.html"
},
},*/
// advanced setup
// internal look-up paths for Patternlibrary includes and templates, partials, etc...
"fileLookupPath" : [
"./",
"node_modules/node-patternlibrary/"
],
// internal Panini/Handlebars options
"panini" : {
},
// internal MarkDown options
"marked" : {
},
// internal Supercollider options
"supercollider" : {
},
// internal Supercollider options
"adapters" : {
},
// (internal) plugin setups
"plugins" : {
// internal doc-parser options
"docparser" : {
},
// internal template renderer options
"docrenderer" : {
},
// internal middleware options
"filestream" : {
},
// internal middleware options
"middleware" : {
}
}
};
......
var extend = require('deep-extend');
/**
* includes/renders a pattern into current position
* (wraps Handlebars'/Panini's {{> ...}} helper)
*
*/
function patternLibary (options) {
var args = [];
var patternContent = '';
var patternData = {};
var patternName = false;
var result = '';
if (arguments.length > 1) {
for (var i = 0; i < arguments.length; i++) {
if ( i != (arguments.length-1) ) {
args.push(arguments[i])
} else {
options = arguments[arguments.length-1];
}
}
}
if (typeof options.hash.atom != 'undefined') {
patternName = 'atom/'+options.hash.atom;
}
if (typeof options.hash.molecule != 'undefined') {
patternName = 'molecule/'+options.hash.molecule;
}
if (typeof options.hash.organism != 'undefined') {
patternName = 'organism/'+options.hash.organism;
}
if (typeof options.hash.page != 'undefined') {
patternName = 'page/'+options.hash.template;
}
if (patternName) {
args.push(patternName);
}
var $PL = options.data.root.Patternlibrary;
var patterns = $PL.getPatterns();
for (var j = 0; j < args.length; j++) {
var thisPatternName = args[j];
$PL.Panini.data.Patternlibrary = null;
extend(patternData, $PL.Panini.data);
$PL.Panini.data.Patternlibrary = $PL;
if (typeof patterns[thisPatternName] != 'undefined') {
patternContent = patterns[thisPatternName].body;
$PL.patternUsage(thisPatternName, options.data.root);
} else {
throw ('Patternlibrary error: pattern "'+thisPatternName+'" not found');
patternContent = '';
}
options.data.root.Patternlibrary = null ;
extend(patternData, patterns[thisPatternName]);
extend(patternData, options.data.root);
extend(patternData, options.hash);
$PL.updateDataFile();
options.data.root.Patternlibrary = $PL ;
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);
}
module.exports = function () {}; // patternLibary;
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment