feat: change log output and template structure

- new global variable debugMode
- demo templates are now based on hippie defaults joined with template inheritance
- add log macros
- new function logAdd()
- log uses global state

.eleventy.js

@@ -9,9 +9,11 @@ module.exports = function (eleventyConfig) {
 	});
 
 	eleventyConfig.addGlobalData("hippie", {
+		pageBase: './',
 		brand: 'hippie',
-		titlePrefix: ' - HIPPIE',
+		titlePrefix: '',
-		pageBase: './'
+		titlePostfix: ' - HIPPIE',
+		debugMode: true
 	});
 
 	eleventyConfig.addPassthroughCopy({"source/art/images": "art"});
@@ -35,6 +37,6 @@ module.exports = function (eleventyConfig) {
 		},
 		markdownTemplateEngine: "njk",
 		htmlTemplateEngine: "njk",
-		templateFormats: ["html", "njk"]
+		templateFormats: ["html", "njk", "md"]
 	}
 };

gulp/config.js

@@ -17,7 +17,7 @@ const config = {
 
   hippie: {
     brand: 'hippie',
-    titlePrefix: ' - HIPPIE',
+    titlePostfix: ' - HIPPIE',
     pageBase: './'
   }
 };

source/screens/basics.njk

@@ -1,8 +1,8 @@
-<!-- basics.screen -->
+<!-- basics.page -->
 {% set pageBase = "../" %}
 {% set pageId = "basics" %}
 
-{% extends "demo/_extended.njk" %}
+{% extends "demo/_docs.njk" %}
 
 {% block title %}Grundlagen{% endblock %}
 {% block head %}
@@ -959,12 +959,11 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
   <script>
-    // Page specific
-    // ------------------------------------------------------------------------------
     assetsLoaded = true;
     logPerf('Assets loaded.', assetsLoaded);
+    // Page specific
+    // ------------------------------------------------------------------------------
     // Create instance of object made by contructor function
     var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
     var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
@@ -976,6 +975,6 @@
     $(document).scroll(function () {
       scrollUi.check();
     });
-    logPerf('Application ready.');
+    logPerf('Application ready... not.');
   </script>
 {% endblock %}

source/screens/components.njk

@@ -2,7 +2,7 @@
 {% set pageBase = "../" %}
 {% set pageId = "components" %}
 
-{% extends "demo/_extended.njk" %}
+{% extends "demo/_docs.njk" %}
 
 {% block title %}Komponenten{% endblock %}
 {% block head %}
@@ -39,7 +39,7 @@
       <header class="header_txt">
         <h1>Übersicht aller Elemente</h1>
         <p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
-        <p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
+        <p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
       </header>
       <article>
         <h1>Bereiche</h1>
@@ -69,7 +69,8 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
+  {{ log.asset(true) }}
+  {{ log.log('Assets loaded.', assetsLoaded) }}
   <script>
     // Page specific
     // ------------------------------------------------------------------------------

source/screens/demo/card.njk

@@ -3,7 +3,8 @@
 {% set pageId = "card" %}
 {% set pageClass = "html_card" %}
 
-{% extends "demo/_default.njk" %}
+{% extends "demo/_demo.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}Karte{% endblock %}
 
@@ -42,12 +43,12 @@
   <div class="card_box">
     <div id="jsCardHover">
       <p>Titel<br/>and description</p>
-      <h1>Prename Surname</h1>
+      <h1>{{ ph.name() }}</h1>
       <p>
-        <a class="card_address" href="">name@domain.tld</a><br/>
+        {{ ph.email('card_address') }}<br/>
-        <a class="decent" href="http://site.tld">site.tld</a>
+        {{ ph.link('decent', 'site.tld') }}
         &middot;
-        <span class="decent">Street No., Postcode City</span></p>
+        {{ ph.address('decent') }}</p>
     </div>
   </div>
 {% endblock %}
@@ -59,7 +60,6 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
   <script>
     $(document).ready(function () {
       // composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');

source/screens/demo/portal.njk

@@ -3,7 +3,7 @@
 {% set pageId = "index" %}
 {% set bodyClass = "body_portal" %}
 
-{% extends "demo/_default.njk" %}
+{% extends "demo/_demo.njk" %}
 
 {% import "demo/macros/_gates.njk" as gate %}
 

source/screens/index.json

@@ -26,14 +26,6 @@
       "href": "pages/blank.html",
       "text": "Blank"
     },
-    {
-      "href": "pages/card.html",
-      "text": "Card"
-    },
-    {
-      "href": "pages/portal.html",
-      "text": "Portal"
-    },
     {
       "href": "pages/maintenance.html",
       "text": "Maintenance"
@@ -66,5 +58,19 @@
       "href": "pages/error/500.html",
       "text": "500"
     }
+  ],
+  "demo": [
+    {
+      "href": "demo/card.html",
+      "text": "Card"
+    },
+    {
+      "href": "demo/portal.html",
+      "text": "Portal"
+    },
+    {
+      "href": "demo/songbook.html",
+      "text": "Songbook"
+    }
   ]
 }

