Last active
August 3, 2022 12:52
-
-
Save IcarusFW/f86e1eb038dff2cf019621e10d7e5b98 to your computer and use it in GitHub Desktop.
Nunjucks - JSON into Template Macro
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)) | |
); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{ | |
"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