Tutor-03

tutor-01/.eleventy.js

@@ -23,11 +23,11 @@ module.exports = function(eleventyConfig) {
     // directory management
     passthroughFileCopy: true,
     dir: {
-      input: "src",
-      output: "_site", // default
-      // ⚠️ These values are both relative to your input directory.
+      // default
+      input: "views",
+      output: "_site",
+      // ⚠️ This value is relative to your input directory.
       includes: "_includes",
-      data: "_data"
     }
   };
 };

tutor-02/src/_includes/layouts/page.njk → tutor-01/views/_includes/layouts/page.njk

 {% extends "layouts/base.njk" %}
 
 {% block main %}
-  <h2>{{ renderData.title or title or metadata.title }}</h2>
+  <h2>{{ renderData.title or title }}</h2>
   <strong>This is a page kind layout.</strong>
   <br/>
 

tutor-01/src/_includes/layouts/post.njk → tutor-01/views/_includes/layouts/post.njk

 {% extends "layouts/base.njk" %}
 
 {% block main %}
-  <h2>{{ title or metadata.title }}</h2>
+  <h2>{{ title }}</h2>
   <pre>{{ page.date }}</pre>
   <br/>
 

tutor-02/src/_includes/site/head.njk → tutor-01/views/_includes/site/head.njk

 
-  <title>{{ renderData.title or title or metadata.title }}</title>
+  <title>Your mission. Good Luck!</title>
   <link href="/assets/favicon.ico" rel="shortcut icon" type="image/x-icon" />
 

tutor-02/.eleventy.js

