feat: add manual file enhancement with development mode support

- Add manual enhance API endpoint (POST /api/enhance?site_id={site}) for triggering file enhancement
- Implement enhance button in JavaScript library status indicator (🔄 Enhance)
- Disable auto-enhancement in development mode to prevent live-reload conflicts
- Add dev mode parameter to SiteManager to control enhancement behavior
- Update API routing structure to support /api/enhance endpoint
- Include enhance button styling and user feedback (loading, success, error states)
- Button triggers file enhancement and page reload to show updated static files

Development workflow improvements:
- Content edits → Immediate editor preview (no unwanted page reloads)
- Manual enhance button → Intentional file updates + reload for testing
- Production mode maintains automatic enhancement on content changes

This resolves the live-reload conflict where automatic file enhancement
was causing unwanted page reloads during content editing in development.
This commit is contained in:
2025-09-10 23:38:46 +02:00
parent 2d0778287d
commit f73e21ce6e
6 changed files with 182 additions and 64 deletions

View File

@@ -330,11 +330,15 @@ export class InsertrAuth {
<span class="insertr-status-text">Visitor Mode</span>
<span class="insertr-status-dot"></span>
</div>
<button id="insertr-enhance-btn" class="insertr-enhance-btn" style="display: none;" title="Enhance files with latest content">
🔄 Enhance
</button>
</div>
`;
document.body.insertAdjacentHTML('beforeend', statusHtml);
this.statusIndicator = document.getElementById('insertr-status');
this.setupEnhanceButton();
this.updateStatusIndicator();
}
@@ -357,6 +361,9 @@ export class InsertrAuth {
statusText.textContent = 'Authenticated';
statusDot.className = 'insertr-status-dot insertr-status-authenticated';
}
// Update enhance button visibility
this.updateEnhanceButtonVisibility();
}
/**
@@ -398,6 +405,28 @@ export class InsertrAuth {
body.insertr-hide-gates .insertr-gate {
display: none !important;
}
/* Enhance button styles */
.insertr-enhance-btn {
background: #2563eb;
color: white;
border: none;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
margin-left: 8px;
cursor: pointer;
transition: background 0.2s ease;
}
.insertr-enhance-btn:hover {
background: #1d4ed8;
}
.insertr-enhance-btn:disabled {
background: #9ca3af;
cursor: not-allowed;
}
`;
const styleSheet = document.createElement('style');
@@ -556,4 +585,85 @@ export class InsertrAuth {
console.log('✅ OAuth authentication successful');
}, 1000);
}
/**
* Setup enhance button functionality
*/
setupEnhanceButton() {
const enhanceBtn = document.getElementById('insertr-enhance-btn');
if (!enhanceBtn) return;
enhanceBtn.addEventListener('click', async () => {
await this.enhanceFiles();
});
// Show enhance button only in development/authenticated mode
this.updateEnhanceButtonVisibility();
}
/**
* Update enhance button visibility based on authentication state
*/
updateEnhanceButtonVisibility() {
const enhanceBtn = document.getElementById('insertr-enhance-btn');
if (!enhanceBtn) return;
// Show enhance button when authenticated (indicates dev mode)
if (this.state.isAuthenticated) {
enhanceBtn.style.display = 'inline-block';
} else {
enhanceBtn.style.display = 'none';
}
}
/**
* Trigger manual file enhancement
*/
async enhanceFiles() {
const enhanceBtn = document.getElementById('insertr-enhance-btn');
if (!enhanceBtn) return;
// Get site ID from window context or configuration
const siteId = window.insertrConfig?.siteId || this.options.siteId || 'demo';
try {
// Show loading state
enhanceBtn.textContent = '⏳ Enhancing...';
enhanceBtn.disabled = true;
// Call enhance API
const response = await fetch(`/api/enhance?site_id=${siteId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.state.currentUser?.token || 'mock-token'}`
}
});
if (!response.ok) {
throw new Error(`Enhancement failed: ${response.status} ${response.statusText}`);
}
const result = await response.json();
console.log('✅ Files enhanced successfully:', result);
// Show success state briefly
enhanceBtn.textContent = '✅ Enhanced!';
// Optional: Trigger page reload to show enhanced files
setTimeout(() => {
window.location.reload();
}, 1000);
} catch (error) {
console.error('❌ Enhancement failed:', error);
enhanceBtn.textContent = '❌ Failed';
// Reset button after error
setTimeout(() => {
enhanceBtn.textContent = '🔄 Enhance';
enhanceBtn.disabled = false;
}, 2000);
}
}
}