ssg  
Where to Discuss?

Local Group

Preface

Goal: Feeding Data in Eleventy, and Process in a Loop with Nunjucks.

Consider continue with nunjucks example. This time using SSG (static site generator), called eleventy (11ty).

Official Documentation

Source Examples

You can obtain source examples here:


Nunjucks Case

The nunjucks case is the same, with the one utilizing grunt in previous article with a few differences.

  • eleventy configuration

  • Using data to provide hyperlink in both navbar and sidebar.

Directory Structure

Consider an eleventy structure with nunjucks views.

❯ tree
.
├── assets
│   ├── css
│   │   └── w3.css
│   ├── favicon.ico
│   └── js
│       └── script.js
├── package.json
└── views
    ├── css.md
    ├── _data
    │   └── pages.json
    ├── html.md
    ├── _includes
    │   ├── layouts
    │   │   └── index.njk
    │   └── site
    │       ├── head.njk
    │       ├── navbar.njk
    │       └── sidebar.njk
    ├── index.md
    ├── javascript.md
    └── php.md

8 directories, 14 files

.

![Eleventy: Example: Tree][04-eleventy-tree-example]

The views structure is similar to previous case with grunt. I suggest that you have fast reading for this article first.

package.json

All you need to know is the devDependencies.

  "devDependencies": {
    "@11ty/eleventy": "^0.11.0"
  }

To begin with 11ty, you need to run npm install first.

.eleventy.js

You also need to a write a configuration in .eleventy.js.

module.exports = function(eleventyConfig) {

  // Directory Management
  eleventyConfig.addPassthroughCopy("assets");

  // Layout Alias
  eleventyConfig.addLayoutAlias("index", "layouts/index.njk");
  
  // Return your Config object
  return {
    // URL Related
    pathPrefix: "/",

    // Templating Engine
    templateFormats: [
      "njk",
      "html",
      "md"
    ],

    htmlTemplateEngine: "njk",

    // Directory Management
    passthroughFileCopy: true,
    dir: {
      input: "views",
      output: "dist",
      // ⚠️ These values are both relative to your input directory.
      includes: "_includes",
      data: "_data"
    }
  };
};

Global configuration is a must have in SSG world.

Nunjucks Template Specific Code

Configuration for nunjucks has been setup in configuration above.

    // Templating Engine
    templateFormats: [
      "njk",
      "html"
    ],

    htmlTemplateEngine: "njk",

In eleventy, data can be express in yaml, toml, json or javascript.

To provide hyperlink in both navbar and sidebar, we need to setup the data in pages.js as below:

[
  { "link": "/",     "short": "Home", "long": "Home"  },
  { "link": "/html", "short": "HTML", "long": "HTML Link" },
  { "link": "/css",  "short": "CSS",  "long": "CSS Link" },
  { "link": "/php",  "short": "PHP",  "long": "PHP Link" },
  { "link": "/javascript", "short": "Javascript", "long": "Javascript Link" }
]

The sidebar will use long text, and the navbar will use short one.

Router

Set automatically with SSG

Layout

<!DOCTYPE html>
<html lang="en">

<head>
  {% include "site/head.njk" %}
</head>
<body>
  {% include "site/sidebar.njk" %}

  <div id="main">
    {% include "site/navbar.njk" %}

    <div class="w3-container">
    {{ content | safe }}
    </div>
  </div>

</body>
</html>

As shown in order we have three include artefacts.

  • include head.njk,
  • include sidebar.njk,
  • include navbar.njk,

And one eleventy specific tag content.

    <div class="w3-container">
    {{ content | safe }}
    </div>

Nunjucks: ViM NERDTree Panes

It is almost the same with the original head.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>{{ title or "Link Example - Default" }}</title>

  <link rel="stylesheet" href="{{ "/assets/css/w3.css" | url }}">
  <script src="{{ "/assets/js/script.js" | url }}"></script>

Here we put the default title if we cannot find title variable.

<title>{{ title or "Link Example - Default" }}</title>

No need to add livereload, since utilized browsersync has internal sync.

Loop in Template

Very similar with previous example

This time, consider alter a bit, both the sidebar and the navbar, so we can render each data in loop.

  <div class="w3-sidebar w3-bar-block w3-card w3-animate-left" 
       style="display:none" id="mySidebar">
    <button class="w3-bar-item w3-button w3-large"
       id="closeNav" >Close &times;</button>
    {% for page in pages %}
      <a class="w3-bar-item w3-button"
         href="{{ page.link }}">{{ page.long }}</a>
    {% endfor %}
  </div>
    <div class="w3-teal">
      <button class="w3-button w3-teal w3-xlarge"
              id="openNav">&#9776;</button>
      <div class="w3-container">
        <h1>My Page</h1>
      </div>
    </div>

    <div class="w3-bar w3-black">
    {% for page in pages %}
      <a class="w3-bar-item w3-button"
         href="{{ page.link }}">{{ page.short }}</a>
    {% endfor %}
    </div>

All you need to know is these lines:

    {% for page in pages %}
      <a class="w3-bar-item w3-button"
         href="{{ page.link }}">{{ page.short }}</a>
    {% endfor %}

Eleventy: Loop in Nunjucks

This will render a hyperlink, with result about the same with previous example.

Running 11ty

Running eleventy (11ty) is as easy as this command below.

$ eleventy --serve

HTML: Hyperlink Example

❯ eleventy --serve
Writing dist/css/index.html from ./views/css.html.
Writing dist/html/index.html from ./views/html.html.
Writing dist/index.html from ./views/index.html.
Writing dist/php/index.html from ./views/php.html.
Writing dist/javascript/index.html from ./views/javascript.html.
Copied 3 files / Wrote 5 files in 0.27 seconds (v0.11.0)
Watching…
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:8080
    External: http://192.168.1.223:8080
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: dist

11ty: eleventy –serve

You are ready to run a website, with eleventy (11ty) SSG, using nunjucks.


What’s Next?

Consider continue reading [ Template - Pelican - Jinja2 ].