Refactor/nunjucks ification

[sturobson]

• swap out the use of handlebars into nunjucks in fractal.js
  • nunjucks adapter docs
• transpose existing handlebars helpers to nunjucks
• change all the patterns from .hbs to .nunj

@khawkins98 feel free to add and check off these.

[khawkins98]

Having a look at this branch. Merged in the latest edits from develop

[sturobson]

hmm. I thought I added a 'list' for this in the description :(

[khawkins98]

A few differences:

• Referencing YAML variables, if we have hyphens (vf-lede-text):
  • Out:<p class="vf-lede">{{{vf-lede-text}}}</p>
  • In: <p class="vf-lede">{{ _self.context["vf-lede-text"] }}</p>
  • Doesn't change for {{ vf_lede }}
  • So I think we may need to update some YAML variables accordingly
• Referencing patterns:
  • Out: {{> '@vf-content'}}
  • In: {% render '@vf-content' %}
• Passing variables to patterns:
  • Out: {{> '@vf-lede' vf-lede-text=vf-intro-lede}}
  • In: {% render '@vf-lede', {"vf-lede-text": vf_intro_lede} %}

And then lots of the standard nunj differences with hbs

I think the big question is what are we gaining? Some notes:

• 11ty could use hbs or nunj ... nunjucks could make some templating things easier
• we might be able to do some fancier things in our pattern library with nunjucks, I think

Really, it's probably a bit of a tossup? It's probably a question of "Do we like Nunj more the Handlebars?"

[khawkins98]

Rethinking my closing line above:

Really, it's probably a bit of a tossup? It's probably a question of "Do we like Nunj more the Handlebars?"

Have investigated further over the past few days and had three areas that encourage me on this:

• I've had some initial success at (crudely) grafting the fractal (Nunj) templating pattern engine to extend 11ty ... that means we can npm install pattern and then just use them as templates (including access to pattern Yaml) 🎈
  • There's also a whole world of possibility about dynamically compiling only the sass needed for a static site
  • related to this ticket specifically: I'm less confident I could graft fractal into 11ty using Handlebars templates
• I've updated this branch to no longer use a theme of frctl/mandelbrot, but rather use its own theme outright. that allows a lot more customisation, including using .njk over .nunj
  • Potentially we could use 11ty for our pattern library, but that requires a little more thought
• Best for last: nunjucks is, of course, a much richer templating engine and resolves a lot of the consternation we were getting in making real templates (see: Feature/variant modifiers Feature/variant modifiers #310)
  • You can see the differences in this commit: da64367

So, with all that in mind:

1. I do think we should go with Nunjucks
2. We'll need to get the Nunjucks templates into alpha.4 (Thursday the 28th) so the new Nunjucks templates go up to npm
3. Once the nunj template are in npm we can further explore the use of 11ty

All of the patterns are working in fractal now ... with the exception of the two custom Handlebars helpers, I'm still trying to understand the syntax there. But hope to have that today at some point.

In many ways this isn't urgent, but I don't think we should let it sit around too long as the merge request will get complex fast.

[sturobson]