Major refactoring

24 files changed, 924 insertions, 703 deletions

diff --git a/src/index.html b/src/index.html
index 62e12d3..e4448b5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,167 +25,14 @@
                 <div id="menu-placeholder"></div>
             </div>
             <div class="main">
-                <div id="welcome-section">
-                    <h2>🏡 Home</h2>
-                    <p>Welcome to Arching Kaos project.</p>
-                    <div id="home-grid">
-                        <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>
-                    </div>
-                    <h3>Render explicit zblock</h3>
-                    <div style="
-                             padding: 1vh 1vw;
-                             display: flex;
-                             flex-direction: row;
-                             align-items: center;
-                             gap: 10px;"
-                        >
-                        <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>
-                    </div>
-                    <div class="results-area">
-                        <h3>Results</h3>
-                    </div>
-                    <h3>Manual scan</h3>
-                    <div style="
-                             display: flex;
-                             flex-direction: row;
-                             justify-content: start;
-                             align-items: center;
-                             flex-wrap: wrap;
-                             gap: 5px;"
-                        >
-                        <button onclick="scanStellarNetworkForPeers()">Check Stellar Network</button>
-                        <button onclick="checkLocalNodeInfo()">Check local Node</button>
-                        <button onclick="checkLocalPeers()">Check local Peers</button>
-                        <button onclick="checkLocalSchain()">Check Local Schain</button>
-                    </div>
-                    <div class="dialog">
-                        <h3>Progress</h3>
-                        <progress id="total-progress"></progress>
-                        <progress id="http-progress"></progress>
-                        <pre id="current-log-message"></pre>
-                    </div>
-                    <div>
-                        <details id="logs-area">
-                            <summary>Logs (click to expand)</summary>
-                            <div id="logs-area-element">
-                            </div>
-                        </details>
-                    </div>
-                </div>
-                <div id="about-section">
-                    <h2>ℹ️ About</h2>
-                    <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>
-                </div>
-                <div id="stellar-balances">
-                    <h2>Balances</h2>
-                    <em id="stellar-balances-not-found">No data found (yet?)!</em>
-                    <table id="stellar-balances-table"></table>
-                </div>
-                <div id="stellar-data-config">
-                    <h2>Data</h2>
-                    <em id="stellar-data-config-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="arching-kaos-node-info">
-                    <h2>Node Info</h2>
-                    <em id="node-info-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="stellar-section">
-                    <h2>Stellar dashboard</h2>
-                    <button class="sub-input" id="stellar-freigher-connect-address-button" onclick="connect()" >Connect with Stellar address</button>
-                </div>
-                <div id="mypage-section">
-                    <h2>My page</h2>
-                    <button id="stellar-freigher-connect-address-button" onclick="connect()">Connect with Freighter wallet</button>
-                    <div id="my-news">
-                        <h3>My news</h3>
-                        <em id="my-news-sec-not-found">No data found (yet?)!</em>
-                    </div>
-                    <div id="my-mixtapes">
-                        <h3>My mixtapes</h3>
-                        <em id="my-mixtapes-sec-not-found">No data found (yet?)!</em>
-                    </div>
-                    <div id="my-zchain">
-                        <h3>My zchain</h3>
-                        <em id="my-zchain-sec-not-found">No data found (yet?)!</em>
-                    </div>
-                </div>
-                <div id="zchain-data-section">
-                    <h2>zchains</h2>
-                    <em id="zchain-data-sec-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="news-section">
-                    <h2>News</h2>
-                    <em id="news-sec-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="comments-section">
-                    <h2>Comments</h2>
-                    <em id="comments-sec-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="mixtapes-section">
-                    <h2>Mixtapes</h2>
-                    <em id="mixtapes-sec-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="files-section">
-                    <h2>Files</h2>
-                    <em id="files-sec-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="settings-section">
-                    <h2>🔧 Settings</h2>
-                </div>
-                <div id="chat-section" style="height: 100%;">
-                    <button style="position: fixed;" onclick="refreshChat()">Refresh</button>
-                    <iframe id="chat-iframe" src="https://irc.arching-kaos.net" style="width: 100%; height: 100%;"></iframe>
-                </div>
-                <div id="radio-section" style="height: 100%;">
-                    <button style="position: fixed;" onclick="refreshRadio()">Refresh</button>
-                    <iframe id="radio-iframe" src="https://radio.arching-kaos.com" style="width: 100%; height: 100%;"></iframe>
-                </div>
-                <div id="stats-section">
-                    <h2>Stats</h2>
-                    <div class="available-networks">
-                        <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>
-                    </div>
-                </div>
-                <div id="not-found-section">
-                    <h2>Not found</h2>
-                    <p>"Soft" 404</p>
-                    <p>Please select an entry from the menu</p>
-                </div>
             </div>
             <div class="footer">
             </div>
         </div>
