⚡️ Add LN node IDs to homepage

src/css/base/elements.css

@@ -59,6 +59,7 @@ h2 {
 
 h3 {
   font-size: var(--font-size-l);
+  color: var(--color-secondary);
 }
 
 h4, h5, h6 {

src/css/sections/home.css

@@ -57,3 +57,35 @@
     border-radius: var(--space-m);
   }
 }
+
+.lnNodes {
+  display: flex;
+  flex-wrap: wrap;
+
+  @media (--up_to_M) {
+    flex-direction: column;
+  }
+
+  & .lnNode {
+    @media (--up_to_M) {
+      margin-top: var(--space-xl);
+    }
+    @media (--M_and_up) {
+      margin-top: var(--space-l);
+      margin-right: var(--space-xxl);
+    }
+  }
+
+  & img {
+    display: block;
+    width: 240px;
+    height: 240px;
+    border-radius: var(--space-m);
+    margin: var(--space-l) 0;
+  }
+
+  & button {
+    display: block;
+    width: 240px;
+  }
+}

src/index.pug

@@ -72,3 +72,22 @@ block main
         Wenn du also einen Shout-Out in unserem Podcast kaufst, unterstützt du damit auch ein Bitcoin Projekt.
 
       a.button(href=site.meta.shoutoutUrl target="_blank") Shout-Out senden
+
+    section
+      :markdown-it(html linkify typographer)
+        ## ⚡️ Unser Lightning Node
+
+        Du kannst einen Kanal zu unserem Lightning Node aufmachen – entweder um im Shop ohne Routinggebühren zu
+        zahlen oder um dich darüber mit anderen Mitgliedern der Community zu verbinden. Der Node ist bereits gut
+        vernetzt und du erhältst durch einen Kanal gute Verbindungen zu weiteren gut vernetzten Nodes.
+
+      .lnNodes
+        .lnNode
+          h3 Clearnet
+          img(src=assetPath("/img/ln/clearnet.svg") alt="Clearnet")
+          button.button(data-clipboard="020d91678bfa7ee9d5e241b244e8eecf3822e6bcedd2426fe97d8de656622285ea@202.61.245.255:9735") Clearnet ID kopieren
+
+        .lnNode
+          h3 Tor
+          img(src=assetPath("/img/ln/tor.svg") alt="Tor")
+          button.button(data-clipboard="020d91678bfa7ee9d5e241b244e8eecf3822e6bcedd2426fe97d8de656622285ea@csgpmpxltdbpvxdwpbv5yzkpicnzhx2k65plksykib2bbzyhzmer5fid.onion:9735") Tor ID kopieren

static/js/main.js

@@ -17,6 +17,25 @@ const setColorMode = mode => {
 
 setColorMode(initialColorMode)
 
+const copyToClipboard = (e, text) => {
+  if (navigator.clipboard) {
+    e.preventDefault()
+    const item = e.currentTarget
+    const data = text || item.getAttribute('data-clipboard')
+    const confirm = item.querySelector('[data-clipboard-confirm]') || item
+    const message = confirm.getAttribute('data-clipboard-confirm') || 'Kopiert ✔'
+    if (!confirm.dataset.clipboardInitialText) {
+      confirm.dataset.clipboardInitialText = confirm.innerText
+      confirm.style.minWidth = confirm.getBoundingClientRect().width + 'px'
+    }
+    navigator.clipboard.writeText(data).then(() => {
+      confirm.innerText = message;
+      setTimeout(() => { confirm.innerText = confirm.dataset.clipboardInitialText; }, 2500)
+    })
+    item.blur()
+  }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   // Topbar
   if (
@@ -43,20 +62,26 @@ document.addEventListener("DOMContentLoaded", () => {
   // Player
   if (window.Amplitude && window.player) {
     window.Amplitude.init(window.player)
+
     document.querySelector('.player__progress').addEventListener('click', function (e) {
-      var offset = this.getBoundingClientRect()
-      var x = e.pageX - offset.left
+      const offset = this.getBoundingClientRect()
+      const x = e.pageX - offset.left
       window.Amplitude.setSongPlayedPercentage((parseFloat(x) / parseFloat(this.offsetWidth)) * 100)
     })
   }
 
   // Theme Switch
-  document.querySelectorAll(".theme").forEach(function (link) {
-    link.addEventListener("click", function (e) {
+  document.querySelectorAll('.theme').forEach(link => {
+    link.addEventListener('click', e => {
       e.preventDefault()
       const current = document.documentElement.getAttribute(THEME_ATTR) || COLOR_MODES[0]
       const mode = current === COLOR_MODES[0] ? COLOR_MODES[1] : COLOR_MODES[0]
       setColorMode(mode)
-    });
-  });
+    })
+  })
+
+  // Copy to clipboard
+  document.querySelectorAll('[data-clipboard]').forEach(link => {
+    link.addEventListener('click', copyToClipboard)
+  })
 })