feat: Replace nunjucks with liquid for basics screen

- Add liquid template page
- Basics screen now uses liquid
- Correct script block in templates
- Add parameters to meta and log partials
- Add liquid partials for page and placeholder content

source/templates/hippie/default.liquid

@@ -28,10 +28,9 @@
 
 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
-{% block script -%}
 <script>
 	// Default script
 </script>
-{% endblock -%}
+{%- block script %}{% endblock -%}
 </body>
 </html>

source/templates/hippie/full.liquid

@@ -18,32 +18,30 @@
 		{{ hippie.titlePostfix -}}
 	</title>
 	{% block meta -%}
-	{% render "hippie/partials/meta.liquid" %}
+	{% render "hippie/partials/meta.liquid", author: "Interaktionsweise", desc: "Hippie interweaves preeminent personal interface elements" %}
 	{% comment %}<base href="/">{% endcomment %}
 	{% endblock -%}
 	{% render "hippie/partials/script-log.liquid" %}
-	{% render 'hippie/partials/log-setup', hippie: hippie, state: true -%}
-	{% render 'hippie/partials/log-start' -%}
+	{% render "hippie/partials/log-setup", hippie: hippie, state: true -%}
+	{% render "hippie/partials/log-start" -%}
 	{% block links -%}
 	{% render "hippie/partials/links.liquid" %}
 	{% comment %}<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>{% endcomment %}
 	{% comment %}<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/>{% endcomment %}
 	<link rel="stylesheet" media="all" href="{{ pageBase }}css/demo.css" type="text/css"/>
 	{% endblock -%}
-	{% render 'hippie/partials/log-log' with 'HEAD end    :: Links parsed, starting to load.' as msg -%}
+	{% render "hippie/partials/log-log" with "HEAD end    :: Links parsed, starting to load." as msg -%}
 	{% endblock -%}
 </head>
 
 <body{{ bodyClassAttr }}>
 {% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
 {%- block body %}{% endblock -%}
-{% block script -%}
 {% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
-<script src="/vendor/jquery.min.js"></script>
 <script>
 	// Full script
 </script>
-{% endblock -%}
+{%- block script %}{% endblock -%}
 {% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
 </body>
 </html>

source/templates/hippie/page.liquid

@@ -0,0 +1,63 @@
+{% assign pageId = page.fileSlug -%}
+{% layout "hippie/full.liquid" %}
+
+{% block meta %}
+{{ block.super -}}
+{% comment %}<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">{% endcomment %}
+{% comment %}<meta http-equiv="X-UA-Compatible" content="IE=edge" />{% endcomment %}
+{% endblock %}
+
+{% block links %}
+{{ block.super -}}
+{% if hippie.legacyMode %}
+	<!--[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]-->
+	{% comment %}<script src="./code/html5shiv.min.js"></script>{% endcomment %}
+	{% comment %}<!--Only use one of the above!-->{% endcomment %}
+{% endif %}
+
+{% comment %}<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>{% endcomment %}
+<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
+{% comment %}<link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/>{% endcomment %}
+{% endblock %}
+
+{% block body %}
+{{ block.super -}}
+{% render "hippie/partials/page-nav.liquid" %}
+<div id="root">
+	{% render "hippie/partials/page-header.liquid" %}
+
+	<main class="main_site">
+		{% block main %}{% endblock %}
+	</main>
+
+	{% render "hippie/partials/page-footer.liquid" %}
+</div>
+{% endblock %}
+
+{% block script %}
+<script src="/vendor/jquery.min.js"></script>
+<script src="/vendor/hippie-script.js"></script>
+<script src="{{ pageBase }}js/globals.js"></script>
+<script src="{{ pageBase }}js/app.js"></script>
+<script>
+	// Setup global things for all screens
+	setup();
+
+	// Create instances of objects made by constructor functions
+	let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
+	let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
+
+	if (viewHover) {
+		let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
+	}
+
+	document.addEventListener('scroll', () => {
+		scrollUi.check();
+	});
+
+	$(document).ready(function () {
+		logPerf('EVENT       :: jQuery \'ready\' event fired.');
+	});
+</script>
+{% endblock %}

source/templates/hippie/partials/meta.liquid

@@ -1,7 +1,7 @@
 <meta name="robots" content="noindex">
 	<meta name="generator" content="{{ eleventy.generator }}">
-	<meta name="author" content="">
-	<meta name="description" content="">
-	<meta name="keywords" content="">
+	<meta name="author" content="{{ author | default: '' }}">
+	<meta name="description" content="{{ desc | default: '' }}">
+	<meta name="keywords" content="{{ keys | default: '' }}">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">

source/templates/hippie/partials/page-footer.liquid

@@ -0,0 +1,3 @@
+<footer class="footer_site">
+	<div id="end"></div>
+</footer>

source/templates/hippie/partials/page-header.liquid

@@ -0,0 +1,3 @@
+<header class="header_site">
+	<div id="begin"></div>
+</header>

source/templates/hippie/partials/page-nav.liquid

@@ -0,0 +1,33 @@
+<div class="pos_rel">
+	<nav class="nav_page_meta">
+		<ul>
+			<li class="js_scrolltop di_none">
+				<a href="#begin" class="a_button_meta">
+					<div class="sprite_img demo__sprite_up"></div>
+					{% comment %}<img src="{{ pageBase }}art/up.png" alt="" width="32" height="64">{% endcomment %}
+				</a>
+			</li>
+			<li>
+				{% comment %}<button class="">Show Meta Information</button>{% endcomment %}
+				{% comment %}<a href="#meta" class="js_showmeta a_button_meta">
+					<div class="sprite_img demo__sprite_meta"></div>
+				</a>{% endcomment %}
+				<button class="js_showmeta button_clear" type="button">
+					<div class="sprite_img demo__sprite_meta"></div>
+				</button>
+			</li>
+			<li>
+				<button id="js-toggle-fade">F</button>
+			</li>
+			<li class="js_scrolldown">
+				<a href="#end" class="a_button_meta">
+					<div class="sprite_img demo__sprite_down"></div>
+					{% comment %}<img src="{{ pageBase }}art/down.png" alt="" width="32" height="32">{% endcomment %}
+				</a>
+			</li>
+		</ul>
+	</nav>
+</div>
+{% comment %}<div class="exp_overlay_btn exp_help_btn">
+	<span class="span_solo">?</span>
+</div>{% endcomment %}

source/templates/hippie/partials/placeholder-flag.liquid

@@ -0,0 +1,42 @@
+{% assign height = width | divided_by: 1.6 %}
+{% if type == 'svg' or type == '' %}
+	<svg version="1.1" id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
+		{% comment %}<defs>
+			<filter id="turb3">
+				<feColorMatrix type="saturate" values="1" />
+				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
+			</filter>
+			<symbol id="triangle-5">
+				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
+			</symbol>
+		</defs>
+		<g>
+			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
+		</g>{% endcomment %}
+		{% if desc != '' %}
+			<desc>{{ desc }}</desc>
+		{% endif %}
+		<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
+		<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
+		<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
+		<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
+		<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
+		<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
+		<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
+		<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
+		<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
+	</svg>
+{% elsif type == 'img' %}
+	{% if src == 'file' %}
+		<picture>
+			<source srcset="/art/flag_websafe_128x80.webp" type="image/webp"/>
+			<img src="/art/flag_websafe_128x80.gif" width="{{ width }}" height="{{ height }}" alt="{{ desc }}"/>
+		</picture>
+	{% else %}
+		<img
+			width="{{ width }}"
+			height="{{ height }}"
+			alt="{{ desc }}"
+			src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=">
+	{% endif %}
+{% endif %}