-        <script src="./js/arching-kaos-generator.js"></script>
         <script src="./external/stellarSdk.js"></script>
         <script src="./external/purify.min.js"></script>
+<!--        <script src="./js/arching-kaos-generator.js"></script>
         <script src="./js/environment-setup.js"></script>
-        <script src="./js/arching-kaos-web-ui-settings.js"></script>
         <script src="./js/url-generators.js"></script>
         <script src="./js/arching-kaos-fetch.js"></script>
         <script src="./js/arching-kaos-log.js"></script>
@@ -196,11 +43,10 @@
         <script src="./js/arching-kaos-modules-references.js"></script>
         <script src="./js/arching-kaos-modules-comments.js"></script>
         <script src="./js/arching-kaos-tools.js"></script>
-        <script src="./js/arching-kaos-stellar-network.js"></script>
         <script src="./js/arching-kaos-decentralized-radio.js"></script>
-        <script src="./js/utils.js"></script>
-        <script src="./js/footer.js"></script>
-        <script src="./js/app.js"></script>
+        <script src="./js/arching-kaos-stellar-network.js"></script>
+        <script src="./js/utils.js"></script> -->
+        <script type="module" src="./js/app.js"></script>
     </body>
     <!--
         <script>
@@ -216,5 +62,4 @@
         </script>
         -->
 </html>
-
 <!-- vim: tabstop=4 shiftwidth=4 expandtab softtabstop=4
diff --git a/src/js/app.js b/src/js/app.js
index b84be92..fd92c87 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -10,40 +10,96 @@
  * TODO: Figure out why it doesn't work in fullscreen App mode (android)
  *
  */
-body.width = window.innerWidth;
-body.height = window.innerHeight;
-pageLayout.width = window.innerWidth;
-pageLayout.height = window.innerHeight;
-mainContainer.style.display = 'block';
-window.innerWidth <= 850 ? isMobile = true : isMobile = false;
+import { makeElement } from "./arching-kaos-generator.js";
+import { locationHashOnChange } from "./arching-kaos-spa-router.js";
+import { doubleFloorMenu, menuinit, menusel, stellarSubToggle, modulesSubToggle, exploreSubToggle } from './ui/menu.js';
+import { mainLayoutSpawn } from "./ui/mainLayout.js";
+import { scanStellarNetworkForPeers } from "./arching-kaos-stellar-network.js";
 
-function onWindowResize()
+window.menusel = menusel;
+window.locationHashOnChange = locationHashOnChange;
+window.stellarSubToggle = stellarSubToggle;
+window.modulesSubToggle = modulesSubToggle;
+window.exploreSubToggle = exploreSubToggle;
+window.scanStellarNetworkForPeers = scanStellarNetworkForPeers;
+
+export function body()
 {
-    body.width = window.innerWidth;
-    body.height = window.innerHeight;
-    pageLayout.width = window.innerWidth;
-    pageLayout.height = window.innerHeight;
-    window.innerWidth <= 850 ? isMobile = true : isMobile = false;
-    isMobile ? doubleFloorMenu.style.display = 'none':doubleFloorMenu.style.display = 'flex';
+    return document.querySelector('body');
+}
+
+export function pageLayout()
+{
+    return document.querySelector('.page-layout');
 }
-window.addEventListener('resize', onWindowResize, false);
 
+export function mainContainer()
+{
+    return document.querySelector('.main');
+}
 
-progressPlaceholder.value = '0';
+window.isMobile = false;
 
-progressPlaceholder.max++;
+export function aknet()
+{
+    return document.querySelector('.aknet-network')
+}
+
+export function resultsArea()
+{
+    return document.querySelector('.results-area')
+}
+
+export function progressPlaceholder()
+{
+    return document.querySelector('#total-progress');
+}
+
+export function httpProgressPlaceholder()
+{
+    return document.querySelector('#http-progress');
+}
 
-if ( settings.stellar.scan )
+export function currentLogMessageElement()
 {
-    scanStellarNetworkForPeers();
+    return document.querySelector('#current-log-message');
 }
 
-if ( settings.ak.scan )
+export function logsAreaElement()
 {
-    ringlocalbell();
-    setInterval(ringlocalbell, 10*60*1000);
+    return document.querySelector("#logs-area-element");
 }
 
+export function radio()
+{
+    return document.querySelector("#radio-player");
+}
+
+export function radioButton()
+{
+    return document.querySelector("#radio-button-controller");
+}
+
+
+body().width = window.innerWidth;
+body().height = window.innerHeight;
+pageLayout().width = window.innerWidth;
+pageLayout().height = window.innerHeight;
+mainContainer().style.display = 'block';
+window.innerWidth <= 850 ? window.isMobile = true : window.isMobile = false;
+
+function onWindowResize()
+{
+    body.width = window.innerWidth;
+    body.height = window.innerHeight;
+    pageLayout.width = window.innerWidth;
+    pageLayout.height = window.innerHeight;
+    window.innerWidth <= 850 ? window.isMobile = true : window.isMobile = false;
+    window.isMobile ? doubleFloorMenu().style.display = 'none': doubleFloorMenu().style.display = 'flex';
+}
+window.addEventListener('resize', onWindowResize, false);
+
+
 //scanStellarNetworkForPeers();
 // setInterval(scanStellarNetworkForPeers, 60000);
 
@@ -53,30 +109,24 @@ var root = {
     html: document.querySelector('html')
 };
 
-var scripts = [
-    {
-        element:"script",
-        src:"./js/ui/mainLayout.js"
-    }
-];
-//,
-//    {
-//        element:"script",
-//        src:"./js/page-navigation.js"
-//    },
-//    {
-//        element:"script",
-//        src:"./js/page-projects.js"
-//    },
-//    {
-//        element:"script",
-//        src:"./js/menu.js"
-//    }
-//];
-
-for ( var i = 0; i < scripts.length; i++ )
-{
-    makeElement(scripts[i], root.body);
-}
+// var scripts = [
+//     {
+//         element:"script",
+//         type: "module",
+//         src:"./js/ui/mainLayout.js"
+//     }
+// ];
+//
+// for ( var i = 0; i < scripts.length; i++ )
+// {
+//     makeElement(scripts[i], root.body);
+// }
+
+mainLayoutSpawn();
+// And call
+menuinit();
+locationHashOnChange();
+
+window.isMobile ? doubleFloorMenu().style.display = 'none': doubleFloorMenu().style.display = 'flex';
 // vim: tabstop=4 shiftwidth=4 expandtab softtabstop=4
 // @license-end
