From 18e386bbeebd48493b333fedcc0bbd54284712fe Mon Sep 17 00:00:00 2001
From: Daniel Morrisey <git@danielmorrisey.com>
Date: Mon, 1 Jun 2026 21:44:37 -0400
Subject: [PATCH] added linked tabs to cdn.html

---
 cdn.html    | 43 ++++++++++++++++++++++++++++++++++++++-----
 css/cdn.css | 38 ++++++++++++++++++++++++++++++++++++++
 js/cdn.js   | 13 ++++++++++++-
 3 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/cdn.html b/cdn.html
index d71e6ea..cac2835 100644
--- a/cdn.html
+++ b/cdn.html
@@ -97,16 +97,19 @@
         <!-- Tabs -->
         <section class="content-section">
             <div class="tab-bar">
-                <button class="tab-btn active" onclick="switchTab('upload', this)">
+                <button id="upload" class="tab-btn active" onclick="switchTab('upload', this)">
                     <i class="fa-solid fa-cloud-arrow-up"></i> Upload
                 </button>
-                <button class="tab-btn" onclick="switchTab('about', this)">
+                <button id="about" class="tab-btn" onclick="switchTab('about', this)">
                     <i class="fa-solid fa-circle-info"></i> About
                 </button>
-                <button class="tab-btn" onclick="switchTab('how', this)">
+                <button id="how" class="tab-btn" onclick="switchTab('how', this)">
                     <i class="fa-solid fa-gears"></i> How it Works
                 </button>
-                <button class="tab-btn" onclick="switchTab('limits', this)">
+                <button id="build" class="tab-btn" onclick="switchTab('build', this)">
+                    <i class="fa-solid fa-code"></i> Build
+                </button>
+                <button id="limits" class="tab-btn" onclick="switchTab('limits', this)">
                     <i class="fa-solid fa-gauge-high"></i> Limits
                 </button>
             </div>
@@ -194,7 +197,7 @@
                         <div class="step-num">4</div>
                         <div class="step-body">
                             <h3>You get a public URL</h3>
-                            <p>A permanent <code>cdn.madebydanny.uk</code> link is returned instantly. Anyone with it can access the file, served from whichever Cloudflare PoP is closest to them.</p>
+                            <p>A permanent <code>cdn.danielmorrisey.com</code> link is returned instantly. Anyone with it can access the file, served from whichever Cloudflare PoP is closest to them.</p>
                         </div>
                     </div>
                 </div>
@@ -218,6 +221,36 @@
                 </div>
             </div>
 
+            <!-- Build -->
+            <div class="tab-pane" id="tab-build">
+                <div class="prose">
+                    <h3>Build it into your app</h3>
+                    <p>The MBD CDN API is simple. Send a POST request with your file and get back a JSON response with your permanent URL.</p>
+                </div>
+
+                <div class="code-block">
+                    <div class="code-label">POST Request</div>
+                    <pre><code>POST /api/upload HTTP/1.1
+Host: cdn.danielmorrisey.com
+Content-Type: application/octet-stream
+Content-Length: [file-size]
+
+[file-binary-data]</code></pre>
+                </div>
+
+                <div class="code-block">
+                    <div class="code-label">Response (200 OK)</div>
+                    <pre><code>{
+  "success": true,
+  "url": "https://cdn.danielmorrisey.com/uuid-filename.ext",
+  "filename": "uuid-filename.ext",
+  "size": 1024,
+  "type": "image/jpeg",
+  "timestamp": "2026-06-01T12:34:56.789Z"
+}</code></pre>
+                </div>
+            </div>
+
             <!-- Limits -->
             <div class="tab-pane" id="tab-limits">
                 <div class="limits-grid">
diff --git a/css/cdn.css b/css/cdn.css
index 9c31ff9..6680442 100644
--- a/css/cdn.css
+++ b/css/cdn.css
@@ -649,6 +649,44 @@ code {
 }
 .file-types strong { color: var(--text); }
 
+/* ── Code Blocks ── */
+
+.code-block {
+    margin: 1.5rem 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg-card);
+    overflow: hidden;
+}
+
+.code-label {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    background: var(--bg-raised);
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--border);
+    letter-spacing: 0.05em;
+}
+
+.code-block pre {
+    margin: 0;
+    padding: 1rem;
+    overflow-x: auto;
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    line-height: 1.6;
+    color: var(--text-muted);
+}
+
+.code-block code {
+    background: none;
+    padding: 0;
+    color: inherit;
+}
+
 /* ── Footer ── */
 
 .site-footer {
diff --git a/js/cdn.js b/js/cdn.js
index 30decaa..606c84c 100644
--- a/js/cdn.js
+++ b/js/cdn.js
@@ -17,10 +17,19 @@ function switchTab(name, btn) {
     document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
     document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
     document.getElementById('tab-' + name).classList.add('active');
-    if (btn) btn.classList.add('active');
+    const button = btn || document.getElementById(name);
+    if (button) button.classList.add('active');
+    window.location.hash = name;
     if (name === 'limits') loadLimits();
 }
 
+function handleHashChange() {
+    const hash = window.location.hash.slice(1);
+    if (hash && ['upload', 'about', 'how', 'build', 'limits'].includes(hash)) {
+        switchTab(hash);
+    }
+}
+
 // ── Stats ──────────────────────────────────────────────────────────
 
 async function loadStats() {
@@ -231,4 +240,6 @@ function copyUrl() {
 
 // ── Init ───────────────────────────────────────────────────────────
 
+window.addEventListener('hashchange', handleHashChange);
+if (window.location.hash) handleHashChange();
 loadStats();
-- 
2.51.2