.eleventy.js

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

gulp/config.js

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

source/screens/basics.njk

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

source/screens/components.njk

@@ -2,7 +2,7 @@
 {% set pageBase = "../" %}
 {% set pageId = "components" %}
 
-{% extends "demo/_docs.njk" %}
+{% extends "demo/_extended.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,8 +69,7 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  {{ log.asset(true) }}
+  <!-- endbuild -->
-  {{ log.log('Assets loaded.', assetsLoaded) }}
   <script>
     // Page specific
     // ------------------------------------------------------------------------------

source/screens/index.json

@@ -26,6 +26,14 @@
       "href": "pages/blank.html",
       "text": "Blank"
     },
+    {
+      "href": "pages/card.html",
+      "text": "Card"
+    },
+    {
+      "href": "pages/portal.html",
+      "text": "Portal"
+    },
     {
       "href": "pages/maintenance.html",
       "text": "Maintenance"
@@ -58,19 +66,5 @@
       "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/_demo.njk" %}
+{% extends "demo/_default.njk" %}
 
 {% block title %}Index{% endblock %}
 {% block head %}
@@ -37,6 +37,7 @@
       </div>
       <nav>
         <ul class="list_link">
+          <!-- Loops through "demoadditionallinks" array -->
           {% for link in index %}
             <li>
               <a href="{{ link.href }}">{{ link.text }}</a>
@@ -46,20 +47,13 @@
       </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 %}
@@ -71,15 +65,16 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
+  <!-- endbuild -->
   <script>
-    assetsLoaded = true;
-    logPerf('BODY        :: Assets loaded, running page specific script...');
     // Page specific
     // ------------------------------------------------------------------------------
