From a6c3b70282cc39a5145024f4b33ed7b6db289817 Mon Sep 17 00:00:00 2001
From: Noah <h@n0ah.net>
Date: Tue, 10 Feb 2026 14:17:52 -0500
Subject: [PATCH] fix code block styling and copy button

---
 meshtastic-resources.html | 45 ++++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/meshtastic-resources.html b/meshtastic-resources.html
index 5a032bf..4123750 100644
--- a/meshtastic-resources.html
+++ b/meshtastic-resources.html
@@ -74,14 +74,17 @@
       padding: 0;
       line-height: 1.5;
     }
-    .settings {
+    .code-block {
       background: #F5F5F5;
       border-radius: 12px;
       padding: 1em;
       border: 1px solid #D0D0D0;
       margin: 0.75em 0;
+      position: relative;
     }
-    .settings code {
+    .code-block pre {
+      margin: 0;
+      white-space: pre-wrap;
       font-family: monospace;
       font-size: 0.95em;
     }
@@ -97,6 +100,13 @@
       margin-left: 0.5em;
       vertical-align: middle;
     }
+    .code-block .copy-btn {
+      position: absolute;
+      top: 0.75em;
+      right: 0.75em;
+      padding: 0.4em 0.75em;
+      margin-left: 0;
+    }
     .btn {
       display: inline-flex;
       align-items: center;
@@ -225,21 +235,22 @@
     <p>Our MQTT broker is <em>uplink-only</em> and designed for fixed nodes across the state to serve as gateway nodes. Its purpose is not to bridge gaps or extend mesh coverage, but to report local traffic to our own <a href="https://map.ctmesh.org" target="_blank">map</a> and other web-based tools for analytical data and metrics to assess the mesh's performance. <strong>This role is best suited for stable, well-placed nodes with reliable coverage.</strong> If that describes your setup, follow the steps at on <a href="https://meshinfo.ctmesh.org/" target="_blank">this page</a> to get set up.</p>
 
     <h3>Key Settings</h3>
-    <div class="settings">
-      <p>MQTT &gt; Enabled &gt; ON</p>
-      <p>MQTT &gt; Encryption Enabled &gt; ON</p>
-      <p>MQTT &gt; Map Report &gt; OFF</p>
-      <p>MQTT &gt; Root Topic &gt; <code>msh/US/CT</code></p>
-      <p>MQTT &gt; Address &gt; <code>mqtt.ctmesh.org</code></p>
-      <p>MQTT &gt; Username &gt; <code>meshdev</code></p>
-      <p>MQTT &gt; Password &gt; <code>large4cats</code></p>
-      <p>MQTT &gt; TLS Enabled &gt; OFF</p>
-      <p>Channels &gt; Primary Channel &gt; Positions Enabled &gt; ON</p>
-      <p>Channels &gt; Primary Channel &gt; Approximate Location &gt; (set as desired)</p>
-      <p>Channels &gt; Primary Channel &gt; MQTT Uplink &gt; ON</p>
-      <p>Channels &gt; Primary Channel &gt; MQTT Downlink &gt; OFF</p>
-      <p>Settings &gt; Modules &gt; Neighbor Info &gt; ON</p>
-      <p>LoRa &gt; Ok to MQTT &gt; ON</p>
+    <div class="code-block">
+      <button class="copy-btn" type="button" data-copy-target="meshtastic-mqtt">Copy all</button>
+      <pre id="meshtastic-mqtt">MQTT > Enabled > ON
+MQTT > Encryption Enabled > ON
+MQTT > Map Report > OFF
+MQTT > Root Topic > msh/US/CT
+MQTT > Address > mqtt.ctmesh.org
+MQTT > Username > meshdev
+MQTT > Password > large4cats
+MQTT > TLS Enabled > OFF
+Channels > Primary Channel > Positions Enabled > ON
+Channels > Primary Channel > Approximate Location > (set as desired)
+Channels > Primary Channel > MQTT Uplink > ON
+Channels > Primary Channel > MQTT Downlink > OFF
+Settings > Modules > Neighbor Info > ON
+LoRa > Ok to MQTT > ON</pre>
     </div>
 
     <p><strong>Note:</strong> CT Mesh's MQTT server is bridged and uplinks to the MQTT servers for both <a href="https://meshtastic.liamcottle.net" target="_blank">meshtastic.liamcottle.net</a> and <a href="https://meshmap.net" target="_blank">meshmap.net</a>.</p>