@@ -20,7 +20,7 @@ module.exports = function(eleventyConfig) {
 
   // collection
   eleventyConfig.addCollection("tagList",
-    require("./src/_11ty/getTagList"));
+    require("./views/_11ty/getTagList"));
 
   // Return your Config object
   return {
@@ -41,7 +41,7 @@ module.exports = function(eleventyConfig) {
     // directory management
     passthroughFileCopy: true,
     dir: {
-      input: "src",
+      input: "views",
       output: "dist",
       // ⚠️ These values are both relative to your input directory.
       includes: "_includes",

tutor-02/src/_data/metadata.js

-module.exports = {
-  "title": "Your mission. Good Luck!"
-};
-

tutor-03/.eleventy.js

+const moment = require("moment");
+
+module.exports = function(eleventyConfig) {
+
+  // directory management
+  eleventyConfig.addPassthroughCopy("assets");
+
+  // layout alias
+  eleventyConfig.addLayoutAlias("home",     "layouts/home.njk");
+  eleventyConfig.addLayoutAlias("page",     "layouts/page.njk");
+  eleventyConfig.addLayoutAlias("post",     "layouts/post.njk");
+  eleventyConfig.addLayoutAlias("archives", "layouts/archives.njk");
+  eleventyConfig.addLayoutAlias("tags",     "layouts/tags.njk");
+  eleventyConfig.addLayoutAlias("tag-name", "layouts/tag-name.njk");
+  
+  // miscellanous filter
+  eleventyConfig.addNunjucksFilter("date", function(date, format) {
+    return moment(date).format(format);
+  });
+
+  // collection
+  eleventyConfig.addCollection("tagList",
+    require("./views/_11ty/getTagList"));
+
+  // Return your Config object
+  return {
+    // URL related
+    pathPrefix: "/",
+
+    // Templating Engine
+    templateFormats: [
+      "md",
+      "njk",
+      "html"
+    ],
+
+    markdownTemplateEngine: "njk",
+    htmlTemplateEngine: "njk",
+    dataTemplateEngine: "njk",
+
+    // directory management
+    passthroughFileCopy: true,
+    dir: {
+      input: "views",
+      output: "dist",
+      // ⚠️ These values are both relative to your input directory.
+      includes: "_includes",
+      data: "_data"
+    }
+  };
+};

tutor-03/assets/css/main.css

+html {
+  height: 100%;
+  overflow-y: auto;
+}
+
+body {
+  background-image: url("../images/light-grey-terrazzo.png");
+  min-height: 100%;
+}
+
+.maxwidth {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media screen and (min-width: 1216px) {
+  .maxwidth {
+    max-width: 1216px;
+  }
+}
+
+.layout-base {
+  padding-top: 5rem;
+}
+
+footer.site-footer {
+  padding-top: 4rem;
+}
+
+.blog-post p {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+main,
+aside {
+  margin-bottom: 20px;
+}
+
+@media screen and (min-width: 769px), print {
+  main {
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+
+  aside {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  main {
+    margin-left: 0px;
+  }
+
+  aside {
+    margin-right: 0px;
+  }
+}

tutor-03/assets/js/bulma-burger-jquery.js

+$(document).ready(function() {
+
+  // Check for click events on the navbar burger icon
+  $(".navbar-burger").click(function() {
+
+      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+      $(".navbar-burger").toggleClass("is-active");
+      $(".navbar-menu").toggleClass("is-active");
+
+  });
+});

tutor-03/assets/js/bulma-burger-vue.js

+// http://belowthebenthic.com/bulma-burger/
+
+new Vue({
+  el: '#navbar-vue-app',
+  data: {
+    isOpen: false
+  }
+});

tutor-03/package.json

+{
+  "name": "tutor-11ty-bulma-md",
+  "description": "Eleventy Bulma MD Test Drive: Chapter 03",
+  "author": "Epsiarto Rizqi Nurwijayadi",
+  "homepage": "https://gitlab.com/epsi-rns/tutor-11ty-bulma-md#readme",
+  "version": "0.3.0",
+  "scripts": {
+    "build": "npx eleventy",
+    "watch": "npx eleventy --watch",
+    "debug": "DEBUG=* npx eleventy"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://gitlab.com/epsi-rns/tutor-11ty-bulma-md.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://gitlab.com/epsi-rns/tutor-11ty-bulma-md/issues"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^0.10.0",
+    "moment": "^2.24.0"
+  }
+}

tutor-03/views/_11ty/getTagList.js

+module.exports = function(collection) {
+  let tagSet = new Set();
+  collection.getAll().forEach(function(item) {
+    if( "tags" in item.data ) {
+      let tags = item.data.tags;
+
+      tags = tags.filter(function(item) {
+        switch(item) {
+          // this list should match the `filter` list in tags.njk
+          case "all":
+          case "nav":
+          case "post":
+          case "posts":
+            return false;
+        }
+
+        return true;
+      });
+
+      for (const tag of tags) {
+        tagSet.add(tag);
+      }
+    }
+  });
+
+  // returning an array in addCollection works in Eleventy 0.5.3
+  return [...tagSet];
+};

tutor-03/views/_data/metadata.js

+module.exports = {
+  "title": "Your mission. Good Luck!",
+  
+  // https://www.webstoemp.com/blog/from-jekyll-to-eleventy/
+  now: new Date()
+};
+

tutor-03/views/_includes/layouts/archives.njk

+{% extends "layouts/base.njk" %}
+
+{% block main %}
+  <main role="main" 
+        class="column is-two-thirds">
+    <article class="blog-post box">
+      <h2 class="title is-4"
+        >{{ renderData.title or title or metadata.title }}</h2>
+      {{ content | safe }}
+    </article>
+  </main>
+
+  <aside class="column is-one-thirds">
+    <div class="box">
+      This is an archive kind layout.
+    </div>
+  </aside>
+{% endblock %}

tutor-03/views/_includes/layouts/base.njk

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {% include "site/head.njk" %}
+</head>
+
+<body>
+  <!-- header -->
+  {% include "site/header.njk" %}
+
+  {% block general %}
+  <!-- main -->
+  <div class="columns is-8 layout-base maxwidth">
+    {% block main %}
+    {{ content | safe }}
+    {% endblock %}
+
+    {% block aside %}{% endblock %}
+  </div>
+  {% endblock %}
+
+  <!-- footer -->
+  {% include "site/footer.njk" %}
+  {% include "site/scripts.njk" %}
+</body>
+
+</html>

tutor-03/views/_includes/layouts/home.njk

+{% extends "layouts/base.njk" %}
+
+{% block main %}
+  <main role="main" 
+        class="column is-full">
+    <article class="blog-post box">
+      <h2 class="title is-4"
+        >{{ renderData.title or title or metadata.title }}</h2>
+      {{ content | safe }}
+    </article>
+
+    <div class="box">
+      This is a home kind layout,
+      to show landing page.
+    </div>
+  </main>
+{% endblock %}

tutor-03/views/_includes/layouts/page.njk

+{% extends "layouts/base.njk" %}
+
+{% block main %}
+  <main role="main" 
+        class="column is-two-thirds">
+    <article class="blog-post box">
+      <h2 class="title is-4"
+        >{{ renderData.title or title or metadata.title }}</h2>
+      {{ content | safe }}
+    </article>
+  </main>
+
+  <aside class="column is-one-thirds">
+    <div class="box">
+      This is a page kind layout.
+    </div>
+  </aside>
+{% endblock %}

tutor-03/views/_includes/layouts/post.njk

+{% extends "layouts/base.njk" %}
+
+{% block main %}
+  <main role="main" 
+        class="column is-two-thirds">
+    <article class="blog-post box">
+      <h2 class="title is-4"
+        >{{ title or metadata.title }}</h2>
+      <p><strong>{{ page.date | date('MMMM Do, YYYY') }}</strong></p>
+      {{ content | safe }}
+    </article>
+  </main>
+
+  <aside class="column is-one-thirds">
+    <div class="box">
+      This is a post kind layout.
+    </div>
+  </aside>
+{% endblock %}

tutor-03/views/_includes/layouts/tag-name.njk

+{% extends "layouts/base.njk" %}
+
+{% block main %}
+  <main role="main" 
+        class="column is-two-thirds">
+    <article class="blog-post box">
+      <h2 class="title is-4"
+        >{{ renderData.title or title or metadata.title }}</h2>
+      {{ content | safe }}
+    </article>
+  </main>
+
+  <aside class="column is-one-thirds">
+    <div class="box">
+      This is a tag-name kind layout.
+    </div>
+  </aside>
+{% endblock %}

tutor-03/views/_includes/layouts/tags.njk

+{% extends "layouts/base.njk" %}
+
+{% block main %}
+  <main role="main" 
+        class="column is-two-thirds">
+    <article class="blog-post box">
+      <h2 class="title is-4"
+        >{{ renderData.title or title or metadata.title }}</h2>
+      {{ content | safe }}
+    </article>
+  </main>
+
+  <aside class="column is-one-thirds">
+    <div class="box">
+      This is a tags kind layout.
+    </div>
+  </aside>
+{% endblock %}

tutor-03/views/_includes/site/footer.njk

+
+  <footer class="site-footer">
+    <div class="navbar is-fixed-bottom maxwidth
+          is-dark has-text-centered is-vcentered">
+      <div class="column">
+        &copy; {{ metadata.now | date("Y") }}
+      </div>
+    </div>
+  </footer>

tutor-03/views/_includes/site/head.njk

+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible"
+        content="IE=edge,chrome=1">
+  <!-- Let browser know website is optimized for mobile -->
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <title>{{ renderData.title or title or metadata.title }}</title>
+
+  <!-- CSS Framework -->
+  <link type="text/css" rel="stylesheet"
+        href="{{ "/assets/css/bulma.css" | url }}">
+  <!-- Custom CSS -->
+  <link type="text/css" rel="stylesheet"
+        href="{{ "/assets/css/main.css" | url }}">
+
+  <link rel="shortcut icon" type="image/x-icon" 
+        href="{{ "/assets/favicon.ico" | url }}"/>

tutor-03/views/_includes/site/header.njk

+
+
+
+  <nav role="navigation" aria-label="main navigation"
+       class="navbar is-fixed-top is-dark maxwidth"
+       id="navbar-vue-app">
+    <div class="navbar-brand">
+      <a class="navbar-item"
+         href="{{ "/" | url }}">
+        <img src="{{ "/assets/images/logo-gear.png" | url }}" 
+           alt="Home" />
+      </a>
+      <a class="navbar-item"
+         href="{{ "/pages/" | url }}">
+        Blog
+      </a>
+
+      <a role="button" class="navbar-burger burger" 
+         aria-label="menu" aria-expanded="false" data-target="navbarBulma"
+         @click="isOpen = !isOpen" v-bind:class="{'is-active': isOpen}">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="navbarBulma" class="navbar-menu"
+         v-bind:class="{'is-active': isOpen}">
+      <div class="navbar-start">
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link">
+            Archives
+          </a>
+
+          <div class="navbar-dropdown">
+            <a class="navbar-item"
+               href="{{ "/tags/" | url }}">
+              By Tags
+            </a>
+            <hr class="navbar-divider">
+            <a class="navbar-item"
+               href="{{ "#" | url }}">
+              By Chronology
+            </a>
+          </div>
+        </div>
+
+        <a class="navbar-item"
+           href="{{ "/pages/about/" | url }}">
+          About
+        </a>
+      </div>
+
+      <div class="navbar-end">
+        <form class="is-marginless" action="/pages/search/" method="get">
+        <div class="navbar-item">
+          <input class="" type="text" name="q"
+            placeholder="Search..." aria-label="Search">
+          &nbsp;
+          <button class="button is-light" 
+            type="submit">Search</button>
+        </div>
+        </form>
+      </div>
+
+    </div>
+  </nav>
+
+

tutor-03/views/_includes/site/scripts.njk

+  <!-- JavaScript at end of body for optimized loading -->
+  <script src="{{ "/assets/js/vue.min.js" | url }}"></script>
+  <script src="{{ "/assets/js/bulma-burger-vue.js" | url }}"></script>

tutor-03/views/index.html

+---
+layout    : home
+eleventyExcludeFromCollections: true
+---
+
+  <p>To have, to hold, to love,
+  cherish, honor, and protect?</p>
+  
+  <p>To shield from terrors known and unknown?
+  To lie, to deceive?</p>
+
+  <p>To live a double life,
+  to fail to prevent her abduction,
+  erase her identity, 
+  force her into hiding,
+  take away all she has known.</p>