handlebars-helper-compose
Version:
{{compose}} handlebars helper. Inlines content from multiple files optionally using wildcard (globbing/minimatch) patterns, extracts YAML front matter to pass to context for each file. Accepts compare function as 3rd parameter for sorting inlined files. Good for blog posts, chapters, etc.
315 lines (313 loc) • 13.8 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title from full_path.hbs</title>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container bs-docs-container">
<h1>Title from full_path.hbs</h1>
<!-- post -->
<p>
<a class="anchor" href="#alpha"></a>
<h2 class="blog-title">My Brilliant Blog</h2>
<h3 class="post-title" id="alpha">Post title: Alpha</h3>
<p class="post-content">This is content from from alpha.md. Title: Alpha.</p>
</p>
<div class="root-context">
<span class="filename">filename: full_path.html</span>
<span class="pagename">pagename: full_path.html</span>
<span class="basename">basename: full_path</span>
<span class="ext">ext: .html</span>
</div>
<div class="data-object">
<span class="id">id: alpha</span>
<span class="filepath">filepath: test/fixtures/posts/alpha.md</span>
<span class="index">index: 1</span>
<span class="number">number: 2</span>
<span class="first">first:</span>
<span class="prev">prev: 0</span>
<span class="next">next: 2</span>
<span class="last">last:</span>
</div>
<ul class="tags">
<li>small</li>
<li>medium</li>
<li>large</li>
</ul>
<p>
<a class="anchor" href="#beta"></a>
<h2 class="blog-title">My Brilliant Blog</h2>
<h3 class="post-title" id="beta">Post title: Beta</h3>
<p class="post-content">This is content from Beta, which should be inserted.</p>
</p>
<div class="root-context">
<span class="filename">filename: full_path.html</span>
<span class="pagename">pagename: full_path.html</span>
<span class="basename">basename: full_path</span>
<span class="ext">ext: .html</span>
</div>
<div class="data-object">
<span class="id">id: beta</span>
<span class="filepath">filepath: test/fixtures/posts/beta.md</span>
<span class="index">index: 2</span>
<span class="number">number: 3</span>
<span class="first">first:</span>
<span class="prev">prev: 1</span>
<span class="next">next: 3</span>
<span class="last">last:</span>
</div>
<ul class="tags">
<li>square</li>
<li>circle</li>
<li>triangle</li>
</ul>
<p>
<a class="anchor" href="#colors"></a>
<h2 class="blog-title">My Brilliant Blog</h2>
<h3 class="post-title" id="colors">Post title: Colors</h3>
<p class="post-content">
<ul class="Colors">
Content from Colors.</p>
<li>blue</li>
<li>green</li>
<li>red</li>
<p>
</ul>
</p>
</p>
<div class="root-context">
<span class="filename">filename: full_path.html</span>
<span class="pagename">pagename: full_path.html</span>
<span class="basename">basename: full_path</span>
<span class="ext">ext: .html</span>
</div>
<div class="data-object">
<span class="id">id: colors</span>
<span class="filepath">filepath: test/fixtures/posts/colors.md</span>
<span class="index">index: 3</span>
<span class="number">number: 4</span>
<span class="first">first:</span>
<span class="prev">prev: 2</span>
<span class="next">next: 4</span>
<span class="last">last:</span>
</div>
<ul class="tags">
<li>blue</li>
<li>green</li>
<li>red</li>
</ul>
<p>
<a class="anchor" href="#gamma"></a>
<h2 class="blog-title">My Brilliant Blog</h2>
<h3 class="post-title" id="gamma">Post title: GAMMA title from gamma.json</h3>
<p class="post-content">This is content from GAMMA title from gamma.json, which should be inserted.</p>
<p>This is content from the description property in the YFM of GAMMA title from gamma.json</p>
</p>
<div class="root-context">
<span class="filename">filename: full_path.html</span>
<span class="pagename">pagename: full_path.html</span>
<span class="basename">basename: full_path</span>
<span class="ext">ext: .html</span>
</div>
<div class="data-object">
<span class="id">id: gamma</span>
<span class="filepath">filepath: test/fixtures/posts/gamma.md</span>
<span class="index">index: 4</span>
<span class="number">number: 5</span>
<span class="first">first:</span>
<span class="prev">prev: 3</span>
<span class="next">next: 5</span>
<span class="last">last:</span>
</div>
<ul class="tags">
<li>ss</li>
<li>extra-medium</li>
<li>ll</li>
</ul>
<p>
<a class="anchor" href="#markdown"></a>
<h2 class="blog-title">My Brilliant Blog</h2>
<h3 class="post-title" id="markdown">Post title: Example Markdown</h3>
<p class="post-content">> Below this line should be HTML converted from Markdown</p>
<h3 id="body-copy">Body Copy</h3>
<p>Body copy written as normal, plain text will be wrapped with <code><p></p></code> tags in the rendered HTML.</p>
<p>So this body copy:</p>
<pre><code class="language-markdown">Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</code></pre>
<p>renders to this HTML:</p>
<pre><code class="language-html"><p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p></code></pre>
<h3 id="blockquotes">Blockquotes</h3>
<p>For quoting blocks of content from another source within your document.</p>
<p>Add <code>></code> before any text you want to quote.</p>
<pre><code class="language-markdown">Add <span class="code">`>`</span> before any text you want to quote.</code></pre>
<p>Renders to:</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<p>and this HTML:</p>
<pre><code class="language-html"><blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote></code></pre>
<p>Blockquotes can also be nested:</p>
<pre><code class="language-markdown"><span class="blockquote">> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.</span>
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
>>> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.</code></pre>
<p>Renders to:</p>
<blockquote>
<p>Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.</p>
<blockquote>
<p>Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.</p>
<blockquote>
<p>Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
</p>
</p>
</blockquote>
</blockquote>
</blockquote>
<div class="root-context">
<span class="filename">filename: full_path.html</span>
<span class="pagename">pagename: full_path.html</span>
<span class="basename">basename: full_path</span>
<span class="ext">ext: .html</span>
</div>
<div class="data-object">
<span class="id">id: markdown</span>
<span class="filepath">filepath: test/fixtures/posts/markdown.md</span>
<span class="index">index: 5</span>
<span class="number">number: 6</span>
<span class="first">first:</span>
<span class="prev">prev: 4</span>
<span class="next">next: 6</span>
<span class="last">last:</span>
</div>
<ul class="tags">
<li>ss</li>
<li>extra-medium</li>
<li>ll</li>
</ul>
<p>
<a class="anchor" href="#post-1"></a>
<h2 class="blog-title">My Brilliant Blog</h2>
<h3 class="post-title" id="post-1">Post title: Alpha post</h3>
<p class="post-content">This is the Alpha post, which should be inserted in the composed result.
</p>
</p>
<div class="root-context">
<span class="filename">filename: full_path.html</span>
<span class="pagename">pagename: full_path.html</span>
<span class="basename">basename: full_path</span>
<span class="ext">ext: .html</span>
</div>
<div class="data-object">
<span class="id">id: post-1</span>
<span class="filepath">filepath: test/fixtures/posts/post-1.md</span>
<span class="index">index: 6</span>
<span class="number">number: 7</span>
<span class="first">first:</span>
<span class="prev">prev: 5</span>
<span class="next">next: 7</span>
<span class="last">last:</span>
</div>
<ul class="tags">
<li>happy</li>
<li>gregarious</li>
<li>sad</li>
</ul>
<p>
<a class="anchor" href="#post-2"></a>
<h2 class="blog-title">My Brilliant Blog</h2>
<h3 class="post-title" id="post-2">Post title: Beta post</h3>
<p class="post-content">This is the Beta post, which should be inserted in the composed result.
</p>
</p>
<div class="root-context">
<span class="filename">filename: full_path.html</span>
<span class="pagename">pagename: full_path.html</span>
<span class="basename">basename: full_path</span>
<span class="ext">ext: .html</span>
</div>
<div class="data-object">
<span class="id">id: post-2</span>
<span class="filepath">filepath: test/fixtures/posts/post-2.md</span>
<span class="index">index: 7</span>
<span class="number">number: 8</span>
<span class="first">first:</span>
<span class="prev">prev: 6</span>
<span class="next">next: 8</span>
<span class="last">last:</span>
</div>
<ul class="tags">
<li>paper</li>
<li>rock</li>
<li>scissors</li>
</ul>
<p>
<a class="anchor" href="#post-3"></a>
<h2 class="blog-title">My Brilliant Blog</h2>
<h3 class="post-title" id="post-3">Post title: Gamma post</h3>
<p class="post-content">This is the Gamma post, which should be inserted in the composed result.</p>
<p>This is content from the description property in the YFM of Gamma post</p>
</p>
<div class="root-context">
<span class="filename">filename: full_path.html</span>
<span class="pagename">pagename: full_path.html</span>
<span class="basename">basename: full_path</span>
<span class="ext">ext: .html</span>
</div>
<div class="data-object">
<span class="id">id: post-3</span>
<span class="filepath">filepath: test/fixtures/posts/post-3.md</span>
<span class="index">index: 8</span>
<span class="number">number: 9</span>
<span class="first">first:</span>
<span class="prev">prev: 7</span>
<span class="next">next: 9</span>
<span class="last">last: true</span>
</div>
<ul class="tags">
<li>white</li>
<li>gray</li>
<li>black</li>
</ul>
<p>
<a class="anchor" href="#shapes"></a>
<h2 class="blog-title">My Brilliant Blog</h2>
<h3 class="post-title" id="shapes">Post title: Shapes</h3>
<p class="post-content">
<ul class="Shapes">
Content from Shapes.</p>
<li>up</li>
<li>down</li>
<li>middle</li>
<p>
</ul>
</p>
</p>
<div class="root-context">
<span class="filename">filename: full_path.html</span>
<span class="pagename">pagename: full_path.html</span>
<span class="basename">basename: full_path</span>
<span class="ext">ext: .html</span>
</div>
<div class="data-object">
<span class="id">id: shapes</span>
<span class="filepath">filepath: test/fixtures/posts/shapes.md</span>
<span class="index">index: 9</span>
<span class="number">number: 10</span>
<span class="first">first:</span>
<span class="prev">prev: 8</span>
<span class="next">next: 10</span>
<span class="last">last:</span>
</div>
<ul class="tags">
<li>up</li>
<li>down</li>
<li>middle</li>
</ul>
</div>
</body>
</html>