Hugging Face's logo

Spaces:
sudzdpn
/
wireframe
Running

App Files Community
sudzdpn commited on
Commit
cbe8874
Β·
verified Β·
1 Parent(s): 5df09c7

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +445 -57
  2. prompts.txt +4 -1
index.html CHANGED
@@ -28,10 +28,80 @@
28
  }
29
  .tab-active {
30
  border-bottom: 2px solid #3b82f6;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  }
32
  </style>
33
  </head>
34
- <body class="bg-gray-100 text-gray-800">
35
  <div class="flex h-screen overflow-hidden">
36
  <!-- Sidebar -->
37
  <div class="sidebar w-64 bg-gray-800 text-gray-200 flex flex-col h-full overflow-y-auto">
@@ -42,6 +112,7 @@
42
  </div>
43
  <h1 class="text-xl font-bold">SAML DocGen</h1>
44
  </div>
 
45
  </div>
46
 
47
  <div class="p-4">
@@ -53,47 +124,63 @@
53
 
54
  <div class="flex-1 overflow-y-auto">
55
  <div class="px-4 py-2">
56
- <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Components</h3>
57
  <ul>
58
  <li class="mb-1">
59
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700 text-blue-400 bg-gray-700">
60
- <i class="fas fa-key mr-2"></i> Authentication
61
  </a>
62
  </li>
63
  <li class="mb-1">
64
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
65
- <i class="fas fa-user-shield mr-2"></i> Authorization
66
  </a>
67
  </li>
68
  <li class="mb-1">
69
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
70
- <i class="fas fa-exchange-alt mr-2"></i> Token Exchange
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
  </a>
72
  </li>
73
  <li class="mb-1">
74
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
75
- <i class="fas fa-users mr-2"></i> User Management
76
  </a>
77
  </li>
78
  </ul>
79
  </div>
80
 
81
  <div class="px-4 py-2 mt-4">
82
- <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Configuration</h3>
83
  <ul>
84
  <li class="mb-1">
85
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
86
- <i class="fas fa-cog mr-2"></i> Settings
87
  </a>
88
  </li>
89
  <li class="mb-1">
90
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
91
- <i class="fas fa-plug mr-2"></i> Integrations
92
  </a>
93
  </li>
94
  <li class="mb-1">
95
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
96
- <i class="fas fa-shield-alt mr-2"></i> Security
97
  </a>
98
  </li>
99
  </ul>
@@ -109,6 +196,9 @@
109
  <p class="text-sm font-medium">Admin User</p>
110
  <p class="text-xs text-gray-400">admin@saml.co.za</p>
111
  </div>
 
 
 
112
  </div>
113
  </div>
114
  </div>
@@ -118,14 +208,22 @@
118
  <!-- Header -->
119
  <header class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
120
  <div>
121
- <h2 class="text-xl font-semibold">Authentication Component</h2>
122
- <p class="text-sm text-gray-500">SAML 2.0 implementation guide</p>
123
  </div>
124
  <div class="flex space-x-3">
125
- <button class="px-4 py-2 bg-gray-100 rounded-md hover:bg-gray-200 flex items-center">
126
- <i class="fas fa-code-branch mr-2 text-gray-600"></i>
127
- <span>Version 2.4.1</span>
128
- </button>
 
 
 
 
 
 
 
 
129
  <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center">
130
  <i class="fas fa-download mr-2"></i>
131
  <span>Export</span>
@@ -139,7 +237,7 @@
139
  <!-- Tabs -->
140
  <div class="border-b border-gray-200 mb-6">
141
  <nav class="flex space-x-8">
142
- <button class="tab-active py-4 px-1 font-medium text-blue-600">Documentation</button>
143
  <button class="py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Examples</button>
144
  <button class="py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Configuration</button>
145
  <button class="py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Troubleshooting</button>
@@ -148,24 +246,65 @@
148
 
149
  <!-- Content -->
150
  <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
151
- <h3 class="text-lg font-semibold mb-4">SAML Authentication Flow</h3>
 
 
 
 
 
 
 
 
 
 
 
152
  <p class="text-gray-600 mb-6">
153
  The SAML authentication flow allows users to authenticate using their identity provider (IdP) credentials.
154
- This component implements the standard SAML 2.0 Web Browser SSO Profile.
155
  </p>
156
 
157
  <div class="mb-8">
158
- <h4 class="font-medium mb-3">Sequence Diagram</h4>
159
- <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
160
- <div class="flex justify-center items-center h-40">
 
 
 
 
 
161
  <div class="text-center">
162
  <i class="fas fa-project-diagram text-4xl text-gray-300 mb-2"></i>
163
  <p class="text-gray-400">SAML authentication sequence diagram</p>
 
 
 
164
  </div>
165
  </div>
166
  </div>
167
  </div>
168
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  <div class="mb-8">
170
  <h4 class="font-medium mb-3">Configuration Parameters</h4>
171
  <div class="overflow-x-auto">
@@ -175,6 +314,7 @@
175
  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parameter</th>
176
  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
177
  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th>
 
178
  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
179
  </tr>
180
  </thead>
@@ -183,20 +323,37 @@
183
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">idpMetadataUrl</td>
184
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
185
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td>
 
186
  <td class="px-6 py-4 text-sm text-gray-500">URL to the IdP metadata XML</td>
187
  </tr>
188
- <tr>
189
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">spEntityId</td>
190
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
191
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td>
 
192
  <td class="px-6 py-4 text-sm text-gray-500">Service Provider entity ID</td>
193
  </tr>
194
  <tr>
195
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">assertEndpoint</td>
196
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
197
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td>
 
198
  <td class="px-6 py-4 text-sm text-gray-500">Assertion consumer service URL</td>
199
  </tr>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
200
  </tbody>
201
  </table>
202
  </div>
@@ -206,69 +363,177 @@
206
  <h4 class="font-medium mb-3">Example Implementation</h4>
207
  <div class="mb-4">
208
  <div class="flex justify-between items-center bg-gray-800 text-gray-200 px-4 py-2 rounded-t-md">
209
- <span>JavaScript</span>
210
- <button class="text-gray-400 hover:text-white">
 
 
 
211
  <i class="far fa-copy"></i>
212
  </button>
213
  </div>
214
  <pre class="code-block p-4 rounded-b-md overflow-x-auto"><code>const samlAuth = new SAMLAuthentication({
 
215
  idpMetadataUrl: 'https://idp.example.com/metadata.xml',
216
  spEntityId: 'urn:example:sp',
217
  assertEndpoint: 'https://your-app.com/saml/acs',
218
- nameIdFormat: 'urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress',
219
- authnContext: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport'
 
 
 
 
 
 
220
  });
221
 
222
- // Initiate login
223
  app.get('/login', (req, res) => {
224
- samlAuth.login(req, res);
 
 
 
 
225
  });
226
 
227
- // Handle assertion
228
  app.post('/saml/acs', (req, res) => {
229
  samlAuth.handleAssertion(req, res)
230
  .then(user => {
231
- // User authenticated
232
  req.session.user = user;
233
- res.redirect('/dashboard');
234
  })
235
  .catch(err => {
236
- // Handle error
237
- res.status(401).send('Authentication failed');
 
 
 
 
238
  });
 
 
 
 
 
 
239
  });</code></pre>
240
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
241
  </div>
242
 
243
  <div>
244
  <h4 class="font-medium mb-3">Related Components</h4>
245
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
246
- <div class="border border-gray-200 rounded-md p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors">
247
  <div class="flex items-center mb-2">
248
  <div class="w-8 h-8 bg-blue-100 rounded-md flex items-center justify-center mr-2">
249
- <i class="fas fa-user-shield text-blue-600"></i>
250
  </div>
251
- <h5 class="font-medium">Authorization</h5>
252
  </div>
253
- <p class="text-sm text-gray-600">Role-based access control for authenticated users</p>
254
  </div>
255
- <div class="border border-gray-200 rounded-md p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors">
256
  <div class="flex items-center mb-2">
257
  <div class="w-8 h-8 bg-purple-100 rounded-md flex items-center justify-center mr-2">
258
- <i class="fas fa-exchange-alt text-purple-600"></i>
259
  </div>
260
- <h5 class="font-medium">Token Exchange</h5>
261
  </div>
262
- <p class="text-sm text-gray-600">Exchange SAML assertions for OAuth tokens</p>
263
  </div>
264
- <div class="border border-gray-200 rounded-md p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors">
265
  <div class="flex items-center mb-2">
266
  <div class="w-8 h-8 bg-green-100 rounded-md flex items-center justify-center mr-2">
267
- <i class="fas fa-users text-green-600"></i>
268
  </div>
269
- <h5 class="font-medium">User Provisioning</h5>
270
  </div>
271
- <p class="text-sm text-gray-600">Sync user data from IdP to your application</p>
272
  </div>
273
  </div>
274
  </div>
@@ -278,17 +543,17 @@ app.post('/saml/acs', (req, res) => {
278
  <div class="flex items-center justify-between mb-4">
279
  <h3 class="text-lg font-semibold">Feedback</h3>
280
  <div class="flex space-x-2">
281
- <button class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
282
  <i class="far fa-thumbs-up mr-1"></i> Helpful
283
  </button>
284
- <button class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
285
  <i class="far fa-thumbs-down mr-1"></i> Needs improvement
286
  </button>
287
  </div>
288
  </div>
289
- <textarea class="w-full border border-gray-300 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="Have feedback about this component? Let us know..."></textarea>
290
  <div class="flex justify-end mt-3">
291
- <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
292
  Submit Feedback
293
  </button>
294
  </div>
@@ -303,31 +568,154 @@ app.post('/saml/acs', (req, res) => {
303
  const tabs = document.querySelectorAll('nav button');
304
  tabs.forEach(tab => {
305
  tab.addEventListener('click', () => {
306
- tabs.forEach(t => t.classList.remove('tab-active', 'text-blue-600'));
307
- tabs.forEach(t => t.classList.add('text-gray-500', 'hover:text-gray-700'));
 
 
308
 
309
  tab.classList.add('tab-active', 'text-blue-600');
310
  tab.classList.remove('text-gray-500', 'hover:text-gray-700');
 
 
 
311
  });
312
  });
313
 
314
  // Copy code functionality
315
- const copyButtons = document.querySelectorAll('.fa-copy');
316
  copyButtons.forEach(button => {
317
  button.addEventListener('click', () => {
318
- const codeBlock = button.closest('.code-block');
319
  const code = codeBlock.querySelector('code').textContent;
320
 
321
  navigator.clipboard.writeText(code).then(() => {
322
- const originalIcon = button.className;
323
- button.className = 'fas fa-check text-green-400';
324
 
325
  setTimeout(() => {
326
- button.className = originalIcon;
327
  }, 2000);
328
  });
329
  });
330
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
331
  </script>
332
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sudzdpn/wireframe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
333
  </html>
 
28
  }
29
  .tab-active {
30
  border-bottom: 2px solid #3b82f6;
31
+ color: #3b82f6;
32
+ }
33
+ .diagram-placeholder {
34
+ background: linear-gradient(135deg, #f3f4f6 25%, #e5e7eb 25%, #e5e7eb 50%, #f3f4f6 50%, #f3f4f6 75%, #e5e7eb 75%);
35
+ background-size: 40px 40px;
36
+ }
37
+ .copy-success {
38
+ animation: copyPulse 0.5s ease-in-out;
39
+ }
40
+ @keyframes copyPulse {
41
+ 0% { transform: scale(1); }
42
+ 50% { transform: scale(1.2); }
43
+ 100% { transform: scale(1); }
44
+ }
45
+ .slider-container {
46
+ position: relative;
47
+ width: 100%;
48
+ margin: 20px 0;
49
+ }
50
+ .slider {
51
+ -webkit-appearance: none;
52
+ width: 100%;
53
+ height: 8px;
54
+ border-radius: 4px;
55
+ background: #d1d5db;
56
+ outline: none;
57
+ }
58
+ .slider::-webkit-slider-thumb {
59
+ -webkit-appearance: none;
60
+ appearance: none;
61
+ width: 20px;
62
+ height: 20px;
63
+ border-radius: 50%;
64
+ background: #3b82f6;
65
+ cursor: pointer;
66
+ transition: all 0.2s;
67
+ }
68
+ .slider::-webkit-slider-thumb:hover {
69
+ transform: scale(1.2);
70
+ box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
71
+ }
72
+ .slider-labels {
73
+ display: flex;
74
+ justify-content: space-between;
75
+ margin-top: 8px;
76
+ }
77
+ .slider-label {
78
+ font-size: 12px;
79
+ color: #6b7280;
80
+ }
81
+ .slider-value {
82
+ position: absolute;
83
+ top: -30px;
84
+ left: 50%;
85
+ transform: translateX(-50%);
86
+ background: #3b82f6;
87
+ color: white;
88
+ padding: 4px 8px;
89
+ border-radius: 4px;
90
+ font-size: 12px;
91
+ }
92
+ .slider-value:after {
93
+ content: '';
94
+ position: absolute;
95
+ top: 100%;
96
+ left: 50%;
97
+ transform: translateX(-50%);
98
+ border-width: 5px;
99
+ border-style: solid;
100
+ border-color: #3b82f6 transparent transparent transparent;
101
  }
102
  </style>
103
  </head>
104
+ <body class="bg-gray-50 text-gray-800">
105
  <div class="flex h-screen overflow-hidden">
106
  <!-- Sidebar -->
107
  <div class="sidebar w-64 bg-gray-800 text-gray-200 flex flex-col h-full overflow-y-auto">
 
112
  </div>
113
  <h1 class="text-xl font-bold">SAML DocGen</h1>
114
  </div>
115
+ <p class="text-xs text-gray-400 mt-1">v2.4.1</p>
116
  </div>
117
 
118
  <div class="p-4">
 
124
 
125
  <div class="flex-1 overflow-y-auto">
126
  <div class="px-4 py-2">
127
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Authentication</h3>
128
  <ul>
129
  <li class="mb-1">
130
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700 text-blue-400 bg-gray-700">
131
+ <i class="fas fa-key mr-2"></i> SAML Flow
132
  </a>
133
  </li>
134
  <li class="mb-1">
135
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
136
+ <i class="fas fa-fingerprint mr-2"></i> Single Sign-On
137
  </a>
138
  </li>
139
  <li class="mb-1">
140
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
141
+ <i class="fas fa-sign-out-alt mr-2"></i> Single Logout
142
+ </a>
143
+ </li>
144
+ </ul>
145
+ </div>
146
+
147
+ <div class="px-4 py-2 mt-4">
148
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Configuration</h3>
149
+ <ul>
150
+ <li class="mb-1">
151
+ <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
152
+ <i class="fas fa-id-card mr-2"></i> Identity Providers
153
+ </a>
154
+ </li>
155
+ <li class="mb-1">
156
+ <a href="#" class="block px极3 py-2 rounded-md hover:bg-gray-700">
157
+ <i class="fas fa-server mr-2"></i> Service Providers
158
  </a>
159
  </li>
160
  <li class="mb-1">
161
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
162
+ <i class="fas fa-certificate mr-2"></i> Certificates
163
  </a>
164
  </li>
165
  </ul>
166
  </div>
167
 
168
  <div class="px-4 py-2 mt-4">
169
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Advanced</h3>
170
  <ul>
171
  <li class="mb-1">
172
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
173
+ <i class="fas fa-code mr-2"></i> Custom Claims
174
  </a>
175
  </li>
176
  <li class="mb-1">
177
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
178
+ <i class="fas fa-shield-alt mr-2"></i> Security Policies
179
  </a>
180
  </li>
181
  <li class="mb-1">
182
  <a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
183
+ <i class="fas fa-plug mr-2"></i> Webhooks
184
  </a>
185
  </li>
186
  </ul>
 
196
  <p class="text-sm font-medium">Admin User</p>
197
  <p class="text-xs text-gray-400">admin@saml.co.za</p>
198
  </div>
199
+ <button class="ml-auto text-gray-400 hover:text-white">
200
+ <i class="fas fa-cog"></i>
201
+ </button>
202
  </div>
203
  </div>
204
  </div>
 
208
  <!-- Header -->
209
  <header class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
210
  <div>
211
+ <h2 class="text-xl font-semibold">SAML Authentication Flow</h2>
212
+ <p class="text-sm text-gray-500">Web Browser SSO Profile (SAML 2.0)</p>
213
  </div>
214
  <div class="flex space-x-3">
215
+ <div class="relative group">
216
+ <button class="px-4 py-2 bg-gray-100 rounded-md hover:bg-gray-200 flex items-center">
217
+ <i class="fas fa-code-branch mr-2 text-gray-600"></i>
218
+ <span>Version 2.4.1</span>
219
+ <i class="fas fa-chevron-down ml-2 text-xs text-gray-500"></i>
220
+ </button>
221
+ <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 w-48 z-10 border border-gray-200">
222
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">Version 2.4.1 (current)</a>
223
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">Version 2.3.0</a>
224
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">Version 2.2.5</a>
225
+ </div>
226
+ </div>
227
  <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center">
228
  <i class="fas fa-download mr-2"></i>
229
  <span>Export</span>
 
237
  <!-- Tabs -->
238
  <div class="border-b border-gray-200 mb-6">
239
  <nav class="flex space-x-8">
240
+ <button class="tab-active py-4 px-1 font-medium">Documentation</button>
241
  <button class="py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Examples</button>
242
  <button class="py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Configuration</button>
243
  <button class="py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Troubleshooting</button>
 
246
 
247
  <!-- Content -->
248
  <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
249
+ <div class="flex items-center justify-between mb-4">
250
+ <h3 class="text-lg font-semibold">SAML Authentication Flow</h3>
251
+ <div class="flex space-x-2">
252
+ <button class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
253
+ <i class="fas fa-bookmark mr-1"></i> Bookmark
254
+ </button>
255
+ <button class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
256
+ <i class="fas fa-share-alt mr-1"></i> Share
257
+ </button>
258
+ </div>
259
+ </div>
260
+
261
  <p class="text-gray-600 mb-6">
262
  The SAML authentication flow allows users to authenticate using their identity provider (IdP) credentials.
263
+ This component implements the standard SAML 2.0 Web Browser SSO Profile with support for both SP-initiated and IdP-initiated flows.
264
  </p>
265
 
266
  <div class="mb-8">
267
+ <div class="flex items-center justify-between mb-3">
268
+ <h4 class="font-medium">Sequence Diagram</h4>
269
+ <button class="text-sm text-blue-600 hover:text-blue-800">
270
+ <i class="fas fa-expand mr-1"></i> Fullscreen
271
+ </button>
272
+ </div>
273
+ <div class="diagram-placeholder p-4 rounded-md border border-gray-200">
274
+ <div class="flex justify-center items-center h-64">
275
  <div class="text-center">
276
  <i class="fas fa-project-diagram text-4xl text-gray-300 mb-2"></i>
277
  <p class="text-gray-400">SAML authentication sequence diagram</p>
278
+ <button class="mt极2 px-3 py-1 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700">
279
+ Generate Diagram
280
+ </button>
281
  </div>
282
  </div>
283
  </div>
284
  </div>
285
 
286
+ <!-- Slider Section -->
287
+ <div class="mb-8">
288
+ <h4 class="font-medium mb-3">Security Level Configuration</h4>
289
+ <div class="slider-container">
290
+ <div class="slider-value" id="slider-value">Medium</div>
291
+ <input type="range" min="0" max="2" value="1" class="slider" id="security-level" step="1">
292
+ <div class="slider-labels">
293
+ <span class="slider-label">Low</span>
294
+ <span class="slider-label">Medium</span>
295
+ <span class="slider-label">High</span>
296
+ </div>
297
+ </div>
298
+ <div class="mt-4 p-4 bg-gray-50 rounded-md">
299
+ <h5 class="font-medium mb-2">Current Security Settings:</h5>
300
+ <ul class="list-disc pl-5 text-sm text-gray-600" id="security-settings">
301
+ <li>256-bit encryption</li>
302
+ <li>Password-protected transport</li>
303
+ <li>Session timeout: 30 minutes</li>
304
+ </ul>
305
+ </div>
306
+ </div>
307
+
308
  <div class="mb-8">
309
  <h4 class="font-medium mb-3">Configuration Parameters</h4>
310
  <div class="overflow-x-auto">
 
314
  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parameter</th>
315
  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
316
  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th>
317
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th>
318
  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
319
  </tr>
320
  </thead>
 
323
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">idpMetadataUrl</td>
324
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
325
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td>
326
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
327
  <td class="px-6 py-4 text-sm text-gray-500">URL to the IdP metadata XML</td>
328
  </tr>
329
+ <tr class="bg-gray-50">
330
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">spEntityId</td>
331
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
332
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td>
333
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
334
  <td class="px-6 py-4 text-sm text-gray-500">Service Provider entity ID</td>
335
  </tr>
336
  <tr>
337
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">assertEndpoint</td>
338
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
339
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td>
340
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
341
  <td class="px-6 py-4 text-sm text-gray-500">Assertion consumer service URL</td>
342
  </tr>
343
+ <tr class="bg-gray-50">
344
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">nameIdFormat</td>
345
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
346
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">No</td>
347
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">urn:oasis:names:tc:SAML:1.1:nameid-format:unspecified</td>
348
+ <td class="px-6 py-4 text-sm text-gray-500">Format for NameID</td>
349
+ </tr>
350
+ <tr>
351
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">authnContext</td>
352
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
353
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">No</td>
354
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport</td>
355
+ <td class="px-6 py-4 text-sm text-gray-500">Authentication context class</td>
356
+ </tr>
357
  </tbody>
358
  </table>
359
  </div>
 
363
  <h4 class="font-medium mb-3">Example Implementation</h4>
364
  <div class="mb-4">
365
  <div class="flex justify-between items-center bg-gray-800 text-gray-200 px-4 py-2 rounded-t-md">
366
+ <div class="极flex items-center">
367
+ <i class="fab fa-js mr-2"></i>
368
+ <span>JavaScript</span>
369
+ </div>
370
+ <button class="text-gray-400 hover:text-white copy-btn">
371
  <i class="far fa-copy"></i>
372
  </button>
373
  </div>
374
  <pre class="code-block p-4 rounded-b-md overflow-x-auto"><code>const samlAuth = new SAMLAuthentication({
375
+ // Required configuration
376
  idpMetadataUrl: 'https://idp.example.com/metadata.xml',
377
  spEntityId: 'urn:example:sp',
378
  assertEndpoint: 'https://your-app.com/saml/acs',
379
+
380
+ // Optional configuration
381
+ name极IdFormat: 'urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress',
382
+ authnContext: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport',
383
+ forceAuthn: false,
384
+ allowCreate: true,
385
+ requestBinding: 'HTTP-Redirect',
386
+ responseBinding: 'HTTP-POST'
387
  });
388
 
389
+ // Initiate SP-initiated login
390
  app.get('/login', (req, res) => {
391
+ samlAuth.login(req, res, {
392
+ // Optional parameters
393
+ RelayState: '/dashboard',
394
+ AuthnRequestExtensions: '&lt;my:CustomAttribute&gt;value&lt;/my:CustomAttribute&gt;'
395
+ });
396
  });
397
 
398
+ // Handle assertion response
399
  app.post('/saml/acs', (req, res) => {
400
  samlAuth.handleAssertion(req, res)
401
  .then(user => {
402
+ // User authenticated successfully
403
  req.session.user = user;
404
+ res.redirect(req.body.RelayState || '/');
405
  })
406
  .catch(err => {
407
+ // Handle authentication failure
408
+ console.error('SAML authentication failed:', err);
409
+ res.status(401).render('error', {
410
+ message: 'Authentication failed',
411
+ details: err.message
412
+ });
413
  });
414
+ });
415
+
416
+ // Metadata endpoint
417
+ app.get('/saml/metadata', (req, res) => {
418
+ res.type('application/xml');
419
+ res.send(samlAuth.generateMetadata());
420
  });</code></pre>
421
  </div>
422
+
423
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
424
+ <div>
425
+ <div class="flex justify-between items-center bg-gray-800 text-gray-200 px-4 py-2 rounded-t-md">
426
+ <div class="flex items-center">
427
+ <i class="fab fa-java mr-2"></i>
428
+ <span>Java</span>
429
+ </div>
430
+ <button class="text-gray-400 hover:text-white copy-btn">
431
+ <i class="far fa-copy"></i>
432
+ </button>
433
+ </div>
434
+ <pre class="code-block p-4 rounded-b-md overflow-x-auto"><code>@Configuration
435
+ @EnableWebSecurity
436
+ public class SecurityConfig extends WebSecurityConfigurerAdapter {
437
+
438
+ @Value("${saml.idp.metadata}")
439
+ private String idpMetadataUrl;
440
+
441
+ @Bean
442
+ public SAMLAuthenticationProvider samlAuthenticationProvider() {
443
+ return new SAMLAuthenticationProvider();
444
+ }
445
+
446
+ @Bean
447
+ public SAMLMetadataFilter metadataFilter() {
448
+ return new SAMLMetadataFilter();
449
+ }
450
+
451
+ @Override
452
+ protected void configure(HttpSecurity http) throws Exception {
453
+ http
454
+ .authorizeRequests()
455
+ .antMatchers("/saml/**").permitAll()
456
+ .anyRequest().authenticated()
457
+ .and()
458
+ .apply(new SAMLConfigurer())
459
+ .idpMetadataUrl(idpMetadataUrl)
460
+ .spEntityId("urn:example:sp")
461
+ .assertionConsumerServiceUrl("/saml/acs")
462
+ .and()
463
+ .addFilterBefore(metadataFilter(),
464
+ UsernamePasswordAuthenticationFilter.class);
465
+ }
466
+ }</code></pre>
467
+ </div>
468
+ <div>
469
+ <div class="flex justify-between items-center bg-gray-800 text-gray-200 px-4 py-2 rounded-t-md">
470
+ <div class="flex items-center">
471
+ <i class="fab fa-python mr-2"></i>
472
+ <span>Python</span>
473
+ </div>
474
+ <button class="text-gray-400 hover:text-white copy-btn">
475
+ <i class="far fa-copy"></i>
476
+ </button>
477
+ </div>
478
+ <pre class="code-block p-4 rounded-b-md overflow-x-auto"><code>from flask import Flask, request, redirect, session
479
+ from flask_saml import SAMLAuthentication
480
+
481
+ app = Flask(__name__)
482
+ app.secret_key = 'your-secret-key'
483
+
484
+ saml_auth = SAMLAuthentication(
485
+ app,
486
+ idp_metadata_url='https://idp.example.com/metadata.xml',
487
+ sp_entity_id='urn:example:sp',
488
+ acs_url='/saml/acs'
489
+ )
490
+
491
+ @app.route('/login')
492
+ def login():
493
+ return saml_auth.login(relay_state='/dashboard')
494
+
495
+ @app.route('/saml/acs', methods=['POST'])
496
+ def acs():
497
+ user = saml_auth.process_response()
498
+ session['user'] = user
499
+ return redirect(request.form.get('RelayState', '/'))
500
+
501
+ @app.route('/saml/metadata')
502
+ def metadata():
503
+ return saml_auth.generate_metadata()</code></pre>
504
+ </div>
505
+ </div>
506
  </div>
507
 
508
  <div>
509
  <h4 class="font-medium mb-3">Related Components</h4>
510
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
511
+ <div class="border border-gray-200 rounded-md p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors cursor-pointer">
512
  <div class="flex items-center mb-2">
513
  <div class="w-8 h-8 bg-blue-100 rounded-md flex items-center justify-center mr-2">
514
+ <i class="fas fa-sign-out-alt text-blue-600"></i>
515
  </div>
516
+ <h5 class="font-medium">Single Logout</h5>
517
  </div>
518
+ <p class="text-sm text-gray-600">Implement SAML Single Logout (SLO) for session termination</p>
519
  </div>
520
+ <div class="border border-gray-200 rounded-md p-4 hover:border-purple-200 hover:bg-purple-50 transition-colors cursor-pointer">
521
  <div class="flex items-center mb-2">
522
  <div class="w-8 h-8 bg-purple-100 rounded-md flex items-center justify-center mr-2">
523
+ <i class="fas fa-id-badge text-purple-600"></i>
524
  </div>
525
+ <h5 class="font-medium">Attribute Mapping</h5>
526
  </div>
527
+ <p class="text-sm text-gray-600">Map SAML attributes to user profile fields</p>
528
  </div>
529
+ <div class="border border-gray-200 rounded-md p-4 hover:border-green-200 hover:bg-green-50 transition-colors cursor-pointer">
530
  <div class="flex items-center mb-2">
531
  <div class="w-8 h-8 bg-green-100 rounded-md flex items-center justify-center mr-2">
532
+ <i class="fas fa-shield-alt text-green-600"></i>
533
  </div>
534
+ <h5 class="font-medium">Security Policies</h5>
535
  </div>
536
+ <p class="text-sm text-gray-600">Configure security policies for SAML assertions</p>
537
  </div>
538
  </div>
539
  </div>
 
543
  <div class="flex items-center justify-between mb-4">
544
  <h3 class="text-lg font-semibold">Feedback</h3>
545
  <div class="flex space-x-2">
546
+ <button id="helpful-btn" class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
547
  <i class="far fa-thumbs-up mr-1"></i> Helpful
548
  </button>
549
+ <button id="improve-btn" class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
550
  <i class="far fa-thumbs-down mr-1"></i> Needs improvement
551
  </button>
552
  </div>
553
  </div>
554
+ <textarea id="feedback-text" class="w-full border border-gray-300 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="Have feedback about this component? Let us know..."></textarea>
555
  <div class="flex justify-end mt-3">
556
+ <button id="submit-feedback" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
557
  Submit Feedback
558
  </button>
559
  </div>
 
568
  const tabs = document.querySelectorAll('nav button');
569
  tabs.forEach(tab => {
570
  tab.addEventListener('click', () => {
571
+ tabs.forEach(t => {
572
+ t.classList.remove('tab-active', 'text-blue-600');
573
+ t.classList.add('text-gray-500', 'hover:text-gray-700');
574
+ });
575
 
576
  tab.classList.add('tab-active', 'text-blue-600');
577
  tab.classList.remove('text-gray-500', 'hover:text-gray-700');
578
+
579
+ // In a real app, you would load different content here
580
+ console.log(`Switched to tab: ${tab.textContent.trim()}`);
581
  });
582
  });
583
 
584
  // Copy code functionality
585
+ const copyButtons = document.querySelectorAll('.copy-btn');
586
  copyButtons.forEach(button => {
587
  button.addEventListener('click', () => {
588
+ const codeBlock = button.closest('div').nextElementSibling;
589
  const code = codeBlock.querySelector('code').textContent;
590
 
591
  navigator.clipboard.writeText(code).then(() => {
592
+ const icon = button.querySelector('i');
593
+ icon.className = 'fas fa-check text-green-400 copy-success';
594
 
595
  setTimeout(() => {
596
+ icon.className = 'far fa-copy';
597
  }, 2000);
598
  });
599
  });
600
  });
601
+
602
+ // Feedback functionality
603
+ const helpfulBtn = document.getElementById('helpful-btn');
604
+ const improveBtn = document.getElementById('improve-btn');
605
+ const feedbackText = document.getElementById('feedback-text');
606
+ const submitFeedback = document.getElementById('submit-feedback');
607
+
608
+ let feedbackType = null;
609
+
610
+ helpfulBtn.addEventListener('click', () => {
611
+ feedbackType = 'helpful';
612
+ helpfulBtn.classList.add('bg-blue-100', 'text-blue-800');
613
+ improveBtn.classList.remove('bg-blue-100', 'text-blue-800');
614
+ });
615
+
616
+ improveBtn.addEventListener('click', () => {
617
+ feedbackType = 'needs_improvement';
618
+ improveBtn.classList.add('bg-blue-100', 'text-blue-800');
619
+ helpfulBtn.classList.remove('bg-blue-100', 'text-blue-800');
620
+ });
621
+
622
+ submitFeedback.addEventListener('click', () => {
623
+ if (!feedbackType) {
624
+ alert('Please select feedback type first');
625
+ return;
626
+ }
627
+
628
+ const feedback = feedbackText.value.trim();
629
+ if (!feedback && feedbackType === 'needs_improvement') {
630
+ alert('Please provide details about what needs improvement');
631
+ return;
632
+ }
633
+
634
+ // In a real app, you would send this to your backend
635
+ console.log('Feedback submitted:', {
636
+ type: feedbackType,
637
+ content: feedback,
638
+ component: 'SAML Authentication Flow',
639
+ timestamp: new Date().toISOString()
640
+ });
641
+
642
+ alert('Thank you for your feedback!');
643
+ feedbackText.value = '';
644
+ helpfulBtn.classList.remove('bg-blue-100', 'text-blue-800');
645
+ improveBtn.classList.remove('bg-blue-100', 'text-blue-800');
646
+ feedbackType = null;
647
+ });
648
+
649
+ // Version dropdown functionality
650
+ const versionBtn = document.querySelector('.group button');
651
+ versionBtn.addEventListener('click', (e) => {
652
+ e.stopPropagation();
653
+ const dropdown = document.querySelector('.group .absolute');
654
+ dropdown.classList.toggle('hidden');
655
+ });
656
+
657
+ // Close dropdown when clicking outside
658
+ document.addEventListener('click', () => {
659
+ const dropdown = document.querySelector('.group .absolute');
660
+ if (dropdown && !dropdown.classList.contains('hidden')) {
661
+ dropdown.classList.add('hidden');
662
+ }
663
+ });
664
+
665
+ // Slider functionality - Fixed version
666
+ const securitySlider = document.getElementById('security-level');
667
+ const sliderValue = document.getElementById('slider-value');
668
+ const securitySettings = document.getElementById('security-settings');
669
+
670
+ // Initialize slider position
671
+ updateSliderValue(securitySlider.value);
672
+
673
+ securitySlider.addEventListener('input', function() {
674
+ updateSliderValue(this.value);
675
+ });
676
+
677
+ function updateSliderValue(value) {
678
+ const numericValue = parseInt(value);
679
+ let level = '';
680
+ let settings = [];
681
+
682
+ switch(numericValue) {
683
+ case 0:
684
+ level = 'Low';
685
+ settings = [
686
+ '128-bit encryption',
687
+ 'Basic authentication',
688
+ 'Session timeout: 60 minutes'
689
+ ];
690
+ break;
691
+ case 1:
692
+ level = 'Medium';
693
+ settings = [
694
+ '256-bit encryption',
695
+ 'Password-protected transport',
696
+ 'Session timeout: 30 minutes'
697
+ ];
698
+ break;
699
+ case 2:
700
+ level = 'High';
701
+ settings = [
702
+ '512-bit encryption',
703
+ 'Multi-factor authentication',
704
+ 'Session timeout: 15 minutes'
705
+ ];
706
+ break;
707
+ }
708
+
709
+ sliderValue.textContent = level;
710
+
711
+ // Update security settings
712
+ securitySettings.innerHTML = '';
713
+ settings.forEach(setting => {
714
+ const li = document.createElement('li');
715
+ li.textContent = setting;
716
+ securitySettings.appendChild(li);
717
+ });
718
+ }
719
  </script>
720
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sudzdpn/wireframe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
721
  </html>
prompts.txt CHANGED
@@ -1 +1,4 @@
1
- Build the docgen wireframe for saml -Here's a concise DeepSite prompt to implement your design system sync: ```markdown # DeepSite Design System Sync Prompt **Objective:** Create real-time Figma β†’ Netlify design system sync for SAML.co.za **Figma File:** [Iza5b2JrBtSPhxGRCJACBB](https://www.figma.com/file/Iza5b2JrBtSPhxGRCJACBB) **Live Preview:** [saml-wireframe.netlify.app](https://saml-wireframe.netlify.app) ## Requirements 1. Auto-sync Figma components β†’ React/Tailwind 2. Password-protected design system viewer 3. GitHub Actions CI/CD pipeline 4. Netlify hosting with atomic deploys ## Code Snippets Needed ### 1. Figma Webhook Handler ```javascript // api/figma-webhook.js export default async (req) => { const { event, file_key } = await req.json(); if(event === 'FILE_UPDATE') { await buildDesignSystem(file_key); return new Response('Design system updated', { status: 200 }); } }; ``` ### 2. Design System Viewer Component ```jsx // components/DesignSystemViewer.jsx const DSViewer = ({ components }) => ( <div className="grid gap-8 p-8"> {Object.entries(components).map(([name, Component]) => ( <div key={name} className="border p-4"> <h3 className="text-lg font-mono">{name}</h3> <Component /> </div> ))} </div> ); ``` ### 3. Netlify Configuration ```toml # netlify.toml [build.environment] FIGMA_FILE = "Iza5b2JrBtSPhxGRCJACBB" PASSWORD = "SAML2024!" [[redirects]] from = "/*" to = "/design-system" status = 200 ``` ## Environment Variables ```env FIGMA_TOKEN=figd_abc123 NETLIFY_SITE_ID=xyz789 GITHUB_SECRET=supersecret ``` ## CLI Command ```bash deepsite build --template design-system-sync \ --figma $FIGMA_TOKEN \ --netlify $NETLIFY_SITE_ID \ --password $DS_PASSWORD ``` ## Success Criteria - [ ] Figma changes deploy <2min - [ ] Components match 1:1 with Figma - [ ] Viewer updates without refresh - [ ] 256-bit encryption for password **Timeframe:** Implement in <4 hours **Budget:** Allocate $42 in AI credits ``` This prompt gives DeepSite clear instructions to: 1. Set up Figma webhooks 2. Generate React components from Figma 3. Configure password protection 4. Establish CI/CD pipeline 5. Deploy to Netlify with atomic updates Would you like me to add any specific component requirements or adjust the security parameters?
 
 
 
 
1
+ Build the docgen wireframe for saml -Here's a concise DeepSite prompt to implement your design system sync: ```markdown # DeepSite Design System Sync Prompt **Objective:** Create real-time Figma β†’ Netlify design system sync for SAML.co.za **Figma File:** [Iza5b2JrBtSPhxGRCJACBB](https://www.figma.com/file/Iza5b2JrBtSPhxGRCJACBB) **Live Preview:** [saml-wireframe.netlify.app](https://saml-wireframe.netlify.app) ## Requirements 1. Auto-sync Figma components β†’ React/Tailwind 2. Password-protected design system viewer 3. GitHub Actions CI/CD pipeline 4. Netlify hosting with atomic deploys ## Code Snippets Needed ### 1. Figma Webhook Handler ```javascript // api/figma-webhook.js export default async (req) => { const { event, file_key } = await req.json(); if(event === 'FILE_UPDATE') { await buildDesignSystem(file_key); return new Response('Design system updated', { status: 200 }); } }; ``` ### 2. Design System Viewer Component ```jsx // components/DesignSystemViewer.jsx const DSViewer = ({ components }) => ( <div className="grid gap-8 p-8"> {Object.entries(components).map(([name, Component]) => ( <div key={name} className="border p-4"> <h3 className="text-lg font-mono">{name}</h3> <Component /> </div> ))} </div> ); ``` ### 3. Netlify Configuration ```toml # netlify.toml [build.environment] FIGMA_FILE = "Iza5b2JrBtSPhxGRCJACBB" PASSWORD = "SAML2024!" [[redirects]] from = "/*" to = "/design-system" status = 200 ``` ## Environment Variables ```env FIGMA_TOKEN=figd_abc123 NETLIFY_SITE_ID=xyz789 GITHUB_SECRET=supersecret ``` ## CLI Command ```bash deepsite build --template design-system-sync \ --figma $FIGMA_TOKEN \ --netlify $NETLIFY_SITE_ID \ --password $DS_PASSWORD ``` ## Success Criteria - [ ] Figma changes deploy <2min - [ ] Components match 1:1 with Figma - [ ] Viewer updates without refresh - [ ] 256-bit encryption for password **Timeframe:** Implement in <4 hours **Budget:** Allocate $42 in AI credits ``` This prompt gives DeepSite clear instructions to: 1. Set up Figma webhooks 2. Generate React components from Figma 3. Configure password protection 4. Establish CI/CD pipeline 5. Deploy to Netlify with atomic updates Would you like me to add any specific component requirements or adjust the security parameters?
2
+ Fix and deploy
3
+ Fix the slider and deploy to my hf space
4
+ It's still not working πŸ˜•