source/screens/index.njk

@@ -3,7 +3,7 @@
 {% set pageId = "index" %}
 {% set pageClass = "h_full_view" %}
 
-{% extends "demo/_default.njk" %}
+{% extends "demo/_demo.njk" %}
 
 {% block title %}Index{% endblock %}
 {% block head %}
@@ -37,7 +37,6 @@
       </div>
       <nav>
         <ul class="list_link">
-          <!-- Loops through "demoadditionallinks" array -->
           {% for link in index %}
             <li>
               <a href="{{ link.href }}">{{ link.text }}</a>
@@ -47,13 +46,20 @@
       </nav>
       <h3>Pages</h3>
       <ul class="list_link">
-        <!-- Loops through "demo-links" array -->
         {% for link in pages %}
           <li>
             <a href="{{ link.href }}">{{ link.text }}</a>
           </li>
         {% endfor %}
       </ul>
+      <h3>Demo</h3>
+      <ul class="list_link">
+        {% for link in demo %}
+          <li>
+            <a href="{{ link.href }}">{{ link.text }}</a>
+          </li>
+        {% endfor %}
+      </ul>
     </div>
   </div>
 {% endblock %}
@@ -65,16 +71,15 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
   <script>
-    // Page specific
-    // ------------------------------------------------------------------------------
     assetsLoaded = true;
     logPerf('BODY        :: Assets loaded, running page specific script...');
+    // Page specific
+    // ------------------------------------------------------------------------------
     $(document).ready(function () {
       logPerf('EVENT       :: jQuery \'ready\' event fired.');
       setup();
-      logPerf('Application ready.');
     });
+    logPerf('Application ready... not.');
   </script>
 {% endblock %}

source/screens/introduction.njk

@@ -1,8 +1,8 @@
-<!-- introduction.screen -->
+<!-- introduction.page -->
 {% set pageBase = "../" %}
 {% set pageId = "intro" %}
 
-{% extends "demo/_extended.njk" %}
+{% extends "demo/_docs.njk" %}
 
 {% block title %}Einführung{% endblock %}
 {% block head %}
@@ -23,8 +23,6 @@
       <p>&hellip;</p>
     </article>
   </section>
-
-
 {% endblock %}
 
 {% block script %}
@@ -34,12 +32,11 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
   <script>
-    // Page specific
-    // ------------------------------------------------------------------------------
     assetsLoaded = true;
     logPerf('Assets loaded.', assetsLoaded);
+    // Page specific
+    // ------------------------------------------------------------------------------
     // Create instance of object made by contructor function
     var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
     var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
@@ -51,6 +48,6 @@
     $(document).scroll(function () {
       scrollUi.check();
     });
-    logPerf('Application ready.');
+    logPerf('Application ready... not.');
   </script>
 {% endblock %}

source/screens/layouts.njk

@@ -2,7 +2,7 @@
 {% set pageBase = "../" %}
 {% set pageId = "layouts" %}
 
-{% extends "demo/_extended.njk" %}
+{% extends "demo/_docs.njk" %}
 
 {% block title %}Gestaltungen{% endblock %}
 {% block head %}
