First day on Nanoc 4

A quick look at a basic Nanoc 4 content doc, yml-header and using header values in a layout (template). A typical /content-file in Nanoc 4 has a yml -content at the beginning, between '---'.

For this post, its like:

---
title: "First day on Nanoc 4"
time: 15.12.2016
datetime: 2016-12-15T01:48:26+0200
---
html code here

Now, note the quotes around the title -string. For time, I just type whatever I want. For datetime, I use vim's strftime

:put =strftime('%FT%T%z')

To use the values in the yml-field, inline ruby code is added, using erb -template tags <% commands here %>. For example, In layout/default.html for this page:

<article>
  <time datetime="<%= @item[:datetime] %>"><%= @item[:time] %></time>
  <h1><%= @item[:title] %></h1>
  <%= yield %>
</article>

You can see the result at the top of this very page: The time and title above are from the content-html's yml-header, the structure with article from the layout, and these text-paragraphs are placed where 'yield' is on the layout -template.

Showing source code in your site

The convetion with html5 is generally to use <pre>-tag for blocks of code, and <code<-tag for inline code, such as directories or commands. Css-styles are also needed for these:

article code, article pre {
  color: #dfb;
  white-space: pre-wrap;
}
article code {
  padding: 0.5em;
  margin: 0.25em;
  border: 1pt darkgreen solid;
}

Unless one uses a html-escaping or a syntax highlighting helper, there is yet another thing one needs to use to show html-code on a html page: escaping tags.i Replacing the literal html -tags with html-character entities, so that instead of functioning as html-structure in this document, they show up as just inline text-content. I do this simply by selecting the code in vim and:

:'<,'>:s/</\&lt;/g<enter>