Minor updates

assets/apprentice/handlebars.js

@@ -7,25 +7,6 @@ let simple = () => {
   return out
 }
 
-let nested = () => {
-  // This uses each for context switching and uses a nested links parameter
-  let template = Handlebars.compile(`
-<ul>
-  {{#each links}}
-  <li><a href='{{href}}' target='_blank'>{{text}}</a></li>
-  {{/each}}
-</ul>`)
-  return template({
-    links: [{
-      'href': 'https://handlebarsjs.com/guide',
-      'text': 'Handlebars official guide'
-    }, {
-      'href': 'https://io.sivert.pw',
-      'text': 'Awesome blog!'
-    }]
-  })
-}
-
 // This is how handlebars comments work
 let comments = Handlebars.compile(`
 {{! This comment will not show up in the output}}
@@ -33,29 +14,65 @@ let comments = Handlebars.compile(`
 {{!-- This comment may contain mustaches like }} --}}
 inspect element here!`)()
 
+// This uses each for context switching and uses a nested links parameter
+let nested = Handlebars.compile(`
+<ul>
+  {{#each links}}
+  <li><a href='{{href}}' target='_blank'>{{text}}</a></li>
+  {{/each}}
+</ul>`)({
+  links: [{
+    'href': 'https://handlebarsjs.com/guide',
+    'text': 'Handlebars official guide'
+  }, {
+    'href': 'https://io.sivert.pw',
+    'text': 'Awesome blog!'
+  }]
+})
+
 // Simple helper
 Handlebars.registerHelper('censor', (str) => {
   return str.replaceAll('fuck', 'f***').replaceAll('hell', 'h***')
 })
 
 // Block helper
-Handlebars.registerHelper('', (items, options) => {
-
+Handlebars.registerHelper('noop', (options) => {
+  return options.fn(this)
 })
 
 // Handlebars registered partial
-Handlebars.registerPartial('', '')
-
-inlinePartial = `
-{{#*inline "inlinePartial"}}
-
-{{/inline}}`
+Handlebars.registerPartial('people', `
+<ul>
+  {{#each members}}
+  <li>{{name}} age {{age}} from {{home}}</li>
+  {{/each}}
+  balle!
+</ul>`)
 
 // Calling non-existent partials with block syntax uses the block content as fallback
-let advanced = () => {
-  return Handlebars.compile(`
-{{censor profanity}}`)({'profanity': 'fuckin hell man!'})
-}
+let advanced = Handlebars.compile(`
+{{censor profanity}}
+
+{{#> people members}}
+  <b>Some thing went wrong, man!</b>
+{{/people}}
+
+<ul>
+  {{#each members}}
+  <li>{{name}} age {{age}} from {{home}}</li>
+  {{/each}}
+</ul>`)({
+  'profanity': 'fuckin hell man!',
+  'members': [{
+    'home': 'Never Never Land',
+    'name': 'Peter',
+    'age': 120
+  }, {
+    'home': 'Trollhättan',
+    'name': 'Clark',
+    'age': 75
+  }]
+})
 
 // Run "main" after all is loaded
 document.addEventListener("DOMContentLoaded", function () {
@@ -64,18 +81,24 @@ document.addEventListener("DOMContentLoaded", function () {
   output.id = 'output'
   document.getElementById('meta').append(output)
 
+  // When creating a partials you may use {{> @partial-block }} to capture the block content
+  Handlebars.registerPartial('layout', '<br /><div>{{> content }}</div>')
+
   // Here we use those "triple mustaches"!
   let template = Handlebars.compile(`
-<br /><div>
-<h4>Examples output:</h4>
-<h5>Functions:</h5>
-<p>Simple: {{{simple}}}</p>
-<p>Nested: {{{nested}}}</p>
-<p>Comments: {{{comments}}}</p>
-<p>Advanced: {{{advanced}}}</p></div>`)
+{{#> layout}}
+  {{#*inline "content"}}
+    <h4>Examples output:</h4>
+    <h5>Functions:</h5>
+    <p>Simple: {{{simple}}}</p>
+    <p>Nested: {{{nested}}}</p>
+    <p>Comments: {{{comments}}}</p>
+    <p>Advanced: {{{advanced}}}</p>
+  {{/inline}}
+{{/layout}}`)
 
   // Render and insert the template above
-  document.getElementById('output').innerHTML = template({
-    simple: simple(), nested: nested(), comments: comments, advanced: advanced()
+  output.innerHTML = template({
+    simple: simple(), nested: nested, comments: comments, advanced: advanced
   })
 })

assets/chroma.scss

@@ -1,6 +1,6 @@
-.chroma { padding: .1vh 0 0; margin: 0 0 .7vh }
-.chroma { padding: .1vh 0 0; margin: 0 0 .7vh }
-.chroma { color: #ffffff; background-color: #111111 }
+.chroma {
+  padding: .1vh 0 0; margin: 0 0 .7vh; min-height: 3.3vh;
+  color: #ffffff; background-color: #111111 }
 .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0 }
 .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0 }
 .chroma .hl { background-color: #ffffcc }