Step 2

Let's explore the views of this application.

Open the views folder and notice there are three files in there:

  • base.njk
  • index.njk
  • dashboard.njk

We will explore these one by one!

base.njk

This template file contains the boilerplate HTML which is the basis of every HTML file that our app will render.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouNote</title>
    {% block css %}
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <!-- CSS Reset -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
    <!-- Milligram CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
    <!-- Our Style -->
    <link rel="stylesheet" href="style.css">
    {% endblock %}
  </head>
  <body>
    {% block body %}
    {% endblock %}
    {% block script %}
    {% endblock %}
  </body>
</html>

Notice the use of Nunjucks Blocks.

A block defines a section on the template and identifies it with a name.

Blocks are used by Template Inheritance.

Further notice the stylesheets imported here; we are using a minimalist CSS framework called Milligram.

index.njk

This template file contains the homepage view which will be rendered when a user visits the YouNote web app. The template basically contains a form with a field for user to add their username.

{% extends "base.njk" %}

{% block body %}
<div class="container">
  <div class="row">
    <div class="column column-50">
      <h1>YouNote</h1>
      <form action="/dashboard">
        <label for="uname">username:</label>
        <input type="text" id="username" name="uname"><br><br>
        <input type="submit" value="Login">
      </form>
    </div>
  </div>
</div>
{% endblock %}

Notice the use of Nunjucks extends to specify template inheritance. The specified template is used as a base template.

The block body overrides the content of the block body declared in the base.njk template.

dashboard.njk

The "dashboard" view is rendered when the user logs in. The dashboard contains

  • A welcome message.
  • A text area to write notes.
  • A section where user's notes are displayed.
{% extends "base.njk" %}

{% block body %}
<div class="container">
  <div class="row">
    <div class="column column-50">
      <h1>Welcome {{ nickname }}!</h1>
      <form action="/note">
        <textarea name="content">Write your note here.</textarea>
        <input type="submit" value="Save!">
      </form>
      <h2>Your Notes</h2>
      {% for note in notes %}
        <div class="note">{{ note.content }}</div>
      {% else %}
        <p>You don't have any notes yet!</p>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}

Notice the use of Nunjucks for loop that allows iterating over arrays and dictionaries. It appears the template expects us to inject an array notes which contains the user's notes.