feat: Replace new with start screen

- Convert to liquid
- Add old ongoing function for now
- Add macros as partials
- Rename data source to better reflect usage
- Update app.js to fulfill jshint

source/code/app.js

@@ -1,25 +1,33 @@
 //NEW
 
 function Clock(id) {
-	this.id = id;
+	'use strict';
 
-	var that = this;
-	setInterval(function () { that.updateClock(); }, 1000);
+	this.id = id;
+	const that = this;
+
+	setInterval(function () {
+		that.updateClock();
+	}, 1000);
 	this.updateClock();
 }
 
 Clock.prototype.updateClock = function () {
-	var date = new Date();
-	var clock = document.getElementById(this.id);
+	'use strict';
+
+	const date = new Date();
+	const clock = document.getElementById(this.id);
 	//console.log(this);
-	clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
+	clock.innerHTML = this.formatDigits(date.getHours()) + ':' + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
 };
 
 Clock.prototype.formatDigits = function (val) {
-	if (val < 10) val = "0" + val;
+	'use strict';
+
+	if (val < 10) val = '0' + val;
 
 	return val;
-}
+};
 
 //OLD
 
@@ -121,6 +129,7 @@ function barwidth(size, G, W) {
 
 	return newW;
 }
+
 //String Element erweitern
 String.prototype.transform = function () {
 	return parseFloat(this.replace(',', '.'));
@@ -129,6 +138,7 @@ String.prototype.transform = function () {
 Array.prototype.arrayAdd = function () {
 	return eval(this.join("+"));
 }
+
 //Speicherplatz in Prozent berechnen
 function percentage(total, gigs, round) {
 	var totalSpace = total;
@@ -138,6 +148,7 @@ function percentage(total, gigs, round) {
 
 	return p;
 }
+
 //Speicherplatz in GB berechnen
 function gigabytes(percent, total, round) {
 	var occupiedPercent = percent;

source/data/start.json

@@ -5,10 +5,10 @@
 	},
 	{
 		"text": "Basics",
-		"href": "./demo/basics.html"
+		"href": "/demo/basics.html"
 	},
 	{
 		"text": "Drag",
-		"href": "./demo/examples/ui/drag.html"
+		"href": "/demo/examples/ui/drag.html"
 	}
 ]

source/screens/demo/examples/ui/new.njk

@@ -1,45 +0,0 @@
----
-title: New
-tags:
-  - ui
----
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_new" %}
-
-{% extends "hippie/_app_frame.njk" %}
-{% import "hippie/macros/_header.njk" as header %}
-
-{% block body %}
-  {{ header.status(hippie, new) }}
-  <header class="area menu io">
-    <nav>
-      <ul>
-        <li>
-          <a href="" class="a_button">Func 1</a>
-        </li>
-        <li>
-          <a href="" class="a_button">Func 2</a>
-        </li>
-      </ul>
-    </nav>
-  </header>
-  <div class="area grid">
-    <div class="item">1</div>
-    <div class="item">2</div>
-    <div class="item">3</div>
-    <div class="item">4</div>
-  </div>
-{% endblock %}
-
-{%- block script %}
-  {{ super() }}
-  <script>
-    let clock = new Clock('time');
-
-    document.addEventListener('mousemove', (event) => {
-      document
-        .getElementById('log')
-        .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
-    });
-  </script>
-{% endblock %}

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

@@ -0,0 +1,44 @@
+---
+title: Start
+tags:
+- ui
+---
+{% assign bodyClass = "body_new" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
+<header class="area menu io">
+	<nav>
+		<ul>
+			<li>
+				<a href="" class="a_button">Func 1</a>
+			</li>
+			<li>
+				<a href="" class="a_button">Func 2</a>
+			</li>
+		</ul>
+	</nav>
+</header>
+<div class="area grid">
+	<div class="item">1</div>
+	<div class="item">2</div>
+	<div class="item">3</div>
+	<div class="item">4</div>
+</div>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	let clock = new Clock('time');
+
+	ongoing();
+
+	document.addEventListener('mousemove', (event) => {
+		document
+			.getElementById('log')
+			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+	});
+</script>
+{% endblock %}

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

@@ -0,0 +1,21 @@
+<div id="top">
+	<h1 class="brand">
+		<a href="#">{{ hippie.brand | upcase }}</a>
+	</h1>
+	<nav>
+		<ul>
+			{% for link in links %}
+				<li>
+					<a href="{{ link.href }}">{{ link.text }}</a>
+				</li>
+			{% endfor %}
+		</ul>
+	</nav>
+	<div class="state">
+		<p>{% render 'hippie/partials/status-coord', id: "log" %}
+			/
+			{% render 'hippie/partials/status-date', id: "date" %}
+			/
+			{% render 'hippie/partials/status-time', id: "time" %}</p>
+	</div>
+</div>

source/templates/hippie/partials/status-coord.liquid

@@ -0,0 +1 @@
+<span id="{{ id }}">{{ text | default: 'X: #, Y: ##' }}</span>

source/templates/hippie/partials/status-date.liquid

@@ -0,0 +1,6 @@
+<span id="{{ id }}">
+	<span id="day">Wochentag</span>,
+	<span id="dayNumb">##</span>.
+	<span id="month">Monat</span>
+	<span id="year">####</span>
+</span>

source/templates/hippie/partials/status-time.liquid

@@ -0,0 +1 @@
+<span id="{{ id }}">{{ text | default: '00:00:00' }}</span><span>{{ postfix | default: ' Uhr' }}</span>