Merge branch 'dev'

2025-09-27 00:13:15 -04:00
parent 7da034e08b fa0a7bba8a
commit d5186e880b
12 changed files with 313 additions and 163 deletions
--- a/public/assets/js/home.js
+++ b/public/assets/js/home.js
@@ -0,0 +1,92 @@
+// Store statuses globally
+let linkStatuses = {};
+
+// Fetch statuses on page load
+document.addEventListener('DOMContentLoaded', () => {
+    // Fetch statuses immediately but keep folders closed
+    fetch("http://localhost:5252/api/link-status")
+        .then(res => res.json())
+        .then(statuses => {
+            linkStatuses = statuses; // Store for later use
+            console.log("Cached link statuses:", linkStatuses);
+        })
+        .catch(error => console.error("Error:", error));
+});
+
+// Helper function to update status emojis
+function updateFolderStatuses(folder, statuses) {
+    folder.querySelectorAll("a").forEach(link => {
+        const url = link.href;
+        const matchingUrl = Object.keys(statuses).find(statusUrl => 
+            url.includes(new URL(statusUrl).hostname)
+        );
+        const status = matchingUrl ? statuses[matchingUrl] : "unknown";
+        const emoji = status === "online" ? "🟢" : "🔴";
+        
+        const statusSpan = link.querySelector('.status-emoji');
+        if (statusSpan) {
+            statusSpan.textContent = emoji;
+        }
+    });
+}
+
+function toggleFolder(folderId, buttonId) {
+    const folder = document.getElementById(folderId);
+    const button = document.getElementById(buttonId);
+    if (!folder || !button) return;
+
+    if (folder.style.display === "none" || folder.style.display === "") {
+        folder.style.display = "block";
+        button.innerHTML = button.innerHTML.replace("↓", "↑");
+        
+        // Use cached statuses if available, otherwise fetch new ones
+        if (Object.keys(linkStatuses).length > 0) {
+            updateFolderStatuses(folder, linkStatuses);
+        } else {
+            fetch("http://localhost:5252/api/link-status")
+                .then(res => res.json())
+                .then(statuses => {
+                    linkStatuses = statuses;
+                    updateFolderStatuses(folder, statuses);
+                })
+                .catch(error => console.error("Error:", error));
+        }
+    } else {
+        folder.style.display = "none";
+        button.innerHTML = button.innerHTML.replace("↑", "↓");
+    }
+// Wait for both DOM and fetch to complete
+async function init() {
+    try {
+        // Fetch the status first
+        console.log("Fetching statuses...");
+        const response = await fetch("http://localhost:5252/api/link-status");
+        const statuses = await response.json();
+        console.log("Got statuses:", statuses);
+
+        // Now update the links
+        document.querySelectorAll(".links a").forEach(link => {
+            const url = link.href;
+            console.log('Checking link:', url); // Debug log
+            const matchingUrl = Object.keys(statuses).find(statusUrl => {
+                const linkHostname = new URL(url).hostname;
+                const statusHostname = new URL(statusUrl).hostname;
+                console.log('Comparing:', linkHostname, 'with', statusHostname); // Debug log
+                return linkHostname === statusHostname;
+            });
+            console.log('Matching URL found:', matchingUrl); // Debug log
+            const status = matchingUrl ? statuses[matchingUrl] : "unknown";
+            console.log('Status for', url, 'is', status); // Debug log
+            const emoji = status === "online" ? "🟢" : "🔴";
+            
+            // Find the span inside this link and update it
+            const statusSpan = link.querySelector('.status-emoji');
+            if (statusSpan) {
+                statusSpan.textContent = emoji;
+            }
+        });
+    } catch (error) {
+        console.error("Error:", error);
+    }
+}
+}
--- a/public/assets/js/scripts.js
+++ b/public/assets/js/scripts.js
@@ -1,13 +1,34 @@
-// public/assets/js/scripts.js
-// ---------------------------------------------
-// 1. Global toggle function – now accessible from the HTML onclick
-// 2. Properly closed DOMContentLoaded
-// 3. Minor style helper (display toggling)
-// ---------------------------------------------
+// Folder Toggle Function
+document.addEventListener('DOMContentLoaded', () => {
+  function toggleFolder(folderId, buttonId) {
+    const folder = document.getElementById(folderId);
+    const button = document.getElementById(buttonId);
+
+    // Close other folders and deactivate buttons
+    document.querySelectorAll('.links').forEach(link => {
+      if (link.id !== folderId) {
+        link.style.display = 'none';
+      }
+    });
+    document.querySelectorAll('.button').forEach(btn => {
+      if (btn.id !== buttonId) {
+        btn.classList.remove('active');
+      }
+    });
+
+    // Toggle the selected folder
+    if (folder.style.display === 'block') {
+      folder.style.display = 'none';
+      button.classList.remove('active');
+    } else {
+      folder.style.display = 'block';
+      button.classList.add('active');
+    }
+}



-  // --- 4. Load Footer and QR Code Toggle Logic ----------------------------
+// Footer Loader and Event Listeners
  fetch('/parts/footer.html')
    .then(response => response.text())
    .then(data => {
--- a/public/index.html
+++ b/public/index.html
@@ -18,7 +18,7 @@

    <!-- scripts -->

-    <script src="/assets/js/scripts.js"></script>
+    <script src="/assets/js/home.js"></script>
    <link rel="stylesheet" href="/assets/css/main.css">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
 </head>
@@ -40,46 +40,34 @@
        </div>
        <button class="button" id="bitcoin-folder-btn" onclick="toggleFolder('folder2', 'bitcoin-folder-btn')">Use Bitcoin <span style="color: #F7931A;">↓</span></button>
        <div class="links" id="folder2">
-            <a href="https://lightning.btcforplebs.com" target="_blank" class="prefetch">Lightning</a>
-            <a href="https://mempool.btcforplebs.com" target="_blank" class="prefetch">Mempool</a>
-            <a href="https://bitview.space/" target="_blank" class="prefetch">Bitview.space</a>
+            <a href="https://lightning.btcforplebs.com" target="_blank" class="prefetch">Lightning <span class="status-emoji"></span></a>
+            <a href="https://mempool.btcforplebs.com" target="_blank" class="prefetch">Mempool <span class="status-emoji"></span></a>
+            <a href="https://bitview.space/" target="_blank" class="prefetch">Bitview.space ⚪️</span></a>
        </div>
        
        <button class="button" id="nostr-folder-btn" onclick="toggleFolder('folder1', 'nostr-folder-btn')">Use Nostr <span style="color: #F7931A;">↓</span></button>
        <div class="links" id="folder1">
-            <a href="https://nostrudel.btcforplebs.com" target="_blank" class="prefetch">Nostrudel</a>
-            <a href="https://nosotros.btcforplebs.com" target="_blank" class="prefetch">Nosotros</a>
-            <a href="https://bloom.btcforplebs.com" target="_blank" class="prefetch">Bloom</a>
-            <a href="https://btcforplebs.com/relay" target="_blank" class="prefetch">Relay</a>
-            <a href="https://nostrapps.com" target="_blank">NostrApps.com</a>
+            <a href="https://nostrudel.btcforplebs.com" target="_blank" class="prefetch">Nostrudel <span class="status-emoji"></span></a>
+            <a href="https://nosotros.btcforplebs.com" target="_blank" class="prefetch">Nosotros <span class="status-emoji"></span></a>
+            <a href="https://bloom.btcforplebs.com" target="_blank" class="prefetch">Bloom <span class="status-emoji"></span></a>
+            <a href="https://relay.btcforplebs.com" target="_blank" class="prefetch">Relay <span class="status-emoji"></span></a>
+            <a href="https://nostrapps.com" target="_blank">NostrApps.com ⚪️</a>
        </div>
        <button class="button" id="cashu-folder-btn" onclick="toggleFolder('folder3', 'cashu-folder-btn')">Use Cashu <span style="color: #F7931A;">↓</span></button>
        <div class="links" id="folder3">
-            <a href="https://cashu.btcforplebs.com" class="prefetch">Cashu Web App</a>
-            <a href="https://macadamia.cash" class="prefetch">Macadamia(iOS)</a>
-            <a href="https://minibits.cash" class="prefetch">Minibits(Android)</a>
+            <a href="https://cashu.btcforplebs.com" class="prefetch">Cashu Web App <span class="status-emoji"></span></a>
+            <a href="https://macadamia.cash" class="prefetch">Macadamia (iOS) ⚪️</a>
+            <a href="https://minibits.cash" class="prefetch">Minibits (Android) ⚪️</a>
        </div>

-        <a href="https://live.btcforplebs.com" class="button" class="prefetch">BTCforPlebs Live</a>
+        <a href="https://live.btcforplebs.com" class="button" class="prefetch">BTCforPlebs Live<span class="status-emoji"></span></a> 
        <br></br>
    </div>
    

 <script>
-function toggleFolder(folderId, buttonId) {
-  const folder = document.getElementById(folderId);
-  const button = document.getElementById(buttonId);
-  if (!folder || !button) return;

-  // Toggle visibility
-  if (folder.style.display === "none" || folder.style.display === "") {
-    folder.style.display = "block";
-    button.innerHTML = button.innerHTML.replace("↓", "↑");
-  } else {
-    folder.style.display = "none";
-    button.innerHTML = button.innerHTML.replace("↑", "↓");
-  }
-}</script>
+</script>

 <div id="footer"></div>
 </body>
--- a/public/learn-bitcoin/index.html
+++ b/public/learn-bitcoin/index.html
@@ -6,7 +6,6 @@
    <title>Learn Bitcoin</title>
    
    <!-- scripts -->
-    <script src="/assets/js/scripts.js" defer></script>

 </head>
 <link rel="stylesheet" href="/assets/css/main.css">
@@ -204,5 +203,12 @@
    <div id="footer"></div>   
    <div id="back-to-top">
 <a href="#top" title="Back to Top">🔝</a>
-</body>
+        <script>function navigateToSection(select) {
+        const sectionId = select.value;
+        if (sectionId) {
+        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
+        }
+        }</script>
+
+
 </html>
--- a/public/learn-cashu/index.html
+++ b/public/learn-cashu/index.html
@@ -9,7 +9,6 @@
    <link rel="stylesheet" href="/assets/css/main.css">
    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
-    <script src="/assets/js/scripts.js" defer></script>
 </head>
 <body>
    <!-- Bitcoin Price Banner -->
@@ -107,17 +106,10 @@
 </div>
 <div id="footer"></div>
 <a href="#top" title="Back to Top">🔝</a>
-
-<script>  
-// --- 2. Dropdown navigation ---------------------------------------------
-  window.navigateToSection = function (select) {
+    <script>function navigateToSection(select) {
    const sectionId = select.value;
    if (sectionId) {
-      const section = document.getElementById(sectionId);
-      if (section) {
-        section.scrollIntoView({ behavior: 'smooth' });
-      }
+        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
    }
-  };</script>
-</body>
+}</script>
 </html>
--- a/public/parts/footer.html
+++ b/public/parts/footer.html
@@ -1,61 +1,6 @@
 <link rel="stylesheet" href="/assets/css/main.css">
 <footer>
-    <script>  // --- 4. Load Footer and QR Code Toggle Logic ----------------------------
-  fetch('/parts/footer.html')
-    .then(response => response.text())
-    .then(data => {
-      const footer = document.getElementById('footer');
-      if (!footer) return;
-
-      footer.innerHTML = data;
-
-      const onChainButton = document.getElementById('onChainButton');
-      const lightningButton = document.getElementById('lightningButton');
-      const qrCodes = document.getElementById('qrCodes');
-      const onChainQRCode = document.getElementById('onChainQRCode');
-      const lightningQRCode = document.getElementById('lightningQRCode');
-
-      if (qrCodes) qrCodes.style.display = 'none';
-
-      if (onChainButton && lightningButton && qrCodes && onChainQRCode && lightningQRCode) {
-        onChainButton.addEventListener('click', function () {
-          const isOnChainVisible = onChainQRCode.style.display === 'block';
-          qrCodes.style.display = 'block';
-          onChainQRCode.style.display = isOnChainVisible ? 'none' : 'block';
-          lightningQRCode.style.display = 'none';
-        });
-
-        lightningButton.addEventListener('click', function () {
-          const isLightningVisible = lightningQRCode.style.display === 'block';
-          qrCodes.style.display = 'block';
-          lightningQRCode.style.display = isLightningVisible ? 'none' : 'block';
-          onChainQRCode.style.display = 'none';
-        });
-      }
-    })
-    .catch(error => console.error('Error loading footer:', error));
-
-  // --- 5. Fetch and Display Last Update from GitHub -----------------------
-  fetch('https://api.github.com/repos/btcforplebs/BTCforPlebs.com/commits/main')
-    .then(response => response.json())
-    .then(data => {
-      const lastUpdate = new Date(data.commit.author.date);
-      const formattedDate = lastUpdate.toLocaleDateString();
-      const formattedTime = lastUpdate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-
-      const updateText = document.getElementById('last-updated-text');
-      if (updateText) {
-        updateText.textContent = `Website last updated: ${formattedDate} ${formattedTime}`;
-      }
-    })
-    .catch(error => {
-      console.error('Error fetching last update:', error);
-      const updateText = document.getElementById('last-updated-text');
-      if (updateText) {
-        updateText.textContent = 'Last update: Error fetching data.';
-      }
-    });
-    </script>
+    <script src="/assets/js/scripts.js"></script>
    <h3>We operate on solely on Bitcoin donations; from a pleb just like you!</h3>

                       <!-- Button Section -->