feat: Update blog

- Change blog from njk to liquid
- Update content

.eleventy.js

@@ -35,7 +35,8 @@ export default async function (eleventyConfig) {
 			name: 'Vorname Nachname',
 			address: 'Straße Nr., PLZ Ort',
 			phone: '+49 (0)101 1337 48',
-			mail: 'name@domain.tld'
+			mail: 'name@domain.tld',
+			domain: 'https://domain.tld'
 		},
 		debugMode: true,
 		legacyMode: false
@@ -46,7 +47,7 @@ export default async function (eleventyConfig) {
 	});
 
 	eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
-		if (text === '') {
+		if (!text || text === '') {
 			text = target;
 		}
 

source/code/hippie/app.js

@@ -341,6 +341,7 @@ class DateDisplay {
 	}
 }
 
+// TODO: Kompatibilität für Zeiger
 function checkButtonAndTarget(event, element, button = 0) {
 	return (
 		event.button === button &&

source/code/windows.js

@@ -21,9 +21,9 @@ class HippieTaskBar {
 
 	// TODO: Ereignisse besser delegieren
 	init() {
-		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
+		this.element.addEventListener('pointerdown', this.onDown.bind(this));
-		document.addEventListener('mousemove', this.onMouseMove.bind(this));
+		document.addEventListener('pointermove', this.onMove.bind(this));
-		document.addEventListener('mouseup', this.onMouseUp.bind(this));
+		document.addEventListener('pointerup', this.onUp.bind(this));
 
 		const dateElement = document.createElement('span');
 
@@ -34,7 +34,7 @@ class HippieTaskBar {
 		this.setOptions(this.options.position);
 	}
 
-	onMouseDown(event) {
+	onDown(event) {
 		if (checkButtonAndTarget(event, this.element, 0)) {
 			console.debug('Drag mode enabled');
 
@@ -48,7 +48,7 @@ class HippieTaskBar {
 		event.preventDefault();
 	}
 
-	onMouseMove(event) {
+	onMove(event) {
 		if (this.isDragging) {
 			this.options.position = getClosestEdgeToMouse(event);
 			const borderRadius = '4px';
@@ -116,7 +116,7 @@ class HippieTaskBar {
 		}
 	}
 
-	onMouseUp() {
+	onUp() {
 		if (event.target === this.placeholder) {
 			console.debug('Drag mode disabled');
 

source/screens/demo/basics.liquid

@@ -2,6 +2,7 @@
 title: Basics
 tags:
 - demoIndex
+order: 2
 ---
 {% layout 'hippie/page.liquid' %}
 

source/screens/demo/components.liquid

@@ -2,6 +2,7 @@
 title: Components
 tags:
 - demoIndex
+order: 3
 ---
 {% layout 'hippie/page.liquid' %}
 
@@ -306,7 +307,7 @@ tags:
 				<input id="inpPass" type="password"/>
 				<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
 				<br>
-				<input id ="inpText" type="text"/>
+				<input id="inpText" type="text"/>
 				<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
 			</form>
 		</div>

source/screens/demo/examples/blog.liquid

@@ -0,0 +1,32 @@
+---
+title: Blog
+tags:
+- demoExample
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="sec_main_center">
+	<header class="header_txt">
+		<h1>Blog</h1>
+	</header>
+	<nav role="doc-toc">
+		<h2>Inhaltsverzeichnis</h2>
+		<ul>
+			{%- for blog in collections.blog -%}
+				<li>
+					<a href="{{ blog.page.url }}">{{ blog.data.title }}</a>
+				</li>
+			{%- endfor -%}
+		</ul>
+	</nav>
+	<hr class="double dotted">
+	{%- for post in collections.article -%}
+		<article>
+			{{ post.content }}
+		</article>
+	{%- endfor -%}
+	<hr/>
+	<address>{% text hippie.placeholders.name %}</address>
+</div>
+{% endblock %}

source/screens/demo/examples/blog.njk

@@ -1,51 +0,0 @@
----
-title: Blog
-tags:
-  - demoExample
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-{% import "hippie/macros/_song.njk" as song %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="sec_main_center">
-		<header class="header_txt">
-			<h1>Blog</h1>
-		</header>
-		<nav role="doc-toc">
-			<h2>Inhaltsverzeichnis</h2>
-			<ul>
-				{%- for song in collections.song -%}
-					<li>
-						<a href="{{ song.page.url }}">{{ song.data.title }}</a>
-					</li>
-				{%- endfor -%}
-			</ul>
-		</nav>
-		<h2>Vorwort</h2>
-		<p>Liederbuch für
-			<em>Name</em>.</p>
-		<p>Gibt es gebunden und hier
-			{{ ph.link() }}.<br/>
-			Bestellungen bitte an
-			{{ ph.name() }}
-			richten.</p>
-		<hr class="double dotted">
-		{%- for post in collections.article -%}
-			{{ post.content }}
-		{%- endfor -%}
-		<hr/>
-		<address>{{ ph.name() }}</address>
-	</div>
-{% endblock %}

source/screens/demo/examples/blog/article.md

@@ -3,7 +3,7 @@ tags:
   - blog
   - article
 title: "Artikel"
-releaseDate: JJJJ
+publishDate: JJJJ
 description: Text
 ---
 # Titel

source/screens/demo/examples/card.liquid

@@ -0,0 +1,69 @@
+---
+title: Card
+tags:
+- demoExample
+---
+{% assign pageClass = "html_card" %}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="card_bkg">
+	<div id="dither"></div>
+	{% render 'hippie/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
+	{% comment %}<img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/>{% endcomment %}
+</div>
+<div class="card_box">
+	<main>
+		<p>Titel<br/>und Beschreibung</p>
+		<h1>{% text hippie.placeholders.name %}</h1>
+		<p>
+			{% link hippie.placeholders.mail, '', '', 'card_address' %}<br/>
+			{% link hippie.placeholders.domain, 'site.tld', '', 'decent' %}
+			&middot;
+			{% text hippie.placeholders.address, '', 'decent' %}</p>
+	</main>
+</div>
+{% endblock %}
+
+{% block script %}
+<script>
+	const flag = document.getElementById('flag');
+	let colors = new Array();
+	let iId = undefined;
+	let position = 0;
+
+	for (let i = 1; i <= flag.childElementCount; i++) {
+		colors.push(document.getElementById('triangle-' + i).getAttribute('fill'));
+	}
+
+	document
+		.querySelector('main')
+		.addEventListener('mouseenter', () => {
+			iId = setInterval(() => {
+				for (let i = 1; i <= colors.length; i++) {
+					position++;
+
+					if (position >= colors.length) {
+						position = 0;
+					}
+
+					document
+						.getElementById('triangle-' + i)
+						.setAttribute('fill', colors[position]);
+				}
+
+				position++;
+
+				if (position >= colors.length) {
+					position = 0;
+				}
+			}, 600);
+		});
+
+	document
+		.querySelector('main')
+		.addEventListener('mouseleave', () => {
+			iId && clearInterval(iId);
+		});
+</script>
+{% endblock %}

source/screens/demo/examples/card.njk

@@ -1,83 +0,0 @@
----
-title: Card
-tags:
-  - demoExample
----
-{% set pageId = page.fileSlug %}
-{% set pageClass = "html_card" %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="card_bkg">
-		<div id="dither"></div>
-		{{ ph.flag('svg', '', 'flag', '') }}
-		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
-	</div>
-	<div class="card_box">
-		<div id="js_content">
-			<p>Titel<br/>und Beschreibung</p>
-			<h1>{{ ph.name() }}</h1>
-			<p>
-				{{ ph.email('card_address') }}<br/>
-				{{ ph.link('decent', 'site.tld') }}
-				&middot;
-				{{ ph.address('decent') }}</p>
-		</div>
-	</div>
-{% endblock %}
-
-{% block script %}
-	<script>
-		const flag = document.getElementById("flag");
-		let colors = new Array();
-		let iId = undefined;
-		let position = 0;
-
-		for (let i = 1; i <= flag.childElementCount; i++) {
-			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
-		}
-
-		// console.log(colors);
-
-		document
-			.getElementById('js_content')
-			.addEventListener('mouseenter', () => {
-				iId = setInterval(() => {
-					for (let i = 1; i <= colors.length; i++) {
-						position++;
-
-						if (position >= colors.length) {
-							position = 0;
-						}
-
-						document
-							.getElementById("triangle-" + i)
-							.setAttribute("fill", colors[position]);
-					}
-
-					position++;
-
-					if (position >= colors.length) {
-						position = 0;
-					}
-				}, 600);
-			});
-
-		document
-			.getElementById('js_content')
-			.addEventListener('mouseleave', () => {
-				iId && clearInterval(iId);
-			});
-	</script>
-{% endblock %}

source/screens/demo/examples/clock.liquid

@@ -17,11 +17,13 @@ tags:
 <main></main>
 {% endblock %}
 
-{% block script %}
+{% block assets %}
 <script src="/vendor/hippie-script.js"></script>
 <script src="/js/globals.js"></script>
 <script src="/js/app.js"></script>
+{% endblock %}
 
+{% block script %}
 <script>
 	class HippieClock {
 		constructor(element, date = new Date(), options = {}) {

source/screens/demo/examples/game/intro.liquid

@@ -3,7 +3,6 @@ title: Intro
 tags:
 - game
 ---
-
 {% assign bodyClass = 'body_intro' -%}
 {% layout 'hippie/app.liquid' %}
 
@@ -46,9 +45,13 @@ tags:
 </div>
 {% endblock %}
 
-{%- block script %}
+{% block assets %}
 {{ block.super -}}
 <script src="/js/intro.js"></script>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
 <script>
 	//let intro = new Intro('Intro');
 	//intro.init();

source/screens/demo/examples/songbook.liquid

@@ -0,0 +1,39 @@
+---
+title: Songbook
+tags:
+- demoExample
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="sec_main_center">
+	<header class="header_txt">
+		<h1>Titel</h1>
+		<p>Jahr</p>
+	</header>
+	<nav role="doc-toc">
+		<h2>Inhaltsverzeichnis</h2>
+		<ul>
+			{%- for song in collections.song -%}
+				<li>
+					<a href="{{ song.page.url }}">{{ song.data.title }}</a>
+				</li>
+			{%- endfor -%}
+		</ul>
+	</nav>
+	<h2>Vorwort</h2>
+	<p>Liederbuch für
+		<em>Name</em>.</p>
+	<p>Gibt es gebunden und hier
+		{% link hippie.placeholders.domain %}.<br/>
+		Bestellungen bitte an
+		{% text hippie.placeholders.name %}
+		richten.</p>
+	<hr class="double dotted">
+	{%- for piece in collections.song -%}
+		{% render 'hippie/partials/song.liquid', index: forloop.index0, data: piece.data, content: piece.content %}
+	{%- endfor -%}
+	<hr/>
+	<address>{% text hippie.placeholders.name %}</address>
+</div>
+{% endblock %}

source/screens/demo/examples/songbook.njk

@@ -1,52 +0,0 @@
----
-title: Songbook
-tags:
-  - demoExample
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-{% import "hippie/macros/_song.njk" as song %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="sec_main_center">
-		<header class="header_txt">
-			<h1>Titel</h1>
-			<p>Jahr</p>
-		</header>
-		<nav role="doc-toc">
-			<h2>Inhaltsverzeichnis</h2>
-			<ul>
-				{%- for song in collections.song -%}
-					<li>
-						<a href="{{ song.page.url }}">{{ song.data.title }}</a>
-					</li>
-				{%- endfor -%}
-			</ul>
-		</nav>
-		<h2>Vorwort</h2>
-		<p>Liederbuch für
-			<em>Name</em>.</p>
-		<p>Gibt es gebunden und hier
-			{{ ph.link() }}.<br/>
-			Bestellungen bitte an
-			{{ ph.name() }}
-			richten.</p>
-		<hr class="double dotted">
-		{%- for piece in collections.song -%}
-			{{ song.simple(loop.index0, piece.data, piece.content) }}
-		{%- endfor -%}
-		<hr/>
-		<address>{{ ph.name() }}</address>
-	</div>
-{% endblock %}

source/screens/demo/examples/ui/drag.liquid

@@ -21,9 +21,12 @@ tags:
 </div>
 {% endblock %}
 
-{%- block script %}
+{% block assets %}
-<script src="/js/app.js"></script>
+{{ block.super -}}
 <script src="/js/drag.js"></script>
+{% endblock %}
+
+{%- block script %}
 <script>
 	// Get the space element
 	const space = document.getElementById('space');

source/screens/demo/examples/ui/windows.liquid

@@ -49,10 +49,13 @@ tags:
 </div>
 {% endblock %}
 
+{% block assets %}
+{{ block.super -}}
+<script src="/js/windows.js"></script>
+{% endblock %}
+
 {%- block script %}
 {{ block.super -}}
-
-<script src="/js/windows.js"></script>
 <script>
 	console.log(HIPPIE.brand);
 	// Get the space element

source/screens/demo/index.liquid

@@ -1,8 +1,6 @@
 ---
 permalink: "/"
 title: Index
-tags:
-- demoIndex
 ---
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = 'h_full_view' -%}
@@ -35,7 +33,8 @@ tags:
 		</div>
 		<nav>
 			<ul class="block link">
-				{% for link in collections.demoIndex %}
+				{% assign indexByOrder = collections.demoIndex | sort: 'data.order' %}
+				{% for link in indexByOrder %}
 					<li>
 						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
 					</li>
@@ -47,7 +46,6 @@ tags:
 				<h3>Page</h3>
 				<ul class="block link">
 					{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
-
 					{% for link in pagesByTitle %}
 						<li>
 							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
@@ -58,7 +56,8 @@ tags:
 			<section>
 				<h3>Example</h3>
 				<ul class="block link">
-					{% for link in collections.demoExample %}
+					{% assign examplesByTitle = collections.demoExample | sort: 'data.title' %}
+					{% for link in examplesByTitle %}
 						<li>
 							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
 						</li>

source/screens/demo/introduction.liquid

@@ -2,6 +2,7 @@
 title: Introduction
 tags:
 - demoIndex
+order: 1
 ---
 {% layout 'hippie/page.liquid' %}
 
@@ -28,13 +29,7 @@ tags:
 {% block script %}
 {{ block.super -}}
 <script>
-	assetsLoaded = true;
-	logPerf('Assets loaded.', assetsLoaded);
-	// Page specific
-	// ------------------------------------------------------------------------------
 	composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
 	composeMail('.general', 'name', 'domain', 'tld', '', '')
-
-	logPerf('Application ready... not.');
 </script>
 {% endblock %}

source/screens/demo/layouts.liquid

@@ -2,6 +2,7 @@
 title: Layouts
 tags:
 - demoIndex
+order: 4
 ---
 {% layout 'hippie/page.liquid' %}
 
@@ -298,14 +299,13 @@ tags:
 </section>
 {% endblock %}
 
+{% block assets %}
+{{ block.super -}}
+<script src="/vendor/jq-sticky-anything.min.js"></script>
+{% endblock %}
 {% block script %}
 {{ block.super -}}
-<script src="/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
 <script>
-	assetsLoaded = true;
-	logPerf('Assets loaded.', assetsLoaded);
-	// Page specific
-	// ------------------------------------------------------------------------------
 	$(document).ready(function () {
 		// jq-sticky-anything
 		$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});

source/style/modules/card/_card_module.scss

@@ -32,7 +32,7 @@
 				// text-align: center;
 			}
 
-			& > div {
+			& > main {
 				position: relative;
 				padding: 64px 64px 24px 64px;
 				border: 1px solid #FFF;

source/templates/hippie/app.liquid

@@ -10,12 +10,14 @@
 <link href="/css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}
 
-{% block script %}
+{% block assets %}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
 <script src="/js/globals.js"></script>
 <script src="/js/app.js"></script>
+{% endblock %}
 
+{% block script %}
 <script>
 	const frameHeader = document.querySelector('body > header.io');
 	const closeActionElements = document.querySelectorAll('[data-action=close]');
@@ -36,4 +38,4 @@
 		});
 	}
 </script>
-{% endblock %}
+{% endblock %}

source/templates/hippie/default.liquid

@@ -28,6 +28,7 @@
 
 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
+{%- block assets %}{% endblock -%}
 <script>
 	// {{ title }} script using default template
 </script>

source/templates/hippie/full.liquid

@@ -36,12 +36,13 @@
 {% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
 {%- block body %}{% endblock -%}
 {% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
+{%- block assets %}{% endblock -%}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 <script>
 	// {{ title }} script using full template
 </script>
 {%- block script %}{% endblock -%}
-{% render 'hippie/partials/log-assets', state: true -%}
-{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 {% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
 {% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
 </body>

source/templates/hippie/page.liquid

@@ -34,11 +34,13 @@
 </div>
 {% endblock %}
 
-{% block script %}
+{% block assets %}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
 <script src="/js/globals.js"></script>
 <script src="/js/app.js"></script>
+{% endblock %}
+{% block script %}
 <script>
 	// Setup global things for all screens
 	setup();
@@ -59,4 +61,4 @@
 		logPerf('EVENT       :: jQuery \'ready\' event fired.');
 	});
 </script>
-{% endblock %}
+{% endblock %}

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

@@ -14,7 +14,7 @@
 		<g>
 			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
 		</g>{% endcomment %}
-		{% if desc != '' %}
+		{% if desc %}
 			<desc>{{ desc }}</desc>
 		{% endif %}
 		<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>

source/templates/hippie/partials/song.liquid

@@ -0,0 +1,10 @@
+<article class="songbook_song">
+	<header>
+		<h2>{{ data.title }}</h2>
+		<h6>{{ data.releaseDate }}</h6>
+		<p>{{ data.description }}</p>
+	</header>
+	{% comment %}<pre class="pre_code"><code>{{ content }}</code></pre>{% endcomment %}
+	{{ content }}
+	<footer>{{ index }}</footer>
+</article>