+    assetsLoaded = true;
+    logPerf('BODY        :: Assets loaded, running page specific script...');
     $(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.page -->
+<!-- introduction.screen -->
 {% set pageBase = "../" %}
 {% set pageId = "intro" %}
 
-{% extends "demo/_docs.njk" %}
+{% extends "demo/_extended.njk" %}
 
 {% block title %}Einführung{% endblock %}
 {% block head %}
@@ -23,6 +23,8 @@
       <p>&hellip;</p>
     </article>
   </section>
+
+
 {% endblock %}
 
 {% block script %}
@@ -32,11 +34,12 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
+  <!-- endbuild -->
   <script>
-    assetsLoaded = true;
-    logPerf('Assets loaded.', assetsLoaded);
     // Page specific
     // ------------------------------------------------------------------------------
+    assetsLoaded = true;
+    logPerf('Assets loaded.', assetsLoaded);
     // Create instance of object made by contructor function
     var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
     var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
@@ -48,6 +51,6 @@
     $(document).scroll(function () {
       scrollUi.check();
     });
-    logPerf('Application ready... not.');
+    logPerf('Application ready.');
   </script>
 {% endblock %}

source/screens/layouts.njk

@@ -2,7 +2,7 @@
 {% set pageBase = "../" %}
 {% set pageId = "layouts" %}
 
-{% extends "demo/_docs.njk" %}
+{% extends "demo/_extended.njk" %}
 
 {% block title %}Gestaltungen{% endblock %}
 {% block head %}
@@ -322,8 +322,7 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  {{ log.asset(true) }}
+  <!-- endbuild -->
-  {{ 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 "hippie/_default.njk" %}
+{% extends "demo/_default.njk" %}
 
 {% block title %}Blank{% endblock %}
 
@@ -14,7 +14,3 @@
 {% block body %}
 
 {% endblock %}
-
-{% block script %}
-{{ super() }}
-{% endblock %}

source/screens/pages/card.njk

@@ -3,8 +3,7 @@
 {% set pageId = "card" %}
 {% set pageClass = "html_card" %}
 
-{% extends "demo/_demo.njk" %}
+{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}Karte{% endblock %}
 
@@ -43,12 +42,12 @@
   <div class="card_box">
     <div id="jsCardHover">
       <p>Titel<br/>and description</p>
-      <h1>{{ ph.name() }}</h1>
+      <h1>Prename Surname</h1>
       <p>
-        {{ ph.email('card_address') }}<br/>
+        <a class="card_address" href="">name@domain.tld</a><br/>
-        {{ ph.link('decent', 'site.tld') }}
+        <a class="decent" href="http://site.tld">site.tld</a>
         &middot;
-        {{ ph.address('decent') }}</p>
+        <span class="decent">Street No., Postcode City</span></p>
     </div>
   </div>
 {% endblock %}
@@ -60,6 +59,7 @@
   <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/pages/error/304.njk

@@ -3,7 +3,7 @@
 {% set pageId = "304" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "hippie/_maintenance.njk" %}
+{% extends "demo/_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 "hippie/_maintenance.njk" %}
+{% extends "demo/_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 "hippie/_maintenance.njk" %}
+{% extends "demo/_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 "hippie/_maintenance.njk" %}
+{% extends "demo/_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 "hippie/_maintenance.njk" %}
+{% extends "demo/_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 "hippie/_maintenance.njk" %}
+{% extends "demo/_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 "hippie/_maintenance.njk" %}
+{% extends "demo/_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 "hippie/_maintenance.njk" %}
+{% extends "demo/_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 "hippie/_maintenance.njk" %}
+{% extends "demo/_maintenance.njk" %}
 
 {% block title %}Maintenance{% endblock %}
 

source/screens/pages/portal.njk

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

source/templates/demo/_default.njk

@@ -0,0 +1,52 @@
+<!-- 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

@@ -1,18 +0,0 @@
-<!-- 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

@@ -1,23 +0,0 @@
-<!-- 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

@@ -0,0 +1,67 @@
+<!-- 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/_maintenance.njk

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

source/templates/demo/partials/_links.njk

@@ -1,4 +1,4 @@
-<!-- head.links.partial -->
+<!-- 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/demo/partials/_meta.njk

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

source/templates/hippie/_default.njk

@@ -1,41 +0,0 @@
-<!-- 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

@@ -1,50 +0,0 @@
-<!-- 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/macros/_log.njk

@@ -1,24 +0,0 @@
-{% 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,13 +1,10 @@
-{% macro main(data, active = '') %}
+<!-- nav.main.macro -->
-  <nav>
+{% macro main(data, active='') %}
+<nav>
 	<ul>
 		{% 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%}
-            <a href="{{ link.href }}">{{ link.text }}</a>
-          {% endif %}
-        </li>
 		{% endfor %}
 	</ul>
-  </nav>
+</nav>
 {% endmacro %}

source/templates/hippie/macros/_placeholder.njk

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

source/templates/hippie/partials/_head_meta.njk

@@ -1,7 +0,0 @@
-<!-- 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 = {{ hippie.debugMode }};
+  let debugOn = false;
-  let debugOnScreen = false;
+  let debugOnScreen = true;
   let assetsLoaded = false;
 
   // Get the current time difference between page
@@ -14,7 +14,6 @@
   function pad(n, width, z) {
     z = z || '0';
     n = n + '';
-
     return n.length >= width
       ? n
       : new Array(width - n.length + 1).join(z) + n;
@@ -41,9 +40,7 @@
           box.id = 'jsLogPerf';
 
           wrap.prepend(box);
-          document
+          document.body.prepend(wrap);
-            .body
-            .prepend(wrap);
 
           /*
           $('<div><div></div></div>')
@@ -78,9 +75,7 @@
           line-height: 1.1;`;
         code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
 
-        document
+        document.getElementById('jsLogPerf').append(code);
-          .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>');
         
@@ -91,9 +86,7 @@
       }
 
       if (window.console) {
-        const time = pad(getTimeDiff(), 5) + 'ms :: ';
+        console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, (
-
-        console.debug(time + msg, (
           arg
           ? arg
           : ''));
@@ -105,10 +98,4 @@
       }
     }
   }
-
-  function logAdd(msg, listener) {
-    document.addEventListener(listener, function () {
-      logPerf(msg, listener);
-    });
-  }
 </script>