Boxwood

Boxwood is a templating engine for JavaScript. It provides block inheritance, autoescaping, asynchronous control, and more.

Here's a snippet of Boxwood:

<import layout from="layouts/index.html" />

<layout>
  <ul>
    <for name and item of items>
      <li>{ name }: { item }</li>
    </for>
  </ul>
</layout>

Blocks

Slots are used in layout parts to specify the places where the page content will be placed.

Helpers

There is the <link/> helper available to construct links i.e. ~<a href="#"> ... </a>~. It automatically sets links class attribute to active for active links, which are the links that match the currently displayed pages. This is useful for building navigation bars where there is a visual clue, such as bottom border, to distinguish the currently selected navigation item.

Non-Nunjucks Pages: Org Mode & Markdown

There is, a convention in Kulfon that simplifies the creation of pages using either [[https://orgmode.org/][Org Mode]] or [[https://en.wikipedia.org/wiki/Markdown][Markdown]] formats. Those pages don't need to specify the blocks explicitly. Instead, their content is stored in a ~content~ variable. This way, if you specify this variable as a default content for a main block, a corresponding layout component will be used for these pages.

Here's a layout that will display the content of each Org Mode or Markdown page with an added sidebar component.

<html>
<head>
  ...
</head>
<body>
  <sidebar />

  { content }
</body>
</html>

Implicit Layout Inheritance

It is possible to leverage the implicit layout inheritance that follows the directory structure in pages/. Each page located in pages/<your-directory> directory will first extend <your-directory>.html layout from parts/layouts, and if it doesn't exist, it will default to index.html from parts/layouts.