From d99e91bbe145f409fd9d54910c58cb7e8b4f3488 Mon Sep 17 00:00:00 2001
From: Bruno <bskvorc@polygon.technology>
Date: Mon, 10 Nov 2025 19:21:00 +0100
Subject: [PATCH] Added how to use

---
 website/template.html | 196 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 196 insertions(+)

diff --git a/website/template.html b/website/template.html
index 6a30a7f..f5c3855 100644
--- a/website/template.html
+++ b/website/template.html
@@ -200,6 +200,123 @@
       border-color: var(--accent-primary);
     }
 
+    .code-guide {
+      margin: 20px 0 0;
+      padding-top: 20px;
+      border-top: 1px solid var(--border-color);
+    }
+
+    .code-guide-summary {
+      cursor: pointer;
+      list-style: none;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 12px 16px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 0.95rem;
+      color: var(--text-primary);
+      transition: all 0.2s ease;
+      border: 1px solid var(--border-color);
+      user-select: none;
+    }
+
+    .code-guide-summary::-webkit-details-marker {
+      display: none;
+    }
+
+    .code-guide-summary::after {
+      content: '▼';
+      margin-left: auto;
+      font-size: 0.7rem;
+      opacity: 0.6;
+      transition: transform 0.2s ease;
+    }
+
+    .code-guide[open] .code-guide-summary::after {
+      transform: rotate(180deg);
+    }
+
+    .code-guide-summary:hover {
+      background: var(--accent-primary);
+      color: white;
+      border-color: var(--accent-primary);
+    }
+
+    .code-guide-summary:hover .code-guide-icon {
+      transform: scale(1.1);
+    }
+
+    .code-guide-icon {
+      font-size: 1.2rem;
+      transition: transform 0.2s ease;
+    }
+
+    .code-guide-content {
+      margin-top: 16px;
+      padding: 20px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+      border: 1px solid var(--border-color);
+    }
+
+    .code-section {
+      margin-bottom: 20px;
+    }
+
+    .code-section:last-of-type {
+      margin-bottom: 16px;
+    }
+
+    .code-section h3 {
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 8px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      opacity: 0.9;
+    }
+
+    .code-section pre {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      padding: 12px;
+      overflow-x: auto;
+      margin: 0;
+    }
+
+    .code-section code {
+      font-family: 'Courier New', Monaco, monospace;
+      font-size: 0.85rem;
+      line-height: 1.5;
+      color: var(--text-primary);
+    }
+
+    .code-guide-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 16px;
+      background: var(--accent-primary);
+      color: white;
+      text-decoration: none;
+      border-radius: 6px;
+      font-weight: 600;
+      font-size: 0.9rem;
+      transition: all 0.2s ease;
+      border: 1px solid var(--accent-primary);
+    }
+
+    .code-guide-link:hover {
+      background: var(--accent-secondary);
+      border-color: var(--accent-secondary);
+      transform: translateY(-1px);
+    }
+
     .card.hidden {
       display: none;
     }
@@ -656,6 +773,18 @@
         grid-template-columns: 1fr;
         gap: 16px;
       }
+
+      .code-guide-content {
+        padding: 16px;
+      }
+
+      .code-section pre {
+        padding: 10px;
+      }
+
+      .code-section code {
+        font-size: 0.8rem;
+      }
     }
 
     @media (max-width: 480px) {
@@ -690,6 +819,27 @@
       .card-title {
         font-size: 1.2rem;
       }
+
+      .code-guide-summary {
+        font-size: 0.85rem;
+        padding: 10px 12px;
+      }
+
+      .code-guide-icon {
+        font-size: 1rem;
+      }
+
+      .code-guide-content {
+        padding: 12px;
+      }
+
+      .code-section h3 {
+        font-size: 0.85rem;
+      }
+
+      .code-section code {
+        font-size: 0.75rem;
+      }
     }
 
     .loading {
@@ -930,6 +1080,52 @@ <h1>x402 Facilitators</h1>
         </div>
       </div>
 
+      <details class="code-guide">
+        <summary class="code-guide-summary">
+          <span class="code-guide-icon">💻</span>
+          <span>How to use in code</span>
+        </summary>
+        <div class="code-guide-content">
+          <div class="code-section">
+            <h3>Installation</h3>
+            <pre><code>bun add @swader/x402facilitators
+# or
+npm install @swader/x402facilitators</code></pre>
+          </div>
+          
+          <div class="code-section">
+            <h3>Quick Start</h3>
+            <pre><code>import { coinbase, thirdweb } from '@swader/x402facilitators';
+
+paymentMiddleware(
+  address,
+  resources,
+  coinbase // easily interchange any facilitator
+);</code></pre>
+          </div>
+          
+          <div class="code-section">
+            <h3>Auto Load-Balancing</h3>
+            <pre><code>import { auto } from '@swader/x402facilitators';
+
+// Automatically balances between facilitators for uptime
+paymentMiddleware(address, resources, auto);</code></pre>
+          </div>
+          
+          <div class="code-section">
+            <h3>Resource Discovery</h3>
+            <pre><code>import { coinbaseDiscovery, listAllFacilitatorResources } from '@swader/x402facilitators';
+
+// List all x402-protected resources
+const resources = await listAllFacilitatorResources(coinbaseDiscovery);</code></pre>
+          </div>
+
+          <a href="https://github.com/Swader/x402facilitators#readme" target="_blank" class="code-guide-link">
+            View full documentation →
+          </a>
+        </div>
+      </details>
+
       <div class="filters-container">
         <div class="filter-row">
           <div class="filter-group">