From bbe1b1225179d9c631c16ddbba296942ba5b5b31 Mon Sep 17 00:00:00 2001
From: overcuriousity <overcuriousity@posteo.org>
Date: Sat, 23 Aug 2025 11:06:57 +0200
Subject: [PATCH] lightning

---
 package.json          |   8 +--
 src/pages/about.astro | 124 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 121 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 29c4fe7..6c5298e 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/node": "^9.3.0",
-    "astro": "^5.12.3",
+    "@astrojs/node": "^9.4.3",
+    "astro": "^5.13.3",
     "cookie": "^1.0.2",
-    "dotenv": "^16.4.5",
-    "jose": "^5.2.0",
+    "dotenv": "^16.6.1",
+    "jose": "^5.10.0",
     "js-yaml": "^4.1.0",
     "jsonwebtoken": "^9.0.2",
     "simple-boost": "^2.0.2",
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 97c0987..e92887c 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -184,7 +184,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 
       <div style="display: grid; gap: 1.25rem;">
         <div style="background-color: var(--color-bg-secondary); padding: 1.25rem; border-radius: 0.5rem;">
-          <h4 style="margin: 0 0 0.5rem 0; color: var(--color-accent);">🔍 Vorschläge</h4>
+          <h4 style="margin: 0 0 0.5rem 0; color: var(--color-accent);">📝 Vorschläge</h4>
           <p style="margin: 0;">
             Du hast eine Idee, wie wir den Hub erweitern können? Reiche deinen Vorschlag unkompliziert
             über unsere <a href="/contribute#vorschlaege">/contribute</a>-Seite ein.
@@ -212,13 +212,52 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             </svg>
             Git-Repository besuchen
           </a>
-        </div>        
+        </div>
+        
+        <!-- Lightning Support Section with simple-boost integration -->
         <div style="background-color: var(--color-bg-secondary); padding: 1.25rem; border-radius: 0.5rem;">
-          <h4 style="margin: 0 0 0.5rem 0; color: var(--color-accent);">⚡ Unterstützung</h4>
-          <p style="margin: 0;">
-            Kleine Spenden zur Infrastruktur-Finanzierung nehme ich auch gerne an.
-            Spenden werden bevorzugt per Lightning entgegengenommen!
+          <h4 style="margin: 0 0 0.75rem 0; color: var(--color-accent); display: flex; align-items: center; gap: 0.5rem;">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2"/>
+            </svg>
+            ⚡ Unterstützung
+          </h4>
+          <p style="margin: 0 0 1rem 0; font-size: 0.875rem; line-height: 1.5;">
+            Kleine Spenden zur Server-Finanzierung sind willkommen.
           </p>
+          
+          <div style="margin-bottom: 1rem;">
+            <!-- Simple EUR Payment -->
+            <div style="display: flex; gap: 0.75rem; align-items: center; justify-content: center; max-width: 300px; margin: 0 auto;">
+              <input 
+                type="number" 
+                id="eur-amount" 
+                min="0.01" 
+                step="0.01" 
+                placeholder="0,50" 
+                value="0.5"
+                style="width: 80px; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 0.375rem; font-size: 0.875rem; text-align: center;">
+              <span style="font-size: 0.875rem; color: var(--color-text-secondary);">€</span>
+              <simple-boost 
+                id="eur-boost"
+                class="bootstrap" 
+                nwc="nostr+walletconnect://dd9b1962fb2e433381d82bdfabb3fbf76798b69e9b69d037c9659c064f8b51f5?relay=wss://nostr.mikoshi.de&secret=1efe42949274fb6c1176e8308e66bb795dd224832eb5902a32cf56ed46980eac"
+                amount="0.5" 
+                currency="eur" 
+                memo="ForensicPathways Unterstützung - Vielen Dank!"
+                style="background-color: var(--color-accent); color: white; border: none; border-radius: 0.375rem; padding: 0.5rem 1rem; font-size: 0.875rem; cursor: pointer;">
+                ⚡ Senden
+              </simple-boost>
+            </div>
+          </div>
+          
+          <div style="margin-top: 1rem; padding: 0.75rem; background-color: var(--color-bg); border-radius: 0.375rem; border-left: 3px solid var(--color-accent);">
+            <p style="margin: 0; font-size: 0.75rem; color: var(--color-text-secondary); line-height: 1.4; text-align: center;">
+              <strong>⚡ Lightning-Unterstützung:</strong> Betrag eingeben und senden. 
+              Benötigt eine Lightning-Wallet wie <a href="https://getalby.com" target="_blank" rel="noopener" style="color: var(--color-accent);">Alby</a> oder 
+              <a href="https://phoenix.acinq.co" target="_blank" rel="noopener" style="color: var(--color-accent);">Phoenix</a>.
+            </p>
+          </div>
         </div>
       </div>
     </div>
@@ -231,4 +270,75 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </p>
     </div>
   </section>
-</BaseLayout>
\ No newline at end of file
+</BaseLayout>
+
+<script>
+  // Load simple-boost from local node_modules instead of CDN
+  import('simple-boost').then(() => {
+    console.log('Simple-boost loaded successfully from local dependencies');
+    
+    // Setup dynamic amount updating
+    setupDynamicAmounts();
+  }).catch(error => {
+    console.error('Failed to load simple-boost:', error);
+    // Fallback: try to load from node_modules path
+    const script = document.createElement('script');
+    script.type = 'module';
+    script.src = '/node_modules/simple-boost/dist/simple-boost.js';
+    script.onload = () => {
+      console.log('Simple-boost fallback loaded');
+      setupDynamicAmounts();
+    };
+    script.onerror = () => console.error('Simple-boost fallback failed');
+    document.head.appendChild(script);
+  });
+
+  function setupDynamicAmounts() {
+    // EUR boost button
+    const eurBoost = document.getElementById('eur-boost');
+    const eurInput = document.getElementById('eur-amount') as HTMLInputElement;
+    
+    if (eurBoost && eurInput) {
+      eurBoost.addEventListener('click', (e) => {
+        const amount = parseFloat(eurInput.value) || 0.5;
+        eurBoost.setAttribute('amount', amount.toString());
+        console.log('EUR amount set to:', amount);
+      });
+      
+      // Update on input change for better UX
+      eurInput.addEventListener('input', () => {
+        const amount = parseFloat(eurInput.value) || 0.5;
+        eurBoost.setAttribute('amount', amount.toString());
+      });
+    }
+  }
+</script>
+
+<style>
+  /* Custom styling for simple-boost buttons to match your theme */
+  simple-boost {
+    --simple-boost-primary: var(--color-warning);
+    --simple-boost-primary-hover: var(--color-accent);
+    --simple-boost-text: white;
+    transition: all 0.2s ease;
+  }
+  
+  simple-boost:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
+  }
+  
+  simple-boost .simple-boost-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: inherit;
+    font-size: 0.875rem;
+  }
+  
+  /* Loading state styling */
+  simple-boost[loading] {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file