Refactoring final

9 files changed, 177 insertions, 112 deletions

diff --git a/src/js/ui/sections/aboutSection.js b/src/js/ui/sections/aboutSection.js
index 3ab4d1e..902783d 100644
--- a/src/js/ui/sections/aboutSection.js
+++ b/src/js/ui/sections/aboutSection.js
@@ -9,30 +9,35 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function aboutSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"About"}
+        ]
+    };
     var aboutSection = {
         element: "div",
         hidden: true,
         id:"about-section",
-        innerHTML: `
-            <div class="where-am-i">
-                <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
-                <span>&gt;</span>
-                <h2>About</h2>
-            </div>
-            <p>Arching Kaos is a project about radio, music, communications and decentralization.</p>
-            <p>On site, you can listen to the latest mixes of music (menu entry "Mixtapes"), read latest news ("News") of the network and chat (you guessed it, "Chat" menu entry).</p>
-            <p>You can see the zchains appearing in "zchain" and logs of the process on "Logs"</p>
-            <p>Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible.</p>
-            <p>Furthermore, if you are using Freighter extension you can additionally see:</p>
-            <ol>
-                <li>Your balances on your wallet</li>
-                <li>Your configuration IPNS address (if any)</li>
-                <li>Your Arching Kaos configuration (if any)</li>
-                <li>Your zchain (...)</li>
-                <li>Your posted newsfeed (...)</li>
-            </ol>
-            <p>Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin.</p>
-                    `
+        innerHTML: [
+            whereAmI,
+            { element: "p", innerText:"Arching Kaos is a project about radio, music, communications and decentralization."},
+            { element: "p", innerText:'On site, you can listen to the latest mixes of music (menu entry "Mixtapes"), read latest news ("News") of the network and chat (you guessed it, "Chat" menu entry).'},
+            { element: "p", innerText:'You can see the zchains appearing in "zchain" and logs of the process on "Logs"'},
+            { element: "p", innerText:"Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible."},
+            { element: "p", innerText:"Furthermore, if you are using Freighter extension you can additionally see:"},
+            { element: "ol", innerHTML: [
+                { element:"li", innerText:"Your balances on your wallet"},
+                { element:"li", innerText:"Your configuration IPNS address (if any)"},
+                { element:"li", innerText:"Your Arching Kaos configuration (if any)"},
+                { element:"li", innerText:"Your zchain (...)"},
+                { element:"li", innerText:"Your posted newsfeed (...)"}
+            ]},
+            { element:"p", innerText:"Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin."}
+                    ]
     };
 
     makeElement(aboutSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/commentsSection.js b/src/js/ui/sections/commentsSection.js
index 00ec8fe..ba190ac 100644
--- a/src/js/ui/sections/commentsSection.js
+++ b/src/js/ui/sections/commentsSection.js
@@ -26,7 +26,6 @@ export function commentsSection()
             { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"}
         ]
     };
-
     makeElement(commentsSection, document.querySelector('.main'));
 }
 // @license-end
diff --git a/src/js/ui/sections/filesSection.js b/src/js/ui/sections/filesSection.js
index 7a65187..994c37e 100644
--- a/src/js/ui/sections/filesSection.js
+++ b/src/js/ui/sections/filesSection.js
@@ -9,19 +9,24 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function filesSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Modules"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Files"}
+        ]
+    };
     var filesSection = {
         element: 'div',
         id: "files-section",
-        innerHTML: `
-        <div class="where-am-i">
-            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
-            <span>&gt;</span>
-            <h2>Modules</h2>
-            <span>&gt;</span>
-            <h2>Files</h2>
-        </div>
-        <em id="files-sec-not-found">No data found (yet?)!</em>
-                `
+        innerHTML: [
+            whereAmI,
+            { element: "em", id:"files-sec-not-found", innerText: "No data found (yet?)!"}
+        ]
     };
 
     makeElement(filesSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/mixtapesSection.js b/src/js/ui/sections/mixtapesSection.js
index 6710c11..a450914 100644
--- a/src/js/ui/sections/mixtapesSection.js
+++ b/src/js/ui/sections/mixtapesSection.js
@@ -9,21 +9,23 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function mixtapesSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Mixtapes"}
+        ]
+    };
     var mixtapesSection = {
         element: "div",
         id: "mixtapes-section",
-        innerHTML: `
-        <div class="where-am-i">
-            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
-            <span>&gt;</span>
-            <h2>Modules</h2>
-            <span>&gt;</span>
-            <h2>Mixtapes</h2>
-        </div>
-        <em id="mixtapes-sec-not-found">No data found (yet?)!</em>
-                `
+        innerHTML: [
+            whereAmI,
+            { element: "em", id:"mixtapes-sec-not-found", innerText:"No data found (yet?)!"}
+        ]
     };
-
     makeElement(mixtapesSection, document.querySelector('.main'));
 }
 // @license-end
diff --git a/src/js/ui/sections/newsSection.js b/src/js/ui/sections/newsSection.js
index 51cb0de..6875dd6 100644
--- a/src/js/ui/sections/newsSection.js
+++ b/src/js/ui/sections/newsSection.js
@@ -9,21 +9,25 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function newsSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Modules"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"News"}
+        ]
+    };
     var newsSection = {
         element: 'div',
         id: 'news-section',
         innerHTML: [
-            { element: "div", className: "where-am-i", innerHTML: `
-            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
-            <span>&gt;</span>
-            <h2>Modules</h2>
-            <span>&gt;</span>
-            <h2>News</h2>
-            ` },
+            whereAmI,
             { element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"}
         ]
     };
-
     makeElement(newsSection, document.querySelector('.main'));
 }
 // @license-end
diff --git a/src/js/ui/sections/statsSection.js b/src/js/ui/sections/statsSection.js
index 8d99448..115cd68 100644
--- a/src/js/ui/sections/statsSection.js
+++ b/src/js/ui/sections/statsSection.js
@@ -9,32 +9,36 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function statsSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Explore"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Stats"}
+        ]
+    };
     var statsSection = {
         element: 'div',
         id: "stats-section",
         innerHTML: [
-            { element: "div", className: "where-am-i", innerHTML: `
-            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
-            <span>&gt;</span>
-            <h2>Explore</h2>
-            <span>&gt;</span>
-            <h2>Stats</h2>
-        `},
-            { element: "div", className: "available-networks", innerHTML: `
-            <h3>Networks</h3>
-            <details class="stellar-network">
-                <summary>Stellar</summary>
-            </details>
-            <details class="aknet-network">
-                <summary>Arching Kaos Experimental Instance</summary>
-            </details>
-            <details class="aknet-sblocks">
-                <summary>Arching Kaos SBlocks</summary>
-            </details>
-        `}
+            whereAmI,
+            { element: "div", className: "available-networks", innerHTML: [
+                { element: "h3", innerText: "Networks" },
+                { element: "details", className: "stellar-network", innerHTML:[
+                    { element:"summary", innerText:"Stellar"}
+                ]},
+                { element: "details", className: "aknet-network", innerHTML:[
+                    { element:"summary", innerText:"Arching Kaos Experimental Instance"}
+                ]},
+                { element: "details", className: "aknet-sblocks", innerHTML:[
+                    { element:"summary", innerText:"Arching Kaos SBlocks"}
+                ]}
+            ]}
         ]
     };
-
     makeElement(statsSection, document.querySelector('.main'));
 }
 // @license-end
diff --git a/src/js/ui/sections/stellarDataConfigSection.js b/src/js/ui/sections/stellarDataConfigSection.js
index 8deff87..268051f 100644
--- a/src/js/ui/sections/stellarDataConfigSection.js
+++ b/src/js/ui/sections/stellarDataConfigSection.js
@@ -9,21 +9,25 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function stellarDataConfigSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Stellar"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Data"}
+        ]
+    };
     var stellarDataConfigSection = {
         element: "div",
         id: "stellar-data-config",
-        innerHTML: `
-        <div class="where-am-i">
-            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
-            <span>&gt;</span>
-            <h2>Stellar</h2>
-            <span>&gt;</span>
-            <h2>Data</h2>
-        </div>
-        <em id="stellar-data-config-not-found">No data found (yet?)!</em>
-        `
+        innerHTML: [
+            whereAmI,
+            { element: "em", id:"stellar-data-config-not-found", innerText:"No data found (yet?)!" }
+        ]
     };
-
     makeElement(stellarDataConfigSection, document.querySelector('.main'));
 }
 // @license-end
diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js
index c382050..0a97616 100644
--- a/src/js/ui/sections/welcomeSection.js
+++ b/src/js/ui/sections/welcomeSection.js
@@ -8,14 +8,13 @@
 import { makeElement } from "../../arching-kaos-generator.js";
 
 var whereAmI = {
-    element : "div",
-    className:"where-am-i",
-    innerHTML: `
-
-            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
-            <span>&gt;</span>
-            <h2>Home</h2>
-        `
+    element: "div",
+    className: "where-am-i",
+    innerHTML: [
+        { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+        { element: "span", innerText:">"},
+        { element: "h2", innerText:"Home"}
+    ]
 };
 
 var greeting = {
@@ -26,13 +25,43 @@ var greeting = {
 var homeGrid = {
     element: "div",
     id: "home-grid",
-    innerHTML: `
-                <button class="menu-clickable" id="#/mixtapes-section" onclick="menusel(this)" style="background-image: url(img/mixtapes-logo.png); background-repeat: round;"></button>
-                <button class="menu-clickable" id="#/news-section" onclick="menusel(this)" style="background-image: url(img/news-logo.png); background-repeat: round;"></button>
-                <button class="menu-clickable" id="#/chat-section" onclick="menusel(this)" style="background-image: url(img/chat-logo.png); background-repeat: round;"></button>
-                <button class="menu-clickable" id="#/radio-section" onclick="menusel(this)" style="background-image: url(img/radio-logo.png); background-repeat: round; background-size: cover;"></button>
-                <button class="menu-clickable" id="#/stats-section" onclick="menusel(this)">Stats</button>
-            `
+    innerHTML: [
+        {
+            element:"button",
+            className:"menu-clickable",
+            id:"#/mixtapes-section",
+            onclick:"menusel(this)",
+            style:"background-image: url(img/mixtapes-logo.png); background-repeat: round;"
+        },
+        {
+            element:"button",
+            className:"menu-clickable",
+            id:"#/news-section",
+            onclick:"menusel(this)",
+            style:"background-image: url(img/news-logo.png); background-repeat: round;"
+        },
+        {
+            element:"button",
+            className:"menu-clickable",
+            id:"#/chat-section",
+            onclick:"menusel(this)",
+            style:"background-image: url(img/chat-logo.png); background-repeat: round;"
+        },
+        {
+            element:"button",
+            className:"menu-clickable",
+            id:"#/radio-section",
+            onclick:"menusel(this)",
+            style:"background-image: url(img/radio-logo.png); background-repeat: round; background-size: cover;"
+        },
+        {
+            element:"button",
+            className:"menu-clickable",
+            id:"#/stats-section",
+            onclick:"menusel(this)",
+            innerText:"Stats"
+        }
+    ]
 };
 
 var renderTitle = {
@@ -43,10 +72,20 @@ var renderTitle = {
 var renderForm = {
     element: "div",
     style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;",
-    innerHTML: `
-        <input id="search-field" type="text" name="search" placeholder="Enter a zblock hash"/>
-        <button onclick="seekZblock(this.parentElement.querySelector('#search-field').value, ['search', false])">Render</button>
-    `
+    innerHTML: [
+        {
+            element: "input",
+            id:"search-field",
+            type:"text",
+            name:"search",
+            placeholder:"Enter a zblock hash"
+        },
+        {
+            element:"button",
+            onclick:"seekZblock(this.parentElement.querySelector('#search-field').value, ['search', false])",
+            innerText:"Render"
+        }
+    ]
 };
 
 export function welcomeSection()
@@ -118,7 +157,6 @@ export function welcomeSection()
                     }
                 ]
             },
-
             {
                 element: "details",
                 id: "logs-area",
diff --git a/src/js/ui/sections/zchainDataSection.js b/src/js/ui/sections/zchainDataSection.js
index 95f8518..7bedffa 100644
--- a/src/js/ui/sections/zchainDataSection.js
+++ b/src/js/ui/sections/zchainDataSection.js
@@ -9,21 +9,25 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function zchainDataSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Explore"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"zchains"}
+        ]
+    };
     var zchainDataSection = {
         element: "div",
         id:"zchain-data-section",
-        innerHTML: `
-                    <div class="where-am-i">
-                        <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
-                        <span>&gt;</span>
-                        <h2>Explore</h2>
-                        <span>&gt;</span>
-                        <h2>zchains</h2>
-                    </div>
-                    <em id="zchain-data-sec-not-found">No data found (yet?)!</em>
-                    `
+        innerHTML: [
+            whereAmI,
+            { element: "em", id:"zchain-data-sec-not-found", innerText:"No data found (yet?)!" }
+        ]
     };
-
     makeElement(zchainDataSection, document.querySelector('.main'));
 }
 // @license-end