2e:null 2f:["$","title",null,{"children":"👋 Hello Nunjucks | Tom Larkworthy | Observable"}] 34:[] 32:{"id":"9ffdb3d4df82630f","slug":"nunjucks","title":"👋 Hello Nunjucks","thumbnail":"7ee67e4fb3523fa080709a4088316c5783fad88144bc324d0d366d9c0d53ec3d","access_level":"public","create_time":"$D2022-02-09T12:30:08.249Z","update_time":"$D2024-03-23T15:55:19.919Z","view_time":null,"first_public_time":"$D2022-02-21T19:42:37.255Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":647,"publish_version":647,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"6a1548aef3fabff0","slug":"libraries","title":"libraries","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"👋 Hello Nunjucks","cells":[{"id":0,"value":"# 👋 Hello Nunjucks\n\n[Nunjucks](https://mozilla.github.io/nunjucks/) is a fully featured string templating engine by Mozilla. It's very powerful and well known for building websites and programmatic documentation. It can be used to create reusable snippets for markdown, html or anything else! It is one of main engines in the popular [Eleventy](https://www.11ty.dev/) static site builder, so you can often find commercial website templates using Nunjucks (templates use the *.njs* extension)\n\nIn this integration we bind the Nunjucks processor to the *html*, *md* and *tex* *cellmodes*. Tex is used to create high performance compiled templates, perhaps useful for servers. *htl* and *md* adds the Nunjucks process into *html* and *md* blocks. You don't need to import all of them though!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"### Configure and Import\n\nConfiguration is done inline with importing the dependency, if you wish to customize, override the *options* object. Import the tex, htl or md variables to get the custom cell mode. Note you should import the [nunjucks-min](https://observablehq.com/@tomlarkworthy/nunjucks) notebook rather than this one.\n\n~~~js\nimport { nunjucks, tex, md, html} with { options } from \"@tomlarkworthy/nunjucks-min\"\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"options = ({\n lstripBlocks: true, // automatically remove leading whitespace from a block/tag\n trimBlocks: true, // automatically remove trailing newlines from a block/tag\n configure: (env) => {\n // Hook to perform additional configuration of the Environemnt (e.g. addFilters, addExtension)\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {\n nunjucks,\n tex,\n md,\n htl\n} with { options } from \"@tomlarkworthy/nunjucks-min\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"### Vanilla Use\n\nNunjucks has a function *renderString*, or *render* on a compiled template, passing the context variables as an object to hydrate into the template. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"nunjucks.renderString(\"Hello {{ username }}\", { username: \"James\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"template = nunjucks.compile(\"Hello {{ username }}\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"template.render({ username: \"James\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"### import Tex for *template compilation*\n\nWe override the Tex cellmode so we have have a custom nunjuck template cellmode which generates compiled templates. This is very useful for webserver usage where a template is repeatedly used.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"Hello {{ username }}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"helloExampleTemplate","database":"$undefined"},{"id":642,"value":"so if you name the cell, you can reference it in other cells to render it","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"helloExampleTemplate.render({ username: \"James\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"Templates can define functionality for other templates to import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":571,"value":"{% macro callout(content) %}\n

\n 💡\n {{caller()}}\n

\n{% endmacro %}\n\n{% macro user(name) %}\n@{{name}}\n{% endmacro %}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"definitions_njk","database":"$undefined"},{"id":440,"value":"### import htl for *rendering* HTML\n\nWe override the HTML cellmode (note variable is called *htl* though) to produce DOM content while accepting nunjucks code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":470,"value":"{# Comments in HTML #}\n{% from ${definitions_njk} import callout %}\n\n{% call callout() %}\n Callout are useful for creating readable documentation. It's easy to encapsulate features like this into macros\n{% endcall %}\n ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":536,"value":"### import md for *rendering* MD cells\n\nWe override the Markdown cellmode (note variable is called *md*) to produce DOM content from Markdown source.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"{# Normally macros are imported from other templates #}\n{% from ${definitions_njk} import user %}\n \nThis notebook was written by {{ user('tomlarkworthy') }}\n ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"### Using cell variables\n\nInstead of passing variables in the render, you can use template variables. These variables are automatically bound to the render function via some monkey patching.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"username = \"James as a cell variable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"Hello {{ ${username}}}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"templateVariables","database":"$undefined"},{"id":238,"value":"templateVariables.render() // Look no variable here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"### Comments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"{# This is how you comment #}\nOnly this renders","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"comment","database":"$undefined"},{"id":121,"value":"### Extending a base template\n\nNunjucks supports single inheritance of templates. Extension templates can fill in the blocks defined by the ancestor. \n\n{% from ${definitions_njk} import callout %}\n\n{% call callout() %}\n The hack to support template literal variables breaks down in the parent, so you must pass in an variables you wish to pass across scopes\n{% endcall %}\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"\n\n \n {% block header %}{% endblock %}\n \n \n {% block content %}{% endblock %}\n \n {# DOES NOT WORK #}\n

Tag expressions don't work in extends/imports: {{ ${new Date().toString()} }}

\n {# the following will work if you set the data variable #}\n

You need to set the variables manually in the child: {{ date }}

\n","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"base_njk","database":"$undefined"},{"id":149,"value":"title = \"Nunjuck example\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"items = ({\n apples: 5,\n bananas: \"yum\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"{% set date = ${'🤘'} %}\n\n{% extends ${base_njk} %}\n{% block header %}\n

{{ ${title} }}

\n{% endblock %}\n{% block content %}\n

{{ name }}: {{ item }}

\n{% endblock %}","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"templateExample","database":"$undefined"},{"id":315,"value":"### Macro\n\nMacros can be passed arguments and expand to chunks of content, similar conceptually to functions. We can use these to create easily reused, parameterized snippets.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"{% macro user(name) %}\n@{{name}}\n{% endmacro %}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"observable_njk","database":"$undefined"},{"id":348,"value":"### Imports\n\nthere are a few different syntaxes for imports, they can be used to bring in macros from other templates (among other things)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":346,"value":"{% from ${observable_njk} import user %}\nHi {{ user('tomlarkworthy') }}","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"macroExample","database":"$undefined"},{"id":614,"value":"## Read more\n\nThere is more documentation at https://mozilla.github.io/nunjucks/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"