From b67a8a893a5e013112153c2e715d1fbd3ca2535e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 5 Apr 2026 14:13:32 +0200
Subject: [PATCH 1/2] feat: Change file structure

- Move return object to named export for 11ty config
- screens is now view
- 11ty data files moved to view/_data
- templates is now view/_includes
- Both are the default directories
- data is now used as intended, for user data
- Update index to reflect filenames and structure
---
 .eleventy.js                                  | 21 +++++++++----------
 TODO.md                                       |  5 ++++-
 source/{data => view/_data}/menu.json         |  0
 source/{data => view/_data}/start.json        |  0
 .../_includes}/hippie/app.liquid              |  0
 .../_includes}/hippie/default.liquid          |  0
 .../_includes}/hippie/full.liquid             |  0
 .../_includes}/hippie/game.liquid             |  0
 .../_includes}/hippie/page.liquid             |  2 +-
 .../hippie/partials/footer-page.liquid        |  0
 .../hippie/partials/footer-pinned.liquid      |  0
 .../hippie/partials/footer-status.liquid      |  0
 .../hippie/partials/frame-header.liquid       |  0
 .../hippie/partials/frame-mode.liquid         |  0
 .../hippie/partials/frame-status.liquid       |  0
 .../hippie/partials/game-menu.liquid          |  0
 .../hippie/partials/gate-list.liquid          |  0
 .../hippie/partials/gate-simple.liquid        |  0
 .../hippie/partials/header-page.liquid        |  0
 .../hippie/partials/header-status.liquid      |  0
 .../_includes}/hippie/partials/links.liquid   |  0
 .../hippie/partials/log-assets.liquid         |  0
 .../_includes}/hippie/partials/log-log.liquid |  0
 .../hippie/partials/log-setup.liquid          |  0
 .../hippie/partials/log-start.liquid          |  0
 .../_includes}/hippie/partials/meta.liquid    |  0
 .../hippie/partials/nav-page.liquid           |  0
 .../hippie/partials/placeholder-flag.liquid   |  0
 .../hippie/partials/script-log.liquid         |  0
 .../_includes}/hippie/partials/song.liquid    |  0
 .../hippie/partials/status-coord.liquid       |  0
 .../hippie/partials/status-date.liquid        |  0
 .../hippie/partials/status-time.liquid        |  0
 .../_includes}/hippie/simple.liquid           |  0
 .../_includes}/hippie/status.liquid           |  0
 .../_includes}/hippie/world.liquid            |  0
 source/{screens => view}/demo/basics.liquid   |  0
 .../{screens => view}/demo/components.liquid  |  0
 .../demo/examples/10print.liquid              |  0
 .../demo/examples/blog.liquid                 |  0
 .../demo/examples/blog/article.md             |  0
 .../demo/examples/card.liquid                 |  0
 .../demo/examples/clock.liquid                |  0
 .../demo/examples/game/index.liquid           |  0
 .../demo/examples/game/intro.liquid           |  0
 .../demo/examples/game/menu.liquid            |  0
 .../demo/examples/game/mwo.liquid             |  0
 .../demo/examples/game/tfw.liquid             |  0
 .../{screens => view}/demo/examples/hello.md  |  0
 .../demo/examples/matrix.liquid               |  0
 .../demo/examples/portal.liquid               |  0
 .../demo/examples/songbook.liquid             |  0
 .../demo/examples/songbook/0_artist-title.md  |  0
 .../demo/examples/start.liquid                |  0
 .../demo/examples/ui/cli.liquid               |  0
 .../demo/examples/ui/drag.liquid              |  0
 .../demo/examples/ui/explorer.liquid          |  0
 .../demo/examples/ui/form.liquid              |  0
 .../demo/examples/ui/gallery.liquid           |  0
 .../demo/examples/ui/index.liquid             |  0
 .../demo/examples/ui/table.liquid             |  0
 .../demo/examples/ui/tui.liquid               |  0
 .../demo/examples/ui/windows.liquid           |  0
 source/{screens => view}/demo/index.liquid    | 12 +++++------
 .../demo/introduction.liquid                  |  0
 source/{screens => view}/demo/layouts.liquid  |  0
 .../{screens => view}/demo/pages/blank.liquid |  0
 .../demo/pages/default.liquid                 |  0
 .../demo/pages/error/304.liquid               |  0
 .../demo/pages/error/400.liquid               |  0
 .../demo/pages/error/401.liquid               |  0
 .../demo/pages/error/403.liquid               |  0
 .../demo/pages/error/404.liquid               |  0
 .../demo/pages/error/408.liquid               |  0
 .../demo/pages/error/500.liquid               |  0
 .../demo/pages/error/503.liquid               |  0
 .../demo/pages/maintenance.liquid             |  0
 .../{screens => view}/demo/pages/pages.json   |  0
 78 files changed, 21 insertions(+), 19 deletions(-)
 rename source/{data => view/_data}/menu.json (100%)
 rename source/{data => view/_data}/start.json (100%)
 rename source/{templates => view/_includes}/hippie/app.liquid (100%)
 rename source/{templates => view/_includes}/hippie/default.liquid (100%)
 rename source/{templates => view/_includes}/hippie/full.liquid (100%)
 rename source/{templates => view/_includes}/hippie/game.liquid (100%)
 rename source/{templates => view/_includes}/hippie/page.liquid (98%)
 rename source/{templates => view/_includes}/hippie/partials/footer-page.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/footer-pinned.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/footer-status.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/frame-header.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/frame-mode.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/frame-status.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/game-menu.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/gate-list.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/gate-simple.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/header-page.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/header-status.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/links.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/log-assets.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/log-log.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/log-setup.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/log-start.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/meta.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/nav-page.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/placeholder-flag.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/script-log.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/song.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/status-coord.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/status-date.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/status-time.liquid (100%)
 rename source/{templates => view/_includes}/hippie/simple.liquid (100%)
 rename source/{templates => view/_includes}/hippie/status.liquid (100%)
 rename source/{templates => view/_includes}/hippie/world.liquid (100%)
 rename source/{screens => view}/demo/basics.liquid (100%)
 rename source/{screens => view}/demo/components.liquid (100%)
 rename source/{screens => view}/demo/examples/10print.liquid (100%)
 rename source/{screens => view}/demo/examples/blog.liquid (100%)
 rename source/{screens => view}/demo/examples/blog/article.md (100%)
 rename source/{screens => view}/demo/examples/card.liquid (100%)
 rename source/{screens => view}/demo/examples/clock.liquid (100%)
 rename source/{screens => view}/demo/examples/game/index.liquid (100%)
 rename source/{screens => view}/demo/examples/game/intro.liquid (100%)
 rename source/{screens => view}/demo/examples/game/menu.liquid (100%)
 rename source/{screens => view}/demo/examples/game/mwo.liquid (100%)
 rename source/{screens => view}/demo/examples/game/tfw.liquid (100%)
 rename source/{screens => view}/demo/examples/hello.md (100%)
 rename source/{screens => view}/demo/examples/matrix.liquid (100%)
 rename source/{screens => view}/demo/examples/portal.liquid (100%)
 rename source/{screens => view}/demo/examples/songbook.liquid (100%)
 rename source/{screens => view}/demo/examples/songbook/0_artist-title.md (100%)
 rename source/{screens => view}/demo/examples/start.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/cli.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/drag.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/explorer.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/form.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/gallery.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/index.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/table.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/tui.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/windows.liquid (100%)
 rename source/{screens => view}/demo/index.liquid (88%)
 rename source/{screens => view}/demo/introduction.liquid (100%)
 rename source/{screens => view}/demo/layouts.liquid (100%)
 rename source/{screens => view}/demo/pages/blank.liquid (100%)
 rename source/{screens => view}/demo/pages/default.liquid (100%)
 rename source/{screens => view}/demo/pages/error/304.liquid (100%)
 rename source/{screens => view}/demo/pages/error/400.liquid (100%)
 rename source/{screens => view}/demo/pages/error/401.liquid (100%)
 rename source/{screens => view}/demo/pages/error/403.liquid (100%)
 rename source/{screens => view}/demo/pages/error/404.liquid (100%)
 rename source/{screens => view}/demo/pages/error/408.liquid (100%)
 rename source/{screens => view}/demo/pages/error/500.liquid (100%)
 rename source/{screens => view}/demo/pages/error/503.liquid (100%)
 rename source/{screens => view}/demo/pages/maintenance.liquid (100%)
 rename source/{screens => view}/demo/pages/pages.json (100%)

