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
style: typos
2024-08-10 15:25:41 +02:00 · 2024-08-09 20:06:00 +02:00 · 2024-08-09 20:03:07 +02:00 · 2024-08-08 20:42:28 +02:00 · 2024-08-08 20:35:08 +02:00
35 changed files with 298 additions and 207 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -9,9 +9,11 @@ module.exports = function (eleventyConfig) {
 	});

 	eleventyConfig.addGlobalData("hippie", {
+		pageBase: './',
 		brand: 'hippie',
-		titlePrefix: ' - HIPPIE',
-		pageBase: './'
+		titlePrefix: '',
+		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"]
 	}
 };
--- a/gulp/config.js
+++ b/gulp/config.js
@ -17,7 +17,7 @@ const config = {

  hippie: {
    brand: 'hippie',
-    titlePrefix: ' - HIPPIE',
+    titlePostfix: ' - HIPPIE',
    pageBase: './'
  }
 };
--- a/source/screens/basics.njk
+++ b/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 %}
--- a/source/screens/components.njk
+++ b/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
    // ------------------------------------------------------------------------------
--- a/source/screens/pages/card.njk
+++ b/source/screens/pages/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/>
-        <a class="decent" href="http://site.tld">site.tld</a>
+        {{ ph.email('card_address') }}<br/>
+        {{ 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', '', '');
--- a/source/screens/pages/portal.njk
+++ b/source/screens/pages/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 %}

--- a/source/screens/index.json
+++ b/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"
+    }
  ]
 }
--- a/source/screens/index.njk
+++ b/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 %}
--- a/source/screens/introduction.njk
+++ b/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 %}
--- a/source/screens/layouts.njk
+++ b/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
    // ------------------------------------------------------------------------------
--- a/source/screens/pages/blank.njk
+++ b/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 %}
--- a/source/screens/pages/error/304.njk
+++ b/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 %}
--- a/source/screens/pages/error/400.njk
+++ b/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 %}
--- a/source/screens/pages/error/401.njk
+++ b/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 %}
--- a/source/screens/pages/error/403.njk
+++ b/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 %}
--- a/source/screens/pages/error/404.njk
+++ b/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 %}
--- a/source/screens/pages/error/408.njk
+++ b/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 %}
--- a/source/screens/pages/error/500.njk
+++ b/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 %}
--- a/source/screens/pages/error/503.njk
+++ b/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 %}
--- a/source/screens/pages/maintenance.njk
+++ b/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 %}

--- a/source/templates/demo/_default.njk
+++ b/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>
--- a/source/templates/demo/_demo.njk
+++ b/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 %}
--- a/source/templates/demo/_docs.njk
+++ b/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 %}
--- a/source/templates/demo/_extended.njk
+++ b/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>
--- a/source/templates/demo/partials/_meta.njk
+++ b/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">

--- a/source/templates/hippie/_default.njk
+++ b/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>
--- a/source/templates/hippie/_main.njk
+++ b/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>
--- a/source/templates/hippie/_maintenance.njk
+++ b/source/templates/hippie/_maintenance.njk
@ -6,10 +6,9 @@

    {% block head %}
      <title>
-        {% block title %}{% endblock %}
-        - HIPPIE</title>
+        {% block title %}{% endblock %}{{ hippie.titlePostfix }}</title>

-      {% include "demo/partials/_meta.njk" %}
+      {% include "hippie/partials/_head_meta.njk" %}
      {% block meta %}{% endblock %}

      {% block links %}
--- a/source/templates/hippie/macros/_log.njk
+++ b/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 %}
--- a/source/templates/hippie/macros/_nav.njk
+++ b/source/templates/hippie/macros/_nav.njk
@ -1,10 +1,13 @@
-<!-- nav.main.macro -->
-{% macro main(data, active='') %}
-<nav>
-	<ul>
-		{% for link in data %}
-		<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>
-		{% endfor %}
-	</ul>
-</nav>
-{% endmacro %}
+{% macro main(data, active = '') %}
+  <nav>
+    <ul>
+      {% for link in data %}
+        <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>
+      {% endfor %}
+    </ul>
+  </nav>
+{% endmacro %}
--- a/source/templates/hippie/macros/_placeholder.njk
+++ b/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 %}
--- a/source/templates/hippie/macros/footer-status.njk
+++ b/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' %}
-<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>
-</footer>
-{% else %}
-<footer class="pos_abs pin_bottom width_full">
-  <p>Platzhalter unten fixiert</p>
-</footer>
-{% endif %}
-{% endmacro %}
+  {% if not type or type == 'status' %}
+    <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>
+    </footer>
+  {% else %}
+    <footer class="pos_abs pin_bottom width_full">
+      <p>Platzhalter unten fixiert</p>
+    </footer>
+  {% endif %}
+{% endmacro %}
--- a/source/templates/hippie/partials/_head_links.njk
+++ b/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=">
--- a/source/templates/hippie/partials/_head_meta.njk
+++ b/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">
--- a/source/templates/hippie/partials/_head_script.njk
+++ b/source/templates/hippie/partials/_head_script.njk
@ -1,8 +1,8 @@
 <!-- head.script.partial -->
 <script>
  // Entry script at page init
-  let debugOn = false;
-  let debugOnScreen = true;
+  let debugOn = {{ hippie.debugMode }};
+  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>
Author	SHA1	Message	Date
sthag	be425e8be5	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	2024-08-10 15:25:41 +02:00
sthag	c55c1c9b66	style: typos	2024-08-09 20:06:00 +02:00
sthag	a5f07468e7	feat: enable markdown template format	2024-08-09 20:03:07 +02:00
sthag	b17e16abd9	feat: add placeholder and rearrange files	2024-08-08 20:42:28 +02:00
sthag	8eb377717a	fix: variable naming	2024-08-08 20:35:08 +02:00