Nunjucks - HelixDesignSystem/helix-ui GitHub Wiki

Documentation is built using a home-grown process that makes use of Nunjucks, templates, and some variables. You can read more about Nunjucks functionality in their documentation.

{{variableName}}
{% nunjuck-tag %}
{# nunjuck comment #}

Variables

Variable Description Type
site Site Context Object
data Data Context Object
page Page Context Object

Site Context

(site.*) Information defined in the site key of the configuration defined in _config.js.

Data Context

(data.*) Data loaded in from the source/_data/*.yml files. Currently, the following keys are present:

Variable Description Type
nav Navigation Information Hierarchy Object
icons List of available icon types Array(String)

Page Context

(page.*) Frontmatter data is also combined with this context.

Variable Description Type
raw Raw content of the page markup (including frontmatter) string
path URL Path to the current page string
updated mtime of page Moment

Custom Tags

code Tag

The code tag can be used to insert syntax-highlighted code for purposes of displaying snippets.

  • Start with {% code %} with a language argument
    • e.g. {% code 'html' %}, {% code 'javascript' %}, etc.
  • End with {% endcode %}.
{% code 'html' %}
  <p>This is some html.</p>
{% endcode %}

{% code 'css' %}
  #idSelector {
    /* This is some CSS */
    font-weight: 700;
  }
{% endcode %}

Custom Filters

toc Filter

The toc filter generates a list of internal anchor links to deep link to sections of the documentation.

This filter will only create links for headings (h1-h6) that have the id attribute (if you want to link directly to the heading) or data-id (if you want to link to a different element).

You should limit use of this filter to templates (source/_templates).