From d100e582b973838dcb8d42dc977ef5742da108de Mon Sep 17 00:00:00 2001
From: Daniel <daniel.jank@protonmail.com>
Date: Sat, 14 Jan 2023 14:13:46 +0100
Subject: [PATCH] Configuration moved from HTML to JS

---
 index.html | 52 +-------------------------------------------
 js/dom.js  | 16 ++++++++++++++
 js/main.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 3 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/index.html b/index.html
index bd6850c..a5a20c8 100644
--- a/index.html
+++ b/index.html
@@ -46,57 +46,7 @@
 					<div class="icon">apps</div>
 					<div class="text">Services</div>
 				</div>
-				<div class="boxes">
-					<a class="box" href="caldav">
-						<img src="img/preview/caldav.png">
-						<div>
-							<div class="name">CalDav</div>
-							<div class="desc">Simple CalDav server for calendar sync between various devices.</div>
-						</div>
-					</a>
-					<a class="box" href="files">
-						<img src="img/preview/files.png">
-						<div>
-							<div class="name">Files</div>
-							<div class="desc">Fancy file manager for the web.</div>
-						</div>
-					</a>
-					<a class="box" href="gallery">
-						<img src="img/preview/gallery.png">
-						<div>
-							<div class="name">Gallery</div>
-							<div class="desc">Photo & video gallery syncable with multiple Android devices.</div>
-						</div>
-					</a>
-					<a class="box" href="git">
-						<img src="img/preview/git.png">
-						<div>
-							<div class="name">Git</div>
-							<div class="desc">Self-hosted, painless, secure place for your repositories.</div>
-						</div>
-					</a>
-					<a class="box" href="mail">
-						<img src="img/preview/mail.png">
-						<div>
-							<div class="name">E-Mail</div>
-							<div class="desc">Feature-rich, decentralized and secure E-Mail server.</div>
-						</div>
-					</a>
-					<a class="box" href="music">
-						<img src="img/preview/music.png">
-						<div>
-							<div class="name">Music</div>
-							<div class="desc">Beautiful, moody music streaming app.</div>
-						</div>
-					</a>
-					<a class="box" href="notes">
-						<img src="img/preview/notes.png">
-						<div>
-							<div class="name">Notes</div>
-							<div class="desc">Sweet & lightweight app for taking notes.</div>
-						</div>
-					</a>
-				</div>
+				<div class="boxes" id="applist"></div>
 			</div>
 		</div>
 		<div class="page hidden" id="page-about">
diff --git a/js/dom.js b/js/dom.js
index 0183d02..11f958a 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -13,4 +13,20 @@ function load_img(img) {
 function get_background() {
 	let bg = get("background");
 	return bg.children[1-bg.classList.contains("dark")];
+}
+function safe_text(text) {
+	text = text.replaceAll("<", "&lt;");
+	text = text.replaceAll(">", "&gt;");
+	text = text.replaceAll("&", "&amp;");
+	return text;
+}
+function mk_entry(app) {
+	return `
+		<a class="box" href="${safe_text(app["href"])}">
+			<img src="${safe_text(app["icon"])}">
+			<div>
+				<div class="name">${safe_text(app["name"])}</div>
+				<div class="desc">${safe_text(app["desc"])}</div>
+			</div>
+		</a>`;
 }
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 5b81269..7bee166 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,14 +1,60 @@
-var CONFIG = {
+var UI = {
 	"dark_mode": false
 }
+var SERVICES = [
+	{
+		"name": "CalDav",
+		"desc": "Simple CalDav server for calendar sync between various devices.",
+		"href": "caldav",
+		"icon": "img/preview/caldav.png"
+	},
+	{
+		"name": "Files",
+		"desc": "Fancy file manager for the web.",
+		"href": "files",
+		"icon": "img/preview/files.png"
+	},
+	{
+		"name": "Gallery",
+		"desc": "Photo & video gallery syncable with multiple Android devices.",
+		"href": "gallery",
+		"icon": "img/preview/gallery.png"
+	},
+	{
+		"name": "Git",
+		"desc": "Self-hosted, painless, secure place for your repositories.",
+		"href": "git",
+		"icon": "img/preview/git.png"
+	},
+	{
+		"name": "E-Mail",
+		"desc": "Feature-rich, decentralized and secure E-Mail server.",
+		"href": "mail",
+		"icon": "img/preview/mail.png"
+	},
+	{
+		"name": "Music",
+		"desc": "Beautiful, moody music streaming app.",
+		"href": "music",
+		"icon": "img/preview/music.png"
+	},
+	{
+		"name": "Notes",
+		"desc": "Sweet & lightweight app for taking notes.",
+		"href": "notes",
+		"icon": "img/preview/notes.png"
+	}
+]
 
 function config(key, value) {
+	let def = UI[key];
+	let val = localStorage.getItem(key);
+	if (def == value && !val) return;
 	if (value !== undefined) {
 		localStorage.setItem(key, value);
-		return value;
+		return;
 	}
-	let val = localStorage.getItem(key);
-	if (val === null) val = CONFIG.dark_mode;
+	if (!val) val = UI[key].toString();
 	return val;
 }
 
@@ -17,6 +63,7 @@ function onload() {
 		btn.onclick = back;
 	});
 	switch_theme(config("dark_mode") == "true");
+	load_apps();
 	setTimeout(() => {
 		back();
 		document.body.classList.remove("init");
@@ -54,4 +101,13 @@ function switch_theme(value) {
 		bg_box.remove("dark");
 		get_background().src = "img/background.jpg";
 	}
+}
+
+function load_apps() {
+	let final = "";
+	for (let i = 0; i < SERVICES.length; i++) {
+		let app = mk_entry(SERVICES[i]);
+		final += app;
+	}
+	get("applist").innerHTML = final;
 }
\ No newline at end of file