@@ -322,7 +322,8 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
+  {{ log.asset(true) }}
+  {{ log.log('Assets loaded.', assetsLoaded) }}
   <script>
     // Page specific
     // ------------------------------------------------------------------------------

source/screens/pages/blank.njk

@@ -3,7 +3,7 @@
 {% set pageId = "blank" %}
 {% set pageClass = "h_full_view" %}
 
-{% extends "demo/_default.njk" %}
+{% extends "hippie/_default.njk" %}
 
 {% block title %}Blank{% endblock %}
 
@@ -14,3 +14,7 @@
 {% block body %}
 
 {% endblock %}
+
+{% block script %}
+{{ super() }}
+{% endblock %}

source/screens/pages/error/304.njk

@@ -3,7 +3,7 @@
 {% set pageId = "304" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "demo/_maintenance.njk" %}
+{% extends "hippie/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}

source/screens/pages/error/400.njk

@@ -3,7 +3,7 @@
 {% set pageId = "400" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "demo/_maintenance.njk" %}
+{% extends "hippie/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}

source/screens/pages/error/401.njk

@@ -3,7 +3,7 @@
 {% set pageId = "401" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "demo/_maintenance.njk" %}
+{% extends "hippie/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}

source/screens/pages/error/403.njk

@@ -3,7 +3,7 @@
 {% set pageId = "403" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "demo/_maintenance.njk" %}
+{% extends "hippie/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}

source/screens/pages/error/404.njk

@@ -3,7 +3,7 @@
 {% set pageId = "404" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "demo/_maintenance.njk" %}
+{% extends "hippie/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}

source/screens/pages/error/408.njk

@@ -3,7 +3,7 @@
 {% set pageId = "408" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "demo/_maintenance.njk" %}
+{% extends "hippie/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}

source/screens/pages/error/500.njk

@@ -3,7 +3,7 @@
 {% set pageId = "500" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "demo/_maintenance.njk" %}
+{% extends "hippie/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}

source/screens/pages/error/503.njk

@@ -3,7 +3,7 @@
 {% set pageId = "503" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "demo/_maintenance.njk" %}
+{% extends "hippie/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}

source/screens/pages/maintenance.njk

@@ -3,7 +3,7 @@
 {% set pageId = "blank" %}
 {% set pageClass = "h_full_view" %}
 
-{% extends "demo/_maintenance.njk" %}
+{% extends "hippie/_maintenance.njk" %}
 
 {% block title %}Maintenance{% endblock %}
 

source/templates/demo/_default.njk

@@ -1,52 +0,0 @@
-<!-- default.template -->
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
-
-    {% block head %}
-      <title>
-        {% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>
-
-      {% include "demo/partials/_meta.njk" %}
-      {# <base href="/"> #}
-      {% block meta %}{% endblock %}
-
-      {% include "hippie/partials/_head_script.njk" %}
-      <script>
-        debugOn = true;
-        document.addEventListener('DOMContentLoaded', function () {
-          logPerf('EVENT       :: Document \'DOMContentLoaded\' event fired.');
-        });
-        logPerf('HEAD start  :: Debugging performance...', debugOn);
-      </script>
-
-      {% include "demo/partials/_links.njk" %}
-      {% block links %}
-        {# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
-        {# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
-        <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
-      {% endblock %}
-      <script>
-        logPerf('HEAD end    :: Links loaded.');
-      </script>
-    {% endblock %}
-  </head>
-
-  <body class="{{ bodyClass }}">
-    <script>
-      logPerf('BODY start');
-    </script>
-    {% block body %}{% endblock %}
-
-    {% block script %}
-      <script>
-        logPerf('BODY        :: Loading script assets...');
-      </script>
-      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-    {% endblock %}
-    <script>
-      logPerf('BODY end    :: Page script might still be loading.');
-    </script>
-  </body>
-</html>

source/templates/demo/_demo.njk

@@ -0,0 +1,18 @@
+<!-- demo.template -->
+{% extends "hippie/_default.njk" %}
+
+{% block meta %}
+  {% include "demo/partials/_meta.njk" %}
+  {# <base href="/"> #}
+{% endblock %}
+
+{% block links %}
+  {{ super() }}
+  {# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
+  {# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
+{% endblock %}
+
+{% block script %}
+  {{ super() }}
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+{% endblock %}

source/templates/demo/_docs.njk

@@ -0,0 +1,23 @@
+<!-- docs.template -->
+{% extends "hippie/_main.njk" %}
+
+{% block meta %}
+  {% include "demo/partials/_meta.njk" %}
+  {# <base href="/"> #}
+{% endblock %}
+
+{% block links %}
+  {{ super() }}
+  <!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
+  <!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
+  <!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
+  <!--Only use one of the above!-->
+
+  <!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
+  <!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
+{% endblock %}
+
+{% block script %}
+  {{ super() }}
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+{% endblock %}

source/templates/demo/_extended.njk

@@ -1,67 +0,0 @@
-<!-- extended.template -->
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
-
-    {% block head %}
-      <title>
-        {% block title %}{% endblock %}
-        - HIPPIE</title>
-
-      {% include "demo/partials/_meta.njk" %}
-      {% block meta %}{% endblock %}
-
-      {% include "hippie/partials/_head_script.njk" %}
-      <script>
-        debugOn = true;
-        document.addEventListener('DOMContentLoaded', function () {
-          logPerf('EVENT       :: Document \'DOMContentLoaded\' event fired.');
-        });
-        logPerf('HEAD start  :: Debugging performance...', debugOn);
-      </script>
-
-      {% include "demo/partials/_links.njk" %}
-      {% block links %}
-        <!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
-        <!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
-        <!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
-        <!--Only use one of the above!-->
-
-        <!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
-        <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
-        <!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
-      {% endblock %}
-      <script>
-        logPerf('HEAD end    :: Links loaded.');
-      </script>
-    {% endblock %}
-  </head>
-
-  <body class="{{ bodyClass }}">
-    <script>
-      logPerf('BODY start');
-    </script>
-    {% include "hippie/partials/_body_hover.njk" %}
-    <div id="root">
-      {% include "hippie/partials/_header.njk" %}
-
-      <main class="main_site">
-        {% block main %}{% endblock %}
-      </main>
-
-      {% include "hippie/partials/_footer.njk" %}
-    </div>
-
-    {% block script %}
-      <script>
-        logPerf('BODY        :: Loading script assets...');
-      </script>
-      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-      {# <script src="bower_components/jquery/dist/jquery.js"></script> #}
-    {% endblock %}
-    <script>
-      logPerf('BODY end    :: Page script loaded.');
-    </script>
-  </body>
-</html>

source/templates/demo/partials/_meta.njk

@@ -1,6 +1,6 @@
 <!-- meta.partial -->
 <meta name="author" content="Interaktionsweise">
-<meta name="generator" content="Atom, Notepad++">
+<meta name="generator" content="Visual Studio Code, Atom, Notepad++">
 <meta name="description" content="Hippie interweaves preeminent personal interface elements">
 <meta name="robots" content="noindex">
 

source/templates/hippie/_default.njk

@@ -0,0 +1,41 @@
+<!-- default.template -->
+{% import "hippie/macros/_log.njk" as log %}
+
+<!DOCTYPE html>
+<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
+  <head>
+    <meta charset="utf-8">
+
+    {% block head %}
+      <title>
+        {{ hippie.titlePrefix }}
+        {% block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+
+      {% block meta %}
+        {% include "hippie/partials/_head_meta.njk" %}
+      {% endblock %}
+
+      {% include "hippie/partials/_head_script.njk" %}
+      {# {{ log.debug(true) }} #}
+      {{ log.start() }}
+
+      {% block links %}
+        {% include "hippie/partials/_head_links.njk" %}
+        <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
+      {% endblock %}
+
+      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
+    {% endblock %}
+  </head>
+
+  <body class="{{ bodyClass }}">
+    {{ log.log('BODY start') }}
+    {% block body %}{% endblock %}
+
+    {% block script %}
+      {{ log.log('BODY        :: Loading script assets...') }}
+    {% endblock %}
+
+    {{ log.log('BODY end    :: Page script might still be loading.') }}
+  </body>
+</html>

source/templates/hippie/_main.njk

@@ -0,0 +1,50 @@
+<!-- main.template -->
+{% import "hippie/macros/_log.njk" as log %}
+
+<!DOCTYPE html>
+<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
+  <head>
+    <meta charset="utf-8">
+
+    {% block head %}
+      <title>
+        {{ hippie.titlePrefix }}
+        {% block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+
+      {% block meta %}
+        {% include "hippie/partials/_head_meta.njk" %}
+      {% endblock %}
+
+      {% include "hippie/partials/_head_script.njk" %}
+      {{ log.debug(hippie.debugMode, true) }}
+      {{ log.start() }}
+
+      {% block links %}
+        {% include "hippie/partials/_head_links.njk" %}
+        <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
+      {% endblock %}
+
+      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
+    {% endblock %}
+  </head>
+
+  <body class="{{ bodyClass }}">
+    {{ log.log('BODY start') }}
+    {% include "hippie/partials/_body_hover.njk" %}
+    <div id="root">
+      {% include "hippie/partials/_header.njk" %}
+
+      <main class="main_site">
+        {% block main %}{% endblock %}
+      </main>
+
+      {% include "hippie/partials/_footer.njk" %}
+    </div>
+
+    {% block script %}
+      {{ log.log('BODY        :: Loading script assets...') }}
+    {% endblock %}
+
+    {{ log.log('BODY end    :: Page script might still be loading.') }}
+  </body>
+</html>

source/templates/hippie/_maintenance.njk

@@ -6,10 +6,9 @@
 
     {% block head %}
       <title>
-        {% block title %}{% endblock %}
+        {% block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-        - HIPPIE</title>
 
-      {% include "demo/partials/_meta.njk" %}
+      {% include "hippie/partials/_head_meta.njk" %}
       {% block meta %}{% endblock %}
 
       {% block links %}

source/templates/hippie/macros/_log.njk

@@ -0,0 +1,24 @@
+{% macro start() %}
+  <script>
+    logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
+    logPerf('HEAD start  :: Debugging performance...', debugOn);
+  </script>
+{% endmacro %}
+{% macro log(msg, arg = '') %}
+  <script>
+    logPerf('{{ msg }}', {{ arg }});
+  </script>
+{% endmacro %}
+{% macro debug(state = false, display = false, assets = false) %}
+  {# {{ set hippie.debugMode = state }} #}
+  <script>
+    debugOn = {{ state }};
+    debugOnScreen = {{ display }};
+    assetsLoaded = {{ assets }};
+  </script>
+{% endmacro %}
+{% macro asset(state = false) %}
+  <script>
+    assetsLoaded = {{ state }};
+  </script>
+{% endmacro %}

source/templates/hippie/macros/_nav.njk

@@ -1,10 +1,13 @@
-<!-- nav.main.macro -->
+{% macro main(data, active = '') %}
-{% macro main(data, active='') %}
+  <nav>
-<nav>
+    <ul>
-	<ul>
+      {% for link in data %}
-		{% for link in data %}
+        <li{%if active == link.text %} class="active_txt" {% endif %}>
-		<li{%if active == link.text %} class="active_txt"{% endif %}>{%if active == link.text %}{{ link.text }}{%else%}<a href="{{ link.href }}">{{ link.text }}</a>{% endif %}</li>
+          {%if active == link.text %}{{ link.text }}{%else%}
-		{% endfor %}
+            <a href="{{ link.href }}">{{ link.text }}</a>
-	</ul>
+          {% endif %}
-</nav>
+        </li>
-{% endmacro %}
+      {% endfor %}
+    </ul>
+  </nav>
+{% endmacro %}

source/templates/hippie/macros/_placeholder.njk

@@ -0,0 +1,13 @@
+{% macro email(class='', text='name@domain.tld') %}
+<a class="{{ class }}" href="">{{ text }}</a>
+{# {{ 'name@domain.tld' | urlize | safe }} #}
+{% endmacro %}
+{% macro link(class='', text='domain.tld', href='http://domain.internal') %}
+<a class="{{ class }}" href="{{ href }}">{{ text }}</a>
+{% endmacro %}
+{% macro name(class='', text='Prename Surname') %}
+<span class="{{ class }}">{{ text }}</span>
+{% endmacro %}
+{% macro address(class='', text='Street No., Postcode City') %}
+<span class="{{ class }}">{{ text }}</span>
+{% endmacro %}

source/templates/hippie/macros/footer-status.njk

@@ -1,13 +1,17 @@
-<!-- footer-status.macro -->
+{% macro footer(email = 'admin@domain.tld', app = 'Application', version = 'ver.s.ion', system = 'System Name', domain = 'domain.tld:port', type) %}
-{% macro footer(email='admin@domain.tld', app='Application', version='ver.s.ion', system='System Name', domain='domain.tld:port', type) %}
 
-{% if not type or type == 'status' %}
+  {% if not type or type == 'status' %}
-<footer class="pos_abs pin_bottom width_full">
+    <footer class="pos_abs pin_bottom width_full">
-  <address class="txt_center">Kontakt: <a class="lineLink" href="mailto:{{ email }}">{{ email }}</a> * Server: {{ app }}/{{ version }} ({{ system }}) * Domain: {{ domain }}</address>
+      <address class="txt_center">Kontakt:
-</footer>
+        <a class="lineLink" href="mailto:{{ email }}">{{ email }}</a>
-{% else %}
+        * Server:
-<footer class="pos_abs pin_bottom width_full">
+        {{ app }}/{{ version }}
-  <p>Platzhalter unten fixiert</p>
+        ({{ system }}) * Domain:
-</footer>
+        {{ domain }}</address>
-{% endif %}
+    </footer>
-{% endmacro %}
+  {% else %}
+    <footer class="pos_abs pin_bottom width_full">
+      <p>Platzhalter unten fixiert</p>
+    </footer>
+  {% endif %}
+{% endmacro %}

source/templates/hippie/partials/_head_links.njk

@@ -1,4 +1,4 @@
-<!-- links.partial -->
+<!-- head.links.partial -->
 {# <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon"> #}
 <link rel="shortcut icon" type="image/x-icon" href="{{ pageBase }}favicon.ico">
 <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">

source/templates/hippie/partials/_head_meta.njk

@@ -0,0 +1,7 @@
+<!-- head.meta.partial -->
+<meta name="author" content="">
+<meta name="generator" content="">
+<meta name="description" content="">
+<meta name="robots" content="noindex">
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0">

source/templates/hippie/partials/_head_script.njk

@@ -1,8 +1,8 @@
 <!-- head.script.partial -->
 <script>
   // Entry script at page init
-  let debugOn = false;
+  let debugOn = {{ hippie.debugMode }};
-  let debugOnScreen = true;
+  let debugOnScreen = false;
   let assetsLoaded = false;
 
   // Get the current time difference between page
@@ -14,6 +14,7 @@
   function pad(n, width, z) {
     z = z || '0';
     n = n + '';
+
     return n.length >= width
       ? n
       : new Array(width - n.length + 1).join(z) + n;
@@ -40,7 +41,9 @@
           box.id = 'jsLogPerf';
 
           wrap.prepend(box);
-          document.body.prepend(wrap);
+          document
+            .body
+            .prepend(wrap);
 
           /*
           $('<div><div></div></div>')
@@ -75,10 +78,12 @@
           line-height: 1.1;`;
         code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
 
-        document.getElementById('jsLogPerf').append(code);
+        document
+          .getElementById('jsLogPerf')
+          .append(code);
         // document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
         // $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
-        
+
         // NOTE: Alternative short-circuit evaluation
         // needs element in document but prevents error if not
         // $log = $log || $('#jslogPerf');
@@ -86,7 +91,9 @@
       }
 
       if (window.console) {
-        console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, (
+        const time = pad(getTimeDiff(), 5) + 'ms :: ';
+
+        console.debug(time + msg, (
           arg
           ? arg
           : ''));
@@ -98,4 +105,10 @@
       }
     }
   }
+
+  function logAdd(msg, listener) {
+    document.addEventListener(listener, function () {
+      logPerf(msg, listener);
+    });
+  }
 </script>