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:
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user