Nunjucks
Source file extensions: .njk
You can use Nunjucks to write your documentation pages or your components in a pure-html way.
Nunjucks is a sophisticated templating engine for JavaScript heavily inspired by jinja2. It supports advanced structures like blocks, template inheritance, filters, and many more.
Example
In a component doc/ folder, create a file with the .njk extension. Add content like the following:
doc/index.njk
{% set username = "Rioters" %}
<h1>Hello {{ username }} 🤘 !</h1>
Template inheritance
Templates import and extends allow you to split your markup in different files and refer to them in your final one.
~/doc-layout/src/base.njk
<!doctype html>
<html lang="en">
<body>
<header>Documentation</header>
<main>
{% block default %}{% endblock %}
</main>
</body>
</html>
src/content.njk
<p>This is an included banner</p>
doc/index.njk
{% extends "../../doc-layout/src/base.njk" %}
{% set username = "Rioters" %}
{% block default %}
<h1>Hello {{ username }} 🤘 !</h1>
{% include "../src/content.njk" %}
{% endblock %}
Your can also use macro for computed parts of templates and import them in your final file.
Front Matter
Nunjucks templates in our editor supports Front Matter syntax, allowing you to declare data ready to be consumed in your templates:
---
message: Hello all
list:
- name: Foo
title: Your name
- name: 0123456789
title: Your phone number
---
{% set username = "Rioters" %}
<h1>{{ message }} {{ username }} 🤘 !</h1>
<ul>
{% for i in list %}
<li>{{ i.title }}: {{ i.name }}</li>
{% endfor %}
</ul>