.eleventy.js

@@ -32,7 +32,7 @@ export default async function (eleventyConfig) {
 	});
 
 	// TODO: Demo entfernen
-	const permalinkPath = await hasFiles('source/view') ? '/demo/' : '/';
+	const permalinkPath = await hasFiles('source/screens') ? '/demo/' : '/';
 
 	eleventyConfig.addGlobalData('hippie', {
 		brand: 'hippie',
@@ -130,13 +130,14 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addPassthroughCopy({'node_modules/hippie-script/index.js': 'vendor/hippie-script.js'});
 
 	eleventyConfig.addWatchTarget('./source/style/');
-}
 
-// noinspection JSUnusedGlobalSymbols
+	return {
-export const config = {
 		dir: {
-		input: 'source/view',
+			input: 'source/screens',
-		output: 'build'
+			output: 'build',
+			includes: '../templates',
+			data: '../data'
 		},
 		templateFormats: ['html', 'liquid', 'md', 'njk']
-};
+	};
+}

.jshintrc

@@ -14,20 +14,20 @@
 	"unused": false,
 	"browser": true,
 	"globals": {
-		"DateDisplay": true,
 		"HIPPIE": false,
-		"HippieTaskBar": true,
+		"hippie": true,
-		"TimeDisplay": true,
+		"viewHover": true,
 		"basicEase": true,
-		"centerElementUnderCursor": false,
-		"checkButtonAndTarget": false,
 		"debugOn": true,
+		"TimeDisplay": true,
+		"DateDisplay": true,
+		"checkButtonAndTarget": false,
 		"getClosestEdgeToElement": false,
 		"getClosestEdgeToMouse": false,
-		"hippie": true,
+		"centerElementUnderCursor": false,
+		"setAttributesAccordingToPosition": false,
 		"randomIntFrom": false,
-		"readJsonFile": false,
 		"replaceLineBreaks": false,
-		"viewHover": true
+		"HippieTaskBar": true
 	}
 }

TODO.md

@@ -1,5 +1,6 @@
 # General
 
+- Remove gulp and legacy files
 - Better README with more info for the content section
   - Explain eleventy usage
 - Complete CHANGELOG
@@ -7,10 +8,6 @@
 - Add dynamic content to robots.txt during build process
 - Add dynamic content to sitemap.xml
 
-# 11ty
-
-- Look into teh difference of layouts and templates
-
 # CSS
 
 - Check style for every basic element

source/code/hippie/app.js

@@ -394,6 +394,20 @@ function centerElementUnderCursor(event, element) {
 	element.style.top = `${y}px`;
 }
 
+function setAttributesAccordingToPosition(element, position, attributes) {
+	'use strict';
+
+	element.classList.remove(...Object.values(attributes).map(pos => pos.className));
+	Object.keys(attributes[position].styles).forEach(key => {
+		element.style[key] = '';
+	});
+
+	element.classList.add(attributes[position].className);
+	Object.entries(attributes[position].styles).forEach(([key, value]) => {
+		element.style[key] = value;
+	});
+}
+
 /**
  * Gibt eine Zahl zwischen <min> und <max> aus.
  * Die Werte <min> und <max> sind dabei mit eingeschlossen.
@@ -542,37 +556,9 @@ function zeroFill(number, width) {
 // Retrieved 2026-03-08, License - CC BY-SA 4.0
 const delay = ms => new Promise(res => setTimeout(res, ms));
 
-async function readJsonFile(file) {
+class RandomPixelCanvas {
-	return new Promise((resolve, reject) => {
+	constructor(containerElement, options = {}) {
-		const reader = new FileReader();
+		this.container = containerElement;
-
-		reader.readAsText(file);
-		reader.onload = function () {
-			try {
-				resolve(JSON.parse(reader.result));
-			} catch (error) {
-				reject(error);
-			}
-		};
-		reader.onerror = function () {
-			reject(reader.error);
-		};
-	});
-}
-
-async function loadJson(filePath) {
-	try {
-		const response = await fetch(filePath);
-
-		if (!response.ok) throw new Error(`Failed to load file: ${response.status}`);
-
-		return await response.json();
-	} catch (error) {
-		console.error('Error loading file:', error);
-		throw error;
-	}
-}
-
 class RandomPixelPlaceholder {
 	constructor(parent, options = {}) {
 		this.container = parent;

source/code/windows.js

@@ -3,10 +3,9 @@ class HippieTaskBar {
 		this.element = element;
 		this.placeholder = placeholder;
 		this.date = null;
-		this.time = null;
 		this.isDragging = false;
 		this.barSize = '';
-		// TODO: Ergänzen und nicht ersetzen
+		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
 		this.options = options || {
 			direction: 0,
 			position: 'bottom',
@@ -14,8 +13,7 @@ class HippieTaskBar {
 				year: 'numeric',
 				month: '2-digit',
 				day: '2-digit'
-			},
+			}
-			time: {hour: '2-digit', minute: '2-digit'}
 		};
 
 		this.init();
@@ -27,20 +25,11 @@ class HippieTaskBar {
 		document.addEventListener('pointermove', this.onMove.bind(this));
 		document.addEventListener('pointerup', this.onUp.bind(this));
 
-		const clock = this.element.querySelector('.clock');
 		const dateElement = document.createElement('span');
-		const timeElement = document.createElement('span');
-		const br = document.createElement('br');
 
 		dateElement.id = 'date';
-		timeElement.id = 'time';
+		this.element.querySelector('.clock').appendChild(dateElement);
 		this.date = new DateDisplay(dateElement, this.options.date);
-		this.time = new TimeDisplay(timeElement, this.options.time);
-
-		// TODO: Reihenfolge anpassbar machen
-		clock.appendChild(timeElement);
-		clock.appendChild(br);
-		clock.appendChild(dateElement);
 
 		this.setOptions(this.options.position);
 	}
@@ -122,7 +111,7 @@ class HippieTaskBar {
 				}
 			};
 
-			this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
+			setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -153,18 +142,6 @@ class HippieTaskBar {
 		this.date.changeFormat(this.options.date, this.options.direction);
 	}
 
-	setAttributesAccordingToPosition(element, position, attributes) {
-		element.classList.remove(...Object.values(attributes).map(pos => pos.className));
-		Object.keys(attributes[position].styles).forEach(key => {
-			element.style[key] = '';
-		});
-
-		element.classList.add(attributes[position].className);
-		Object.entries(attributes[position].styles).forEach(([key, value]) => {
-			element.style[key] = value;
-		});
-	}
-
 	setOptions(position) {
 		const attributes = {
 			top: {
@@ -205,7 +182,7 @@ class HippieTaskBar {
 			}
 		};
 
-		this.setAttributesAccordingToPosition(this.element, position, attributes);
+		setAttributesAccordingToPosition(this.element, position, attributes);
 
 		switch (position) {
 			case 'right':

source/data/windows.json

@@ -1,13 +0,0 @@
-{
-	"taskbar": {
-		"position": "top",
-		"color": "white",
-		"hover": {
-			"active": true,
-			"color": "#52bed1"
-		}
-	},
-	"window": {
-		"name": "Custom"
-	}
-}

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

@@ -29,7 +29,10 @@ tags:
 			<button><i class="bi bi-mic"></i></button>
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
-		<div class="clock"></div>
+		<div class="clock">
+			<span id="time">##:##</span>
+			<br>
+		</div>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
 		</nav>
@@ -60,27 +63,20 @@ tags:
 	const start = document.querySelector('[data-action=start]');
 	const draggableElement = document.getElementById('task-bar');
 	const placeholderElement = document.getElementById('placeholder');
+	// TODO: TimeDisplay in HippieTaskbar aufnehmen
+	const timeElement = document.getElementById('time');
 
-	initializeApp();
+	const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
+	const timeFormat = {hour: '2-digit', minute: '2-digit'};
+	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
 
-	async function initializeApp() {
-		try {
-			const config = await loadJson('/json/windows.json');
-			// TODO: Elemente in der Klasse selbst erzeugen
-			const taskBar = new HippieTaskBar(draggableElement, placeholderElement, config.taskbar);
-
-			// TODO: In HippieTaskbar aufnehmen
 	document.getElementById('setPause').addEventListener('click', () => {
-				taskBar.time.pause();
+		timeDisplay.pause();
 		console.info('Pause time');
 	});
 	document.getElementById('setPlay').addEventListener('click', () => {
-				taskBar.time.resume();
+		timeDisplay.resume();
 		console.info('Resume time');
 	});
-		} catch (error) {
-			console.error('Failed to initialize app:', error);
-		}
-	}
 </script>
 {% endblock %}

source/screens/demo/index.liquid

@@ -12,17 +12,17 @@ title: Index
 		<h2>This is {{ hippie.brand | upcase }}</h2>
 		<p>You can start using it by replacing this file with your own index page.</p>
 		<p>To do this you need to create a file
-			<code>index.liquid|njk</code>
+			<code>/index.njk</code>
 			inside the
-			<i>source/view</i>
+			<i>source/screens</i>
 			folder. You can also create a
 			<code>data.json</code>
 			file inside the
-			<i>source/view</i>
+			<i>source/templates</i>
-			folder as a global data source for your template files.</p>
+			folder as a data source for your nunjucks files.</p>
 		<p>For a very basic start you can make a copy of the demo page
-			<code>blank.liquid|njk</code>. You can find it at
+			<code>blank.njk</code>. You can find it at
-			<i>/source/view/demo/pages</i>.</p>
+			<i>/source/screens/demo</i>.</p>
 		<p>The
 			<i>source/demo</i>
 			folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole

source/templates/hippie/page.liquid

@@ -42,7 +42,7 @@
 {% endblock %}
 {% block script %}
 <script>
-	// Setup global things
+	// Setup global things for all screens
 	setup();
 
 	// Create instances of objects made by constructor functions