diff --git a/.eleventy.js b/.eleventy.js
index 0e51f7d..a29e297 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -32,7 +32,7 @@ export default async function (eleventyConfig) {
 	});
 
 	// TODO: Demo entfernen
-	const permalinkPath = await hasFiles('source/screens') ? '/demo/' : '/';
+	const permalinkPath = await hasFiles('source/view') ? '/demo/' : '/';
 
 	eleventyConfig.addGlobalData('hippie', {
 		brand: 'hippie',
@@ -130,14 +130,13 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addPassthroughCopy({'node_modules/hippie-script/index.js': 'vendor/hippie-script.js'});
 
 	eleventyConfig.addWatchTarget('./source/style/');
-
-	return {
-		dir: {
-			input: 'source/screens',
-			output: 'build',
-			includes: '../templates',
-			data: '../data'
-		},
-		templateFormats: ['html', 'liquid', 'md', 'njk']
-	};
 }
+
+// noinspection JSUnusedGlobalSymbols
+export const config = {
+	dir: {
+		input: 'source/view',
+		output: 'build'
+	},
+	templateFormats: ['html', 'liquid', 'md', 'njk']
+};
\ No newline at end of file
diff --git a/TODO.md b/TODO.md
index 5c33350..2c1ec95 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,6 +1,5 @@
 # General
 
-- Remove gulp and legacy files
 - Better README with more info for the content section
   - Explain eleventy usage
 - Complete CHANGELOG
@@ -8,6 +7,10 @@
 - 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
diff --git a/source/data/menu.json b/source/view/_data/menu.json
similarity index 100%
rename from source/data/menu.json
rename to source/view/_data/menu.json
diff --git a/source/data/start.json b/source/view/_data/start.json
similarity index 100%
rename from source/data/start.json
rename to source/view/_data/start.json
diff --git a/source/templates/hippie/app.liquid b/source/view/_includes/hippie/app.liquid
similarity index 100%
rename from source/templates/hippie/app.liquid
rename to source/view/_includes/hippie/app.liquid
diff --git a/source/templates/hippie/default.liquid b/source/view/_includes/hippie/default.liquid
similarity index 100%
rename from source/templates/hippie/default.liquid
rename to source/view/_includes/hippie/default.liquid
diff --git a/source/templates/hippie/full.liquid b/source/view/_includes/hippie/full.liquid
similarity index 100%
rename from source/templates/hippie/full.liquid
rename to source/view/_includes/hippie/full.liquid
diff --git a/source/templates/hippie/game.liquid b/source/view/_includes/hippie/game.liquid
similarity index 100%
rename from source/templates/hippie/game.liquid
rename to source/view/_includes/hippie/game.liquid
diff --git a/source/templates/hippie/page.liquid b/source/view/_includes/hippie/page.liquid
similarity index 98%
rename from source/templates/hippie/page.liquid
rename to source/view/_includes/hippie/page.liquid
index 5c8881f..5cf93c9 100644
--- a/source/templates/hippie/page.liquid
+++ b/source/view/_includes/hippie/page.liquid
@@ -42,7 +42,7 @@
 {% endblock %}
 {% block script %}
 <script>
-	// Setup global things for all screens
+	// Setup global things
 	setup();
 
 	// Create instances of objects made by constructor functions
diff --git a/source/templates/hippie/partials/footer-page.liquid b/source/view/_includes/hippie/partials/footer-page.liquid
similarity index 100%
rename from source/templates/hippie/partials/footer-page.liquid
rename to source/view/_includes/hippie/partials/footer-page.liquid
diff --git a/source/templates/hippie/partials/footer-pinned.liquid b/source/view/_includes/hippie/partials/footer-pinned.liquid
similarity index 100%
rename from source/templates/hippie/partials/footer-pinned.liquid
rename to source/view/_includes/hippie/partials/footer-pinned.liquid
diff --git a/source/templates/hippie/partials/footer-status.liquid b/source/view/_includes/hippie/partials/footer-status.liquid
similarity index 100%
rename from source/templates/hippie/partials/footer-status.liquid
rename to source/view/_includes/hippie/partials/footer-status.liquid
diff --git a/source/templates/hippie/partials/frame-header.liquid b/source/view/_includes/hippie/partials/frame-header.liquid
similarity index 100%
rename from source/templates/hippie/partials/frame-header.liquid
rename to source/view/_includes/hippie/partials/frame-header.liquid
diff --git a/source/templates/hippie/partials/frame-mode.liquid b/source/view/_includes/hippie/partials/frame-mode.liquid
similarity index 100%
rename from source/templates/hippie/partials/frame-mode.liquid
rename to source/view/_includes/hippie/partials/frame-mode.liquid
diff --git a/source/templates/hippie/partials/frame-status.liquid b/source/view/_includes/hippie/partials/frame-status.liquid
similarity index 100%
rename from source/templates/hippie/partials/frame-status.liquid
rename to source/view/_includes/hippie/partials/frame-status.liquid
diff --git a/source/templates/hippie/partials/game-menu.liquid b/source/view/_includes/hippie/partials/game-menu.liquid
similarity index 100%
rename from source/templates/hippie/partials/game-menu.liquid
rename to source/view/_includes/hippie/partials/game-menu.liquid
diff --git a/source/templates/hippie/partials/gate-list.liquid b/source/view/_includes/hippie/partials/gate-list.liquid
similarity index 100%
rename from source/templates/hippie/partials/gate-list.liquid
rename to source/view/_includes/hippie/partials/gate-list.liquid
diff --git a/source/templates/hippie/partials/gate-simple.liquid b/source/view/_includes/hippie/partials/gate-simple.liquid
similarity index 100%
rename from source/templates/hippie/partials/gate-simple.liquid
rename to source/view/_includes/hippie/partials/gate-simple.liquid
diff --git a/source/templates/hippie/partials/header-page.liquid b/source/view/_includes/hippie/partials/header-page.liquid
similarity index 100%
rename from source/templates/hippie/partials/header-page.liquid
rename to source/view/_includes/hippie/partials/header-page.liquid
diff --git a/source/templates/hippie/partials/header-status.liquid b/source/view/_includes/hippie/partials/header-status.liquid
similarity index 100%
rename from source/templates/hippie/partials/header-status.liquid
rename to source/view/_includes/hippie/partials/header-status.liquid
diff --git a/source/templates/hippie/partials/links.liquid b/source/view/_includes/hippie/partials/links.liquid
similarity index 100%
rename from source/templates/hippie/partials/links.liquid
rename to source/view/_includes/hippie/partials/links.liquid
diff --git a/source/templates/hippie/partials/log-assets.liquid b/source/view/_includes/hippie/partials/log-assets.liquid
similarity index 100%
rename from source/templates/hippie/partials/log-assets.liquid
rename to source/view/_includes/hippie/partials/log-assets.liquid
diff --git a/source/templates/hippie/partials/log-log.liquid b/source/view/_includes/hippie/partials/log-log.liquid
similarity index 100%
rename from source/templates/hippie/partials/log-log.liquid
rename to source/view/_includes/hippie/partials/log-log.liquid
diff --git a/source/templates/hippie/partials/log-setup.liquid b/source/view/_includes/hippie/partials/log-setup.liquid
similarity index 100%
rename from source/templates/hippie/partials/log-setup.liquid
rename to source/view/_includes/hippie/partials/log-setup.liquid
diff --git a/source/templates/hippie/partials/log-start.liquid b/source/view/_includes/hippie/partials/log-start.liquid
similarity index 100%
rename from source/templates/hippie/partials/log-start.liquid
rename to source/view/_includes/hippie/partials/log-start.liquid
diff --git a/source/templates/hippie/partials/meta.liquid b/source/view/_includes/hippie/partials/meta.liquid
similarity index 100%
rename from source/templates/hippie/partials/meta.liquid
rename to source/view/_includes/hippie/partials/meta.liquid
diff --git a/source/templates/hippie/partials/nav-page.liquid b/source/view/_includes/hippie/partials/nav-page.liquid
similarity index 100%
rename from source/templates/hippie/partials/nav-page.liquid
rename to source/view/_includes/hippie/partials/nav-page.liquid
diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/view/_includes/hippie/partials/placeholder-flag.liquid
similarity index 100%
rename from source/templates/hippie/partials/placeholder-flag.liquid
rename to source/view/_includes/hippie/partials/placeholder-flag.liquid
diff --git a/source/templates/hippie/partials/script-log.liquid b/source/view/_includes/hippie/partials/script-log.liquid
similarity index 100%
rename from source/templates/hippie/partials/script-log.liquid
rename to source/view/_includes/hippie/partials/script-log.liquid
diff --git a/source/templates/hippie/partials/song.liquid b/source/view/_includes/hippie/partials/song.liquid
similarity index 100%
rename from source/templates/hippie/partials/song.liquid
rename to source/view/_includes/hippie/partials/song.liquid
diff --git a/source/templates/hippie/partials/status-coord.liquid b/source/view/_includes/hippie/partials/status-coord.liquid
similarity index 100%
rename from source/templates/hippie/partials/status-coord.liquid
rename to source/view/_includes/hippie/partials/status-coord.liquid
diff --git a/source/templates/hippie/partials/status-date.liquid b/source/view/_includes/hippie/partials/status-date.liquid
similarity index 100%
rename from source/templates/hippie/partials/status-date.liquid
rename to source/view/_includes/hippie/partials/status-date.liquid
diff --git a/source/templates/hippie/partials/status-time.liquid b/source/view/_includes/hippie/partials/status-time.liquid
similarity index 100%
rename from source/templates/hippie/partials/status-time.liquid
rename to source/view/_includes/hippie/partials/status-time.liquid
diff --git a/source/templates/hippie/simple.liquid b/source/view/_includes/hippie/simple.liquid
similarity index 100%
rename from source/templates/hippie/simple.liquid
rename to source/view/_includes/hippie/simple.liquid
diff --git a/source/templates/hippie/status.liquid b/source/view/_includes/hippie/status.liquid
similarity index 100%
rename from source/templates/hippie/status.liquid
rename to source/view/_includes/hippie/status.liquid
diff --git a/source/templates/hippie/world.liquid b/source/view/_includes/hippie/world.liquid
similarity index 100%
rename from source/templates/hippie/world.liquid
rename to source/view/_includes/hippie/world.liquid
diff --git a/source/screens/demo/basics.liquid b/source/view/demo/basics.liquid
similarity index 100%
rename from source/screens/demo/basics.liquid
rename to source/view/demo/basics.liquid
diff --git a/source/screens/demo/components.liquid b/source/view/demo/components.liquid
similarity index 100%
rename from source/screens/demo/components.liquid
rename to source/view/demo/components.liquid
diff --git a/source/screens/demo/examples/10print.liquid b/source/view/demo/examples/10print.liquid
similarity index 100%
rename from source/screens/demo/examples/10print.liquid
rename to source/view/demo/examples/10print.liquid
diff --git a/source/screens/demo/examples/blog.liquid b/source/view/demo/examples/blog.liquid
similarity index 100%
rename from source/screens/demo/examples/blog.liquid
rename to source/view/demo/examples/blog.liquid
diff --git a/source/screens/demo/examples/blog/article.md b/source/view/demo/examples/blog/article.md
similarity index 100%
rename from source/screens/demo/examples/blog/article.md
rename to source/view/demo/examples/blog/article.md
diff --git a/source/screens/demo/examples/card.liquid b/source/view/demo/examples/card.liquid
similarity index 100%
rename from source/screens/demo/examples/card.liquid
rename to source/view/demo/examples/card.liquid
diff --git a/source/screens/demo/examples/clock.liquid b/source/view/demo/examples/clock.liquid
similarity index 100%
rename from source/screens/demo/examples/clock.liquid
rename to source/view/demo/examples/clock.liquid
diff --git a/source/screens/demo/examples/game/index.liquid b/source/view/demo/examples/game/index.liquid
similarity index 100%
rename from source/screens/demo/examples/game/index.liquid
rename to source/view/demo/examples/game/index.liquid
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/view/demo/examples/game/intro.liquid
similarity index 100%
rename from source/screens/demo/examples/game/intro.liquid
rename to source/view/demo/examples/game/intro.liquid
diff --git a/source/screens/demo/examples/game/menu.liquid b/source/view/demo/examples/game/menu.liquid
similarity index 100%
rename from source/screens/demo/examples/game/menu.liquid
rename to source/view/demo/examples/game/menu.liquid
diff --git a/source/screens/demo/examples/game/mwo.liquid b/source/view/demo/examples/game/mwo.liquid
similarity index 100%
rename from source/screens/demo/examples/game/mwo.liquid
rename to source/view/demo/examples/game/mwo.liquid
diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/view/demo/examples/game/tfw.liquid
similarity index 100%
rename from source/screens/demo/examples/game/tfw.liquid
rename to source/view/demo/examples/game/tfw.liquid
diff --git a/source/screens/demo/examples/hello.md b/source/view/demo/examples/hello.md
similarity index 100%
rename from source/screens/demo/examples/hello.md
rename to source/view/demo/examples/hello.md
diff --git a/source/screens/demo/examples/matrix.liquid b/source/view/demo/examples/matrix.liquid
similarity index 100%
rename from source/screens/demo/examples/matrix.liquid
rename to source/view/demo/examples/matrix.liquid
diff --git a/source/screens/demo/examples/portal.liquid b/source/view/demo/examples/portal.liquid
similarity index 100%
rename from source/screens/demo/examples/portal.liquid
rename to source/view/demo/examples/portal.liquid
diff --git a/source/screens/demo/examples/songbook.liquid b/source/view/demo/examples/songbook.liquid
similarity index 100%
rename from source/screens/demo/examples/songbook.liquid
rename to source/view/demo/examples/songbook.liquid
diff --git a/source/screens/demo/examples/songbook/0_artist-title.md b/source/view/demo/examples/songbook/0_artist-title.md
similarity index 100%
rename from source/screens/demo/examples/songbook/0_artist-title.md
rename to source/view/demo/examples/songbook/0_artist-title.md
diff --git a/source/screens/demo/examples/start.liquid b/source/view/demo/examples/start.liquid
similarity index 100%
rename from source/screens/demo/examples/start.liquid
rename to source/view/demo/examples/start.liquid
diff --git a/source/screens/demo/examples/ui/cli.liquid b/source/view/demo/examples/ui/cli.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/cli.liquid
rename to source/view/demo/examples/ui/cli.liquid
diff --git a/source/screens/demo/examples/ui/drag.liquid b/source/view/demo/examples/ui/drag.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/drag.liquid
rename to source/view/demo/examples/ui/drag.liquid
diff --git a/source/screens/demo/examples/ui/explorer.liquid b/source/view/demo/examples/ui/explorer.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/explorer.liquid
rename to source/view/demo/examples/ui/explorer.liquid
diff --git a/source/screens/demo/examples/ui/form.liquid b/source/view/demo/examples/ui/form.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/form.liquid
rename to source/view/demo/examples/ui/form.liquid
diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/view/demo/examples/ui/gallery.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/gallery.liquid
rename to source/view/demo/examples/ui/gallery.liquid
diff --git a/source/screens/demo/examples/ui/index.liquid b/source/view/demo/examples/ui/index.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/index.liquid
rename to source/view/demo/examples/ui/index.liquid
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/view/demo/examples/ui/table.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/table.liquid
rename to source/view/demo/examples/ui/table.liquid
diff --git a/source/screens/demo/examples/ui/tui.liquid b/source/view/demo/examples/ui/tui.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/tui.liquid
rename to source/view/demo/examples/ui/tui.liquid
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/view/demo/examples/ui/windows.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/windows.liquid
rename to source/view/demo/examples/ui/windows.liquid
diff --git a/source/screens/demo/index.liquid b/source/view/demo/index.liquid
similarity index 88%
rename from source/screens/demo/index.liquid
rename to source/view/demo/index.liquid
index 95aeefa..7159acf 100644
--- a/source/screens/demo/index.liquid
+++ b/source/view/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.njk</code>
+			<code>index.liquid|njk</code>
 			inside the
-			<i>source/screens</i>
+			<i>source/view</i>
 			folder. You can also create a
 			<code>data.json</code>
 			file inside the
-			<i>source/templates</i>
-			folder as a data source for your nunjucks files.</p>
+			<i>source/view</i>
+			folder as a global data source for your template files.</p>
 		<p>For a very basic start you can make a copy of the demo page
-			<code>blank.njk</code>. You can find it at
-			<i>/source/screens/demo</i>.</p>
+			<code>blank.liquid|njk</code>. You can find it at
+			<i>/source/view/demo/pages</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
diff --git a/source/screens/demo/introduction.liquid b/source/view/demo/introduction.liquid
similarity index 100%
rename from source/screens/demo/introduction.liquid
rename to source/view/demo/introduction.liquid
diff --git a/source/screens/demo/layouts.liquid b/source/view/demo/layouts.liquid
similarity index 100%
rename from source/screens/demo/layouts.liquid
rename to source/view/demo/layouts.liquid
diff --git a/source/screens/demo/pages/blank.liquid b/source/view/demo/pages/blank.liquid
similarity index 100%
rename from source/screens/demo/pages/blank.liquid
rename to source/view/demo/pages/blank.liquid
diff --git a/source/screens/demo/pages/default.liquid b/source/view/demo/pages/default.liquid
similarity index 100%
rename from source/screens/demo/pages/default.liquid
rename to source/view/demo/pages/default.liquid
diff --git a/source/screens/demo/pages/error/304.liquid b/source/view/demo/pages/error/304.liquid
similarity index 100%
rename from source/screens/demo/pages/error/304.liquid
rename to source/view/demo/pages/error/304.liquid
diff --git a/source/screens/demo/pages/error/400.liquid b/source/view/demo/pages/error/400.liquid
similarity index 100%
rename from source/screens/demo/pages/error/400.liquid
rename to source/view/demo/pages/error/400.liquid
diff --git a/source/screens/demo/pages/error/401.liquid b/source/view/demo/pages/error/401.liquid
similarity index 100%
rename from source/screens/demo/pages/error/401.liquid
rename to source/view/demo/pages/error/401.liquid
diff --git a/source/screens/demo/pages/error/403.liquid b/source/view/demo/pages/error/403.liquid
similarity index 100%
rename from source/screens/demo/pages/error/403.liquid
rename to source/view/demo/pages/error/403.liquid
diff --git a/source/screens/demo/pages/error/404.liquid b/source/view/demo/pages/error/404.liquid
similarity index 100%
rename from source/screens/demo/pages/error/404.liquid
rename to source/view/demo/pages/error/404.liquid
diff --git a/source/screens/demo/pages/error/408.liquid b/source/view/demo/pages/error/408.liquid
similarity index 100%
rename from source/screens/demo/pages/error/408.liquid
rename to source/view/demo/pages/error/408.liquid
diff --git a/source/screens/demo/pages/error/500.liquid b/source/view/demo/pages/error/500.liquid
similarity index 100%
rename from source/screens/demo/pages/error/500.liquid
rename to source/view/demo/pages/error/500.liquid
diff --git a/source/screens/demo/pages/error/503.liquid b/source/view/demo/pages/error/503.liquid
similarity index 100%
rename from source/screens/demo/pages/error/503.liquid
rename to source/view/demo/pages/error/503.liquid
diff --git a/source/screens/demo/pages/maintenance.liquid b/source/view/demo/pages/maintenance.liquid
similarity index 100%
rename from source/screens/demo/pages/maintenance.liquid
rename to source/view/demo/pages/maintenance.liquid
diff --git a/source/screens/demo/pages/pages.json b/source/view/demo/pages/pages.json
similarity index 100%
rename from source/screens/demo/pages/pages.json
rename to source/view/demo/pages/pages.json

From 0c16b43ec78870ca66214cd6712dd55cf2dcf8da Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 5 Apr 2026 14:20:14 +0200
Subject: [PATCH 2/2] feat: Update app and windows

- Move setAttributesAccordingToPosition to HippieTaskbar
- Use TimeDisplay inside HippieTaskbar
- Add readJsonFile and loadJson to app
- Initialize taskbar with config from data/windows.json
- Update jshint globals
---
 .jshintrc                                   | 18 ++++----
 source/code/hippie/app.js                   | 48 +++++++++++++--------
 source/code/windows.js                      | 33 +++++++++++---
 source/data/windows.json                    | 13 ++++++
 source/view/demo/examples/ui/windows.liquid | 38 ++++++++--------
 5 files changed, 102 insertions(+), 48 deletions(-)
 create mode 100644 source/data/windows.json

diff --git a/.jshintrc b/.jshintrc
index 24ef2fe..13fcfa1 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -14,20 +14,20 @@
 	"unused": false,
 	"browser": true,
 	"globals": {
-		"HIPPIE": false,
-		"hippie": true,
-		"viewHover": true,
-		"basicEase": true,
-		"debugOn": true,
-		"TimeDisplay": true,
 		"DateDisplay": true,
+		"HIPPIE": false,
+		"HippieTaskBar": true,
+		"TimeDisplay": true,
+		"basicEase": true,
+		"centerElementUnderCursor": false,
 		"checkButtonAndTarget": false,
+		"debugOn": true,
 		"getClosestEdgeToElement": false,
 		"getClosestEdgeToMouse": false,
-		"centerElementUnderCursor": false,
-		"setAttributesAccordingToPosition": false,
+		"hippie": true,
 		"randomIntFrom": false,
+		"readJsonFile": false,
 		"replaceLineBreaks": false,
-		"HippieTaskBar": true
+		"viewHover": true
 	}
 }
diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index cbf1533..60eeeef 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -394,20 +394,6 @@ 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.
@@ -556,9 +542,37 @@ function zeroFill(number, width) {
 // Retrieved 2026-03-08, License - CC BY-SA 4.0
 const delay = ms => new Promise(res => setTimeout(res, ms));
 
-class RandomPixelCanvas {
-	constructor(containerElement, options = {}) {
-		this.container = containerElement;
+async function readJsonFile(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+
+		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;
diff --git a/source/code/windows.js b/source/code/windows.js
index 01a3c7d..ca85af2 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -3,9 +3,10 @@ class HippieTaskBar {
 		this.element = element;
 		this.placeholder = placeholder;
 		this.date = null;
+		this.time = null;
 		this.isDragging = false;
 		this.barSize = '';
-		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
+		// TODO: Ergänzen und nicht ersetzen
 		this.options = options || {
 			direction: 0,
 			position: 'bottom',
@@ -13,7 +14,8 @@ class HippieTaskBar {
 				year: 'numeric',
 				month: '2-digit',
 				day: '2-digit'
-			}
+			},
+			time: {hour: '2-digit', minute: '2-digit'}
 		};
 
 		this.init();
@@ -25,11 +27,20 @@ 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';
-		this.element.querySelector('.clock').appendChild(dateElement);
+		timeElement.id = 'time';
 		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);
 	}
@@ -111,7 +122,7 @@ class HippieTaskBar {
 				}
 			};
 
-			setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
+			this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -142,6 +153,18 @@ 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: {
@@ -182,7 +205,7 @@ class HippieTaskBar {
 			}
 		};
 
-		setAttributesAccordingToPosition(this.element, position, attributes);
+		this.setAttributesAccordingToPosition(this.element, position, attributes);
 
 		switch (position) {
 			case 'right':
diff --git a/source/data/windows.json b/source/data/windows.json
new file mode 100644
index 0000000..565adaa
--- /dev/null
+++ b/source/data/windows.json
@@ -0,0 +1,13 @@
+{
+	"taskbar": {
+		"position": "top",
+		"color": "white",
+		"hover": {
+			"active": true,
+			"color": "#52bed1"
+		}
+	},
+	"window": {
+		"name": "Custom"
+	}
+}
\ No newline at end of file
diff --git a/source/view/demo/examples/ui/windows.liquid b/source/view/demo/examples/ui/windows.liquid
index 15d589b..443b276 100644
--- a/source/view/demo/examples/ui/windows.liquid
+++ b/source/view/demo/examples/ui/windows.liquid
@@ -29,10 +29,7 @@ tags:
 			<button><i class="bi bi-mic"></i></button>
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
-		<div class="clock">
-			<span id="time">##:##</span>
-			<br>
-		</div>
+		<div class="clock"></div>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
 		</nav>
@@ -63,20 +60,27 @@ 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');
 
-	const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
-	const timeFormat = {hour: '2-digit', minute: '2-digit'};
-	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
+	initializeApp();
 
-	document.getElementById('setPause').addEventListener('click', () => {
-		timeDisplay.pause();
-		console.info('Pause time');
-	});
-	document.getElementById('setPlay').addEventListener('click', () => {
-		timeDisplay.resume();
-		console.info('Resume time');
-	});
+	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();
+				console.info('Pause time');
+			});
+			document.getElementById('setPlay').addEventListener('click', () => {
+				taskBar.time.resume();
+				console.info('Resume time');
+			});
+		} catch (error) {
+			console.error('Failed to initialize app:', error);
+		}
+	}
 </script>
 {% endblock %}
\ No newline at end of file