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.
302 lines (292 loc) • 13.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom sep options</title>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container bs-docs-container">
<!-- 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: custom_sep_opts.html</span>
<span class="pagename">pagename: custom_sep_opts.html</span>
<span class="basename">basename: custom_sep_opts</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>
<!-- CUSTOM SEPARATOR -->
<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>
<div class="root-context">
<span class="filename">filename: custom_sep_opts.html</span>
<span class="pagename">pagename: custom_sep_opts.html</span>
<span class="basename">basename: custom_sep_opts</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>
<!-- CUSTOM SEPARATOR -->
<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.
<li>blue</li>
<li>green</li>
<li>red</li>
</ul>
</p>
<div class="root-context">
<span class="filename">filename: custom_sep_opts.html</span>
<span class="pagename">pagename: custom_sep_opts.html</span>
<span class="basename">basename: custom_sep_opts</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>
<!-- CUSTOM SEPARATOR -->
<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>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: custom_sep_opts.html</span>
<span class="pagename">pagename: custom_sep_opts.html</span>
<span class="basename">basename: custom_sep_opts</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>
<!-- CUSTOM SEPARATOR -->
<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 ### Body Copy Body copy written as normal, plain text will be wrapped with <code><p></p></code> tags in the rendered HTML. So this body copy:
<code>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>
renders to this HTML:
<code>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>
### Blockquotes For quoting blocks of content from another source within your document. Add <code>></code> before any text you want to quote.
<code>markdown
Add `>` before any text you want to quote.</code>
Renders to: > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. and this HTML:
<code>html
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote></code>
Blockquotes can also be nested:
<code>markdown
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
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>
Renders to: > Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. 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.
</p>
<div class="root-context">
<span class="filename">filename: custom_sep_opts.html</span>
<span class="pagename">pagename: custom_sep_opts.html</span>
<span class="basename">basename: custom_sep_opts</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>
<!-- CUSTOM SEPARATOR -->
<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>
<div class="root-context">
<span class="filename">filename: custom_sep_opts.html</span>
<span class="pagename">pagename: custom_sep_opts.html</span>
<span class="basename">basename: custom_sep_opts</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>
<!-- CUSTOM SEPARATOR -->
<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>
<div class="root-context">
<span class="filename">filename: custom_sep_opts.html</span>
<span class="pagename">pagename: custom_sep_opts.html</span>
<span class="basename">basename: custom_sep_opts</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>
<!-- CUSTOM SEPARATOR -->
<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>This is content from the description property in the YFM of Gamma post</p>
</p>
<div class="root-context">
<span class="filename">filename: custom_sep_opts.html</span>
<span class="pagename">pagename: custom_sep_opts.html</span>
<span class="basename">basename: custom_sep_opts</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>
<!-- CUSTOM SEPARATOR -->
<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.
<li>up</li>
<li>down</li>
<li>middle</li>
</ul>
</p>
<div class="root-context">
<span class="filename">filename: custom_sep_opts.html</span>
<span class="pagename">pagename: custom_sep_opts.html</span>
<span class="basename">basename: custom_sep_opts</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>