Skip to content

Instantly share code, notes, and snippets.

@IcarusFW
Last active August 3, 2022 12:52
Show Gist options
  • Save IcarusFW/f86e1eb038dff2cf019621e10d7e5b98 to your computer and use it in GitHub Desktop.
Save IcarusFW/f86e1eb038dff2cf019621e10d7e5b98 to your computer and use it in GitHub Desktop.
Nunjucks - JSON into Template Macro
var manageEnvironment = function(environment) {
environment.addFilter("json", function(value) {
return JSON.parse(value); // convert the complete string imported by Nunjucks into JSON and return
});
};
gulp.task("nunjucks", function() {
// .njk files in pages
return (
gulp
.src(paths.templates.src)
// Renders template with nunjucks
.pipe(
nunjucksRender({
path: ["templating"],
manageEnv: manageEnvironment // set up the environment using the additional filter
})
)
// output files in app folder
.pipe(gulp.dest(paths.templates.dest))
);
});
<!-- only one parameter - the JSON object - which is applied to macro using dot notation -->
{%- macro qcodePanel(arguments) %}
<div class="grid-unit unit-{{ arguments.name }} {{ arguments.additional }}">
<div class="grid-content">
<h3 class="grid-headline">{{ arguments.headline | safe }}</h3>
<div class="grid-subtitle">{{ arguments.subtitle | safe }}</div>
<div class="grid-description">{{ arguments.desc | safe }}</div>
</div>
</div>
{%- endmacro %}
{% set qcode %}
{% include 'data/_qcode.json' %} <!-- load JSON as string into 'set' variable -->
{% endset %}
{% import 'macros/_panel-qcode.njk' as panel %} <!-- import the macro -->
{% set compiled = (qcode | json) %} <!-- convert and assign the imported string into JSON -->
{% for items in compiled %} <!-- loop through JSON object -->
{{ panel.qcodePanel(items) }} <!-- send JSON object to macro -->
{% endfor %}
[
{
"name": "restless",
"headline": "Be Restless.",
"subtitle": "#AskQuestions",
"desc": "Seek and invest in your own <strong>personal growth</strong>. Be ready to ask questions. <strong>Embrace ambiguity</strong> - recognise that perfect is the enemy of good. Listen as often as you talk. Read as much as you can.",
"additional": ""
},
{
"name": "brave",
"headline": "Be Brave.",
"subtitle": "#LeadChange",
"desc": "<strong>Take the initiative;</strong> if you have an idea, don’t sit back and wait for something to happen, <strong>act on it</strong>. Contribute ideas willingly and help others to develop their ideas. Go beyond your day-to-day by giving time to <strong>helping everyone improve</strong>.",
"additional": "inverted"
},
{
"name": "reliable",
"headline": "Be Reliable.",
"subtitle": "#DoWhatYouSay",
"desc": "<strong>Collaborate. Be empathetic.</strong> Recognise the potential in others to help <strong>make a difference</strong>. Nurture relationships. Build trust by making a contribution that adds value and <strong>gets things done</strong>.",
"additional": ""
},
{
"name": "honest",
"headline": "Be Honest.",
"subtitle": "#CreatePurpose",
"desc": "Acknowledge <strong>you don’t have all the answers</strong>. Own your problems and embrace failure as a <strong>route to success</strong>. Leave your ego at the door and collaborate with others to <strong>make things better</strong>.",
"additional": "inverted"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment