Update console-related scripts (#140)

src/_includes/partials/head.njk

@@ -35,4 +35,5 @@
     }
 </style>
 
-<!-- SCRIPTS -->
+<!-- SCRIPTS -->
+<script src="/js/console/banner.js"></script>

src/data/index.html

@@ -23,7 +23,7 @@
 
 
     <!-- METRICS -->
-    <script src="/js/storage.js"></script>
+    <script src="/js/console/storage.js" type="module"></script>
 
 
     <!-- PWA -->

src/index.html

@@ -16,19 +16,14 @@
     <link rel="stylesheet" rel="preload" href="/css/desktop.css">
     <link rel="stylesheet" rel="preload" href="/css/taskbar.css">
 
-    <script src="/js/console.js"></script>
+    <script src="/js/console/battery.js"></script>
+    <script src="/js/console/storage.js" type="module"></script>
+    <script src="/js/console/network.js"></script>
 
     <script src="/js/welcome.js" type="module"></script>
 
     <!-- MODULES -->
     <script src="/modules/share.js"></script>
-
-
-    <!-- METRICS -->
-    <script src="/js/network.js" defer></script>
-    <script src="/js/performance.js" defer></script>
-    <script src="/js/batteryLog.js"></script>
-    <script src="/js/storage.js"></script>
 
 
     <!-- APPLETS -->

src/js/console.js → src/js/console/banner.js

@@ -1,3 +1,8 @@
+(() => {
+
+// Check if the current window is the top window
+if (window.top !== window.self) { return; }
+
 console.log(
 `
  _____     _____ _____ 
@@ -9,4 +14,6 @@ Version: 3.18.3
 Made by @black-backdoor
 
 `
-);
+);
+
+})();

src/js/batteryLog.js → src/js/console/battery.js

@@ -1,8 +1,9 @@
-/*
-    Log battery status
-*/
+(function () {
+    if (!('getBattery' in navigator)) {
+        console.info('%c[Battery]%c battery status is not supported', 'color: green', 'color: inherit');
+        return;
+    }
 
-if ('getBattery' in navigator) {
     console.info('%c[Battery]%c battery status is supported', 'color: green', 'color: inherit');
 
     navigator.getBattery().then((battery) => {
@@ -19,12 +20,14 @@ if ('getBattery' in navigator) {
                 `color: ${charging ? 'green' : 'red'}`,
             );
 
+            /*
             console.groupCollapsed(`%c[Battery]%c Info`, 'color: green', 'color: inherit');
             console.debug("IsCharging", charging);
             console.debug("Percentage", percent);
             console.debug("chargingTime", battery.chargingTime);
             console.debug("dischargingTime", battery.dischargingTime);
             console.groupEnd();
+            */
         }
 
         logBatteryStatus(battery);
@@ -33,7 +36,4 @@ if ('getBattery' in navigator) {
         battery.addEventListener('dischargingtimechange', () => logBatteryStatus(battery));
         battery.addEventListener('levelchange', () => logBatteryStatus(battery));
     });
-
-} else {
-    console.info('%c[Battery]%c battery status is not supported', 'color: green', 'color: inherit');
-}
+})();

src/js/network.js → src/js/console/network.js

@@ -1,6 +1,6 @@
 function printNetworkInfo() {
     // Function to calculate console.log color based on value and thresholds
-    function calculateColor(value, middle, max, lowerIsBetter = false) {
+    const calculateColor = (value, middle, max, lowerIsBetter = false) => {
         if (!lowerIsBetter) {
             if (value < middle) {
                 return 'green';

src/js/console/storage.js

@@ -0,0 +1,61 @@
+import { convertStorageUnit } from '/modules/utils/storage.js';
+
+
+(function () {
+    const logStorage = true;
+
+    if ('storage' in navigator) {
+        navigator.storage.estimate().then((estimate) => {
+            const { quota, usage, usageDetails } = estimate;
+
+            console.info(`%c[Storage]%c Using ${convertStorageUnit(usage)} of ${convertStorageUnit(quota)}`, 'color: DarkOrchid', 'color: inherit');
+            console.groupCollapsed(`%c[Storage]%c Usage Details (${convertStorageUnit(usage)})`, 'color: DarkOrchid', 'color: inherit');
+            for (const key in usageDetails) {
+                console.debug(`%c${key}%c ${convertStorageUnit(usageDetails[key])}`, 'color: DarkOrchid', 'color: inherit');
+            }
+            console.groupEnd();
+        });
+    }
+
+
+    function calculateStorageSize(storageType, storageName) {
+        let size = {};
+
+        let totalSize = 0,
+            keyLength, key;
+
+        for (key in storageType) {
+            if (!storageType.hasOwnProperty(key)) {
+                continue;
+            }
+            keyLength = ((storageType[key].length + key.length) * 2);
+            totalSize += keyLength;
+
+            size[key] = keyLength;
+        };
+
+        if (logStorage === false) {
+            // EXAMPLE: [Storage] localStorage: 2.65 KB
+            console.info(`%c[Storage]%c ${storageName}: ${convertStorageUnit(totalSize)}`, "color: DarkOrchid", "color: inherit");
+            return;
+        }
+
+        // sort by key name (alphabetical)
+        size = Object.fromEntries(Object.entries(size).sort());
+
+        console.groupCollapsed(`%c[Storage]%c ${storageName} (${convertStorageUnit(totalSize)})`, "color: DarkOrchid", "color: inherit");
+        for (key in size) {
+            console.debug(`${key} = ${convertStorageUnit(size[key])}`);
+        }
+        console.groupEnd();
+    }
+
+
+    if ('localStorage' in window) {
+        calculateStorageSize(localStorage, 'localStorage');
+    }
+
+    if ('sessionStorage' in window) {
+        calculateStorageSize(sessionStorage, 'sessionStorage');
+    }
+})();

src/modules/utils/storage.js

@@ -0,0 +1,14 @@
+/**
+ * Convert bytes to human-readable storage units
+ * @param {number} bytes - The number of bytes
+ * @returns {string} - The human-readable storage unit (e.g., 1.2 KiB)
+ */
+export const convertStorageUnit = (bytes) => {
+    const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
+    let unitIndex = 0;
+    while (bytes >= 1024 && unitIndex < units.length - 1) {
+        bytes /= 1024;
+        unitIndex++;
+    }
+    return `${bytes.toFixed(1)} ${units[unitIndex]}`;
+};