diff --git a/src/js/arching-kaos-fetch.js b/src/js/arching-kaos-fetch.js
index 523baff..15394b2 100644
--- a/src/js/arching-kaos-fetch.js
+++ b/src/js/arching-kaos-fetch.js
@@ -5,7 +5,10 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
-function archingKaosFetchJSON( url, callback, params ){
+import { archingKaosLog } from "./arching-kaos-log.js";
+import { httpProgressPlaceholder, progressPlaceholder } from "./app.js";
+
+export function archingKaosFetchJSON( url, callback, params ){
     const request = new XMLHttpRequest();
     request.addEventListener("load", ()=>{
         var json = JSON.parse(request.response);
@@ -16,38 +19,49 @@ function archingKaosFetchJSON( url, callback, params ){
         }
     });
     request.addEventListener("error", ()=>{
-        console.log("An error occured.");
+        // console.log("An error occured.");
     });
     request.addEventListener("progress", (event)=>{
-        if (event.lengthComputable && progressPlaceholder){
-            httpProgressPlaceholder.value = (event.loaded / event.total) * 100;
+        if (event.lengthComputable && progressPlaceholder()){
+            httpProgressPlaceholder().value = (event.loaded / event.total) * 100;
         } else {
-            httpProgressPlaceholder.value = 0;
-            console.log("Supposingly zeroed progressPlaceholder");
+            httpProgressPlaceholder().value = 0;
+            // console.log("Supposingly zeroed progressPlaceholder");
         }
     });
     request.addEventListener("abort", ()=>{
-        console.log("Request aborted.");
+        // console.log("Request aborted.");
     });
     request.open("GET", url);
     request.send();
 
 }
 
-async function archingKaosFetchText( url, callback ){
-    return fetch(url, {
-        method:'GET',
-        headers:{
-            Accept: 'application/json'
+export async function archingKaosFetchText( url, callback, params ){
+    const request = new XMLHttpRequest();
+    request.addEventListener("load", ()=>{
+        var text = request.response;
+        if(request.status !== 404){
+            callback(text, params);
+        } else {
+            archingKaosLog(`ERROR ${request.status} while loading ${url}`);
         }
-    }).then(response=>{
-        if(response.ok){
-            response.text().then(text=>{
-                return callback(text);
-            })
+    });
+    request.addEventListener("error", ()=>{
+        // console.log("An error occured.");
+    });
+    request.addEventListener("progress", (event)=>{
+        if (event.lengthComputable && progressPlaceholder()){
+            httpProgressPlaceholder().value = (event.loaded / event.total) * 100;
         } else {
-            console.log(e);
+            httpProgressPlaceholder.value = 0;
+            // console.log("Supposingly zeroed progressPlaceholder");
         }
-    })
+    });
+    request.addEventListener("abort", ()=>{
+        // console.log("Request aborted.");
+    });
+    request.open("GET", url);
+    request.send();
 }
 // @license-end
diff --git a/src/js/arching-kaos-generator.js b/src/js/arching-kaos-generator.js
index 9c80954..9a0398d 100644
--- a/src/js/arching-kaos-generator.js
+++ b/src/js/arching-kaos-generator.js
@@ -5,7 +5,7 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
-function makeElement(obj, attachTo)
+export function makeElement(obj, attachTo)
 {
     if (obj.element !== 'head' && obj.element !== 'body' )
     {
@@ -50,7 +50,7 @@ function makeElement(obj, attachTo)
     attachTo.appendChild(temp);
 }
 
-function makeUpSite(tree, root){
+export function makeUpSite(tree, root){
     if ( tree !== undefined && Array.isArray(tree) )
     {
         for (var i = 0; i < tree.length; i++)
diff --git a/src/js/arching-kaos-log.js b/src/js/arching-kaos-log.js
index 1f79994..e348ee6 100644
--- a/src/js/arching-kaos-log.js
+++ b/src/js/arching-kaos-log.js
@@ -5,14 +5,16 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
+import { currentLogMessageElement, logsAreaElement } from "./app.js";
+import { makeElement } from "./arching-kaos-generator.js";
 
-function archingKaosLog(message){
+export function archingKaosLog(message){
     var lts = new Date(Date.now());
     var sta = {
         element:"div",
         innerText: lts.toISOString() + " " + message
     };
-    currentLogMessageElement.innerText = sta.innerText;
-    makeElement(sta, logsAreaElement);
+    currentLogMessageElement().innerText = sta.innerText;
+    makeElement(sta, logsAreaElement());
 }
 // @license-end
diff --git a/src/js/arching-kaos-modules-comments.js b/src/js/arching-kaos-modules-comments.js
index aad581f..8db1b57 100644
--- a/src/js/arching-kaos-modules-comments.js
+++ b/src/js/arching-kaos-modules-comments.js
@@ -5,32 +5,37 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
-function akModuleComments(zblockIPFSHash, blockObject, json){
+import { makeElement } from "./arching-kaos-generator.js";
+import {
+    getFullText,
+    getNicknameAssossiatedWithGPG
+} from "./arching-kaos-tools.js";
+import { archingKaosFetchText } from "./arching-kaos-fetch.js";
+import { getIPFSURL } from "./url-generators.js";
+
+export function akModuleComments(zblockIPFSHash, blockObject, json){
     if (!document.querySelector('#comment-'+zblockIPFSHash)){
         var divs = document.querySelector('#comments-section');
         var art = {
             element:"article",
-            id: 'comment-'+zblockIPFSHash
+            id: `comment-${zblockIPFSHash}`,
+            innerHTML: [
+                {
+                    element:"p",
+                    innerText:"Published: " + new Date(json.datetime*1000)
+                },
+                {
+                    element:"p",
+                    innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg)
+                }
+            ]
         };
         makeElement(art, divs);
-        art = document.querySelector('#comment-'+zblockIPFSHash);
-        if(json.datetime){
-            var small = {
-                element:"p",
-                innerText:"Published: " + new Date(json.datetime*1000)
-            };
-            makeElement(small, art);
-        }
-        var small = {
-            element:"p",
-            innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg)
-        };
-        makeElement(small, art);
         if(json.ipfs){
-            getipfstext(json.ipfs,art.id);
+            archingKaosFetchText(getIPFSURL(json.ipfs), getFullText, [`#comment-${zblockIPFSHash}`]);
         }
         if (document.querySelector("#comments-sec-not-found")) document.querySelector("#comments-sec-not-found").hidden=true;
-        makeElement(document.createElement("hr"), divs);
+        makeElement({element:"hr"}, divs);
     }
 }
 // @license-end
diff --git a/src/js/arching-kaos-modules-files.js b/src/js/arching-kaos-modules-files.js
index b566226..fb325aa 100644
--- a/src/js/arching-kaos-modules-files.js
+++ b/src/js/arching-kaos-modules-files.js
@@ -5,7 +5,10 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
-function akModuleFiles(zblockIPFSHash, blockObject, json){
+import { getNicknameAssossiatedWithGPG } from "./arching-kaos-tools.js";
+import { makeElement } from "./arching-kaos-generator.js";
+
+export function akModuleFiles(zblockIPFSHash, blockObject, json){
     if (!document.querySelector('#file-'+zblockIPFSHash)){
         var divs = document.querySelector('#files-section');
         var art = {
diff --git a/src/js/arching-kaos-modules-mixtapes.js b/src/js/arching-kaos-modules-mixtapes.js
index ac23ed4..bf11d9d 100644
--- a/src/js/arching-kaos-modules-mixtapes.js
+++ b/src/js/arching-kaos-modules-mixtapes.js
@@ -5,8 +5,11 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
+import { makeElement } from "./arching-kaos-generator.js";
+import { getIPFSURL } from "./url-generators.js";
+import { addMixtapeID, setMixtape, getMixtapes } from "./environment-setup.js";
 
-function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){
+export function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){
     if(!document.querySelector('#mixtape-'+zblockIPFSHash)){
         var divs = document.querySelector('#mixtapes-section');
         var art = {
@@ -37,10 +40,10 @@ function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){
         makeElement(art, divs);
         var audio = document.querySelector('#mixtape-player-'+zblockIPFSHash);
         audio.setAttribute('controls','');
-        mixtapeIds.push('mixtape-player-'+zblockIPFSHash);
+        addMixtapeID(zblockIPFSHash);
         audio.addEventListener( "loadedmetadata", ()=>{
-            if ( mixtapes[zblockIPFSHash] === undefined ){
-                mixtapes[zblockIPFSHash]={
+            if ( getMixtapes()[zblockIPFSHash] === undefined ){
+                setMixtape(zblockIPFSHash, {
                     zblock:zblockIPFSHash,
                     block:zblockObject.block,
                     block_signature:zblockObject.block_signature,
@@ -52,7 +55,7 @@ function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){
                     gpg:blockObject.gpg,
                     timestamp:blockObject.timestamp,
                     audioDuration:audio.duration
-                };
+                });
             }
             /* console.log(
                                     zblockIPFSHash+"'s duration is: "+
diff --git a/src/js/arching-kaos-modules-news.js b/src/js/arching-kaos-modules-news.js
index d1ebc23..49dfb0a 100644
--- a/src/js/arching-kaos-modules-news.js
+++ b/src/js/arching-kaos-modules-news.js
@@ -5,8 +5,16 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
+import { makeElement } from "./arching-kaos-generator.js";
+import { archingKaosFetchText } from "./arching-kaos-fetch.js";
+import {
+    getNicknameAssossiatedWithGPG,
+    getFullText,
+    getPreviewText
+} from "./arching-kaos-tools.js";
+import { getIPFSURL } from "./url-generators.js";
 
-function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){
+export function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){
     if (!document.querySelector('#news-'+zblockIPFSHash)){
         var newsSectionDivElement = document.querySelector('#news-section');
         var articleContainerElement = {
@@ -14,7 +22,9 @@ function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){
             id:`news-${zblockIPFSHash}`,
             innerHTML: [
                 { element:"a", innerText : json.title, href : '#news-'+zblockIPFSHash },
+                { element:"span", innerText : ' '},
                 { element:"a", innerText:'[permalink]', target: '_blank', href:'https://news.arching-kaos.net/?from_zblock='+zblockIPFSHash },
+                { element:"p", innerText:`zblock: ${zblockIPFSHash}` },
                 { element:"p", innerText:"Published: " + new Date(blockObject.timestamp*1000) },
                 { element:"p", innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg) },
                 { element:"hr" }
@@ -24,15 +34,28 @@ function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){
         if(json.ipfs){
             archingKaosFetchText(getIPFSURL(json.ipfs), getFullText,[`#news-${zblockIPFSHash}`]);
         }
+        if (document.querySelector("#news-sec-not-found")) document.querySelector("#news-sec-not-found").hidden=true;
+        makeElement({ element:"hr"}, newsSectionDivElement);
+    }
+    if (!document.querySelector('#news-preview-'+zblockIPFSHash)){
+        var newsSectionDivElement = document.querySelector('.preview');
+        var articleContainerElement = {
+            element:"article",
+            id:`news-preview-${zblockIPFSHash}`,
+            innerHTML: [
+                { element:"a", innerText : json.title, href : '#news-'+zblockIPFSHash },
+                { element:"span", innerText : ' '},
+                { element:"a", innerText:'[permalink]', target: '_blank', href:'https://news.arching-kaos.net/?from_zblock='+zblockIPFSHash },
+                { element:"p", innerText:"Published: " + new Date(blockObject.timestamp*1000) },
+                { element:"p", innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg) },
+                { element:"hr" }
+            ]
         };
-        makeElement(small, articleContainerElement);
-        var hr = { element:"hr" };
-        makeElement(hr, articleContainerElement);
+        makeElement(articleContainerElement, newsSectionDivElement);
         if(json.ipfs){
-            getipfstext(json.ipfs,articleContainerElement.id);
+            archingKaosFetchText(getIPFSURL(json.ipfs), getPreviewText, [`#news-preview-${zblockIPFSHash}`]);
         }
-        if (document.querySelector("#news-sec-not-found")) document.querySelector("#news-sec-not-found").hidden=true;
-        makeElement(hr, newsSectionDivElement);
+        makeElement({ element:"hr"}, newsSectionDivElement);
     }
 }
 // @license-end
diff --git a/src/js/arching-kaos-modules-references.js b/src/js/arching-kaos-modules-references.js
index f609d3a..c6aca8a 100644
--- a/src/js/arching-kaos-modules-references.js
+++ b/src/js/arching-kaos-modules-references.js
@@ -5,17 +5,25 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
-function resolveReferences(references){
-    for( entry in references ){
+import {
+    getReferences,
+    setReference,
+    getReference
+} from "./environment-setup.js";
+
+export function resolveReferences(){
+    console.log(getReferences());
+    const references = getReferences();
+    for( var entry = 0; entry < references.length; entry++ ){
         var comment = document.querySelector('#comment-'+references[entry].dataExpansion.reference);
         var article = document.querySelector('#news-'+references[entry].dataExpansion.refer_to);
         article.appendChild(comment);
     }
 }
 
-function storeReference(zblockIPFSHash, zblockObject, blockObject, json, references){