Skip to content

Commit efe3b80

Browse files
miller-28miller-28
committed
sandbox changes
1 parent 573aaed commit efe3b80

File tree

3 files changed

+87
-48
lines changed

3 files changed

+87
-48
lines changed

‎sandbox/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h2>💡 Philosophy</h2>
6969
<a href="https://github.com/miller-28/luminara" target="_blank" rel="noopener noreferrer" class="link-btn">
7070
🐙 GitHub Repository
7171
</a>
72-
<a href="https://github.com/miller-28/luminara/blob/master/README.md" target="_blank" rel="noopener noreferrer" class="link-btn">
72+
<a href="https://github.com/miller-28/luminara/blob/master/docs/features/README.md" target="_blank" rel="noopener noreferrer" class="link-btn">
7373
📖 Documentation
7474
</a>
7575
<a href="./benchmark/" target="_blank" rel="noopener noreferrer" class="link-btn">

‎sandbox/main.js‎

Lines changed: 53 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -241,13 +241,53 @@ class SandboxUI {
241241
title.className = 'feature-title';
242242
title.textContent = feature.title;
243243

244+
// Button container for header buttons
245+
const headerButtonContainer = document.createElement('div');
246+
headerButtonContainer.style.display = 'flex';
247+
headerButtonContainer.style.gap = '0.75rem';
248+
headerButtonContainer.style.alignItems = 'center';
249+
headerButtonContainer.style.flexWrap = 'wrap';
250+
251+
// Map feature keys to documentation filenames
252+
const featureDocMap = {
253+
'basicUsage': 'basic-usage',
254+
'baseUrlAndQuery': 'base-url-query',
255+
'timeout': 'timeout',
256+
'retry': 'retry',
257+
'backoffStrategies': 'backoff-strategies',
258+
'requestHedging': 'request-hedging',
259+
'debouncer': 'debouncing',
260+
'deduplicator': 'deduplication',
261+
'interceptors': 'interceptors',
262+
'responseTypes': 'response-types',
263+
'errorHandling': 'error-handling',
264+
'customDriver': 'custom-drivers',
265+
'verboseLogging': 'verbose-logging',
266+
'stats': 'stats',
267+
'rateLimiting': 'rate-limiting'
268+
};
269+
270+
const docFilename = featureDocMap[featureKey] || featureKey;
271+
272+
// Full Documentation button
273+
const docsBtn = document.createElement('button');
274+
docsBtn.className = 'btn btn-docs';
275+
docsBtn.innerHTML = '📖 Full Documentation';
276+
docsBtn.title = 'View full documentation on GitHub';
277+
docsBtn.onclick = () => {
278+
const docUrl = `https://github.com/miller-28/luminara/tree/master/docs/features/${docFilename}.md`;
279+
window.open(docUrl, '_blank', 'noopener,noreferrer');
280+
};
281+
headerButtonContainer.appendChild(docsBtn);
282+
244283
const runFeatureBtn = document.createElement('button');
245284
runFeatureBtn.className = 'btn btn-small';
246285
runFeatureBtn.textContent = `▶ Run All ${feature.examples.length}`;
247286
runFeatureBtn.onclick = () => this.handleRunFeature(featureKey);
287+
headerButtonContainer.appendChild(runFeatureBtn);
248288

249289
header.appendChild(title);
250-
header.appendChild(runFeatureBtn);
290+
header.appendChild(headerButtonContainer);
251291

252292
const grid = document.createElement('div');
253293
grid.className = 'examples-grid';
@@ -267,27 +307,6 @@ class SandboxUI {
267307
const card = document.createElement('div');
268308
card.className = 'example-card';
269309
card.id = `example-${example.id}`;
270-
271-
// Map feature keys to documentation filenames
272-
const featureDocMap = {
273-
'basicUsage': 'basic-usage',
274-
'baseUrlAndQuery': 'base-url-query',
275-
'timeout': 'timeout',
276-
'retry': 'retry',
277-
'backoffStrategies': 'backoff-strategies',
278-
'requestHedging': 'request-hedging',
279-
'debouncer': 'debouncing',
280-
'deduplicator': 'deduplication',
281-
'interceptors': 'interceptors',
282-
'responseTypes': 'response-types',
283-
'errorHandling': 'error-handling',
284-
'customDriver': 'custom-drivers',
285-
'verboseLogging': 'verbose-logging',
286-
'stats': 'stats',
287-
'rateLimiting': 'rate-limiting'
288-
};
289-
290-
const docFilename = featureDocMap[featureKey] || featureKey;
291310

292311
const cardHeader = document.createElement('div');
293312
cardHeader.className = 'example-header';
@@ -301,26 +320,6 @@ class SandboxUI {
301320
buttonContainer.style.gap = '6px';
302321
buttonContainer.style.flexWrap = 'wrap';
303322

304-
// Full Documentation button
305-
const docsBtn = document.createElement('button');
306-
docsBtn.className = 'example-docs-btn';
307-
docsBtn.innerHTML = '📖 Docs';
308-
docsBtn.title = 'View full documentation on GitHub';
309-
docsBtn.onclick = () => {
310-
const docUrl = `https://github.com/miller-28/luminara/tree/master/docs/features/${docFilename}.md`;
311-
window.open(docUrl, '_blank', 'noopener,noreferrer');
312-
};
313-
buttonContainer.appendChild(docsBtn);
314-
315-
// Code button (if example has code)
316-
if (example.code) {
317-
const codeBtn = document.createElement('button');
318-
codeBtn.className = 'example-code-btn';
319-
codeBtn.innerHTML = '📄 Code';
320-
codeBtn.onclick = () => this.handleShowCode(example.title, example.code);
321-
buttonContainer.appendChild(codeBtn);
322-
}
323-
324323
const runBtn = document.createElement('button');
325324
runBtn.className = 'btn btn-small';
326325
runBtn.textContent = '▶ Run';
@@ -337,6 +336,18 @@ class SandboxUI {
337336
buttonContainer.appendChild(runBtn);
338337
buttonContainer.appendChild(stopBtn);
339338

339+
// Code button (if example has code)
340+
if (example.code) {
341+
const codeBtn = document.createElement('button');
342+
codeBtn.className = 'example-code-btn';
343+
codeBtn.innerHTML = '📄 Code';
344+
codeBtn.onclick = () => this.handleShowCode(example.title, example.code);
345+
buttonContainer.appendChild(codeBtn);
346+
}
347+
stopBtn.style.display = 'none';
348+
stopBtn.onclick = () => this.handleStopTest(example.id);
349+
this.stopButtonElements.set(example.id, stopBtn);
350+
340351
cardHeader.appendChild(titleDiv);
341352
cardHeader.appendChild(buttonContainer);
342353

‎sandbox/styles.css‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,32 @@ body {
217217
font-size: 0.875rem;
218218
}
219219

220+
.btn-docs {
221+
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
222+
color: white;
223+
border: none;
224+
padding: 0.5rem 1rem;
225+
border-radius: 8px;
226+
cursor: pointer;
227+
font-size: 0.875rem;
228+
font-weight: 600;
229+
transition: all 0.2s;
230+
box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
231+
display: inline-flex;
232+
align-items: center;
233+
gap: 0.5rem;
234+
}
235+
236+
.btn-docs:hover {
237+
transform: translateY(-2px);
238+
box-shadow: 0 6px 16px rgba(72, 187, 120, 0.6);
239+
background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
240+
}
241+
242+
.btn-docs:active {
243+
transform: translateY(0);
244+
}
245+
220246
.btn:disabled {
221247
opacity: 0.6;
222248
cursor: not-allowed;
@@ -536,23 +562,25 @@ body {
536562

537563
/* Code button in example card */
538564
.example-code-btn {
539-
background: #f7fafc;
540-
color: #4a5568;
541-
border: 1px solid #e2e8f0;
565+
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
566+
color: white;
567+
border: none;
542568
padding: 0.25rem 0.5rem;
543569
border-radius: 4px;
544570
cursor: pointer;
545571
font-size: 0.75rem;
572+
font-weight: 600;
546573
transition: all 0.2s;
547574
display: inline-flex;
548575
align-items: center;
549576
gap: 0.25rem;
577+
box-shadow: 0 2px 4px rgba(66, 153, 225, 0.3);
550578
}
551579

552580
.example-code-btn:hover {
553-
background: #edf2f7;
554-
border-color: #cbd5e0;
581+
background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
555582
transform: translateY(-1px);
583+
box-shadow: 0 4px 8px rgba(66, 153, 225, 0.4);
556584
}
557585

558586
.example-docs-btn {

0 commit comments

Comments
 (0)